어두운 UI. 좋은 것과 나쁜 것. 해야 할 일과 하지 말아야 할 일.

어두운 UI는 드라마틱하고 세련되며 우아합니다. 그럼에도 불구하고 디자이너는 "어두운 면"을 선택하는 경우 신중하게 선택해야 합니다.

제품의 모양과 느낌을 만드는 것은 디자이너의 주요 책임 중 하나입니다. 초기 디자인 결정은 제품의 목적, 특정 상황 및 대상에 적절해야 합니다. 색상 구성표는 오래 지속되는 영향을 미치므로 신중하게 선택해야 합니다. 모든 것은 디자인 요소가 배치될 배경인 "캔버스"를 선택하는 것부터 시작됩니다. 일반적인 선택은 거의 기본적으로 흰색 배경입니다.

밝은 배경을 선택하는 데에는 그만한 이유가 있습니다. 대비, 텍스트 및 가독성과 다양한 미묘한 색상으로 작업할 수 있는 기능이 그 중 일부입니다. 많은 과학 연구에 따르면 최적의 가독성을 위해서는 흰색 배경에 검은색 텍스트가 필요합니다. 회사 로고와 색상은 어두운 색상 팔레트에서 작동하지 않기 때문에 브랜딩도 결정에 영향을 미칠 수 있습니다.

대부분의 연구에 따르면 밝은 배경의 어두운 텍스트는 어두운 배경의 밝은 텍스트보다 우수합니다. 즉, 읽기 쉽습니다. 한 유명한 연구에서 "시각적 피로"는 피험자가 어두운 배경에서 밝은 문자를 읽을 때와 밝은 배경에서 어두운 문자를 읽을 때 훨씬 더 컸습니다(Bauer, D., Bonacker, M. 및 Cavonius, CR 1983).

사람들은 이미지와 함께 제공되는 흰색 배경에 어두운 잉크로 렌더링된 다양한 콘텐츠를 보는 데 익숙 합니다. 350년 이상 된 신문과 잡지를 생각해 보십시오. 35,000 년 전 구석기 시대(원시인 시대)로 거슬러 올라가면 일반적으로 밝은 배경에 숯이나 탄 뼈를 사용하여 묘사를 그리는 데 사용된 사자와 매머드의 동굴 그림을 볼 수 있습니다.

그럼에도 불구하고 프로젝트가 보증하는 경우 오늘날의 디지털 제품 디자이너는 다양한 이유로 어두운 색 구성표로 작업할 수 있습니다. 위에서 제안한 바와 같이 이는 종종 드라마를 전달하고 감정을 이끌어내기 위한 미학적 선택(예기치 않은 것)이거나 디자이너가 디자인을 브랜딩과 융합하거나 시각적 콘텐츠가 눈에 띄도록 하려는 경우가 많습니다.

그러나 디자이너가 "어두운 면"으로 넘어가기로 선택하면 여러 가지 문제에 직면하게 됩니다. 대부분의 스캔 가능성, 가독성 및 대비와 관련된 모든 종류의 사용성 문제가 발생합니다. 고려해야 할 주요 측면은 텍스트와 배경 간의 충분한 대비입니다. 컨텍스트(사용 사례) 및 환경은 물론 UI를 볼 가능성이 높은 장치도 고려해야 합니다.

일부 어두운 UI는 "디지털 눈의 피로"를 최소화하도록 설계되었습니다. 디지털 기술의 발달로 우리는 하루의 대부분을 화면을 응시합니다. 디지털 눈의 피로는 매일 수백만 명의 사람들에게 영향을 미치는 일반적인 상태입니다. 과도한 컴퓨터 사용부터 밝은 빛에 대한 규칙적인 노출에 이르기까지 모든 원인으로 인해 두통, 목 통증, 시야 흐림, 눈이 따갑거나 따끔거릴 수 있습니다.

컴퓨터 시각 증후군(CVS)과 "안구 불편감"과 같은 것들이 있습니다. 한 연구에 따르면 미국인의 83% 이상이 하루 2시간 이상 디지털 기기를 사용하며 60.5%는 디지털 눈의 피로 증상을 경험한다고 보고했습니다. (눈 과다 노출: 디지털 장치의 딜레마.)

B2B SaaS 제품과 멀티미디어 편집 애플리케이션은 몇 시간 동안 계속해서 사용됩니다. 많은 것들이 눈의 피로를 줄이면서도 시각적 선명도를 지원하기 위해 어두운 테마의 UI로 디자인되었습니다. 그러나 이러한 접근 방식을 사용하려면 설계 방향에 대한 신중한 사전 평가가 필요합니다.

