최대한 적은 노력으로 다크 모드를 구현하는 방법

원문 : https://uxdesign.cc/dark-mode-with-design-tokens-8d7b9d9753a

Dark mode with design tokens

소개: 다크 모드란 무엇입니까?

다크 모드는 높은 수준의 유용성을 유지하면서 낮은 수준의 빛을 방출합니다.

출처: Material.io ¹

Google의 머티리얼 디자인 문서의 인용문에서 추측할 수 있습니다. 단순히 어두운 테마입니다. 주로 검정과 회색으로 구성된 색상 팔레트를 사용합니다. 때때로 흐릿한 강조 색상은 브랜드를 제품에 다시 가져옵니다.

그 결과 빛의 수준이 낮아져 배터리 성능이 향상되고 눈의 피로가 줄어들며 접근성이 향상될 수 있습니다.

다크 모드가 필요한 이유는 무엇입니까?

다크 모드 없이도 제품을 사용할 수 있지만 다크 모드를 추가하는 데 찬성하는 주장이 많습니다.

사용자의 기대

다크 모드 구현이 너무 쉬워져 표준이 되었습니다. 사용자는 모든 제품이 그것을 제공하기를 기대합니다.

다크 모드가 없으면 제품이 부정적인 방식으로 튀어나올 것입니다. 누락된 다크 모드는 낮은 제품 품질과 관련이 있을 수 있습니다. 사실이 아니더라도 사용자가 제품과 브랜드에 대해 느끼는 감정에 영향을 미칠 수 있습니다.

접근성

접근성이 일반적으로 더 좋지는 않지만 많은 소식통에 따르면 다크 모드는 일부 조건 ⁹을 가진 사람들에게 도움이 됩니다. 예를 들어 다음을 경험하는 사람들의 경우:

• 꺼질 것 같은
• 광 공포증 (밝은 빛으로 인한 불편)
• 눈의 피로
• 흐린 시력

그러나 다크 모드는 시각 장애가 없는 사용자를 위해 시각적 인체 공학을 향상시킬 수도 있습니다. 예를 들어 특히 어두운 환경에서 눈의 피로를 줄입니다. 이는 다크 모드를 사용할 때 화면에서 방출되는 휘도가 감소하기 때문입니다.

어두운 테마는 장치 화면 [...]에서 방출되는 휘도를 줄입니다. 눈의 피로를 줄여 시각적 인체 공학을 개선하는 데 도움이 됩니다. […]

출처: material.io ¹

향상된 배터리 수명

일부 화면, 특히 OLED 화면(예: 스마트 워치)에서는 검은색 픽셀이 완전히 꺼집니다. 이렇게 하면 화면에 필요한 에너지 양이 줄어들고 장치를 다시 충전해야 할 때까지 시간이 연장됩니다.

다크 모드를 활성화하는 방법은 무엇입니까?

사용자가 어두운 모드에서 제품을 볼 수 있도록 하려면 밝은 모드와 다크 모드 사이를 전환하는 방법을 제공해야 합니다. 이것은 설정이나 헤더 또는 메뉴 내에서 토글을 통해 수행되었습니다.

그러나 다크 모드에는 시스템 기능이 있으므로 시스템 설정에 편승할 수 있습니다. 

어둡고 밝은 테마 구현

시맨틱 토큰으로 다크 모드를 무료로 만듭니다.

우리가 원하는 것은 우리가 구축하는 모든 새 구성 요소에 대해 "무료" 다크 모드입니다. 이를 위해 시맨틱 디자인 토큰 ¹¹ 에 의존합니다 . 시맨틱 토큰은 현재 모드에 따라 다른 기본 토큰(읽기: 색상 값)을 참조합니다.

시맨틱 토큰이 있는 다크 앤 라이트 모드

시맨틱 토큰의 개념은 이름이 용도를 암시한다는 것입니다(예: color-bg-canvas또는 color-text-default). 반대로 기본 토큰의 이름은 해당 값을 나타냅니다(예: color-blue-500).

모드를 참조하지 않는 토큰 이름(예: )을 선택 하고 밝음 및 어둠color-text-primary 과 같은 단어를 피 하십시오. 이렇게 하면 모드에 따라 토큰 값을 교환할 수 있지만 동일한 이름을 유지할 수 있습니다.

예를 들어 color-text-primary밝은 모드에서는 검은색이고 어두운 모드에서는 흰색일 수 있습니다. 모드에 따라 팔레트에서 다른 값(기본 토큰)을 참조하여 이를 수행합니다.

다크 모드와 라이트 모드에서 기본 토큰이 참조되는 방법에 대한 스키마

이렇게 하면 토큰을 정의하고 이름을 지정하는 것이 조금 더 복잡해지지만 장기적으로는 비용이 많이 듭니다. 이렇게 하면 모든 구성 요소에 대해 어두운 모드 스타일을 구현하는 것에 대해 걱정할 필요가 없으며 모든 것이 일관됩니다. 또한 사용자는 모드에 자동으로 조정되는 시맨틱 토큰으로 작업할 수 있습니다.

