달리는 기차 바퀴 칠하기: 7년만의 컬러 시스템 업데이트
윤민석/권윤 토스 · 토스 기술 블로그
AI 핵심 요약
7년간 유지된 TDS 컬러 팔레트는 색상별·모드별 명도 차이와 접근성 문제, 플랫폼마다 분산된 토큰 관리로 인해 디자인 품질과 협업 효율을 떨어뜨리고 있었습니다. 토스팀은 비즈니스 확장에 대응하기 위해 OKLCH 기반의 명도 체계를 만들고, 노란색과 다크모드는 시각적으로 별도 보정했으며, 시맨틱 토큰과 자동화된 토큰 생성 파이프라인을 구축했습니다. Token Studio, GitHub PR, 전처리 로직과 Style Dictionary를 연결해 여러 플랫폼의 코드를 생성하고, 테마 및 파생 테마로 브랜드·제품별 커스터마이징을 지원했습니다. 레거시 서비스에는 호환 패키지와 CLI를 마련해 단계적으로 적용했으며, 디자인 시스템은 디자이너 참여와 점진적 마이그레이션까지 고려해야 확장성과 일관성을 유지할 수 있다고 설명합니다.
- 색상 팔레트는 HSL의 수치만 맞추기보다 OKLCH처럼 인지적으로 균일한 색공간을 활용하고, 실제 UI에서 시각적으로 보정해야 합니다.
- 다크모드는 라이트모드의 색을 그대로 반전하기보다 어두운 배경에서의 시인성을 고려해 별도의 명도 기준을 두는 편이 좋습니다.
- 토큰을 사람이 읽고 기계가 처리할 수 있는 규약으로 정규화하면 검증과 플랫폼별 코드 생성을 자동화할 수 있습니다.
- 테마와 파생 테마를 활용하면 공통 파운데이션은 공유하면서 브랜드나 제품별 요구사항을 토큰 오버라이드로 수용할 수 있습니다.
- 대규모 토큰 변경은 호환 패키지와 CLI를 마련하고, 테스트 서비스부터 점진적으로 적용하는 방식으로 진행할 수 있습니다.
소개
토스의 디자인 시스템, TDS의 컬러 시스템을 7년 만에 전면 개편하며 마주했던 문제들과, 이를 해결하기 위해 토큰 시스템을 처음부터 다시 만들어간 과정을 공유합니다.
비슷한 학습 자료
문서 김민수
디자인 시스템 다시 생각해보기
문서 한재엽
달리는 기차의 바퀴 교체하기 1. Planning
문서 정세희
문제의 근원을 해결 하기 위한 다양한 시도
문서 이다윗
토스에서 하루 만에 제품 출시하는 법
문서 김지혜