toss·2025년 12월 14일원문

달리는 기차 바퀴 칠하기: 7년만의 컬러 시스템 업데이트 (새 탭에서 열림)

토스 디자인 시스템(TDS)은 서비스의 글로벌 확장과 다양한 플랫폼 대응을 위해 7년 만에 컬러 시스템을 전면 개편했습니다. 인지적으로 균일한 색공간인 OKLCH를 도입하여 시각적 일관성과 접근성을 확보하고, 디자이너가 직접 제어하는 자동화된 토큰 관리 체계를 구축했습니다. 이번 개편을 통해 TDS는 단순한 디자인 가이드를 넘어, 비즈니스 성장을 뒷받침하는 확장 가능한 기술 인프라로 진화했습니다. ### 기존 컬러 시스템의 한계와 부채 - **명도 불일치**: 동일한 명도 단계(예: 100)임에도 색상(Grey, Blue, Red 등)에 따라 실제 느껴지는 밝기가 달라 UI가 얼룩덜룩해 보이는 문제가 있었습니다. - **모드 간 이격**: 라이트모드와 다크모드의 명도 기준이 달라 다크모드에서 특정 색이 너무 튀거나 가독성이 떨어지는 현상이 발생했습니다. - **관리 체계의 파편화**: 웹, iOS, 안드로이드, 디자인 에디터 등 각 플랫폼에서 컬러를 개별 관리하면서 싱글 소스 오브 트루스(SSOT)가 무너지고 커뮤니케이션 비용이 증가했습니다. ### OKLCH 색공간을 통한 인지적 균일함 확보 - **지각적 평등성**: 수치상 명도와 인간이 느끼는 밝기가 다른 HSL 모델 대신, 인지적으로 균일한 OKLCH 및 HSLuv 색공간을 활용해 모든 색상의 명도를 통일했습니다. - **접근성 자동화**: 정의된 명도 체계를 바탕으로, 외부 브랜드 컬러를 입력하더라도 TDS 기준에 맞는 배경-텍스트 대비를 자동으로 추출하는 로직을 구현했습니다. - **디바이스 최적화**: RGB 환경에서 표현하기 어려운 OKLCH 색상을 위해 채도(Chroma)를 클램핑(Clamp)하여 색조와 명도를 유지하면서도 기기 호환성을 높였습니다. ### 심미성과 접근성을 위한 시각 보정 - **Dark Yellow 문제 해결**: 수치적으로만 맞춘 노란색은 탁해 보이거나 너무 진해 보일 수 있어, 노란색 계열에 한해 별도의 명도 진행 단계를 적용하는 시각 보정을 거쳤습니다. - **다크모드 시인성 강화**: 인간의 눈이 어두운 배경에서 대비를 더 낮게 인식하는 특성을 고려하여, 최신 명도대비 메트릭인 APCA를 참고해 다크모드의 대비를 더 강하게 설계했습니다. - **시맨틱 토큰 정비**: 색상의 값(Primitive)이 아닌 사용 의도(Semantic)에 집중한 토큰 체계를 정립하여 디자인 결정 시간을 단축하고 일관성을 보장했습니다. ### 디자이너 중심의 토큰 자동화 시스템 - **통합 파이프라인**: Figma 플러그인(Token Studio)과 GitHub를 연동하여 디자이너가 컬러를 수정하고 커밋하면 모든 플랫폼의 코드가 자동으로 생성되도록 구축했습니다. - **실험적 환경**: 개발자의 수동 작업 없이도 디자이너가 직접 토큰을 변경하고 빠르게 실험할 수 있는 환경을 만들어 디자인 시스템의 운영 효율을 극대화했습니다. 성공적인 디자인 시스템 개편을 위해서는 단순한 심미적 수정을 넘어, 데이터 기반의 색공간 설계와 엔지니어링 관점의 자동화가 필수적입니다. 특히 비즈니스가 확장되는 시점이라면 컬러 시스템을 개별 컴포넌트가 아닌, 모든 플랫폼을 관통하는 하나의 '코드'이자 '인프라'로 접근하는 태도가 필요합니다.

oklchFigma디자인 시스템접근성+4

figma·2025년 1월 8일·3분 읽기큐레이션 요약

개발자가 다시 크리에이

