theming

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

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

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

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)를 적극 활용하고, 디자인과 엔지니어링이 공통으로 사용하는 토큰 관리 체계를 만드는 것이 장기적인 유지보수 비용을 줄이는 핵심입니다.