문정호

문정호님의 아티클

문정호

문정호

프로덕트에서 다크모드를 추구하면 안되는 걸까? (1)

no-answer.png

프로덕트 개발에 있어서 노답 삼형제같은 존재들이 있습니다.

  1. 다크 모드

  2. 국제화, 현지화

  3. 반응형 디자인

이 무서운 친구들은 처음부터 적용하면 할만하지만 이미 있는 프로덕트에 적용하는 것은 디자이너, 개발자 모두에게 악몽과도 같은 일입니다. 몇 개의 포스팅 걸쳐 이러한 문제를 해결할 수 있는 효과적인 전략들을 소개합니다. 그 첫 시작은 다크모드 입니다.

다크모드

tailwind-dark-mode.png

다크 모드는 사용자 경험을 향상시키는데 핵심적인 역할을 합니다. 이는 눈의 피로를 줄이고, 배터리 소비를 낮추며, 시각적으로 매력적인 환경을 제공합니다.

그러나 디자인 시스템에서 다크 모드를 구현하는 것은 복잡하고 시간이 많이 소요될 수 있습니다. 특히, Figma와 같은 디자인 도구를 사용해 수동으로 색상을 조정하는 작업은 번거롭고 수정하기 어려울 수 있습니다.

컬러 네이밍

color-naming.png

컬러 네이밍에는 세 가지 주요 접근 방식이 있습니다: Atomic, Semantic, Contextual.

  1. Atomic 방식은 컬러의 색상(Hue)과 명도(Shade)를 이름에 직접 포함시키는 방법입니다. 예를 들어, 'blue-600', 'emerald-600'와 같은 이름이 여기에 해당합니다. 이 접근법은 컬러를 명확하게 식별하는 데 도움이 됩니다.

  2. Semantic 방식은 컬러의 의도를 반영하여 이름을 붙이는 방법입니다. 예를 들어, 'enabled', 'success'과 같은 이름이 이 방식에 해당합니다. 이 방식은 컬러가 전달하고자 하는 메시지나 역할에 초점을 맞춥니다.

  3. Contextual 방식은 컬러의 사용 상황에 따라 이름을 정하는 방법입니다. 'bg-enabled', 'text-success'처럼 컬러 사용처를 기반으로 명명합니다.

이러한 방식으로 정의된 컬러는 디자인 토큰으로 활용됩니다. 디자인 토큰은 색상, 글꼴, 간격 등과 같은 디자인 관련 값들을 정의하는 데 사용됩니다.

디자인 토큰

design-token.png

단일 네이밍 방식으로 정의된 디자인 토큰은 협업 과정에서 신뢰할 수 있는 단일 정보 소스(Single Source of Truth)를 제공하며, 소통을 용이하게 합니다. 그러나, 이는 각 분야의 생산성을 제한할 수 있습니다.

예를 들어, '#2563eb'라는 컬러를 사용하기 위해 모든 사용자가 'blue-600' 토큰을 사용하는 것보다 아래와 같이 각자의 사용 영역에 맞는 토큰을 사용하는 것이 더욱 효과적일 수 있습니다.

  • BI/BX 디자이너는 Atomic 방식으로 네이밍 된 'blue-600' 토큰을 사용합니다.

  • UI/UX 디자이너는 Semantic 방식으로 네이밍 된 'enabled' 토큰을 사용합니다.

  • 개발자는 Contextual 방식으로 네이밍 된 'bg-enabled' 토큰을 사용합니다.

Google Material, Adobe Spectrum 과 같은 디자인시스템에서는 디자인 토큰을 계층으로 나누어 추상화 시켜 디자인토큰을 더 유연하게 관리할 수 있도록 합니다.

계층적 분류

hierarchical-deisgn-token.png

Google Material 디자인시스템에서는 디자인 토큰을 세 가지 계층으로 분류합니다: Reference Token, System Token, Component Token.

  1. Reference Token은 기본 값을 표현합니다. 컬러의 이름을 그 색상의 실제 특성(예: 색상명과 명도)을 바탕으로 짓는 Atomic 방식에 해당됩니다.

  2. System Token은 Reference Token를 참조합니다. 컬러의 명칭을 그 사용 목적이나 의미(예: 기본 컬러, 강조 컬러)에 따라 정하는 Semantic 방식에 해당됩니다.

  3. Component Token은 System Token을 참조합니다. 컬러의 사용처(예: 텍스트의 기본 색, 에러 메시지의 배경색)에 따라 이름을 정하는 Contextual 방식에 해당됩니다.

이렇게 디자인 토큰의 계층에 컬러 네이밍 전략을 매칭 시킨다면 사용영역에 따라 컬러를 어떻게 구분하고 사용할 지에 대한 명확한 가이드라인을 제시할 수 있습니다.

다크모드 적용

dark-mode-1.png

다크 모드를 구현하는 간단한 방법은 Shade 전환입니다. 예를 들어, shade가 50부터 950까지 정의된 색상에 대해 light 모드에서 'blue-600'을 사용했다면, dark 모드에서는 500을 기준으로 Shade가 전환된 'blue-400'을 정의하면 됩니다.

그러나 디자인 도구나 개발 IDE에서 Light와 Dark 모드의 컬러 토큰을 수동으로 설정하는 것은 반복적이고 수정하기 어렵습니다.

dark-mode-2.png

Reference Token 관점에서는 Light와 Dark 모드를 구별할 필요가 있지만 System Token 이상의 위계에서는 Light와 Dark 모드를 구별할 필요가 없습니다.

System Token이 각각 Light와 Dark 모드에 해당하는 Reference Token을 참조하고 사용한다면 우리는 모드에 따른 컬러 토큰을 일일이 수동으로 설정할 필요가 없을 것입니다. Light, Dark, 그 이상의 모드에서도 말이죠.

다음 글에서는

  • Figma에서 Local Variable을 통해 컬러 토큰을 생성하고 Light와 Dark 모드를 설정할 수 있도록 방법,

  • Local Variable로 설정한 컴포넌트를 React.js/Next.js 환경의 Code syntax로 변경할 수 있는 방법,

  • Tailwindcss를 통해 Component Token을 자동으로 정의하는 방법에 대해 설명 드리겠습니다.

13
1