gentelella

Gentelella v4는 Colorlib에서 유지 관리하는 무료 오픈 소스 관리자 대시보드 템플릿입니다. 이는 오랜 기간 운영된 Gentelella 프로젝트를 완전히 새로 작성한 것으로, 기존의 Bootstrap 및 jQuery 스택을 vanilla JavaScript, SCSS 및 Vite 8 빌드 시스템으로 대체했습니다. README에서는 이를 SaaS 대시보드, CRM/ERP 백엔드, 내부 관리 패널, 프로젝트 관리 도구, 이커머스 백엔드, 분석 대시보드, 예약 또는 콘텐츠 관리 인터페이스의 대안으로 제시합니다. 이 패키지는 자동 검색 진입점을 가진 멀티 페이지 Vite 앱으로 처리된 58개의 프로덕션 준비 완료 HTML 페이지를 제공합니다. 포함된 화면에는 4가지 대시보드 변형(운영, 분석, 판매, 시스템 상태), 인증 화면(Google/GitHub 소셜 로그인, 등록, 비밀번호 찾기, 2FA, 잠금 화면 및 403/404/500 오류 페이지), 폼(일반, 고급 컨트롤, 6단계 위저드, 드래그 앤 드롭 업로드, 유효성 검사, 날짜 범위 선택기, 멀티 선택, 리치 텍스트 에디터), 그리고 정렬, 검색, 페이지네이션, 행 선택 및 CSV 내보내기가 가능한 DataTables 페이지가 포함됩니다. 차트는 Apache ECharts 6를 통해 처리되며, 지연 로딩 및 모듈식으로 구성되어 라인, 영역, 누적 영역, 바, 가로 바, 혼합 바/라인, 도넛, 파이, 레이더, 게이지, 산점도, 히트맵, 퍼널, 캔들스틱, 폴라 바, 트리맵, 생키, 캘린더 히트맵, 간트 차트 등 20가지의 문서화된 변형을 제공합니다. 애플리케이션 페이지에는 CRUD 기능이 있는 캘린더, 폴더, 읽기 창, 작성 모달, 답장/전달 및 J/K/R/S/# 키보드 단축키가 포함된 인박스 클라이언트, 채팅 뷰, 드래그 앤 드롭 칸반 보드, 트리-그리드 파일 관리자, 알림, 편집 가능한 항목이 있는 송장, 프로필, localStorage에 저장되는 설정 및 FAQ 페이지가 포함됩니다. 이커머스 및 관리자 페이지가 세트를 완성합니다. 주요 내장 도구로는 차트, 버튼, 배지, 링크의 스타일을 실시간으로 변경하고 결과 SCSS 토큰을 내보낼 수 있는 라이브 테마 생성기, 각 재사용 가능 컴포넌트와 정확한 HTML 및 복사 버튼을 짝지어 제공하는 컴포넌트 플레이그라운드, 58개 모든 페이지를 퍼지 검색할 수 있는 커맨드 팔레트가 있습니다. 테마는 prefers-color-scheme 감지와 잘못된 테마가 잠깐 나타나는 현상을 방지하는 사전 페인트 스크립트를 통해 라이트 및 다크 모드를 지원하며, 수동 토글 설정은 localStorage에 유지됩니다. 아랍어, 히브리어, 페르시아어를 위한 RTL 레이아웃은 별도의 미러 스타일시트 대신 html dir 속성과 CSS 논리적 속성을 통해 지원됩니다. 접근성 측면에서는 스킵 링크, 포커스 링, 대화형 컨트롤의 ARIA 레이블, 시맨틱 랜드마크 및 스크린 리더 친화적인 테이블이 적용되었습니다. 또한 서비스 워커, 오프라인 쉘, 설치 가능한 매니페스트를 통해 PWA 준비가 완료되었습니다. 내비게이션은 단일 NAV 배열에 의해 구동되며, 쉘은 스타일이 적용되지 않은 콘텐츠의 깜빡임 없이 빌드 타임 및 런타임에 주입될 수 있습니다. 사이드바 동작은 모바일 드로어와 플라이아웃 서브메뉴가 있는 데스크톱 아이콘 전용 레일을 모두 지원하며, 페이지별 메타 설명, Open Graph 및 Twitter Card 태그는 빌드 타임에 주입됩니다. 디자인 토큰은 CSS 사용자 정의 속성으로 존재하므로 기본 색상을 변경하면 차트와 UI 요소에 즉시 반영됩니다. 스택은 의도적으로 작게 유지되었습니다. 3개의 프로덕션 종속성과 10개의 개발 종속성을 가지며, node_modules 크기는 이전 버전의 약 600MB에 비해 약 165MB입니다. ECharts 외에도 디자인 시스템으로 리스킨된 DataTables.net 3와 해당 페이지에서만 로드되는 고객 지도를 위한 Leaflet 1.9, 그리고 Inter 폰트를 사용합니다. Playwright는 스크린샷 파이프라인과 모든 페이지를 요청하여 HTTP 200을 확인하는 스모크 테스트를 위해 개발 종속성으로 사용됩니다. 개발자는 개발 서버, 프로덕션 및 비최적화 빌드, 미리보기, 번들 분석, 사이드바 항목을 삽입할 수 있는 생성기를 통한 페이지 스캐폴딩, 스크린샷 캡처, 파일별 캐시 헤더를 포함한 배포, 린팅 및 포맷팅을 위한 npm 스크립트 세트를 제공받습니다. BASE_PATH 변수는 하위 경로 배포를 지원하며, 빌드 출력물은 모든 정적 호스트에 적합한 정적 HTML과 해시 처리된 에셋입니다. 또한 이 프로젝트는 npm에 게시되어 쉘, 모달, 토스트 헬퍼를 세밀하게 임포트할 수 있으며, 모듈, 스타일 및 TypeScript 선언을 위한 서브패스 내보내기를 지원합니다. 사전 빌드된 dist와 번들링되지 않은 src는 jsDelivr를 통해 프로토타이핑이나 데모 페이지 직접 검토가 가능합니다. Claude Code, Cursor, GitHub Copilot 및 agents.md 호환 어시스턴트를 위한 헬퍼 파일이 제공되어 컨벤션과 레시피를 문서화합니다. 전체 문서는 별도로 호스팅되며 설정, 구조, 아키텍처, 테마, 테이블, 폼, 오버레이, PWA, 배포 및 마이그레이션을 다룹니다. MIT 라이선스로 제공되며 개인 및 상업적 용도로 무료로 사용할 수 있습니다.