dark-mode

디스코드 테마를 변경 (새 탭에서 열림)

디스코드는 사용자가 데스크톱과 모바일 환경 모두에서 자신만의 개성을 표현할 수 있도록 앱의 시각적 테마 기능을 강화했습니다. 모든 사용자는 네 가지 기본 테마를 자유롭게 선택할 수 있으며, 니트로(Nitro) 구독자에게는 더욱 폭넓은 색상 옵션과 커스텀 기능이 제공됩니다. 이를 통해 기존의 단순한 라이트·다크 모드를 넘어 더욱 다채로운 사용자 인터페이스 환경을 구축할 수 있게 되었습니다. **사용자 권한에 따른 테마 선택 폭** * **일반 사용자:** 앱의 룩앤필을 변경할 수 있는 4가지 기본 테마가 모든 사용자에게 무료로 제공됩니다. * **니트로 멤버 전용 혜택:** 니트로 구독자는 기본 테마 외에 28가지의 추가 컬러 테마를 즉시 사용할 수 있습니다. * **커스텀 테마 제작:** 니트로 멤버는 제공된 프리셋을 사용하는 것에 그치지 않고, 본인의 취향에 맞는 고유한 커스텀 테마를 직접 제작하여 적용할 수 있습니다. **설정 편의성 및 플랫폼 호환성** * **멀티 디바이스 지원:** 테마 설정은 데스크톱 앱과 모바일 앱 모두에서 동일하게 적용되어 어디서든 일관된 시각적 경험을 유지합니다. * **직관적인 인터페이스:** 기존의 라이트 모드나 다크 모드를 전환하던 방식과 동일하게 설정 메뉴에서 간편하게 새로운 테마를 탐색하고 적용할 수 있습니다. 기존의 단조로운 배경색에서 벗어나 자신만의 소통 환경을 꾸미고 싶다면 디스코드 설정의 테마 메뉴를 확인해 보시기 바랍니다. 특히 니트로 사용자라면 제공되는 다양한 색상 조합과 커스텀 기능을 활용해 최적화된 시각적 분위기를 연출해 보는 것을 추천합니다.

달리는 기차 바퀴 칠하기: 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를 연동하여 디자이너가 컬러를 수정하고 커밋하면 모든 플랫폼의 코드가 자동으로 생성되도록 구축했습니다. - **실험적 환경**: 개발자의 수동 작업 없이도 디자이너가 직접 토큰을 변경하고 빠르게 실험할 수 있는 환경을 만들어 디자인 시스템의 운영 효율을 극대화했습니다. 성공적인 디자인 시스템 개편을 위해서는 단순한 심미적 수정을 넘어, 데이터 기반의 색공간 설계와 엔지니어링 관점의 자동화가 필수적입니다. 특히 비즈니스가 확장되는 시점이라면 컬러 시스템을 개별 컴포넌트가 아닌, 모든 플랫폼을 관통하는 하나의 '코드'이자 '인프라'로 접근하는 태도가 필요합니다.

기능 비하인드: 찾 (새 탭에서 열림)

Figma의 다크 모드 도입은 단순한 색상 변경을 넘어, 수년간 쌓인 레거시 코드의 하드코딩된 색상 값을 체계적인 디자인 토큰 시스템으로 전환하는 대규모 엔지니어링 프로젝트였습니다. 이들은 수천 개의 색상 변수를 수동으로 수정하는 대신, 의미론적(Semantic) 명명 규칙과 자동화된 코드 수정 도구를 활용해 유지보수가 용이한 아키텍처를 구축했습니다. 결과적으로 Figma는 단일 테마의 제약에서 벗어나 다크 모드를 포함한 멀티 테마를 유연하게 지원할 수 있는 기술적 기반을 마련했습니다. ### 디자인 토큰 시스템 구축 - 하드코딩된 헥스(Hex) 코드 대신 의미를 담은 '디자인 토큰'을 도입했습니다. 단순한 색상값(예: `#FFFFFF`)이 아니라 역할(예: `bg-primary`)에 기반한 이름을 부여했습니다. - 토큰 구조를 '기본 값(Base)', '의미론적 값(Semantic)', '컴포넌트 특정 값(Component-specific)'의 계층으로 나누어 관리함으로써 확장성을 높였습니다. - JSON 형식을 사용하여 디자인과 엔지니어링 팀 간의 단일 진실 공급원(Single Source of Truth)을 구축하고, 이를 통해 다양한 플랫폼에 일관된 색상을 적용했습니다. ### 하드코딩된 레거시 코드의 자동화된 마이그레이션 - 코드베이스 내에 흩어져 있던 수천 개의 하드코딩된 색상 값을 찾기 위해 정규 표현식과 추적 도구를 활용했습니다. - '코드모드(Codemods)'를 제작하여 수동 수정의 위험을 줄이고, 기존의 Hex 코드를 적절한 CSS 변수(Variable)로 자동 교체했습니다. - 단순 일대일 매칭이 불가능한 경우(같은 흰색이라도 배경인지 경계선인지에 따라 토큰이 달라지는 경우)를 해결하기 위해 엔지니어가 직접 문맥을 확인하는 프로세스를 병행했습니다. ### CSS 변수 기반의 실시간 테마 전환 - 런타임에서 테마를 즉각적으로 변경하기 위해 CSS 커스텀 프로퍼티(Custom Properties)를 사용했습니다. - 최상위 루트 요소에 테마를 결정하는 클래스(예: `.theme-dark`)를 부여하고, 하위 요소들이 해당 스코프 내의 CSS 변수 값을 참조하도록 설계했습니다. - DOM 요소뿐만 아니라 HTML Canvas와 같이 CSS 변수를 직접 사용할 수 없는 복잡한 렌더링 환경에서도 테마 시스템이 연동될 수 있도록 별도의 브릿지 로직을 구현했습니다. ### 기술적 부채 해결과 향후 확장성 - 다크 모드 프로젝트를 통해 발견된 수많은 유령 색상(사용되지 않거나 중복된 색상)을 정리하여 코드의 청결도를 높였습니다. - 새롭게 구축된 시스템은 향후 '고대비 모드'나 '브랜드 테마' 등 또 다른 테마를 추가할 때 최소한의 코드 수정만으로 대응할 수 있는 구조를 갖추게 되었습니다. **실용적인 제언** Figma의 사례는 대규모 서비스에서 다크 모드를 도입할 때 단순한 스타일 추가가 아닌 **'의미론적 토큰화'**가 선행되어야 함을 보여줍니다. 초기 구축 단계에서 자동화 도구(Codemods)를 적극 활용하고, 디자인과 엔지니어링이 공통으로 사용하는 토큰 관리 체계를 만드는 것이 장기적인 유지보수 비용을 줄이는 핵심입니다.