디자인 시스템, 실제 사용 방식에 맞춰 다시 태어나다!
by DD
5개월 전
조회수 14
트리셰이킹 미적용으로 인한 번들 사이즈 증가 문제를 해결하기 위해 ESM 전환 및 exports 명시
멀티 패키지 구조를 단일 패키지로 단순화하여 개발 환경 복잡도 감소 및 개발 생산성 향상
빌드 시간 88.6% 단축, 번들 사이즈 89.97% 감소 등 성능 개선 및 개발 경험(DX) 향상
ESM 전환과 트리셰이킹의 중요성
기존 UMD/CJS 기반 빌드 방식은 트리셰이킹을 어렵게 만들어 불필요한 코드 번들을 야기했다. ESM으로 전환하고 exports를 명시함으로써 번들러가 의존성을 정적으로 분석하도록 유도했다. 따라서 번들 사이즈 감소와 성능 향상을 동시에 달성했다.
단일 패키지 구조로의 전환
멀티 패키지 구조는 컴포넌트 간 참조를 복잡하게 만들고, 개발 환경의 러닝 커브를 높였다. 단일 패키지 구조로 변경하여 컴포넌트 간 의존 관계를 명확하게 하고, 개발 생산성을 향상시켰다. 결과적으로 빌드 시간 단축과 유지보수 용이성을 확보했다.
디자인 시스템 구조 개선의 핵심
디자인 시스템은 실제 사용 방식에 맞춰 지속적으로 개선되어야 한다. 빌드 구조 개선을 통해 개발 경험(DX)을 향상시키고, 디자인 토큰 관리를 위한 기반을 마련했다. 따라서 확장성 확보와 지속 가능한 디자인 시스템 운영을 위한 토대를 구축했다.
