프론트엔드 팀의 디자인 시스템 재구축기

2023년 초, 카카오스타일 지그재그 FE팀은 흩어져 관리되던 상품 카드 컴포넌트를 하나로 묶기 위해 디자인 시스템 재구축에 착수했다. 단순 리팩토링이 아니라, UI/UX를 통합적으로 관리할 수 있는 기반을 다시 세우는 작업이었다.

초기에는 하나의 패키지에 색상, 아이콘, 테마, 컴포넌트가 모두 들어 있어 변경이 잦아질수록 배럴 파일 관리와 의존성 충돌이 문제로 떠올랐다. 이를 해결하기 위해 Core, Components, Icons, Themes, Tokens, ZDS로 역할을 나눠 모듈화했고, 초기 단계에서는 과도한 세분화보다 현실적인 유지보수성을 우선했다.

스타일링 방식은 런타임 CSS-in-JS인 Emotion에서 Vanilla Extract로 전환했다. 선택 기준은 다음과 같았다.

• CSS 변수 기반 토큰 관리가 가능한가
• 테마 전환을 유연하게 다룰 수 있는가
• 타입 안전성과 오타 방지가 가능한가
• 번들 크기가 가볍고 제로 런타임에 가까운가
• 팀이 감당할 수 있는 학습 러닝 커브인가

비교 결과, Vanilla Extract가 타입 안전성, 유틸리티, RSC 호환성에서 가장 적합하다고 판단했다. 특히 createGlobalThemeContract와 createGlobalTheme를 통해 토큰 계약과 실제 값을 분리해 관리하면서, 최종 CSS에는 --color-text-primary 같은 형태로 의미 있는 변수명이 남게 됐다.

기존 방식은 ThemeProvider와 React 상태에 의존해 테마를 주입했기 때문에, CSS에는 실제 값만 남고 토큰의 의미가 사라졌다. 또한 prefers-color-scheme 감지와 상태 동기화 과정에서 FOUC가 발생할 수 있었지만, CSS 변수 기반으로 전환하면서 브라우저 레벨에서 테마를 처리해 이 문제를 줄였다.

상품 카드 통합은 컴파운드 컴포넌트 패턴과 계층적 설계로 풀었다. ProductCard 아래에 Thumbnail, Metadata, MetadataItem 같은 블록을 두어 지면별로 유연하게 조합할 수 있게 했고, 동시에 UI 로직, 비즈니스 로직, 지면별 로직을 분리해 중복을 줄였다.

결과적으로 세로형·가로형을 포함한 상품 카드 구조를 정리하고, 공용 커스텀 훅과 서비스 컴포넌트를 통해 11개 지면에 상품 카드를 성공적으로 통합했다. 디자인 시스템 재구축과 상품 카드 일원화가 함께 완료되면서, 유지보수성과 확장성을 동시에 확보했다.