웹은 템플릿과 자동화 덕분에 누구나 쉽게 만들 수 있게 되었지만, 그 과정에서 사이트의 개성과 창의성이 약해졌다. 저자는 브라우저가 컨테이너 쿼리, OKLCH 색상, 고급 애니메이션과 레이아웃 등 훨씬 강력한 창작 기능을 갖추었으므로, 개발자들이 다시 창의적 코딩을 통해 웹의 표현 가능성을 확장해야 한다고 주장한다. 결론적으로 템플릿은 완성품이 아니라 출발점이며, 개발자는 실험과 표현을 통해 웹을 하나의 창작 매체로 되살려야 한다. ## 템플릿 이전의 창의적인 웹 - 2010년경 맞춤형 웹사이트는 개발자의 기술과 감각을 보여주는 디지털 명함이었다. - HTML5의 발전으로 다음과 같은 실험적인 작업이 가능했다. - 표현력 높은 인라인 SVG - GSAP 기반 타임라인 애니메이션 - WebGL 실험 - 복잡한 CSS 일러스트레이션 - 당시 개발자는 단순히 기능을 구현하는 것을 넘어, 독창적이고 유머러스한 경험을 직접 만들었다. ## 템플릿과 자동화가 가져온 변화 - Wix, Squarespace 같은 서비스는 애니메이션, 배경 영상, 패럴랙스, CMS를 누구나 사용할 수 있게 만들었다. - 웹 제작의 접근성이 크게 높아진 점은 긍정적이다. - 그러나 비슷한 템플릿이 반복되면서 사이트가 예측 가능해지고, 놀라움과 개성이 줄어들었다. - 저자는 “손으로 만든 것이 항상 더 낫다”는 감정적 주장만으로는 부족하며, 이제는 실제 웹의 창작 가능성을 다시 탐색해야 한다고 본다. ## 현대 브라우저의 숨은 가능성 - 브라우저는 과거보다 훨씬 정교한 기능을 지원하지만, 많은 디자이너와 개발자는 여전히 예전 방식에 머물러 있다. - 활용할 수 있는 현대 CSS 및 웹 기능은 다음과 같다. - 컨테이너 쿼리 - 고급 스코핑과 상속 제어 - 사용자의 선호도에 반응하는 스타일 - 동적 단위와 반응형 레이아웃 - 발전된 색상, 타이포그래피, 애니메이션 기능 - 디자인 도구의 기본 기능만 사용하는 대신, 브라우저 자체가 제공하는 표현력을 직접 활용해야 한다. ## 색상 공간과 디자인·개발의 융합 - 일반적인 RGB 그라디언트 외에도 CSS는 HSL과 OKLCH 같은 색상 공간을 지원한다. - 이러한 색상 공간은 더 생생하고 정밀한 색상 전환을 가능하게 한다. - 저자는 디자인 도구와 실제 CSS 사이의 차이를 줄이기 위해 `color-mix()`를 활용한 Figma 플러그인을 만들었다. - 디자인과 개발의 경계가 가까워질수록 개발자는 디자인 도구 안에서도 더 많은 창작 권한과 실험 공간을 가질 수 있다. ## 창의적 웹의 사례 - Henry Desroches는 인쇄물 같은 여백, 입체감, 의도적인 배치를 반응형 웹에 구현한다. - Sarah Drasner는 SVG 애니메이션과 웹 일러스트레이션의 가능성을 보여준다. - Tim Holman은 `Optical Toys`, `The Useless Web`처럼 실용성을 넘어선 실험적 프로젝트를 만든다. - Lynn Fisher는 브라우저 너비에 따라 일러스트레이션이 변하는 작업을 통해 화면 자체를 창작 매체로 활용한다. - 이 사례들은 템플릿이 최종 결과가 아니라, 창의적인 작업을 시작하기 위한 기반임을 보여준다. 웹사이트는 정보 전달이나 서비스 제공을 위한 그릇에만 머물 필요가 없다. 개발자는 최신 브라우저 기능을 적극적으로 실험하고, CSS·SVG·WebGL·애니메이션을 조합해 자신만의 표현 방식을 만들어볼 필요가 있다. નાના한 시각 효과나 인터랙션부터 시작해 템플릿 너머의 웹을 구축하는 것이 실용적인 출발점이다.

원문 읽기(새 탭에서 열림)

oklchCSSwebglsvg+4