프론트엔드
디자인 컴포넌트 라이브러리를 ‘실제 사용 방식’에 맞게 다시 설계한 이야기
두줄요약
React 디자인 컴포넌트 라이브러리를 ESM과 단일 패키지 구조로 재설계했습니다. 트리셰이킹 적용으로 번들 크기와 빌드 시간을 크게 줄이고 DX를 개선했습니다.
문제 상황
- 일부 컴포넌트 import에도 Kitchen 전체 코드가 포함되는 트리셰이킹 미적용 구조
- 컴포넌트별 패키지와 단일 진입점 소비 방식의 불일치로 누적된 관리 비용과 DX 저하
- Table·Chart 같은 신규 컴포넌트 설계 전 번들 영향부터 고려해야 하는 확장 제약
원인 분석
- kitchen-core의 전체 re-export와 UMD·CommonJS 혼합 배포 포맷
- 번들러의 정적 의존성 분석을 어렵게 만드는 빌드 산출물 기준 컴포넌트 참조
- Desktop·Mobile에 분산된 디자인 토큰 관리 기준
해결 방법
- ESM-only 배포와 exports 필드 명시를 통한 import 기반 의존성 추적 구조
- 28개 컴포넌트 패키지를 packages/kitchen 단일 패키지로 통합하고 소스 기준 참조로 전환
- 공통 디자인 토큰을 kitchen-foundation으로 분리해 Desktop·Mobile 공통 의존성 구성
성능/운영 포인트
- 빌드 시간 60.93초에서 6.94초로 88.6% 단축, Hot 반영 즉시화
- 사용 서비스 공통 번들의 Kitchen 코드량 1.61MB에서 162.5KB로 89.97% 감소
- 번들러 전환보다 구조와 배포 방식 정리를 우선하고 향후 요구 변화에 맞춘 재검토 여지 확보