대부분의 개발자는 눈의 피로를 줄이기 위해 색으로 구분된 구문이 있는 검은색 화면을 사용합니다. Toptal 개발자 Kevin Bloch는 다음과 같이 말했습니다. "검은색 배경은 눈의 피로를 줄이고 자동 색상 코딩을 읽기 쉽게 만들어 코드를 한 눈에 훨씬 빠르게 이해할 수 있습니다."

Toptal 개발자 Amin Shah Gilani는 다음과 같이 덧붙입니다. “저는 개인적으로 코드 편집기에 솔라라이즈드 다크 테마를 사용합니다. 어두운 배경이 눈에 더 쉽게 느껴지기 때문에 어두운 테마를 선호합니다. 특히 조명을 어둡게 유지하거나 밤에 작업하는 것을 좋아하기 때문입니다.”

게임 앱 UI는 또한 어두운 테마로 향하는 경향이 있습니다. 게임 컨텍스트와 플레이어가 게임을 하는 환경은 검은색 팔레트가 더 잘 어울립니다. 검정색 배경 디자인은 눈에 띄는 시각적 효과를 강화하고 신비감을 부여하며 대비를 높이고 시각적 계층 구조를 지원합니다.

어두운 UI가 잘 작동할 때

대부분의 엔터테인먼트 관련 UI(스마트 TV, 게임 콘솔, TV 및 영화 앱)는 어두운 테마의 UI 디자인을 사용하는 경향이 있습니다. 대부분의 엔터테인먼트 관련 활동은 저녁에 발생하며 6-10피트 거리에서 보고 조명이 어두운 방에서 시청합니다. 즉, 화면이 환경과 일치합니다. 또한, 다채로운 콘텐츠(예: 커버 아트 및 프로모션)는 어두운 테마의 UI에서 극적으로 두드러집니다.

목표는 활동의 맥락과 일치시키는 것입니다. "어두워지고 있고, 휴식을 취하고 있으며, TV를 보고 싶습니다." 수천 개의 작은 전구와 마찬가지로 디지털 화면은 밝은 픽셀이 있는 곳이면 어디든지 빛을 발산합니다. 따라서 밝은 UI는 방을 밝힐 것입니다. 활동을 고려할 때 바람직하지 않은 효과입니다. 이 시나리오에서 UI 디자인은 장치, 콘텐츠, 활동 및 환경과 같은 컨텍스트를 일치시키려고 합니다.

올바른 컨텍스트, 환경, 응용 프로그램 및 사용에서 검은색 배경 UI는 의미가 있습니다. 인터페이스가 사용될 가능성이 있는 컨텍스트 를 항상 고려하십시오. 그러나 그 이상입니다. 함께 사용할 선택은 컨텐츠와 컨텍스트 ( 무엇 , 언제 , 어디서 , 어떤 장치)에 따라 달라져야 합니다 .

• 눈에 띄는 비주얼을 위해 강력하고 드라마틱한 모습을 얻으려면
• 스타일과 우아함, 럭셔리, 프레스티지 느낌을 표현하기 위해
• 호기심과 신비감을 조성하기 위해
• 최소한의 산만함으로 사용자의 주의를 집중시키고 안내합니다.
• 시각적 계층 구조 및 정보 아키텍처 지원

어두운 UI는 희소하고 최소한의 텍스트와 시각적인 부분(텍스트 위의 밝은 부분)에 중점을 둔 "청크" 정보에만 사용해야 합니다. 텍스트가 사용되는 경우 어두운 배경과 대비가 높아야 합니다. 검정색 배경에 순수한 흰색 또는 다른 강한 색상(짙은 회색이 아님)이 더 좋습니다.

어두운 UI가 잘 작동하지 않을 때

이 기사의 앞부분에서 언급했듯이 어두운 테마의 UI는 텍스트가 많고 데이터가 많은 콘텐츠 또는 다양한 콘텐츠 유형(텍스트, 이미지, 비디오, 데이터 테이블, 드롭다운, 필드 등)을 사용할 때 좋지 않은 선택입니다. ). 디자인 커뮤니티의 일반적인 합의는 단순한 콘텐츠와 여기저기에 흩어져 있는 텍스트를 다루지 않는 한 어두운 UI를 디자인하는 데 큰 도전이라는 것입니다.

