집중 조명: 다크 UI 디자인의 원칙

어두운 UI 디자인은 모바일 화면에서 대형 TV에 이르기까지 광범위하게 나타납니다. 다크 테마는 파워, 럭셔리, 세련미, 우아함을 표현할 수 있습니다. 그러나 어두운 UI를 위한 디자인은 여러 가지 문제를 제시하며 제대로 구현되지 않으면 기대에 부응하지 못합니다. "어두운 면"에 뛰어들기 전에 디자이너는 도약하기 전에 살펴보아야 합니다.

물리학자들은 검은색은 실제로 색이 아니라고 말합니다. 그것은 빛의 부재입니다 . 프리즘을 통해 햇빛을 비추는 그의 실험에서, 아이작 뉴턴 경은 그것을 색상 스펙트럼에 포함시키지도 않았습니다.

색상 심리학에서 대부분의 색상은 사람마다 다른 것을 나타냅니다. 서양 문화에서 흑인은 종종 죽음, 신비, 악과 관련이 있습니다. 녹색은 자연 때문에 종종 성장과 관련이 있습니다. 파란색은 하늘과 물과 관련이 있기 때문에 거의 보편적으로 차분합니다. 색상은 감성적입니다.

다른 효과는 문화적입니다. 예를 들어, 보라색은 많은 고대 문화에서 보라색 염료가 비싸고 희귀했기 때문에 여전히 사치와 관련이 있습니다. 왕족만이 그것을 감당할 수 있었습니다. 그것은 인간 정신의 일부가 될 만큼 충분히 오랫동안 문화적 시대정신의 중요한 부분이었습니다.

파워, 우아함, 미스터리와 관련된 어두운 UI가 있는 디지털 제품은 무서운 추세입니다. 다크 모드가 눈의 피로를 줄일 수 있다고 흔히 말하지만 이것이 사실이라는 증거는 없습니다. 특정 상황에서는 배터리 수명도 절약해야 합니다. 그럼에도 불구하고 어두운 테마는 미학적 선택인 경우가 많습니다.

어두운 UI 대 밝은 UI

모든 인터페이스가 어두운 테마에 적합한 것은 아닙니다. 디자이너는 브랜드 핏, 문화적 적합성 및 색상 심리를 살펴보고 선택하기 전에 정서적 영향 을 고려해야 합니다. 그것은 까다로운 균형 동작입니다.

밀레니얼을 타겟으로 하는 금융 앱은 어두운 테마로 쿨함을 얻을 수 있지만, 일반 대중을 대상으로 하는 대형 은행 웹사이트에는 부적절할 수 있습니다. 너무 부유하고 너무 어둡고 너무 스타일리시 하면 모든 사람들이 잔액을 확인하고 청구서를 지불하기를 원할 때 더 답답할 수 있습니다.

B2B SaaS 애플리케이션 다크 UI 는 설계하기가 어렵기로 악명이 높습니다. 데이터 테이블, 위젯, 양식 및 드롭다운과 같은 표준 웹 UI 구성 요소는 어두운 UI에서 이상하게 보일 수 있습니다. 많은 색 구성표는 어두운 UI에서 잘 작동하지 않기 때문에 유형, 컨텍스트 및 환경적 요인에 따라 특정 브랜드 및 제품은 적합하지 않으며 극복할 수 없는 문제가 될 수 있습니다.

이전에 어두운 UI 디자인으로 작업한 적이 없고 두 발로 뛰어들기로 결정한 디자이너는 험난하고 미지의 바다에 빠질 수 있습니다. 어두운 UI의 바다에서는 규범이 구부러지고 규칙이 변경되며 함정이 많이 있습니다.

즉, 어두운 UI를 사용하는 데에는 여러 가지 좋은 이유가 있습니다.

• 디자인이 희소하고 최소한의 콘텐츠 유형만 있는 경우
• 야간 엔터테인먼트 앱 등 문맥 및 용도에 적합할 때
• 강렬하고 드라마틱한 룩을 연출하기 위해

그리고 권장되지 않는 시나리오가 있습니다.

• 텍스트가 많은 경우(어두운 배경에서 읽기 어려움)
• 혼합된 콘텐츠 유형이 많은 경우
• 디자인이 다양한 색상을 요구할 때

어두운 UI 디자인의 대비

