핵심 요약
토스가 OKLCH 기반의 명도 일관성 및 시각 보정을 포함한 확장 가능한 디자인 시스템을 구축하고, Token Studio와 Style Dictionary, 테마 시스템을 통해 다 플랫폼에 걸친 토큰 자동 생성 및 적용을 가능하게 했습니다.
구현 방법
- OKLCH 기반 색공간 도입으로 명도를 통일하고 다크모드 시각 보정을 반영하여 접근성을 확보
- 시맨틱 토큰과 컴포넌트 토큰 도입 및 자동화된 토큰 관리 체계로 일관성 유지
- Token Studio, Style Dictionary, Server Driven Format을 활용한 자동 코드 생성 및 멀티 플랫폼 적용 지원
주요 결과
- 접근성 기준 충족 및 시각 품질 향상
- 다수 브랜드 및 플랫폼에서 동일한 의도 유지와 실험 속도 증가
- 디자이너 주도 토큰 관리와 자동 코드 생성을 통한 개발 프로세스 효율성 향상
