토
토스
December 15, 20251회
달리는 기차 바퀴 칠하기: 7년만의 컬러 시스템 업데이트

간단 소개
토스 디자인 시스템(TDS)이 7년간 누적된 컬러 시스템 문제를 해결하고 비즈니스 확장을 위해 토큰 시스템을 전면 개편한 과정.
AI Summary
7년간의 문제점과 개선 필요성
- TDS 컬러 시스템은 7년간 유지되며 명도 불균일, 접근성 문제, 다크모드 불일치 등을 겪음.
- 부분적 수정이 전체 컬러 팔레트에 영향을 미치고, 토큰 소스가 플랫폼별로 분산 관리되어 비효율 발생.
- 높은 리소스 대비 낮은 엔드유저 임팩트로 개선 우선순위에서 밀림.
비즈니스 확장과 컬러 시스템 개편
- 슈퍼앱, 글로벌 진출 등 비즈니스 확장이 확장 가능한 디자인 시스템 필요성 제기.
- OKLCH 색공간을 활용하여 인지적으로 균일한 명도 시스템 구축, 접근성 및 자동화 로직 강화.
- 시각 보정 (노란색, 다크모드)을 통해 심미적 완성도를 높이고, 시맨틱 토큰 정비로 일관성 보장.
자동화된 토큰 시스템과 확장 가능한 테마
- Token Studio와 Style Dictionary를 활용, 디자이너가 직접 토큰 생성 및 배포 가능한 자동화 시스템 구축.
- 테마 시스템 도입으로 커스터마이징 및 일관성 유지, 파생 가능한 테마 시스템으로 다양한 기능 지원.
- 레거시 시스템 마이그레이션을 위해 Token v1/v2 패키지 통합 및 점진적 업데이트 프로세스를 구축함.
Next Feeds
올영세일 선착순 쿠폰, 미발급 0%를 향한 여정
올리브영 선착순 쿠폰 시스템의 비동기 처리 문제로 인한 미발급률을 Redis 이중 카운터 전략으로 0%까지 개선한 과정.
올영세일선착순 쿠폰Redis비동기 시스템정합성
2025. 12. 15.
올리브영

프론트엔드 도구의 전략적 선택: 경량 프레임워크 Vue.js 탐구와 Vue3 적용기
한컴테크가 Vue.js를 경량 프레임워크로 채택한 이유, Vue3 전환 시 Composition API 및 Vite 도입 경험을 공유합니다.
Vue.jsVue3Composition APIVite프론트엔드
2025. 12. 15.
한글과컴퓨터

우리가 테스트를 하는 이유. 근데 이제 Golang을 곁들인
Golang 기반의 테스트가 비즈니스 리스크를 줄이고 소프트웨어 품질을 높이는 목적과 'stretchr/testify', 'google/go-cmp' 등 효율적인 테스트 도구 활용법을 설명합니다.
테스트Golang비즈니스 리스크테스트 자동화stretchr/testify
2025. 12. 15.
뱅크샐러드

AWS DMS의 data resync 기능을 이용한 데이터 일관성 구현하기
AWS DMS의 데이터 재동기화 기능을 활용하여 데이터베이스 마이그레이션 중 데이터 불일치를 자동으로 해결하고 일관성을 유지하는 방법을 설명합니다.
AWS DMS데이터 재동기화데이터 일관성데이터 검증데이터베이스 마이그레이션
2025. 12. 14.
AWS

코드 품질 개선 기법 26편: 설명의 핵심은 첫 문장에 있다
코드 품질 개선을 위해 주석 작성 시 핵심 내용을 첫 문장에 담고, 높은 추상화 수준으로 설명하는 기법을 제시한다.
코드 품질주석문서화첫 문장추상화
2025. 12. 12.
LY Corp

여기어때 비주얼 에셋, 새롭게 정의하다
여기어때 플랫폼 디자인팀이 브랜드 일관성, 효율성 강화를 위해 비주얼 에셋을 새롭게 정의하고 구축한 과정과 원칙을 설명합니다.
비주얼 에셋브랜드 일관성플랫폼 디자인팀UX Center디자인 시스템
2025. 12. 12.
여기어때