이 게시물은 디자인 컴포넌트 라이브러리를 실제 사용 방식에 맞춰 빌드·패키지·공통자산 구조를 재설계한 과정과 결과를 정리한 글입니다.

핵심 문제

• 트리셰이킹 불가로 불필요한 코드가 번들에 포함
• 컴포넌트별 멀티 패키지 구조로 개발·테스트 DX 저하
• 빌드 산출물 기준 참조로 로컬 개발과 Storybook에서 제약

개선 기준

• 실제 사용 방식과 구조 일치
• 번들러가 정적으로 분석 가능한 ESM 기반 구조
• 중장기 유지보수성과 개발자 경험 우선

적용한 변경

• ESM 전환 및 exports 명시로 트리셰이킹 가능하도록 변경
• 멀티 패키지에서 단일 패키지로 단순화
• foundation 분리로 디자인 토큰 단일 책임화

효과

• 번들 포함량 약 90% 감소 및 빌드/리로드 시간 대폭 개선