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

카카오스타일 지그재그 FE팀이 2023년 중반부터 1년 이상 진행한 디자인 시스템 재구축 기록이다. 여러 지면에서 독립적으로 관리되던 컴포넌트를 통합해야 했는데, 단순 리팩터링을 넘어 팀 전체의 UI/UX를 통합 관리할 시스템이 필요하다고 판단했다. 상품 카드 통합, CSS 변수 기반 토큰 도입, 모듈화라는 세 과제와 그 해결 과정을 공유한다.

핵심 포인트

기존에는 여러 지면에서 각각 독립적으로 관리돼 일관성이 부족하고 중복 코드가 많았다.
각 컴포넌트가 색상·타이포그래피·아이콘 같은 기본 디자인 토큰과 에셋을 개별적으로 가져와 적용하는 방식이었다.
디자인 시스템이라는 이름은 붙어 있었지만 단순한 컴포넌트 모음에서 크게 벗어나지 않은 상태였다.
앱 플랫폼의 디자인 시스템은 이미 잘 갖춰져 있어, 그 경험을 바탕으로 웹 환경에 최적화해 재구축하기로 했다.
디자이너와 개발자가 한마음이 되어야 하는 목표라 처음에는 부담이 컸다고 솔직히 밝힌다.

상세 정리

시작 계기: 팀 리더와의 1:1에서 프로젝트를 맡아보면 어떻겠냐는 제안을 받았고, 처음에는 망설였지만 안 된다고 포기하기보다 일단 해보는 게 뭐라도 얻을 수 있겠다는 판단으로 착수했다.
배경 인식: 2023년 초 비즈니스와 더불어 기술적 개선이 필요하다고 느꼈고, 그중에서도 여러 지면에 흩어진 컴포넌트 통합이 중요하게 여겨졌다.
목표 설정: 디자인 시스템의 기반을 재구축하고 그 위에서 상품 카드 컴포넌트를 일원화하는 것으로 잡았다.
현황 파악을 먼저 한 이유는 기존 시스템이 어떻게 관리되고 있는지 알아야 무엇을 바꿀지 정할 수 있었기 때문이다.
기존 스타일링 방식과 토큰 적용 방식이 컴포넌트마다 개별적이었다는 점이 중복과 불일치의 근원이었다.
상품 카드를 하나의 시스템으로 통합하는 작업 자체가 큰 난관으로 느껴졌다고 회고한다.
글의 구성으로 재구축 과정에서 마주한 주요 과제와 해결 과정을 순서대로 다루며, 비슷한 고민을 하는 사람들에게 도움이 되기를 바란다고 밝힌다.

왜 읽나이름만 디자인 시스템인 컴포넌트 모음을 실제 시스템으로 끌어올리려는 프론트엔드 팀에게, 현황 파악부터 토큰 도입과 컴포넌트 일원화로 이어지는 1년짜리 프로젝트의 출발점을 보여준다.

카카오 스타일 (지그재그) 블로그

원문은 여기서 이어서 읽을 수 있어요

원문 읽기

읽음 (0)

·takedown 요청

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

이 글과 비슷한

토스는 어떻게 광고 속에 게임을 넣었을까

RxJS로 우아하게 사이드 이펙트 통제하기

항공 프론트엔드 구축기 (7/10): 창구를 하나만 두었습니다