디자인 시스템 배포, 3주 삽질 기록
by DD
5개월 전
조회수 11
디자인 시스템을 NPM 배포하는 과정에서 예상치 못한 문제 발생
SVGR, tsup 충돌, CSS 스타일 누락, 20MB 패키지 등 빌드 문제 직면
Mantine + Panda CSS 조합을 Tailwind 환경에 적용하며 CSS 충돌 해결
빌드 과정의 난관
디자인 시스템 배포 과정에서 SVGR과 tsup의 충돌로 인해 빌드 오류가 발생했다. 구체적으로 Panda CSS 스타일이 누락되어 디자인 시스템의 UI가 깨지는 문제가 발생했다. 따라서 번들 사이즈 최적화를 위해 트리 쉐이킹을 포기하고, 작동하는 배포를 선택했다.
배포 자동화의 함정
npm scope 문제로 인해 대대적인 리팩토링이 진행되었다. GitHub Actions을 이용한 자동 배포 과정에서 무한 재귀 현상이 발생했다. 반면, 배포 파이프라인을 재설계하여 안정적인 배포 환경을 구축했다. 결과적으로 배포 시간 단축 및 유지보수성 향상을 달성했다.
CSS 충돌 해결 전략
Mantine과 Panda CSS를 Tailwind 환경에 통합하는 과정에서 !important 충돌이 발생했다. 구체적으로 CSS Layer를 활용하여 스타일 우선순위를 관리했다. 따라서 CSS 충돌 문제를 해결하고, 디자인 시스템의 일관성을 유지했다. 결과적으로 UI 안정성 확보에 기여했다.
