피드로 돌아가기
Dev.toFrontend
원문 읽기
Admin 전용 Subpath Export 구조를 통한 Vue 3 번들 최적화 및 디자인 시스템 구축
Why God Kit? A Lightweight Vue 3 UI Library and Design System for Admin Apps
AI 요약
Context
범용 UI 라이브러리의 과도한 런타임 오버헤드와 방대한 컴포넌트 집합으로 인한 번들 크기 증가 문제 발생. 레거시 UI 스택에서 신규 시스템으로의 전환 시 발생하는 리스크와 전면 재작성 부담에 따른 점진적 마이그레이션 필요성 증대.
Technical Solution
- Subpath Exports 설계를 통한 필요한 컴포넌트만 선택적으로 임포트하여 Tree-shaking 효율 극대화
- Semantic Design Tokens(--gk-*) 기반의 CSS 변수 체계 구축으로 테마 및 밀도(Density) 제어의 유연성 확보
- Bridge Stylesheet 제공을 통해 기존 레거시 UI와 신규 시스템의 공존 및 단계적 교체 구조 설계
- GkDataTable 중심의 데이터 집약적 인터페이스 최적화로 Admin 환경에 특화된 UX 프라이머티브 구현
- CLI 기반의 컴포넌트 스캐폴딩 도구 도입으로 프로젝트 컨벤션 유지 및 개발 생산성 향상
- Nuxt 4 및 SSR 환경을 고려한 CSS 로딩 순서 정의 및 명시적 임포트 전략 채택
실천 포인트
- UI 라이브러리 설계 시 Barrel file 지양 및 Subpath Export 도입 검토 - 디자인 시스템 구축 시 개별 색상 값이 아닌 Semantic Token 체계 우선 정의 - 레거시 전환 시 Big Bang 방식 대신 Bridge Layer를 통한 점진적 마이그레이션 경로 확보 - 관리자 페이지 특성에 맞춘 Data-dense 컴포넌트 전용 최적화 전략 수립