문제는 충분한 대비를 유지하려는 것이며, 이는 가장 중요한 문제인 가독성, 사용성과 연결되어 UX에 영향을 미칩니다. 일반적으로 모든 색상은 흰색 배경에서 작동하지만 어두운 배경에서는 유용한 색상 범위가 크게 줄어듭니다.

다음은 어두운 테마의 UI를 사용 하지 말아야 하는 경우의 실제 예입니다. 저는 B2B SaaS 프로젝트에 참여했는데 CEO가 "다르게" 하기 위해 어두운 테마의 UI를 사용하기를 원한다고 단호했습니다. 전체 플랫폼에 대한 회사의 브랜딩과 일치하는 UI. 모두를위한. 몇 번의 회의 후, 그리고 그 원인 뒤에 있는 디자인 팀과 제품 관리자를 규합함으로써 우리는 잠재적으로 재앙이 될 수 있는 결정에 대해 그를 이야기할 수 있었습니다.

플랫폼은 표준 SaaS 애플리케이션 UI 구성 요소 세트를 사용했으며 결과적으로 테이블의 텍스트 및 숫자 데이터와 함께 양식, 위젯, 드롭다운, 픽토그램 및 아이콘으로 가득 차 있었습니다. 충분한 대비와 일관된 색 구성표를 달성하면서 탐색, 레이아웃 및 기능을 관리하기가 엄청나게 어려워졌습니다. 요약하자면 어두운 테마의 UI로 모든 것이 작동하도록 하는 것은 거의 불가능했을 것입니다.

응용 프로그램의 적합성에 따라 밝은 UI와 어두운 UI의 혼합 을 제안하는 것이 올바른 선택이었을 것입니다. 예를 들어 위젯과 양식 및 데이터 테이블이 있는 설정 페이지는 밝은 배경에서 디자인할 수 있고 차트가 있는 분석 페이지는 어두운 색 구성표로 디자인할 수 있습니다.

다크 UI 사용 시 해야 할 일과 하지 말아야 할 일

마지막으로 어두운 UI를 사용하기로 결정하는 것은 신중하게 접근해야 합니다. 디자이너는 힙하거나, 다르거나, 다른 사람의 디자인을 베끼는 등 잘못된 이유로 이 작업을 수행해서는 안 됩니다. 디자이너가 컨텍스트, 콘텐츠(대비 및 가독성), 장치 및 사용 사례를 고려하고 선택에 대한 타당한 이유가 있는 것이 중요합니다. 잠재적으로 많은 이점이 있지만 많은 함정이 있기 때문에 섬세한 균형 조정 작업입니다.

어두운 UI를 사용해도 괜찮은 경우:

• 브랜딩 색 구성표가 보증하는 경우
• 디자인이 희소하고 최소한의 콘텐츠 유형만 있는 경우
• 야간 엔터테인먼트 앱 등 문맥 및 용도에 적합할 때
• 장시간 사용하는 분석 페이지 등 눈의 피로를 줄이기 위해
• 감정을 이끌어내기 위해(예: 음모와 신비감)
• 강렬하고 드라마틱한 룩을 연출하기 위해
• 고급스럽고 품격있는 느낌을 연출하기 위해
• 시각적 계층 구조를 지원하려면

어두운 UI를 피하는 것이 가장 좋은 경우:

• 글자가 많을 때 (어두운 배경에서 읽기가 어려울 때)
• 화면에 혼합된 콘텐츠가 많을 때
• 폼, 컴포넌트, 위젯이 많은 B2B 애플리케이션의 경우
• 디자인이 다양한 색상을 요구할 때

"어두운 면"으로 넘어가는 것은 주의해서 접근해야 합니다. 함정으로 가득 찬 잠재적으로 불안정한 결정을 내리기 전에 더 깊고 철저한 연구와 분석이 권장됩니다. 디자이너는 한 번 그 길을 가면 되돌리기가 매우 어렵습니다. 디자이너는 두 발로 뛰어들기 전에 좋은 점과 나쁜 점, 해야 할 일과 하지 말아야 할 일 등 모든 측면을 고려하는 것이 좋습니다.

• • •

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

• 전자 상거래 UX – 모범 사례 개요(인포그래픽 포함)
• 제품 디자인에서 인간 중심 디자인의 중요성
• 최고의 UX 디자이너 포트폴리오 – 영감을 주는 사례 연구 및 사례
• 모바일 인터페이스에 대한 경험적 원리
• 예측적 디자인: 마법 같은 사용자 경험을 만드는 방법