프론트엔드
잘 쓰이는 디자인 시스템을 위한 여정
두줄요약
29CM가 디자인 시스템 Ruler를 만들며 UI 파편화와 컴포넌트 구현 비용을 줄인 과정을 공유했습니다. Headless UI와 Figma 측정 도구로 재사용성과 운영 체계를 함께 강화했습니다.
문제 상황
- Mono-Repo와 MFA 지향 구조에서 여러 도메인이 병렬로 개발되며 UI 파편화가 누적되는 상황
- 버튼 등 공통 컴포넌트의 형태가 제각각이라 사용자 혼란, 재학습, 내부 개발 비용 증가가 발생
해결 방법
- 디자인 시스템 Ruler를 도입해 개발 시점부터 시각적 일관성과 공통 컴포넌트 체계 확보
- Headless UI(ark-ui)로 상태·동작을 맡기고, 스타일은 size·priority별 상수와 함수 조합으로 관리
- Figma REST API와 Node.js 스크립트로 사용 컴포넌트 측정 도구를 만들어 실제 사용량을 추적
- Figma 파일·페이지·섹션에 접두사 규칙을 적용해 측정 대상만 정확히 수집하고 Notion에 적재