포스텔러 · 운세 서비스 · 웹앱
디자인 시스템 · 컴포넌트 개선 및 리뉴얼
기존 디자인 시스템에서 발견된 비효율적인 구조를 개선하기 위해 협의와 설득 과정을 주도하였으며, 이를 통해 디자인 시스템의 효율화와 시각적 일관성을 확보하여 제품 완성도를 높인 프로젝트입니다.
역할 및 작업기간
2025.3~2025.8
디자인 시스템 및 컴포넌트 개선 및 개발 협업 프로세스 정리 (80%)
목표
디자인 토큰 네이밍 체계화
개발 코드와 일치되는 베리언트 설계
디자인 시스템의 코드 반영 자동화 구조 설계
배경
기존 디자인 시스템에 문제점이 발견되고 있었습니다.
컬러 팔레트 단계가 색상 스펙트럼(Blue 50, 100, 200 등) 기반이 아니라, Primary / Secondary / Utility와 같은 역할별 구분으로 정의되어 있었습니다.
1:1 매핑의 On 시스템을 사용하다 보니, Surface와 같은 배경색은 확장에 한계가 있었고 Text 컬러를 별도로 지정해야 했습니다. 또한 Button과 같은 컴포넌트 컬러도 시멘틱 단계에서 직접 정의되는 구조였습니다.
컬러의 경우 1:1 매핑(On 시스템)으로 구성되어 있었지만, 이 값들을 스타일 내에서 그룹화할 수 없어, 피그마 사용 시 관리와 적용 과정에서 많은 불편함이 발생했습니다.
(발표 슬라이드 자료 이미지)
해당 문제를 발견한 후, 설득을 위해 리서치를 진행하고, 슬라이드를 제작하여 디자인 시스템 개선을 위한 설득 작업을 수행했습니다.
먼저 W3D, 구글 머터리얼, 당근, 라인 등 국내외 다양한 디자인 시스템을 분석하여,
리서치 자료와 발견한 문제를 바탕으로, 레퍼런스를 참고해 공유용 슬라이드를 제작했습니다.
주요 내용은 다음과 같습니다.
1:1 매핑은 브랜드 컬러에 적합하지만, Surface와 같은 계층적 색상에는 비효율적이다.
폰트 크기와 행간도 컬러와 마찬가지로 최소 단위로 정의해야 확장성이 생긴다.
타이포그래피 정의를 간결하게 나누면 디자인 작업 시 혼선을 줄일 수 있다.
토큰 네이밍에 따라 Figma 스타일이 아닌 Variants로 관리하는 방식이 더 큰 장점을 가진다.
제작
토큰 네이밍
secondary 그룹 안에 red 하위 그룹을 만들고 base와 on-base를 함께 배치했습니다.
이렇게 묶어 관리하면 관련 토큰을 한눈에 확인하고, 검색도 쉽게 하며, 색상 변경 시 대비를 바로 확인해 실수를 줄이고 작업 속도를 높일 수 있습니다.
컴포넌트 베리언트 값 간소화
기존에 컬러를 Figma style로 관리하면서 다크 모드 전환에 플러그인을 의존해야 했고, 그로 인해 토큰 수가 늘어났으며 관리와 컬러 모드 전환이 비효율적이었습니다.
Figma 스타일로 흩어져 있던 컬러 토큰을 Variable로 재정리해, 컬러 선택창에서 그룹별로 구분되도록 개선했습니다. 그 결과 원하는 색을 더 쉽게 찾아 작업 효율이 높아졌습니다. 피그마 베리어블 기반 토큰을 적용해 디자인과 개발 모두의 구조를 개선하면서 이를 통해 관리 효율성과 작업 일관성이 향상되었습니다.
각기 다르게 정의되어 있던 컴포넌트 베리언트를, 개발 언어의 props와 동기화하기 위해 컴포넌트의 최소 단위 값([표면]-[색상]-[크기]--{“상태”})로 고정하여 지정했습니다.
피그마 베리언트 적용
기존에 컬러를 Figma style로 관리하면서 다크 모드 전환에 플러그인을 의존해야 했고, 그로 인해 토큰 수가 늘어났으며 관리와 컬러 모드 전환이 비효율적이었습니다.
Figma 스타일로 흩어져 있던 컬러 토큰을 Variable로 재정리해, 컬러 선택창에서 그룹별로 구분되도록 개선했습니다. 그 결과 원하는 색을 더 쉽게 찾아 작업 효율이 높아졌습니다. 피그마 베리어블 기반 토큰을 적용해 디자인과 개발 모두의 구조를 개선하면서 이를 통해 관리 효율성과 작업 일관성이 향상되었습니다.
결과
해당 프로젝트를 통해 문제를 발견했을 때 곧바로 지적하기보다는,
동료들이 불편함을 느끼지 않도록 배려하는 방식으로 의견을 전달하는 것이 중요하다는 점을 깨달았습니다. 말로만 전달했을 때는 한계가 있었지만, 리서치를 통해 근거와 개선 방향을 함께 제시하니 팀원들이 훨씬 수용적으로 받아들인다는 것을 경험했습니다. 이번 과정을 통해 디자인 시스템 자체에 대한 이해가 깊어졌을 뿐만 아니라, 협업 과정에서 필요한 커뮤니케이션 능력 또한 성장할 수 있었습니다.
직접적인 할당 업무가 아니었기 때문에 충분한 설득 과정과 디자인 디테일을 세심하게 챙기지 못한 아쉬움이 있었습니다.
향후에는 단순히 UI 차원에서의 개선뿐만 아니라, 디자인 원칙과
운영 프로세스까지 포함한 확장 가능한 시스템을 만들고 싶습니다.
*토큰 자동화 작업 브런치 글 보기
