토스, 디자인 시스템 컬러 개편: 7년의 숙원, 자동화된 토큰 시스템으로 해결!
by DD
5개월 전
조회수 383
TDS의 컬러 시스템을 7년 만에 전면 개편, OKLCH 기반의 인지적 균일성을 확보함
토큰 시스템을 재구축하여 디자이너 주도의 자동화된 코드 생성 환경을 마련함
테마 시스템 도입을 통해 확장성을 확보하고, 마이그레이션을 위한 점진적 업데이트 프로세스를 구축함
OKLCH 색공간과 명도 시스템
기존 HSL 모델의 명도 차이 문제를 해결하기 위해 OKLCH를 도입하여 인지적으로 균일한 색상 팔레트를 구축했다. 구체적으로, 색상 대비를 균일하게 유지하고, 접근성 기준을 충족하는 컬러 조합을 자동 생성하는 로직을 개발했다. 따라서, 다크모드에서도 일관된 디자인을 제공한다.
디자이너 중심의 자동화된 토큰 시스템
Figma 플러그인인 Token Studio를 활용하여 디자이너가 직접 토큰을 관리하고, GitHub에 커밋하여 코드 생성을 자동화했다. Style Dictionary를 통해 CSS, TypeScript 등 다양한 형태로 변환하며, Server Driven Format 지원을 통해 앱 하위 호환성을 유지한다. 결과적으로, 개발 생산성을 향상시켰다.
확장 가능한 테마 시스템 구축
TDS는 테마 시스템을 도입하여, 다양한 요구사항에 대응하고 컴포넌트 중복 구현을 방지했다. 파생 가능한 테마 시스템을 통해, TDS WTS와 같은 특정 기능에 특화된 테마를 구현하고, 토큰 오버라이딩을 지원한다. 따라서, 유지보수성과 확장성을 동시에 확보했다.
