프론트엔드
3단계로 완성하는 유연한 디자인 시스템
두줄요약
디자이너와 개발자의 리소스 관리를 일원화하기 위해 3단계 토큰 기반 디자인 시스템을 구축했습니다. Figma와 코드, Storybook을 연결해 테마 전환과 컴포넌트 커스터마이징을 유연하게 운영했습니다.
문제 상황
- 디자이너와 웹 프런트엔드 엔지니어 간 디자인 리소스 관리의 분리
- 소규모 조직에서 제한된 인력으로 일관성과 확장성을 함께 확보해야 하는 상황
- 디자인 시스템의 초기 범위 설정과 유지 보수 부담
해결 방법
- Figma, Storybook, 토큰을 연결한 디자인 시스템 구축
- Primitive, Semantic, Component-specific의 3단계 토큰 구조 도입
- HeadlessUI를 산출물로 활용해 기능과 커스터마이징 분리
성능/운영 포인트
- 토큰 변경만으로 테마와 스타일을 일괄 조정하는 구조
- 프로퍼티명 통일과 상태값 최소화로 커뮤니케이션 비용 절감
- Figma Variables와 코드의 동일한 토큰 구조로 디자인-개발 연결