머티리얼 디자인 - 다크 테마
Material Design - Dark Theme
최근 공개된 구글 머티리얼 디자인의 다크 테마 번역본입니다. 다크 테마를 적용하기 위한 자세한 원리와 적용 법에 대해 적혀 있습니다. 의역이 다수 있으며 영어로 명확히 이해하시려면 아래 링크를 통해 읽어보시기 바랍니다.
https://material.io/design/color/dark-theme.html#
다크 테마
다크 테마는 어두운 화면을 표시하는 저조도 UI입니다.
콘텐츠
용례
아나토미
행동
속성
UI 적용
커스텀 애플리케이션
상태
리소스
적용
용례
다크 모드는 UI의 대부분이 어두운 화면을 표시합니다. 기본(밝은) 테마를 보조하기 위한 모드로 디자인됐습니다.
다크 테마는 화면에서 내뿜는 빛의 량을 줄이면서도 최소한의 색상 대비율을 유지합니다. 이 방식으로 눈의 피로도를 줄이고, 현재 빛의 조건에 맞춰 밝기를 조정하며, 어두운 환경에서도 편하게 스크린을 사용할 수 있습니다. 또한 OLED 스크린을 사용하는 기기에서 사용하지 않는 검은 픽셀을 꺼 배터리를 아낄 수 있습니다.
원리
회색으로 어둡게
검정보다 어두운 회색을 사용해 더 넓은 범위로 높이와 공간을 표현할 수 있습니다.
색으로 강조
다크 테마 UI에서는 제한된 색을 사용하며, 대부분의 표면은 어둡게 표시합니다.
에너지 절약
효율성이 필요한 프로덕트에서는 빛을 내는 픽셀 사용을 줄여 배터리 수명을 늘릴 수 있습니다.
접근성 향상
색상 대비 접근성 표준을 지켜 일반적인 다크 테마 사용자(시력이 약한 사용자)도 사용할 수 있습니다.
속성
https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html
머티리얼 디자인 다크 테마는 아래 속성을 따릅니다:
대비: 어두운 표면과 100% 하얀 body 텍스트는 최소한 15.8:1의 대비 단계를 가집니다.
깊이: 높이의 단계가 높아질수록 컴포넌트에 밝은 표면 색상을 표시해 깊이를 표현합니다.
색상 빼기: 주색상은 채도를 낮춰 본문 텍스트를 사용할 때 모든 높이에서 최소한 4.5:1 대비의 웹 콘텐츠 접근성 가이드라인(WCAG) AA표준을 지킵니다.
제한된 색상: 넓은 면적에는 어두운 표면 색을 사용하며 제한된 강조색으로 밝은 색(희고 채도가 낮은)과 선명한 색(밝고 고채도의 색)을 사용합니다.
아나토미
다크 테마 UI는 주로 어두운 표면에 어두운 강조색을 사용합니다. 빛을 적게 방출하면서도 높은 사용성 표준을 준수합니다.
1. 배경 (0dp 높이 표면 오버레이)
2. 표면 (1dp 높이 표면 오버레이)
3. 주색
4. 보조색
5. 배경 위
6. 표면 위
7. 주색 위
8. 보조색 위 색상
행동
다크 테마는 컨트롤을 표시해 켜고 끌 수 있습니다.
눈에 띄는 토글 아이콘을 사용해 테마를 켜고 끌 수 있습니다.
눈에 띄는 것을 줄이기 위해 메뉴나 세팅에 토글을 배치할 수 있습니다.
상단 앱 바의 다크 테마 토글
오버플로우 메뉴 내부의 다크 테마 토글
앱 세팅 내부의 다크 테마 토글속성
다크 테마는 컴포넌트의 표면에 검은색이 아닌 어두운 회색을 사용합니다. 어두운 회색 표면은 그림자를 표현하기 쉽기 때문에 더 넓은 범위의 색, 높이 및 깊이를 표현할 수 있습니다.
또한 어두운 회색 표면은 또한 검은색보다 밝은 텍스트와 대비가 낮기 때문에 눈의 피로를 덜 수 있습니다.
추천 다크 테마 표면 색 #121212높이
https://material.io/design/environment/elevation.html#elevation
어두운 테마에서도 컴포넌트는 밝은 테마와 동일한 기본 높이와 그림자를 유지합니다. 그러나 어두운 테마에서는 다양한 레벨의 표면을 표시하는 방식이 다릅니다.
높이가 높아질수록 밝아지는 표면
표면의 높이가 높아질수록(설정한 광원에 가까워질수록) 표면이 밝아집니다. 이 밝기는 반투명한 흰색 오버레이를 적용해서 표현합니다.
표면의 높이가 높아지면 색이 밝아집니다.
다크 모드 표면은 컴포넌트의 표면에 반투명한 레이어를 오버레이해 구성합니다.
표면에 반투명한 흰색 오버레이를 적용해 밝게 만듭니다.
1. 표면
2. 높이 오버레이
표면 위의 오버레이는 컴포넌트와 그림자를 구분하기 쉽게 만들어 줍니다. 오버레이는 표면과 그림자 간의 대비를 추가해 각 표면의 가장자리를 더 분명하게 표시해줍니다.
기본 테마는 그림자로 높이를 표현하며, 다크 테마는 표면의 색을 조정해 높이를 표현합니다.
아래 오버레이 값은 가독성을 높이면서 서로 다른 높이를 구분할 수 있게 디자인되었습니다.
높이를 표현하는 오버레이 투명도는 0%부터 16%까지 사용합니다.오버레이는 서로 다른 컴포넌트의 높이를 명확하게 합니다.
A. 5% 오버레이를 사용한 1dp 높이의 카드
B. 오버레이를 사용하지 않은 6dp 높이의 보조색 플로팅 액션 버튼
C. 12% 오버레이를 사용한 8dp 높이의 하단 앱 바
주색과 보조색을 사용한 컴포넌트 표면에 오버레이의 높이를 적용하지 않습니다.
다크 모드에서는 그림자를 어둡게 유지해 명확하게 그림자가 드리워지는 것을 표현합니다.
Don't
표면 컨테이너에 주색과 보조색을 사용한 경우 높이 오버레이를 사용하지 마세요.
높이를 표현하기 위해 어두운 그림자에 밝은 빛을 사용하지 마세요. 그림자가 드리워지는 것을 명확하게 표현할 수 없습니다.접근성과 대비
https://material.io/design/usability/accessibility.html#accessibility
다크 테마의 표면은 흰색 텍스트를 표시할 수 있을 만큼 어두워야 합니다. 텍스트와 배경이 최소한 15.8:1의 대비 수준을 유지해야 합니다. 이 방식으로 가장 높은 높이의 표면에 색을 적용했을 때 본문 텍스트가 WCAG의 AA 표준을 4.5:1로 통과할 수 있습니다.
브랜드에 맞춘 어두운 표면을 만들기 위해서는 권장하는 다크 테마 표면 색 (#121212) 보다 낮은 불투명 도로 브랜드 색을 오버레이 합니다. 색 #1F1B24는 다크 테마 표면 색상 #121212와 기본 색 8%를 결합한 결과입니다.
배경색이 충분히 어둡지 않아 15.8:1의 명암비를 유지하지 않으면 가장 높이가 높아 밝은 표면에 표시되는 텍스트가 4.5:1 대비 표준을 통과할 수 없습니다.
경고
본문이 가장 높은 표면 (24dp)에서 최소 4.5 : 1 (AA) 이상의 명암 수준을 유지할 수 있도록 배경색이 충분히 어두운지 확인하십시오.
효율적인 배터리 사용이 필요한 UI는 완전히 검은색을 사용할 수 있습니다. OLED 스크린을 사용하는 웨어러블과 같은 기기는 배터리를 절약하기 위해 검은색으로 표시된 모든 픽셀을 끌 수 있습니다.
경고
OLED 스크린에서 픽셀을 켜고 끄면 화면이 스크롤될 때 지연이 발생해 픽셀이 흐려질 수 있습니다.
UI 적용
https://material.io/design/color/text-legibility.html#legibility
모든 다크 테마 색은 모든 단계의 표면에 본문 텍스트를 적용했을 때 WCAG의 AA 표준을 최소 4.5:1로 통과할 수 있도록 충분한 대비를 주어야 합니다.
접근성을 위한 저채도 색상
다크 테마는 WCAG의 접근성 표준을 4.5:1의 표면과 본문 텍스트의 대비를 지키기 위해 고채도 색 사용을 피해야 합니다. 고채도 색은 어두운 배경에 사용했을 때 광학적 진동을 일으켜 눈의 피로도를 증가시킬 수 있습니다.
대신 보다 읽기 쉽도록 저채도 색상 할 수 있습니다.
팔레트에서 저채도 색을 사용해 가독성을 높이고 시각적인 진동을 줄일 수 있습니다.
Don't
어두운 배경에 시각적인 진동이 높은 고채도의 색을 사용하는 것을 피하세요.
주색
https://material.io/design/color/the-color-system.html#the-color-system
주색은 앱의 화면과 컴포넌트에서 가장 많이 표시하는 색입니다. 머티리얼 디자인의 다크 테마는 기본색의 번호 200의 톤을 사용합니다. (모든 높이의 표면에서 일반 텍스트가 4.5:1의 WCAG AA 표준을 통과함)
샘플 다크 테마 주요 팔레트
1. 주색
2. 색조 변형
주색 변형
밝은 표면의 컴포넌트는 다크 테마의 주색을 변형해 표시할 수 있습니다.
이 다크 테마 UI는 주색(Purple 200)과변형 색(Purple700)을 사용했습니다.보조색
보조색을 사용하여 UI의 일부분을 강조할 수 있습니다. 다크 테마에서 보조 색은 4.5 : 1 대비 수준을 충족시키기 위해 채도가 떨어질 수 있습니다.
샘플 다크 테마 보조색 팔레트
1. 보조색
2. 색조 변형
이 UI에서는 주색과 변형한 보조색을 사용했습니다.강조색
다크 테마는 대부분의 UI가 어둡습니다. 강조색은 일반적으로 밝은(저채도의 파스텔) 색이거나 선명한(고채도의 생생한) 색으로 요소를 눈에 띄게 강조합니다. 텍스트나 버튼과 같은 중요 요소들을 강조할 때만 사용해야 합니다.
강조색 찾기
color palette generator로 색 테마를 만들어 볼 수 있습니다. 또한 주색과 보조색으로 밝은 색에서 어두운 색까지 다양한 단계의 팔레트를 만들 수 있습니다. 여기서 만든 것들을 변형해 다크 테마에 적용할 수 있습니다.
다크 테마에서 더 유연하게 색을 사용하려면 기본 색 테마(900-500 고채도 톤)보다는 다크 테마의 밝은 톤(200-50)을 사용하는 것이 좋습니다.
1. 기본 테마 주색
2. 다크 테마 주색
Do
브랜드 컬러
https://material.io/design/material-studies/owl.html#owl
브랜드 아이덴티티를 지키기 위해 다크 모드에서 로고나 버튼과 같이 1~2개의 브랜드 요소에만 제한을 두고 본래 채도를 유지해 사용할 수 있습니다. 브랜드 컬러를 제약을 두어 사용해 계층 구조에서 눈에 잘 띄게 됩니다.
다크 테마 UI의 다른 영역에서는 저채도의 색이 유지되어야 합니다.
다크 테마를 위한 저채도 주색이 적용된 텍스트 (1) 브랜드 컬러의 채도가 유지되어 적용된 플로팅 액션 버튼 (2)
1. 다크 테마 주색
2. 브랜드 컬러
다크 테마 베이스라인 팔레트
머티리얼 기본 테마에는 다크 테마 팔레트가 포함됩니다.
다크 테마 UI는 다음 사항을 따라 사용해야 합니다.
색 (주색, 보조색, 주색의 변형)
표면 (배경과 컴포넌트)
상태 (오류와 같은 상태)
콘텐츠 (서체와 아이콘)
다크 테마 베이스라인 머티리얼 컬러 테마
1. 머티리얼디자인 베이스라인 기본 테마2. 머티리얼베이스라인 다크 테마오류 색
오류 색은 오류 상태를 표시할 때 사용합니다. 머티리얼 베이스라인 다크 테마의 오류 색은 #CF6679입니다.
위다크 테마색은 밝은 테마의오류 색(#B00020)과40% 밝기의 흰색 오버레이를 사용해 AA 대비 표준을 통과했습니다.서체와 아이콘 색
"On" 색
"On" 색은 주색, 보조색 혹은 오류 색을 사용하는 표면의 위에 사용하는 텍스트, 아이콘, 선의 색입니다.
기본적으로 타크 테마의 "on" 색은 흰색과 검은색입니다.
텍스트와 아이콘을 위한다크 테마베이스라인 컬러 UI 디스플레이검은 배경의 밝은 텍스트
어두운 배경에 밝은 텍스트를 사용할 때 (여기에서는 검정 위의 흰 색상일 경우) 아래 투명도 단계를 따라야 합니다.
강한 강조 텍스트 87% 투명도
중간 강조 텍스트 60% 투명도
비활성 텍스트 38%
강한 강조, 중간 강조, 비활성 텍스트커스텀 적용
몇몇 머티리얼 디자인 적용 사례로 다크 테마 요소를 편하게 사용할 수 있습니다.
넓은 면적
https://material.io/design/components/app-bars-bottom.html#bottom-app-bar
https://material.io/design/components/backdrop.html#backdrop
앱 바나 백드롭 같이 스크린의 넓은 면적을 사용하는 컴포넌트는 컴포넌트의 표면 색으로 다크 테마를 사용할 수 있습니다.
밝은 테마와 어두운 테마 함께 사용하기
https://material.io/design/components/snackbars.html#snackbar
다크 테마에서 밝은 표면이 필요할 때, 선택한 컴포넌트의 표면에 밝은 색을 사용해 계층 구조를 유지할 수 있습니다. 예를 들어 다크 테마 스낵바는 눈에 띄게 하기 위해 밝은 테마의 표면 색을 적용할 수 있습니다.
상태
https://material.io/design/interaction/states.html#states
오버레이를 사용해 컴포넌트의 상태나 상호작용 가능한 요소의 상태를 시각적으로 표현할 수 있습니다. 다크 모드에서는 기본(밝은) 테마와 같은 오버레이 속성을 사용해 AA 대비 표준을 통과할 수 있습니다.
상태를 표시하는 두 가지 종류의 컨테이너가 있습니다: 표면 색을 사용하는 컨테이너, 주색을 사용하는 컨테이너
표면 컨테이너
표면 컨테이너는 컨테이너 내부에 사용하는 아이콘과 텍스트 라벨 색과 매치되는 "Surface'라 불리는 색을 사용합니다.
주 컨테이너
주색을 사용하는 표면 컨테이너에는 흰색 상태 오버레이를 사용합니다.
비활성 상태
모든 비활성 컴포넌트는 컨테이너의 외곽선과 채움 색에 12% 투명도의 흰색을 사용하며 라벨과 아이콘에 38% 투명도의 흰색을 사용합니다.
1. 아웃라인 컨테이너: 12% 흰색
2. 라벨/아이콘: 38% 흰색
3. 채움 컨테이너: 12% 흰색
