[UX] 구글 머티리얼 디자인 – 3.5.머티리얼 기초(Material foundation) – 색상(Color): 어두운 테마(Dark theme)
어두운 테마(Dark theme)는 대부분 어두운 표면을 출력한 저조도 UI를 구현한 것을 의미합니다. 밝은 테마(Light theme)에 비해 눈에 주는 피로도를 줄여줄 수 있고, 화면 밝기를 낮추는 효과를 갖기 때문에 기기의 배터리를 절약하는 효과를 나타낼 수도 있습니다.
위 그림은 밝은 테마(Light theme)와 어두운 테마(Dark theme)를 비교한 이미지입니다.
출처: 원문보기
1. 사용법 (Usage)
어두운 테마(Dark theme)는 대부분의 주요 UI에 있어 어두운 표면을 출력합니다. 어두운 테마는 기본 테마 또는 밝은 테마에 추가적인 모드로 지원합니다. 다시 말해, 어두운 테마를 단일 모드로 하여 사용하는 경우는 흔하지 않다는 의미입니다.
어두운 테마는 최소한의 색상 대비를 유지하면서 디바이스 화면의 밝기를 줄여줍니다. 어두운 테마는 인간공학적인 측면에서 현재 주변의 밝기 상태에 따라 화면의 밝기를 조절하면서 눈의 피로도를 줄여줍니다. 어두운 환경에서 화면의 사용을 용이하게 하고, 배터리를 절약할 수도 있습니다. OLED 화면을 가진 디바이스는 검정색 픽셀을 끌 수 있는 것으로서의 이점도 있습니다.
참고로 OLED의 특정 픽셀을 끈다는 것의 의미는 화면의 특정 영역을 태우는 번인현상(burn-in) 등에 유리하다는 의미이기도 합니다.
1.1. 원칙 (Principles)
- 회색을 이용해 암부를 표현하라(Darken with grey): 높이값(Elevation)과 더 깊은 공간감을 표현하기 위해 회색 표현이 사용됩니다. 밝은 테마(Light theme)에서 높이값과 공간감을 표현하기 위한 색상은 검정색으로 표현됩니다. 하지만 어두운 테마에서 검정색을 사용하면 공간감을 표현할 수 없기 때문에 회색을 사용합니다. 이에 대한 설명은 아래 4.1 내용에서 다시 설명합니다.
- 색상을 통한 강조를 표현하라(Color with accents): 어두운 테마의 UI는 제한된 색상을 통해 강조를 표현해야 합니다. 이를 통해 사용자는 어두운 표면에서 주요한 공간이 어디인지 집중할 수 있습니다.
- 에너지를 절약하라(Conserve energy): OLED 스크린을 가진 기기와 같이 효율성을 요구하는 제품에서 밝은 화소의 사용을 줄여 배터리 수명을 늘려야 합니다.
- 접근성을 높여라(Enhance accessibility): 시력이 약한 사람들과 같이 어두운 테마가 필요한 사용자들에게 색상 대비 관련 표준을 적용하여 접근성을 충족시킬 수 있도록 합니다.
1.2. 속성 (Properties)
머티리얼 디자인 어두운 테마(Dark theme)는 다음과 같은 속성으로 정의됩니다.
- 대비(Contrast): 어두운 표면과 100% 불투명도를 갖는 흰색 본문 글씨(100% white body text)는 최소한 15.8:1의 색상 대비(명암비)를 이루어야 합니다.
- 깊이(Depth): 높이값이 높은 수준에서 구성요소(Component)는 표면의 색상이 더 밝게 표면되어야 합니다. 즉, 배경보다 z 축으로 더 위에 출력되는 요소들의 색상이 더 밝게 표면된다는 의미입니다.
- 낮은 채도(Desaturation): 메인색상(Primary color)은 WCAG의 AA 표준을 충족하기 위해 모든 높이값(Elevation) 표현 수준에서 4.5:1 낮은 채도의 색상을 갖어야 합니다. 여기서 채도가 낮다는 것은 색상에 흰색을 섞어 원래 색상 표현을 약하게 만드는 것을 뜻합니다. 모든 높이값 표현이란 서로 다른 높이값을 갖는 표면에 메인색상이 사용된다고 할 때, z 축으로 더 위에 출력되는 요소들의 색상은 더 밝게 표현한다는 속성을 고려한 것으로 이렇게 밝기가 변경된 상태에서도 4.5:1의 채도값을 갖는 색상이어야 한다는 것을 의미합니다.
- 제한된 색상(Limited color): 표면의 크기가 큰 경우, 해당 표면은 제한된 색상을 사용해야 합니다. (밝은 색상, 채도가 낮고 밝은 색상, 채도가 높은 일반 색상) 즉, 표면의 크기가 큰 곳에 상황에 따라 색상의 밝기나 채도에 대한 변형을 제한적으로 해서 적용하라는 의미인 것입니다.
2. 구조 (Anatomy)
어두운 테마의 UI는 대부분 색상을 약간만 강조한 어두운 표면의 색상을 사용합니다. UI는 높은 수준의 사용성을 유지하면서 아주 낮은 밝기로 출력됩니다.
위 그림의 1번 항목은 배경(Background, 0dp의 높이값을 갖는 표면)이며, 2번 항목은 표면(Surface, 1dp의 높이값을 갖는 표면)을 의미합니다. 3번 항목은 메인색상(Primary color), 4번 항목은 보조색상(Secondary color), 5번 항목은 배경 위에 출력 시 색상, 6번 항목은 표면 위에 출력 시 색상, 7번 항목은 메인색상 위에 출력된 색상, 8번 항목은 보조색상 위에 출력된 색상을 각각 나타냅니다.
3. 동작 (Behavior)
어두운 테마(Dark theme)는 표시된 UI 컨트롤(Control)에 의해 켜지고 꺼질 수 있습니다.
- 눈에 띄는 아이콘을 통해 어두운 테마를 끄고, 켤 수 있도록 할 수 있습니다.
- 메뉴나 앱의 설정 내에서 어두운 테마를 끄고, 켤 수 있도록 할 수 있습니다.
이와 같이 어두운 테마를 켜고 끄는 방식은 적용하기에 따라 다양하게 설정할 수 있다는 것을 의미합니다.
위 그림은 앱 바(App bar) 내에 어두운 테마 설정을 위한 아이콘을 배치한 것입니다.
위 그림은 menus 항목 내에 어두운 테마 설정을 배치한 것입니다.
위 그림은 앱의 설정 페이지 내에 스위치 형태로 어두운 테마 설정을 배치한 것입니다.
4. 세부속성 (Properties)
어두운 테마(Dark theme)는 검정색(Black)보다 어두운 회색(Dark grey)을 메인 표면 색상으로 사용합니다. 어두운 회색 표면은 검정색 표면에 비해 그림자를 더 쉽게 볼 수 있게 해주기 때문에 색상, 높이값, 깊이 등을 더 폭넓게 표현할 수 있습니다.
어두운 회색 표면은 눈의 피로도를 줄여줄 수 있습니다. 어두운 회색 표면 위에서 밝은 글자 색상은 검정 표면위에서의 밝은 글자 색상에 비해 색상 대비를 적게 할 수 있습니다.
배경과 글자의 색상 대비가 크다는 것은 글자 색상이 더 도드라지게 보인다는 것을 의미하지만 이것은 눈의 피로도를 높일 수 있기 때문에 상대적으로 어두운 회색과 밝은 글자 색상을 어두운 테마에서 사용하고 있는 것입니다.
위 그림은 어두운 테마(Dark theme)의 표면 색상으로 어두운 회색(#121212)를 추천하고 있습니다.
4.1. 높이값 (Elevation)
어두운 테마에서 구성요소(Component)는 밝은 테마에서의 구성요소의 그림자(Shadows)와 높이값 수준(Elevation levels)과 동일한 값을 사용합니다. 하지만 어두운 테마에서 다른 높이값 수준을 갖는 표면들은 다르게 채색됩니다.
다시 말해, 각 구성요소들은 구성요소에 따라 그림자와 높이값 수준이 다르게 설정됩니다. 예를 들어, 앱 바(App bar)의 높이값과 카드(Card)의 높이값이 다르고, 버튼(Button)의 높이값들은 다르다는 것입니다. 이런 높이값의 차이는 밝은 테마에서와 동일하게 설정된다는 의미입니다. 밝은 테마에서 표면의 색상은 표면의 높이가 다르더라도 기본적으로 흰색 색상으로 표현되는 것과 달리 어두운 테마에서 표면의 색상은 표면의 높이가 달라지면 표면의 색상도 달라진다는 것을 의미합니다. 자세한 설명은 아래 내용에서 다시 설명하겠습니다.
4.1.1. 높이값이 높으면 밝아지는 표면의 밝기 (Higher elevation, lighter surface)
표면의 높이값이 높을수록 표면은 광원(Light source)에 더 근접하게 떠오른다는 것을 의미하기 때문에 표면의 밝기도 더 밝아집니다.
예를 들어, 바닥에 검정색 카드가 있고, 천정에 조명이 있다고 가정해 봅시다. 바닥에 위치한 검정색 카드를 들어올려 천정의 조명에 가까이 갈수록 검정색 카드의 밝기는 더 밝게 표현되는 것을 알 수 있습니다. (정확하게는 검정색에서 더 환한 회색처럼 보일 것입니다.)
어두운 테마에서 높이값이 높아지면 색상이 밝아지는데, 이때 색상이 밝아지는 것은 단순히 색상값이 밝아지는 것은 아닙니다.
높이값이 높아진 표면의 색상이 밝아지는 원리는 표면 위에 흰색(일반적으로 흰색)의 또 다른 반투명 레이어가 출력되는 것과 같습니다. 즉, 높이값이 높아질수록 흰색의 반투명 레이어가 광원에 가까워지기 때문에 더 밝아진다는 의미입니다. 해당 설명은 아래의 높이값에 따른 표면의 색상 변화를 참고하십시오.
어두운 테마의 표면은 구성요소의 표면 반투명 레이어가 중첩되어 표현됩니다.
위 그림에서 표면 위에 흰색의 반투명 레이어가 출력되어 표면의 색상이 표현되는 것을 나타냅니다. 높이값이 변할 때, 표면의 위치값에 대한 표현이 바뀌는 것이 아니라 이 반투명 레이어의 색상 변화를 통해 높이값 표현을 합니다. 그림에서 항목1은 표면을 나타내고, 항목2는 높이값이 적용된 레이어를 타나냅니다.
쉽게 설명해 원래 표면이 있고, 그 위에 반투명 레이어가 덧입혀진 형태로 높이값 변화에 따른 색상이 적용 표현된다는 의미입니다. 또한 기본 테마(밝은 테마)에서 높이값을 그림자로 표현하는 것과 달리 어두운 테마에서는 반투명 레이어의 색의 밝기 변화를 통해 아래 그림에서와 같이 높이값이 달라지는 것을 표현합니다.
표면 위에 레이어는 구성요소들 사이에서 높이값을 구분하고, 그림자를 더 쉽게 볼 수 있도록 합니다. 레이어는 표면들과 그림자 사이에서 각 표면의 가장 자리를 더 명확하게 만들어 색상대비를 높여줍니다.
표면 위에 출력되는 레이어의 값은 서로 다른 표면들의 높이값 수준을 인식가능할 수 있도록함과 동시에 가독성을 최대화하기 위해 설계되었습니다.
위 그림은 각 높이값 수준(Elevation level)에 따른 흰색 레이어의 투명도(Transparency)를 나타냅니다. 높이값이 더 높아질수록 흰색 레이어의 표현이 강해지면서 검정색 표면의 색상이 더 회색에 가까워지는 것을 볼 수 있습니다. 24dp 높이값이 가장 높게 표현되는 높이값인 것을 알 수 있습니다. 높이값 수준에 따른 투명도는 0%에서 16%까지 적용됩니다.
표면 위에 출력되는 흰색의 반투명 레이어는 각 구성요소(예: 카드, 앱 바 등)에 따라 다르게 표현됩니다.
위 그림에서 A는 카드(Cards) 위에 출력되는 흰색 반투명 레이어를 타나내며, 5% 투명도에 1dp 높이에 출력됩니다. B는 반투명 레이어가 없는 Floating Action Button으로 보조색상(Secondary color)가 적용되었고, C는 Bottom app bar로 12%의 흰색 반투명 레이어가 출력되었으며, 8dp의 높이로 출력된 것을 볼 수 있습니다.
여기서 특징은 출력된 흰색 반투명 레이어는 별도의 높이값을 더하지 않도록 설계가 된다는 것입니다. 예를 들어, 원래 카드(Cards)의 높이값은 1dp를 갖도록 설정되어 있는데, 흰색의 반투명 레이어가 이를 대신하는 것과 같은 것입니다. 마찬가지로 Bottom app bar의 높이값은 8dp를 갖도록 설정되어 있는데, 흰색 반투명 레이어 그 자체가 Bottom app bar의 높이값과 동일하게 설정된다는 것을 의미합니다.
즉, 카드(Cards)나 Bottom app bar와 같은 표면이 별도의 높이값을 갖고 그 위에 레이어가 다시 출력되는 개념이 아니라는 것입니다. 해당 내용은 이전의 높이값(Elevation)과 비교해서 확인을 해보면 이해에 도움이 될 것입니다.
높이값을 표현하는 반투명 레이어는 메인색상(Primary color)이나 보조색상(Secondary color)을 적용하는 표면에는 적용하지 않습니다.
또한 어두운 테마에서 그림자는 여전히 검정색으로 나타냅니다. 이 두 가지 개념은 매우 중요하며, 이를 잘 숙지하고 있길 바랍니다.
위의 왼쪽 그림은 보조색상이 적용된 Floating Action Button(NEW ALBUM 버튼)에 흰색 반투명 레이어가 잘못 적용된 사례를 보여줍니다. 위에서 설명했다시피 메인색상이나 보조색상이 적용된 구성요소의 표면에는 높이값을 표현하기 위해 별도의 반투명 레이어가 적용되지 않아야 합니다. 위의 오른쪽 그림은 Bottom app bar의 그림자와 높이값을 표현하는데 밝은색(보라색)을 잘못 적용한 것입니다. 다시 말하지만 그림자는 밝은 테마에서 사용되는 것과 동일하게 어두운 색상으로 표현되어야 합니다. 어두운 테마에서 높이값 표현은 흰색의 반투명 레이어의 밝기로 구분하는 것이지 그림자에 밝은 색상을 적용하여 표현하지 않습니다.
4.2. 접근성과 색상 대비 (Accessibility and contrast)
어두운 테마의 표면은 흰색 글자를 인식할 수 있을 정도로 충분히 어두운 색상이어야 합니다. 표면은 글자와 최소한 15.8:1의 색상대비(명암비)를 사용해야 합니다. 이 값은 표면의 높이값이 가장 높게 적용되어 흰색의 반투명 레이어 위에서 본문의 글자가 출력되는 상황에서 명암비가 4.5:1이 되는 값으로써 WCAG의 AA 표준을 충족할 수 있습니다.
위의 설명에서 표면 위에 출력되는 흰색의 반투명 레이어는 높이값이 높아짐에 따라 흰색을 더 부각시킨다고 설명하였습니다. 이렇게 흰색의 반투명 레이어가 가장 밝아지는 상황에서도 본문의 글자를 인식할 수 있으려면 흰색의 레이어가 없다고 가정했을 때, 글자와 배경색의 명암비가 최소한 15.8:1이어야 한다는 의미인 것입니다.
위 그림은 메인색상을 사용하여 표면의 색상을 별도로 적용하는 방법을 설명하고 있습니다. 별도의 표면 색상을 적용하는 방법은 추천되는 검정색(#121212)위에 메인색상을 8%의 불투명도로 적용한 색상을 중첩시켜서 출력되는 색상값을 사용하는 것입니다. 위 예시에서 이렇게 중첩되어 표현되는 색상이 #1F1B24인 것입니다.
흰색의 반투명 레이어가 출력되는 바탕의 배경색상이 충분히 어둡지 않아 흰색 글자와 표면의 색상 표현 사이에서 15.8:1의 명암비가 충분히 확보되지 못하면, 흰색의 반투명 레이어가 가장 높게 표현되는 상황(24dp의 높이값을 갖는 상황)에서 흰색 글자는 4.5:1의 표준을 통과할 수 없게 됩니다.
위 그림에서 #1F1A24를 배경색으로 지정하고, 흰색의 반투명 레이어가 가장 밝아지는 24dp의 높이값으로 출력된 상황에서 흰색은 타이틀이 되는 글자(Large text), 더보기 아이콘, 본문 글자(Normal text)영역에서 각각 AAA 수준과 AA 수준에서 접근성 표준을 모두 통과하는 것을 보여줍니다.
위 그림에서 #332940을 배경색으로 지정하고, 흰색의 반투명 레이어가 가장 밝아지는 24dp의 높이값으로 출력된 상황에서 흰색은 타이틀이 되는 글자(Large text), 더보기 아이콘에서 AA 수준으로 접근성 표준을 통과할 수 있지만 본문 글자(Normal text) 영역에서 AA 수준을 충족시키지 못해서 접근성 표준을 통과하지 못하는 것을 볼 수 있습니다.
즉, 배경색으로 적용되는 색상이 충분히 어두운 색상으로 지정이 되어야 그 위에 표면의 높이값을 위해 출력되는 흰색의 반투명 레이어가 가장 밝아질 때도 접근성 표준을 충족할 수 있다는 의미가 되는 것입니다.
배터리 사용을 효율적으로 하기 위해서 UI는 순수한 검정색(True black, #000000)으로 표현할 수도 있습니다. 여기서 순수한 검정색이란 다른 색상이 섞이지 않은 검정색 그 자체를 의미합니다.
이 사례에서 OLED 디스플레이를 갖는 몇몇 웨어러블 기기는 배터리를 절약하기 위해 검정색 영역의 픽셀들을 끌 수 있을 것입니다. 이는 일부 OLED 디바이스의 경우 순수한 검정색으로 출력되는 디스플레이의 특정 영역에 전력 공급을 하지 않아서 배터리를 절약할 수 있다는 의미인 것입니다.
위 그림은 표면 영역의 색상을 순수한 검정색으로 설정하여 배터리를 절약하는 사례를 보여줍니다. 다만 이 경우 설계 시 유의할 점이 있는데, 표면의 색상을 순수한 검정색으로 설정할 경우 배터리를 절약하는 효과를 기대할 수 있지만 특정 픽셀이 꺼진 상황에서 스크롤이 발색할 경우 스크롤 동작에 지연이 발생하거나 픽셀들이 흐릿해지는 문제가 생길 수 있다는 것에 유의해야 합니다.
이는 하드웨어 특성상 LED가 켜지고 꺼지는 동작을 해야 되는 상황에서 생기는 문제로 스크롤이 많은 서비스의 색상을 선정할 경우 이에 대한 검토를 해야 한다는 것을 의미합니다.
하지만 개인적인 의견으로 어차피 웨어러블 디바이스에서 일정 부분 발생하는 지연이 배터리 소모에 비해 반사이익이 더 크다고 생각합니다. 디스플레이의 출력 지연이 배터리 소모에 대한 사용자 경험에 비해 치명적이지 않다고 생각하기 때문에 아주 특별히 스크롤이 다수 발생하는 경우가 아니라면 검정색으로 표면의 색상을 설정해도 문제되진 않을 거라고 생각합니다. 설마 웨어러블 디바이스에서 스크롤을 해서 정보 탐색을 하는 경우가 얼마나 많을까 하는 생각도 듭니다.
5. UI에 어두운 테마 적용하기 (UI application)
5.1. 테마 색상 (Theme colors)
모든 어두운 테마 색상은 충분한 명암비를 적용하여 모든 개별 요소(Elements)가 WCAG의 최소 수준인 AA 수준(4.5:1)을 통과할 수 있도록 설계해야 합니다.
5.1.1. 접근성을 위해 낮은 채도값을 갖는 색상 (Desaturated colors for accessibility)
어두운 테마는 WCAG의 접근성 표준을 통과하지 못하는 어두운 표면에서 본문의 명암비가 4.5:1을 충족하지 못하는 채도값이 높은 색상(Saturated colors)의 사용을 피해야 합니다. 어두운 배경색상에서채도값이 높은 색상(Saturated colors)은 광학 진동(Optical vibrations)을 높여 눈의 피로도를 높일 수 있습니다.
대신, 채도가 낮은 색상(Desaturated colors)은 어두운 배경색 위에서 더 높은 가독성을 가질 수 있는 대안으로 사용될 수 있습니다. 앞서 언급했지만 채도가 낮은 색상(Desaturated color)이란 원래 색상에 흰색을 더해 색상을 희석시킨 색상으로 이해하면 됩니다.
위 그림은 채도가 낮은 색상을 글자색상으로 적용하여 배경색과의 명암비를 높여 광학 진동을 줄이고, 가독성을 높일 수 있습니다.
위 그림은 채도가 높은 색상을 글자색상으로 적용하여 어두운 배경색 위에서 글자가 명확하게 구분되지 못하고 시각적으로 글자가 떨리는 것(Optical vibration 또는 visual vibration)과 같은 느낌을 나타내고 있습니다. 어두운 테마에서 채도가 높은 색상을 사용하는 것은 이처럼 권장되지 않는 방식입니다.
5.2. 메인색상의 사용 (Primary color)
메인색상(Primary color)은 앱의 화면(Screen)과 구성요소(Component) 전반에 걸쳐 가장 흔히 사용되는 색상입니다. 머티리얼 디자인 어두운 테마는 모든 높이값의 표면에서 일반적인 글자(Normal text)를 위해 WCAG의 AA 표준(4.5:1)을 통과하는 메인색상 200여개를 사용하고 있습니다.
위 그림은 어두운 테마에서 메인 색상 팔렛트의 예시를 나타냅니다. 항목 1은 메인 색상을 나타내고 있으며, 항목 2는 색조의 변형을 나타냅니다. 참고로 숫자가 낮을수록 채도가 낮은 변형색상을 나타냅니다.
5.2.1. 메인색상의 변형 (Primary color variants)
밝은 표면을 갖는 구성요소(Component)는 어두운 테마의 메인색상을 변형한 변형색상을 출력할 수 있습니다. 이 말의 의미는 어두운 테마에서 대화상자(Dialog)와 같은 구성요소는 흰색으로 밝은 표면을 갖도록 출력됩니다. 이때 메인색상을 어둡게 변형한 색상이 사용될 수 있다는 의미인 것입니다.
위 그림은 어두운 테마에서 메인색상으로 Purple 200(#BB86FC)가 그래프, 숫자, FAB 영역 등에 사용된 것을 나타냅니다. 밝은 표면이 출력되는 상황에서 메인색상을 어둡게 변형한 Purple 700(#3700B3)은 “UNDO”와 같이 글자색상에 반영된 것을 볼 수 있습니다.
즉, 밝은 표면 위에 출력되는 어두운 색상을 나타나는 상황에서 메인색상을 어둡게 변형한 색상값이 사용될 수 있다는 것을 이야기하고 있습니다.
5.2. 보조색상의 사용 (Secondary color)
보조색상은 UI 중 일부를 강조하기 위한 목적으로 사용될 수 있습니다. 어두운 테마에서 보조색상은 4.5:1의 명암비 수준을 충족하기 위해 채도를 낮춰야 할 수 있습니다.
위 그림은 어두운 테마에서 보조색상 팔렛트의 예시를 타나냅니다. 항목 1은 보조색상을 나타냅니다. 항목2는 색조의 변형을 나타냅니다.
위의 그림은 메인색상과 보조색상을 사용한 것을 나타냅니다. 보조색상은 FAB에 적용된 것을 볼 수 있습니다.
5.3. 강조색상의 사용 (Accent color)
어두운 테마에서 어두운 표면은 UI의 주요 영역을 표현합니다. 강조색상은 주로 채도가 낮은 파스텔톤이나 채도는 높지만 밝기가 밝은 색상으로 개별 요소들을 강조하는데 도움이 되는 색상이 사용됩니다. 강조색상은 핵심 글자(Text)나 버튼(Buttons)과 같은 주요 개별요소(Elements)를 강조하는데 사용될 수 있어야 합니다.
5.3.1. 강조색상 찾기 (Finding accent colors)
색상 팔렛트 생성기(Color palette generator)는 색상 테마를 생성하기 위해 사용될 수 있습니다. 색상 팔렛트 생성기는 색상의 어두운 색상과 밝은 색상의 변형 색상들을 선택한 메인색상과 보조색상으로부터 생성합니다. 이러한 변형색상들은 어두운 테마를 위해 사용될 수 있습니다.
위 그림은 색상 팔렛트로부터 생성된 색상의 스펙트럼을 나타냅니다. 어두운 테마에서 더 유연하고 더 사용성을 높이기 위해 200에서 50사이의 밝은 톤의 색상 사용이 추천됩니다. 이는 기본 테마(밝은 테마)에서 권장하는 900에서 500사이의 색상을 권장하는 것과 구분될 수 있습니다.
항목 1은 기본 테마(밝은 테마)에서 메인색상을 나타내며, 항목 2는 어두운 테마(Dark theme)에서 메인색상을 나타냅니다.
위의 왼쪽 그림은 밝은 톤의 색상(200에서 50사이의 색상)은 어두운 테마 표면의 모든 높이값에서 더 나은 가독성을 갖는 것을 보여줍니다. 위의 오른쪽 그림은 어두운 테마에서 채도가 높은 색상(Saturated color) 사용을 어두운 표면 위에서 광학 진동을 유발함에따라 사용을 피하라는 것을 보여주고 있습니다.
위의 왼쪽 그림은 기본 테마(Default theme or light theme)에서 앱 바 영역을 강조하기 위해 메인 색상이 사용된 것을 보여줍니다. 위의 오른쪽 그림은 어두운 테마(Dark theme)에서 앱 바 영역은 메인색상이나 보조색상을 사용하지 않고, 어두운 색상을 사용하고 있는 것을 나타냅니다.
즉, 강조색상의 표현에 있어서도 테마별로 특성이 구분될 수 있다는 것을 타나냅니다.
5.4. 브랜드 색상의 사용 (Brand color)
제품에서 표현하고자 하는 브랜드 색상(Brand color)은 어두운 테마에서 채도를 낮추지 않고, 그대로 사용될 수 있습니다. 물론 브랜드 색상은 앱에서 브랜드를 어필하기 위해 사용하는 로고나 버튼과 같이 1개 또는 2개의 개별요소(Element)로 제한해야만 합니다. 브랜드 색상을 사용하는 과정에서 개별요소들은 기존의 색상 계층 구조 상에 속해야 합니다.
이는 브랜드 색상과 별도의 메인색상, 보조색상을 사용하는 것과 같이 다양한 색상을 아무때나 사용하는 것이 아니라 일반적으로 브랜드 색상이 메인색상이거나 보조색상으로 사용되는 형태의 색상 계층에 속해 있어야 한다는 것을 의미하는 것입니다.
또한 브랜드 색상의 채도가 낮은 색상은 어두운 테마의 UI의 나머지 영역에서 사용되어야 합니다. 이는 색상 계층이 그대로 유지가 되어야 한다는 것을 설명하는 것입니다.
위 그림에서 어두운 테마에서 메인색상이 #FF0266의 채도를 낮춘 색상인 #FF7597로 사용되고 있지만 채도를 낮추지 않은 색상(#FF0266)이 FAB에 그대로 사용된 것을 볼 수 있습니다. 이는 기본 테마(Default theme)에서도 FAB에 동일한 색상을 적용하여 브랜드를 각인시키기 위한 목적으로 통일된 색상을 사용하는 것을 방식으로 제한적으로 이를 허용하고 있는 것입니다.
항목 1은 원래의 취지에 맞게 브랜드 색상을 어두운 테마에서 사용할 수 있도록 채도를 낮춘 색상인 #FF7597을 사용한 것을 나타내며, 항목2는 어두운 테마에도 불구하고 기존의 브랜드 색상인 #FF0266을 그대로 사용하여 표현한 것을 나타냅니다.
여기서 생각해 볼 수 있는 것은 글자와 같이 시각적으로 읽어들여야 하는 경우에는 채도를 낮춘 색상을 사용해 글자가 떨리는 것처럼 보이는 것을 방지하고 있으며, 아이콘이나 버튼과 같이 시각적으로 콘텐츠를 읽어들여야 하는 영역이 아닌 곳에는 제한적으로 원래의 채도를 갖는 브랜드 색상을 사용할 수 있다는 것입니다. 이는 머티리얼 디자인이 색상을 적용하는 것에 있어 디자인의 기능성이 사용성보다 우선하지 않는다는 것을 강조하고 있는 것으로 이해해야 합니다.
5.5. 어두운 테마에서 사용하는 기본색상값 (The dark theme baseline palette)
머티리얼 디자인에서 어두운 테마를 위해 기본이 되는 테마는 색조 팔렛트를 포함합니다.
어두운 테마 색상은 어두운 테마의 UI 전반에 걸쳐서 사용되어야 하며, 이러한 UI는 다음을 포함합니다.
- 색상 (메인색상, 보조색상, 메인색상의 변형색상)
- 표면 (배경색상, 구성요소 색상)
- 상태 (오류와 같은 상태 표시 관련 색상)
- 콘텐츠 (글자, 아이콘 등의 색상)
위 그림은 머티리얼 색상 테마 중 어두운 테마를 위한 기본값들을 나타냅니다. 주목할만한 부분은 배경색과 표면의 색상으로 검정색을 사용할 때, 순수 검정색(True black, #000000)이 아니라 #121212를 사용한다는 것입니다. 이는 위에서도 설명했지만 배터리 효율을 높이면서 화면이 움직일 때 지연을 줄이기 위한 조치입니다.
또한 메인색상(Primary)과 보조색상(Secondary)은 각 색상의 채도가 낮은 200에 해당하는 색상을 사용하며, 추가적으로 어두운 색상으로 변형한 색상은 700인 값의 색상을 사용하는 것에 있습니다. 오류를 표시하는 붉은색 색상 역시 마찬가지로 붉은색 중 채도가 낮은 색상을 사용하는 것을 볼 수 있습니다.
글자나 아이콘의 색상은 어둡거나 채도가 높은 색상 위에서 출력될 때, 흰색(#FFFFFF)이 사용되며, 밝거나 채도가 낮은 색상에서는 순수 검정색(True black, #000000)이 사용됩니다.
위 그림은 기본 테마(Default theme)인 밝은 테마(Light theme)와 어두운 테마(Dark theme)에서 사용하는 색상 팔렛트를 비교한 것입니다. 항목 1은 기본 테마에서의 색상 팔렛트를 나타내며, 항목 2는 어두운 테마에서의 색상 팔렛트를 나타냅니다.
5.6. 오류를 표현하는 색상 (Error colors)
오류를 표현하는 색상(Error colors)은 오류 상태를 표시하는데 사용됩니다. 어두운 테마에서 오류를 표현하는 기본색상은 #CF6679입니다.
이 색상은 붉은색(#B00020) 위에 40% 투명도를 가진 흰색 레이어를 중첩시킨 색상으로 WCAG의 AA 수준을 충족하기 위한 색상값입니다.
5.7. 글자, 아이콘 등의 색상 (Typography and iconography colors)
5.7.1. “On” colors
“On” colors는 글자(Text), 아이콘(Iconography), 메인색상, 보조색상, 표면색, 배경색, 오류 색상 등을 사용하는 주요 표면 위에 출력되는 강조항목 등에 적용되는 색상입니다. 쉽게 말해 글자(Text)나 아이콘은 표면의 특정한 색상 위에서 출력되며, 이때 사용하는 색상을 “On” colors라고 합니다.
위의 색상 팔렛트에서도 설명했지만 기본적으로 어두운 테마에서 “On” color는 흰색과 검정색이 사용됩니다.
위 그림에서 1번 항목인 “SAVE” 버튼은 메인색상을 사용하고 있으며, 그 위에 출력되는 글자의 “On Primary” 색상은 검정색이고, 2번 항목인 FAB는 보조색상을 사용하고 있으며, 그 위에 출력되는 아이콘(+)의 “On Secondary” 색상도 검정색입니다.
3번 항목은 배경색 위에 출력되는 글자의 “On Background” 색상은 흰색이고, 4번 항목은 표면 위에 출력되는 그래프와 글자의 “On Surface” 색상도 흰색입니다. 마지막으로 5번 항목은 오류 항목 위에 출력되는 글자와 아이콘의 “On Error” 색상은 검정색입니다.
5.7.2. 어두운 배경색 위에 출력되는 밝은 글자색 (Light text on dark backgrounds)
어두운 배경색 위에서 출력되는 밝은 글자색은 다음과 같은 불투명도 수준을 사용합니다. 기본 테마(Default theme)에서와 마찬가지로 어두운 테마에서 글자나 아이콘에 적용되는 밝은 색상은 단순히 흰색이 아니라 흰색에 일정수준의 불투명도가 적용된 색상이 사용된다는 의미입니다.
이는 기본 테마에서와 같이 매우 중요하며, 불투명도(Opacity)가 적용된 흰색을 사용한다는 것에 매우 유의해야 합니다.
- 강조를 많이 해야 하는 글자(High-emphasis text)나 아이콘은 흰색(#FFFFFF)의 87% 불투명도(Opacity)를 적용
- 강조를 보통으로 해야 하는 글자(Medium-emphasis text)나 힌트가 되는 글자(Hint text)는 흰색(#FFFFFF)의 60% 불투명도(Opacity)를 적용
- 불가능한 상태를 표현하는 글자(Disabled text)는 흰색(#FFFFFF)의 38% 불투명도(Opacity)를 적용
위의 그림은 강조에 따른 글자의 색상 표시 차이를 나타냅니다.
6. 사용자 지정 색상 적용 (Custom application)
머티리얼 디자인에서 일부 사용에서 어두운 테마의 개별요소(Elements)를 사용하는 것에 따른 이점을 가져갈 수 있습니다.
6.1. 크기가 큰 표면 (Large surfaces)
앱 바(App bar)나 배경막(Backdrop)과 같이 화면에서 차지하는 크기가 큰 구성요소(Component)는 구성요소 표면의 색상을 위해 어두운 테마를 사용할 수 있습니다. 즉, 표면의 크기가 큰 요소들은 어두운 색상으로 표현을 한다는 것을 의미합니다.
위의 왼쪽 그림은 FAB와 같이 표면이 작은 경우에 밝은 색상을 적용하는 것을 권장하고 있으며, 오른쪽 그림은 표면이 큰 앱 바 같은 영역에 밝은 색상을 적용하지 말라고 하고 있습니다.
이는 어두운 테마의 기본 컨셉인 눈을 편안하게 하고 배터리를 절약하는 컨셉과도 배치되기 때문으로 밝은 색상의 사용은 최대한 배제한다는 것을 전제로 하고 있는 것입니다.
위의 왼쪽 그림은 배경막(Backdrop) 또는 카드와 같은 표면의 색상으로 사용되는 색상값이 글자와의 명암비 차이로 15.8:1을 유지하지 않음에 따라 주의하라는 것을 나타냅니다. 권장되는 표면의 색상값은 #121212인 것을 나타냅니다.
위의 오른쪽 그림은 배경막(Backdrop) 또는 카드와 같은 표면 색상에 메인색상(Primary color)를 적용한 잘못된 사례를 나타내고 있습니다. 다시 한번 강조하지만 표면의 크기가 큰 구성요소의 색상은 어두운 색상을 사용하는 것이 어두운 테마의 기본 전제라는 것을 명심해야 합니다.
6.2. 밝은 테마와 어두운 테마의 혼용 (Combining light and dark themes)
밝기가 밝은 표면이 어두운 테마에서 사용되어야할 때, 밝은 색상은 지정된 구성요소의 표면에 대해서 사용될 수 있습니다.
예를 들어, 어두운 테마의 스낵바(Snackbar)는 이해를 돕기 위한 구성요소로써 밝은 표면색상을 출력할 수 있습니다. 이렇게 처리하기 위해 밝은 테마(Light theme)의 표면과 표면 색상(Surface colors)을 적용할 수 있습니다.
참고로 스낵바와 같은 경우 특정 상황(Context)에서 한시적으로 출력되며, 항상 출력되는 것이 아니기 때문에라도 예외적으로 밝은 테마에서 사용하는 표면색상과 글자 색상등을 사용할 수 있는 것입니다.
위 그림에서 다른 구성요소 보다 상단에 출력된 표면의 색상은 밝은 색상인 흰색(#FFFFFF)이 출력될 수 있으며, 이때 글자의 색상은 검정색(#121212)로 출력할 수 있습니다. 이때 추가적으로 메인색상의 변형색상(#3700B3)이 사용될 수도 있습니다.
7. 상태를 나타내는 색상 (State)
상태(State)는 구성요소(Component) 또는 상호작용하는 개별요소(Element)의 진행 경과를 중첩 레이어(Overlay) 로 나타냅니다. 어두운 테마에서 상태는 기본테마(밝은테마)와 동일한 레이어(Overlay)를 사용해야 합니다. 어두운 테마와 기본테마(밝은테마)에서 사용되는 상태 표시 레이어는 명암비 표준의 AA 수준을 통과할 수 있어야 합니다.
안드로이드는 상태를 나타내는 효과로 별도의 색상을 표시하는데, 밝은 테마와 어두운 테마의 구분 없이 사용됨을 의미합니다.
중첩 레이어를 표시하는 컨테이너(Container)는 표면의 색상을 사용하는 것과 메인색상을 사용하는 것 두 가지 종류가 있습니다.
7.1. 표면 컨테이너 (Surface containers)
컨테이너는 웹에서 DIV 태그와 같이 별도의 구성요소나 개별요소를 담을 수 있는 공간을 의미합니다. 표면에 해당하는 색상을 사용하는 표면 컨테이너(Surface containers)는 컨테이너 안에 출력되는 아이콘 또는 글자의 색상과 동일하게 상태를 표기하는 레이어의 색상을 적용합니다.
위의 왼쪽 그림의 모서리가 둥근 네모 박스는 컨테이너에 해당됩니다. 이 컨테이너 안에 아이콘이나 글자가 위치할 수 있는데, 이때 이 컨테이너를 표면으로 간주하고 그 위에 아이콘이나 글자가 출력될 때(On color 색상으로 출력), 이 색상을 이용하여 컨테이너의 상태를 표시하는 레이어의 색상을 표기하는 것입니다.
즉, 표면 위에 별도의 색상을 갖는 아이콘이나 글자가 출력되는 경우 표면 컨테이너는 이 콘텐츠(아이콘 또는 글자)의 색상을 참고하여 상태를 표시합니다.
위의 오른쪽 그림은 콘텐츠(아이콘 또는 글자)가 메인색상(예시에서 메인색상은 보라색으로 간주)을 사용한 경우에 해당합니다.
표면 컨테이너(Surface container)에서 중요한 것은 이 표면에 포함된 콘텐츠(아이콘 또는 글자)의 색상을 이용해서 상태를 표시한다는 것이며, 상태 유형(Enabled, Hovered, etc.)에 따라서 출력하는 색상의 불투명도(Opacity) %가 달라진다는 것입니다.
7.2. 메인색상 컨테이너 (Primary containers)
메인색상 컨테이너(Primary containers)는 메인색상(Primary color)이 컨테이너의 색상으로 사용된 경우에 컨테이너의 상태를 표시하는 방식을 나타냅니다.
위에 설명한 표면 컨테이너와의 차이점은 표면 컨테이너의 경우 컨테이너 내에 출력하는 콘텐츠(아이콘 또는 글자)를 기준으로 상태를 나타내는 레이어의 색상이 결정되지만 메인색상 컨테이너는 컨테이너를 채우는 색상 자체가 메인색상으로 이미 채워진 상황으로 이 색상과 구분되는 흰색 레이어를 이용해 상태 표시 레이어를 출력하는 것입니다.
위의 왼쪽 그림은 컨테이너의 색상으로 메인색상(보라색)의 불투명도(Opacity)가 24%인 반투명 형태로 적용된 사례를 나타냅니다. 컨테이너의 상태를 나타내는 레이어의 색상은 흰색이며, 상태 유형에 따라 색상의 불투명도(Opacity) %가 달라집니다.
위의 오른쪽 그림은 컨테이너의 색상으로 메인색상(보라색)의 불투명도(Opacity)가 적용되지 않은 사례입니다. 컨테이너의 상태를 나타내는 레이어의 색상은 흰색이며, 상태 유형에 따라 색상의 불투명도(Opacity) %가 달라집니다.
메인 색상 컨테이너는 상태를 나타내는 레이어의 색상 표시 상 차이가 없는 것을 볼 수 있습니다.
7.3. 불가능을 나타내는 상태 (Disabled states)
모든 불가능을 나타내는 구성요소(Components)는 흰색의 불투명도(Opacity) 12%가 적용된 외곽선(Outline)과 채우기 색이 사용되거나, 흰색의 불투명도(Opacity) 38%가 적용된 콘텐츠(아이콘 또는 글자) 색상으로 나타납니다.
위 그림에서 외곽선을 갖는 구성요소의 경우, 불가능 상태를 표시하기 위해 항목 1과 같이 흰색의 불투명도(Opacity) 12%가 적용된 것을 볼 수 있습니다. 항목 3의 왼쪽 보라색으로 채워진 컨테이너의 경우 불가능을 표시하는 경우 마찬가지로 흰색의 불투명도(Opacity) 12%가 적용된 색으로 채워집니다. 항목 2는 컨테이너 내부에 위치한 콘텐츠(아이콘 또는 글자)의 경우 원래 표기 색상과 상관없이 흰색의 불투명도(Opacity) 38%가 적용된 색상으로 나타냄을 알 수 있습니다.
8. 자원 (Resources)
8.1. 디자인 파일
아래의 디자인 파일들은 어두운 테마 레이아웃을 위한 상태 표시바(Status bars), 앱 바(App bars), 하단 툴바(Bottom toolbars), 카드(Cards), 드롭다운 메뉴(Dropdown menus), 사이드 내비게이션(Side navs), 대화상자(Dialogs), Floating action buttons(FAB), 기타 구성요소(Components) 등의 개별요소(Element)를 포함하고 있습니다.
9. 적용방식 (Implementation)
어두운 테마(Dark theme)는 각 플랫폼에서 아래와 같이 적용될 수 있습니다. iOS, Web, Flutter는 기본적으로 어두운 테마가 설정 및 지원됩니다. Android의 경우 별도의 API 등을 이용해 구현이 가능함을 아래의 링크를 통해 확인할 수 있습니다.
| Platform | Status |
|---|---|
| Android | Available |
| iOS | Planned |
| Web | Planned |
| Flutter | Planned |
10. 마무리
어두운 테마(Dark theme)는 기본 테마(Default theme)인 밝은 테마(Light theme)의 색상 사용과는 많은 부분에서 차이를 보입니다.
우선 메인색상과, 보조색상은 밝은 테마의 색상 채도와는 다른 기준을 따르며, 표면의 크기에 따라 적용하는 메인색상(Primary color) 또는 보조색상(Secondary color)에 대한 규칙이 다르고, 표면의 높이값(Elevation)을 표현하는 방식도 다릅니다.
글자(Text)의 가독성(Legibility)을 위한 규칙은 불투명도(Opacity)를 적용한다는 점에도 밝은 테마와 비슷하기도 하며, 상태(State)를 나타내기 위한 색상 표현 등은 컨테이너(Container) 유형에 따라 다소 복잡한 적용방식이 요구되기도 합니다.
테마(Dark theme)의 색상 사양을 이해함에 있어 어두운 테마의 색상 사양은 선택적으로 볼 수도 있으나 이는 접근성을 높이고, 배터리 절약 등에 활용할 수 있다는 점에서 단순히 간과할 내용은 아닐 수도 있습니다.
특히 구상하고 있는 제품(앱 또는 서비스)의 사용자 당 사용 시간이 길어질 것으로 예상되는 경우(예: 데이터 조회, 갱신 등을 수시로 하는 서비스) 눈에 피로도를 감소시키고, 배터리 사용시간을 늘릴 수 있는 어두운 테마를 적용하는 것은 매우 중요하다고 볼 수 있겠습니다.
다음 내용은 글자(Typography) 표현 시스템과 세부 사양은 어떠한 것들이 있는지 살펴보겠습니다. 그럼 다음 시간에 뵙겠습니다.
댓글
댓글 쓰기