사내 5개 프로덕트에서 공유하는 React 컴포넌트 라이브러리. Figma Tokens → Style Dictionary → CSS Custom Properties 파이프라인 구축.
각 프로덕트마다 독립적으로 만들어진 버튼, 모달, 폼 컴포넌트가 스타일과 동작이 제각각이었습니다. 이를 통합하는 디자인 시스템 Prism UI를 구축했습니다.
아키텍처:
• Token Pipeline — Figma Variables → JSON export → Style Dictionary transform → CSS Custom Properties + TypeScript constants 자동 생성
• Component Layer — Headless 패턴(Radix Primitives)으로 접근성 기본 탑재, 스타일은 CSS Modules로 분리
• Distribution — Rollup으로 ESM/CJS 번들링, Changesets로 시맨틱 버저닝 자동화, Chromatic으로 Visual Regression Test
도입 후 신규 페이지 개발 시간이 평균 40% 단축되고, 디자이너-개발자 간 커뮤니케이션 비용이 현저히 감소했습니다.
Tree-Shaking 실패 — 초기 번들 설정에서 CSS Modules의 side effect로 인해 사용하지 않는 컴포넌트의 CSS까지 번들에 포함. 소비하는 앱의 번들 사이즈가 400KB 이상 증가.
테마 전환 깜빡임(FOUC) — SSR 환경에서 초기 HTML은 기본 테마로 렌더링되고, 클라이언트 hydration 후 저장된 테마가 적용되면서 눈에 보이는 깜빡임 발생.
컴포넌트 마이그레이션 저항 — 기존 프로덕트 팀들이 자체 컴포넌트를 Prism UI로 교체하는 데 거부감. API가 다르고 기존 코드 수정이 필요해서 도입 속도가 느림.
컴포넌트별 CSS 파일 분리 + sideEffects 배열 — Rollup 설정에서 각 컴포넌트의 CSS를 개별 파일로 추출하고, package.json의 sideEffects에 실제 사용되는 CSS만 명시. 결과적으로 미사용 컴포넌트 CSS가 제거되어 번들 사이즈 정상화.
data-theme 쿠키 + 블로킹 스크립트 — head에 인라인 스크립트를 삽입하여 쿠키에서 테마를 읽고 html[data-theme]을 설정. 페인트 전에 올바른 테마가 적용되어 FOUC 완전 제거.
Codemod 자동화 + 점진적 마이그레이션 — jscodeshift로 기존 컴포넌트 → Prism UI 변환 codemod를 작성. 팀별로 한 페이지씩 점진적으로 교체하는 전략을 수립하고, 주간 마이그레이션 리포트로 진행 상황을 공유.