예를 들어 누군가가 카드 구성 요소를 만들 때 그녀는 color-surfaces카드 채우기에 사용할 것입니다. 이렇게 하면 밝은 모드에서는 자동으로 흰색으로 바뀌고 어두운 모드에서는 검정 회색( )보다 약간 더 밝아집니다 grey-800.

웹에서

이 개념을 웹 제품에 구현하는 방법을 살펴보겠습니다. prefers-color-scheme몇 가지 색상과 그림자만 사용하는 경우 미디어 쿼리가 포함된 단일 파일이 유효한 옵션입니다.

예제에서 볼 수 있듯이 기본 스타일에 대한 시맨틱 토큰이 먼저 정의됩니다. prefers-color-scheme미디어 쿼리 에 래핑된 다른 모드에 대한 토큰을 추가하는 것보다 . 이렇게 하면 미디어 쿼리가 트리거되면 기본 토큰을 덮어씁니다.

시맨틱-tokens.css

더 큰 프로젝트는 종종 어두운 모드와 밝은 모드 사이에서 변경되는 소수 이상의 색상을 사용합니다. 이 경우 단일 파일이 덜 이상적일 수 있습니다.

일반적인 솔루션은 조건부로 밝은 모드 또는 어두운 모드에 대한 적절한 값으로 css 파일을 로드하는 것입니다.

이 접근 방식의 두 가지 주요 이점은 다음과 같습니다.

• 하나의 모드에 대한 토큰만 있으므로 편집하기 쉬운 더 간단하고 짧은 파일
• 필요한 파일만 다운로드되므로 최적화된 다운로드 크기

미디어 쿼리를 사용하여 CSS를 조건부로 로드

light.tokens.css조건부 로딩을 사용하면 및 안에 미디어 쿼리가 필요하지 않습니다 dark.tokens.css. 따라서 다크 모드 파일은 다음과 같습니다.

dark.tokens.css

웹에서 다크 모드 감지

구성 요소 내에서 현재 모드를 감지할 수 있습니다. 이는 사용자 지정 스타일을 추가하는 데 도움이 될 수 있습니다. 예를 들어 밝은 모드에서는 기본 색상을 사용하지만 어두운 모드에서는 어두운 회색을 사용하는 헤더의 경우입니다.

가능하면 이 접근 방식을 사용하지 마십시오. 유지 관리가 더 복잡해집니다. 각 구성 요소 파일을 살펴보고 디자인 토큰의 이점을 없애거나 적어도 줄여야 합니다. 그러나 드문 경우에 다른 좋은 방법이 없었습니다. 이것이 당신이하는 방법입니다.

CSS: 미디어 쿼리 사용

토큰 파일에서 사용한 prefers-color-scheme미디어 쿼리는 구성 요소에서도 사용할 수 있습니다. 미디어 쿼리 내에서 구체적으로 밝거나 어두운 모드를 대상으로 지정할 수 있습니다.

JS: matchMedia로 다크 모드 감지

를 사용 matchMedia하면 특정 미디어 쿼리가 활성화되어 있는지 확인할 수 있습니다. 우리의 경우 이것은 prefers-color-scheme어둡거나 밝은 모드에 대한 미디어 쿼리가 됩니다. matchMediatrue 또는 false를 반환하며 이를 와 같은 변수에 저장할 수 있습니다 darkMode.

matchMedia를 사용하면 js에서 미디어 쿼리가 참인지 확인할 수 있습니다.

이것은 js에서 사용자 정의 모드 스위치를 작성하지 않고 사용자 기본 설정을 얻는 좋은 방법입니다. 사용자가 기본 설정을 설정하지 않았을 수 있음을 염두에 두십시오. 기본값이 아닌 모드만 확인하는 것이 가장 좋습니다. false인 경우 기본값이 true라고 가정합니다.

색 구성표 메타 태그

확인란 이나 라디오 버튼 과 같은 표준 양식 요소를 사용 하면 문제가 발생합니다. 사용자가 설정을 어두운 모드로 변경해도 양식 요소는 변경되지 않습니다. 물론 사용자 지정 구성 요소를 구축하거나 양식 요소¹²의 스타일을 지정하는 현대적인 방법에 의존할 수 있지만 더 쉬운 방법이 있습니다. color-scheme메타 태그¹³ .

html 헤드에 추가함으로써 브라우저는 귀하의 웹사이트가 어둡고 밝은 모드를 지원한다는 것을 알게 됩니다. 이제 브라우저는 양식 요소를 어둡거나 밝은 모드로 전환하여 웹 사이트에서 작동합니다.

사용자 의 prefers-color-scheme속성이 설정되어 있지 않으면 기본 테마가 사용됩니다. 이를 CSS 전략과 일치시켜야 합니다.

모바일