어두운 테마는 검은색 테마가 아닙니다. "저조도" 테마로 생각하는 것이 가장 좋습니다. 어두운 UI의 주요 관심사 중 하나는 충분한 대비를 달성하여 시각적 요소가 분리되고 텍스트를 읽을 수 있도록 하는 것입니다. 대부분의 디자이너는 강한 대비를 얻기 위해 검정색을 사용하는 것이 최적이라고 생각할 것입니다. 그러나 배경이나 표면 색상에 트루 블랙(#000000)을 사용하지 않는 것이 가장 좋습니다. 검정색은 다른 UI 요소용으로 가장 잘 예약되어 있으며 드물게 사용됩니다. 예를 들어 트루 블랙은 작은 UI 요소나 주변 베젤에 사용할 수 있습니다.

Google의 Material Design dark theme에서는 "더 넓은 깊이의 환경에서 고도와 공간을 표현하기 위해" 어두운 테마 표면 색상으로 어두운 회색 (#121212)을 사용할 것을 권장합니다. 또한 많은 디자이너는 색 구성표를 정의할 때 어두운 회색에 미묘한 진한 파란색 색조를 추가할 것을 권장합니다. 디지털 화면에 더 나은 어두운 톤을 만들고 더 기분 좋은 어두운 UI 색상 팔레트를 만드는 경향이 있습니다.

회색 범위를 사용하는 이점은 더 넓은 범위의 색상을 표현할 수 있기 때문에 디자이너에게 자유도를 준다는 것입니다. 회색 팔레트는 또한 그림자가 회색 대 검은색에 대해 더 쉽게 볼 수 있기 때문에 깊이를 만드는 데 도움이 됩니다.

어두운 UI에서 텍스트 대비에 특별한 주의를 기울여야 합니다.

웹 콘텐츠 접근성 지침(WCAG)은 "텍스트의 시각적 표현은 최소 4.5:1 의 대비 비율을 갖도록" 요구합니다. 단, 명암비가 3:1 이상이어야 하는 대규모 텍스트는 예외입니다. 따라서 디자이너는 어두운 모드에서 콘텐츠를 편안하게 읽을 수 있도록 해야 합니다.

다양한 디스플레이 및 장치의 카드, 버튼, 필드 및 아이콘과 같은 다른 UI 요소 간의 적절한 대비를 테스트하는 것도 좋은 생각입니다. UI 요소 사이에 감지할 수 없는 분리가 있는 경우 디자인이 너무 많이 혼합되어 둔해질 위험이 있습니다.

주의 집중: 색상

색상은 어두운 UI에서 두드러집니다. 더 밝고 채도가 낮은 액센트 색상이 있는 구성표를 사용하는 것이 가장 좋습니다. 어두운 UI에서는 채도가 높은 색상을 사용하지 마십시오 . 어두운 표면에 대해 시각적으로 진동할 수 있기 때문입니다. 또한 색상은 텍스트와 함께 사용할 때 최소 4.5:1 의 WCAG AA 표준을 통과해야 합니다.

어두운 UI의 색 구성표를 정의할 때 Google은 어두운 표면에 사용할 수 있는 대부분의 공간을 유지하기 위해 제한된 수의 색상 강조를 권장합니다. 분할 보색을 사용하면 도움이 될 수 있습니다. 이 구성표에는 하나의 주요 색상과 주요 색상의 보색에 인접한 두 개의 색상이 있습니다. 이렇게 하면 보색 구성표의 장력 없이 필요한 대비가 제공됩니다.

올바른 색 구성표는 좋은 대비를 만드는 데 도움이 될 수 있습니다. Colorable은 텍스트와 배경색의 접근성 호환 색상 조합을 선택하는 데 유용한 도구입니다.

버튼 및 아이콘과 같은 텍스트 및 필수 요소는 어두운 배경에 나타날 때 가독성 기준을 충족해야 합니다. 위의 Jabra Sound+ 앱에서 볼 수 있듯이 흰색 이외의 색상을 텍스트와 아이콘에 사용할 수 있습니다.

Google의 Material Design 사이트에는 디자이너가 UI에 색상 팔레트를 만들고 적용할 수 있는 유용한 색상 팔레트 생성기("색상 선택 도구" 아래)가 있습니다. 색상 조합의 접근성 수준은 함께 제공되는 색상 도구를 사용하여 측정할 수도 있습니다.

“가독성을 높이려면 대비가 강한 색상을 사용하십시오. 글꼴 크기와 두께, 색상 밝기, 화면 해상도, 조명 조건 등 많은 요소가 색상 인식에 영향을 미칩니다.” Apple 휴먼 인터페이스 지침

적을수록 좋습니다: 부정적인 공간 활용

성공적인 다크 UI 디자인의 기본 요소 중 하나는 네거티브 공간을 능숙하게 사용하는 것입니다. 잘못 디자인된 경우 어두운 UI는 디지털 제품을 무겁고 위압적으로 보이게 할 수 있습니다. 균형을 맞추기 위해 디자이너는 희소하고 미니멀한 디자인 내에서 네거티브 공간을 활용하여 어두운 UI를 더 가볍게 만들 수 있습니다. 미니멀리즘 디자인은 있는 것만큼이나 없는 것에 관한 것입니다. 네거티브 공간을 능숙하게 사용하면 어두운 UI를 더 잘 알아볼 수 있고 사람들이 정보를 더 쉽게 흡수할 수 있습니다.

프랑스 작곡가 클로드 드뷔시(Claude Debussy)는 “ 음악은 음표 사이의 공간 ”이라고 말했습니다. 스캔 가능성에 대해서도 동일한 감정이 적용됩니다. 요소 사이의 음수 공간이 레이아웃을 작동하게 만드는 요소입니다. UI 요소 주변의 넉넉한 양의 음수 공간은 정의를 제공합니다. 중요한 내용을 강조하고 디자인이 조밀하고 어수선하게 느껴지지 않도록 필요한 호흡 공간을 제공합니다. 호흡 공간이 없으면 인간의 뇌는 관심 지점을 스캔할 가능성이 줄어들고 방황할 가능성이 높아집니다.

너무 많은 요소와 텍스트로 가득 찬 인터페이스는 고품질의 어두운 UI 디자인의 골칫거리입니다. 어두운 UI의 시각적 계층 구조를 신중하게 고려함으로써 디자이너는 창작물을 더 쉽게 스캔할 수 있도록 만들어 사용자 경험을 향상시킬 수 있습니다.

스타일링 단어: 타이포그래피

어두운 UI의 모든 텍스트는 면밀한 조사가 필요합니다. 우려 사항은 가독성과 대비의 두 가지입니다. 첫째, 크기에 관한 것입니다. 텍스트는 가독성을 위해 충분히 커야 합니다(어두운 배경의 작은 텍스트는 읽기 어렵습니다). 둘째, 텍스트와 배경 사이에 충분한 대비가 있어야 합니다.

수천 개의 디지털 글꼴을 사용할 수 있으므로 헤더 및 영웅 메시지에 대한 영향이 있는 메시지를 쉽게 표시할 수 있습니다. 디자이너는 대비를 높이고 더 작은 텍스트의 글꼴 크기, 문자 간격 및 줄 높이를 조정하여 가독성 문제를 완화할 수 있습니다.

일반 크기 텍스트(굵게 표시되지 않은 경우 18포인트 미만)에 대한 W3C AAA 권장 사항은 명암비가 7:1 이상이어야 합니다. 이는 아이콘, 텍스트 이미지 및 버튼 레이블과 같은 텍스트 레이블과 같은 다른 UI 요소에도 적용됩니다. 모든 디지털 제품에 모든 사람이 액세스할 수 있도록 하는 것은 디자이너의 의무입니다. 그것은 사용성을 향상시킬 뿐만 아니라 UX를 향상시킬 뿐만 아니라 대부분 의 국가에서 법 입니다.

디자이너가 어두운 UI에서 잘 작동하는 우수한 서체를 소싱하는 데 사용할 수 있는 옵션은 셀 수 없이 많습니다. Google 글꼴, 글꼴 라이브러리 및 Adobe Typekit은 쉬운 앱 또는 사이트 통합과 다양한 선택을 제공하는 몇 가지입니다.

의사소통의 깊이: 고도

어두운 테마는 평면을 의미하지 않습니다. 밝은 테마를 사용하면 조명, 음영 및 그림자가 깊이감을 줍니다. 어두운 UI를 사용하면 드문드문 색상 악센트가 있는 어두운 표면이 주로 포함되어 있기 때문에 더 어렵습니다. 그래도 디자이너는 텍스트에 깊이를 전달하기 위해 해당 색상 구성표와 함께 3~4단계의 고도를 사용할 수 있습니다.

왜 깊이인가? 대부분의 현대적인 디자인 시스템은 깊이를 전달하기 위해 고도 수준 시스템을 사용합니다. 깊이감이 자연 세계와 일치합니다. 우리의 비전은 깊이 지각을 가지고 있으며 우리는 3D 세계에 살고 있습니다. 깊이는 인터페이스의 시각적 계층을 강조하는 데 도움이 됩니다. 예를 들어 전경에 있는 요소는 경고 대화 상자와 같이 자신에게 주의를 끕니다.

표면은 다른 고도 수준을 나타내기 위해 다르게 조명됩니다. 고도 스택에서 표면의 위치가 높을수록(암시 광원에 더 가까움) 표면이 더 가벼워집니다. 표면이 밝을수록 구성 요소 간의 고도를 더 쉽게 구분할 수 있으며 그림자를 보는 데 도움이 되어 각 표면의 가장자리가 더 명확해집니다.

각 레벨의 표면 색상을 고안하려면 주의가 필요합니다. 4개 또는 5개 이상의 수준을 가지지 않는 것이 가장 좋습니다. 디자이너는 표면이 스택에서 더 높아지고 가벼워짐에 따라 텍스트 대비를 고려해야 합니다. 배경색이 흰색 텍스트와 표면 사이의 최소 15.8:1 대비 수준을 충족할 만큼 충분히 어둡지 않은 경우 가장 높은(가장 밝은) 높은 표면의 텍스트는 4.5:1 표준을 통과하지 못합니다. 경우에 따라 디자인 시스템에서 요소의 텍스트 색상을 트루 블랙 (#000000)으로 지정하여 밝은 회색 배경에서 좋은 대비를 얻는 것이 가장 좋습니다.

어두운 UI 디자인 영감

위에 설명된 원칙을 반영하여 다음은 어두운 UI 디자인의 몇 가지 훌륭한 예입니다.

Atom Finance 는 어두운 테마를 활용하여 세련된 모양을 만들고 강조 색상을 3개로 제한합니다. 레이아웃은 복잡한 금융 웹사이트를 위해 네거티브 공간과 희소하고 미니멀한 디자인을 사용합니다. 이 사이트는 미묘한 음영을 잘 사용하여 UI의 다양한 구성 요소 고도를 나타냅니다.

이 두 미니멀리즘 다크 테마 웹사이트는 모두 굵은 활자체를 사용합니다. 어두운 UI 디자인 모범 사례에 따라 단일 강조 색상으로 신중한 음영이 사용됩니다.

SaaS 애플리케이션을 위한 어두운 테마 작업의 어려움에도 불구하고 IBM을 위한 이 데이터 시각화 대시보드는 모범적입니다. 강조 색상의 수는 최소로 유지되며 사이트는 미묘한 음영을 사용하여 다양한 UI 높이를 표시합니다.

이러한 모바일 앱은 베젤에만 트루 블랙 을 사용하고, 다양한 고도 수준에 대해 적절한 요소 음영을 사용하고, 제한된 수의 강조 색상을 사용하여 어두운 UI 디자인 모범 사례를 준수합니다.

요약

전통적인 디자인보다 어두운 UI 디자인을 사용하는 결정은 신중하게 접근해야 합니다. 힙하거나 다르거나 다른 사람의 디자인을 모방하기 위해 잘못된 이유로 선택해서는 안 됩니다. 디자이너는 선택에 대한 강력한 근거 가 있어야 하며 콘텐츠, 사용 컨텍스트 및 디자인이 표시될 장치를 고려해야 합니다.

어두운 테마는 일부 디지털 제품에 적합하지만 다른 제품에는 구현하기가 어렵습니다. 단순함이 핵심입니다. 미니멀리스트 콘텐츠, 데이터 시각화, 미디어 사이트 및 엔터테인먼트 플랫폼을 제공하는 데 적합합니다. 복잡하고 데이터가 많은 B2B 플랫폼, 텍스트가 많은 페이지 및 다양한 콘텐츠에 적합하지 않습니다.

새로운 문체의 경계를 넘어 감성적이고 미학적인 렌즈를 통해 어두운 UI를 탐색할 준비가 된 용감한 디자이너에게 "어두운 면"에서 무한한 가능성의 흥미진진한 놀이터를 제공합니다.

당신의 생각을 알려주세요! 아래에 귀하의 생각, 의견 및 피드백을 남겨주세요.

• • •

Toptal Design 블로그에 대한 추가 정보:

• 어두운 UI. 좋은 것과 나쁜 것. 해야 할 일과 하지 말아야 할 일.
• 디자인 원칙과 중요성
• 디자인의 게슈탈트 원리 탐구
• 설득력 있고 감동적인 – 모션 디자인 원칙 가이드
• 이러한 성공적인 상호 작용 디자인 원칙으로 UX를 향상시키십시오.