아키텍처
달리는 기차 바퀴 칠하기: 7년만의 컬러 시스템 업데이트
두줄요약
토스가 7년 만에 컬러 시스템을 전면 개편한 과정과 토큰 시스템 재구축 방법을 공유했습니다. OKLCH, 시맨틱 토큰, 자동 코드 생성으로 확장성과 일관성을 높였습니다.
문제 상황
- 7년간 유지된 TDS 컬러 시스템의 명도 불일치와 라이트·다크모드 간 기준 차이
- 해상도 낮은 환경에서의 접근성 문제, 다중 플랫폼별 토큰 분산 관리로 인한 비효율과 이격
- 비즈니스 확장으로 늘어난 화면·패턴 속도를 기존 컴포넌트 생산 방식이 따라가지 못하는 상황
해결 방법
- OKLCH 기반의 인지적으로 균일한 명도 체계로 팔레트 재구성
- 시맨틱 토큰 정비와 사람·기계가 함께 읽는 구조, Token Studio와 Style Dictionary 기반 자동 코드 생성
- 플랫폼별 빌드 타깃, 테마·모드, 토큰 참조, 오버라이딩을 지원하는 코드젠과 점진적 마이그레이션
성능/운영 포인트
- 다크모드와 접근성 기준을 함께 만족하는 색 조합 자동 추출
- Web, RN, Android, iOS, Server Driven UI, Deus까지 포함한 일괄 전파 체계
- 레거시와 신규 토큰을 병행 운영하며 단계적으로 버전 상향