모바일에서는 접근 방식이 조금 다릅니다. iOS와 Android 모두 리소스 중심 접근 방식을 사용합니다. 이는 프레임워크가 올바른 파일 또는 변수를 자동으로 로드함을 의미합니다. 코드에는 항상 동일한 변수와 파일을 사용할 수 있습니다. 그러나 모드에 따라 값이 다를 수 있습니다.

이는 기존 앱에 다소 쉽게 다크 모드를 추가할 수 있으므로 매우 편리한 접근 방식입니다. 적어도 불가지론적인 방식으로 색상을 설정했다면.

Android

Android는 미리 정의된 폴더 구조에 배치된 xml 리소스를 사용합니다.

리소스를 저장하기 위한 색상, 값 및 드로어블과 같은 다양한 폴더가 있습니다. 한정자로 폴더를 접미사로 지정하여 -nightAndroid에 어두운 모드임을 알릴 수 있습니다. 시스템은 라이트 모드 및 기본값(예: drawable-night존재하지 않는 경우)에 대해 이 한정자가 없는 폴더를 사용합니다.

시스템이 매우 편리합니다. 색상 정의(예: "배경")가 있는 xml을 color및 에 배치 color-night합니다. 개발자는 배경을 참조하고 Android는 어둡거나 밝은 모드에 대한 올바른 값을 제공합니다.

Android xml 및 드로어블 리소스에 대한 몇 가지 공통 폴더

Android 다크 모드 감지

일반적으로 현재 모드에 따라 변경되는 리소스를 사용하는 것이 가장 좋습니다. 그러나 때로는 구성 요소 내에서 활성화된 모드를 감지해야 합니다.

Android에서는 구성 ¹⁴ 을 읽어서 가능합니다.

안드로이드에서 다크 모드 감지

Android 설명서 ¹⁵ 에서 현재 모드를 감지하는 방법에 대한 자세한 정보를 얻을 수 있습니다 .

아이폰 iOS

Android와 마찬가지로 iOS(아마도 macOS, watchOS 및 tvOS?)에는 xCode 자산 카탈로그라는 파일 기반 시스템이 있습니다. Android와 달리 iOS는 모든 색상이나 이미지에 전용 파일을 사용합니다. 폴더가 없습니다.

또한 두 가지 유형 ColorSet및 로 제한됩니다 ImageSet.

ColorSet자산 카탈로그는 단순히 ¹⁶ 를 포함하는 .colorset확장자가 있는 폴더입니다. Contents.json이 json 파일 내에서 모드에 대한 다양한 색상이 정의됩니다.

예시 Contents.json

예를 들어 스타일 사전¹⁷을 사용하거나 xCode에서 수동으로 코드로 자산을 생성할 수 있습니다.

앱 코드 내에서 개발자는 항상 그렇듯이 색상이나 이미지를 참조합니다. iOS는 활성화된 모드를 찾아 올바른 값을 제공합니다.

iOS 다크 모드 감지

ColorSchemeiOS 13 이상을 사용하면 ¹⁸ 환경 값 을 통해 현재 모드를 감지할 수 있습니다 . 이 값을 사용하는 좋은 부작용은 값이 변경될 때 이에 의존하는 뷰가 다시 그려지는 것입니다.

Swift에서 다크 모드 감지

JSON을 iOS 및 Android로 변환

스타일 사전 ¹⁹을 사용하면 json을 css 또는 js로 변환하는 것이 매우 간단합니다 .

Xcode 자산 또는 Android xml 리소스 를 생성 하는 것은 조금 더 복잡합니다. 운 좋게도 Danny Banks는 이를 수행하는 방법을 정확히 다루는 환상적인 기사를 작성합니다. " 스타일 사전이 포함된 다크 모드 "¹⁷ 를 읽는 것이 좋습니다 .

figma 예제 ²⁰ 용 디자인 토큰 플러그인 에서 작업 코드 구현을 찾을 수 있습니다 .

요약

결론적으로 다크 모드는 어둡고 채도가 낮은 팔레트를 사용하는 테마입니다. 대비가 높거나 낮을 수 있지만 두 경우 모두 액세스할 수 있어야 합니다.

주요 이점 중 일부는 다음과 같습니다.

• OLED 화면의 배터리 절약
• 사용자의 기대를 충족하고 최신 OS에 적합
• 특히 어두운 환경에서 사용할 때 눈의 피로 감소
• 일부 사용자를 위한 잠재적인 접근성 개선. 예를 들어 흐린 시력, 광선 공포증이 있거나 조명 모드에서 깜박임을 경험하는 사용자

가장 쉬운 구현은 현재 시스템 모드를 읽고 그에 따라 디자인 토큰을 전환하는 것입니다. 이것은 대부분의 제품에 충분합니다. 하루 종일 사용하는 미디어나 독서 앱 또는 제품은 수동 모드 전환을 고려할 수 있습니다.

 

 

 

소호플렉스(Sohoflex) 웹 에이전시
홈페이지 제작, 모바일 앱 제작, SI솔루션 개발, 온라인 마케팅 전문 디지털 트랜스포메이션 회사입니다.