본문 바로가기
ᴜx/ᴀʀᴛɪᴄʟᴇ

UI 디자인 - 다크모드

by jinx2a 2020. 3. 17.
반응형

 

실용적인 팁 & 트릭.

기술은 항상 우리와 함께 한다. 우리는 앱과 상호작용하고 밤낮으로 웹사이트를 읽는다. 어떤 경우에는 디지털 솔루션의 흰색 화면이 우리의 눈에 불편할 수도 있다. 그래서 점점 더 많은 디자이너들이 라이트 모드 / 다크 모드두 가지 테마로 그들의 창작물을 만드는 데 관심을 기울이는 것이다.

다크 모드는 사용자들이 자연스럽게 사용할 수 있도록 우리가 따라야 하는 특정한 규칙을 가지고 있다. 이 글은 그 규칙에 대한 모든 것을 담고 있으므로, 긍정적인 경험을 가져다주는 테마를 만들 수 있다.

 

 

 


왜 다크모드인가?

어두운 테마의 주요 장점은 조도가 낮은 환경에서 가독성이 더 좋다는 것이다. 다크 모드는 기기 화면의 밝기를 감소시킨다. 그것은 시각적 인체공학을 개선하고 특정한 빛 조건에서 더 잘 조정된다. 덕분에 저녁과 심야 시간에 디지털 솔루션과 상호작용하는 것이 훨씬 더 즐겁다.

게다가, 만약 이 장치가 OLED 디스플레이를 가지고 있다면, 다크 모드는 밝은 것보다 조금 더 많은 배터리를 절약할 수 있다.

 

 

 


다크 모드 사용 방법

  • 눈의 피로 감소
  • 시각적 계층 지원
  • 솔루션이 더욱 신비롭게 느껴지도록 함
  • 럭셔리한 인상을 심어주기
  • 야간 시간 내 가독성 향상
  • 사용 상황 확인(엔터테인먼트 앱이 늦은 시간에 사용됨)

 

 

 

 



다크 모드를 피해야 하는 경우

  • 솔루션이 바깥에서 낮 동안 사용될 경우
  • 읽을 텍스트가 많을 경우

이것들은 다크 모드의 장단점이었다. 프로젝트에서 사용할 수 있는 실용적인 팁을 살펴보자.

 

 

 

 



100% 블랙 방지

아마도 당신의 디자인에 어두운 버전을 만들고 싶을 때 가장 먼저 떠오르는 것은 – "검은 배경을 만들자!"이다.

안된다.

이것은 우리 모두가 흔히 저지르는 실수다. 우리는 배경에 매우 어두운 톤을 사용해야 한다.

구글의 머테리얼 디자인은 블랙보다는 다크 그레이 사용을 권장한다. 덕분에 더 넓은 깊이의 환경에서 고도와 공간을 표현할 수 있다. 머테리얼 디자인에서 권장되는 다크 테마 배경 색상은 #121212이다.

 

 

 

 

 


덜 강렬한 색상을 고려해라.

다크 모드는 강렬한 색상을 사용하지 않아야 한다. 그 첫 번째 이유는 접근성 – 강렬한 색상이 어두운 배경에 대한 본문 텍스트의 경우, WCAG의 기준인 4.5:1을 통과하지 못하기 때문이다.

또한 강렬한 색상은 눈의 긴장을 유발하여 배경에 대해 광학적 진동을 일으킬 수 있다.

 

 

 

 

 


밝은 모드와 어두운 모드를 위해 두 개의 색상 팔레트를 만들어라.

위의 팁에서 나는 어두운 테마에 대해 강렬하지 않은 색상이 더 잘 작용한다고 언급했다. 반면에, 우리 모두는 가벼운 사용자 인터페이스에서는 활기찬 색을 좋아한다.

어떻게 하면 이 두 세계를 맞출 수 있을까? 답은 – 두 테마 모두에 대한 보완적인 색상 팔레트를 만드는 것이 좋다.

 

 

 

 

 


다크 모드의 접근성을 기억하라.

해결책을 보다 접근하기 쉽게 하려면 어두운 테마를 적용해야 하는 구체적인 지침이 있다. 가장 중요한 것은 다음과 같다: 본문 텍스트와 배경의 대비 수준은 적어도 15.8:1이어야 한다. 덕분에 높은 표면이 가벼워지더라도 가독성이 좋아야 한다.

다음 도구를 사용하여 대비 비율을 확인할 수 있다.
대비
접근 가능한 브랜드 색상
스타크

 

 

 

 

 


그림자를 피하라.

가벼운 사용자 인터페이스에서는 깊이를 전달하기 위해 미묘한 그림자를 사용하는 경향이 있다. 덕분에 요즘의 해결책은 더욱 자연스럽게 사용한다. 그러나 대부분의 다크 모드 요소에서는 그림자를 볼 수 없다. 그렇기 때문에 덜 빈번하게 사용되어야 한다. 계층을 소통하는 또 다른 방법이 있다.

 

 

 

 

 


고도를 사용하여 계층 시각화

이미 알고 있는 바와 같이 다크 테마는 그림자가 그리 효과적이지 않다. 계층을 구분하는 더 좋은 방법은 고도의 밝기를 가지고 노는 것이다.

배경 표면이 가장 어두워야 한다. 그 위에 놓여 있는 요소들은 약간 가벼워져야 한다. 이 기법 덕분에 사용자 인터페이스가 자연스럽게 사용자들에게 인식된다.

요약하자면, 고도가 높고, 표면이 가볍다.

 

 

 

 

 


추가 팁:

 

 

 

 


플랫폼 지침을 따라라.


모든 플랫폼에서 자연스러움을 느낄 수 있는 솔루션을 만드는 것은 필수적이다. 모든 주요 플랫폼은 다크 테마(또는 모드)를 실현하는데 도움이 되는 규격을 마련했다.

 

 

 


iOS 휴먼 인터페이스 지침 주요 원칙


일반:

  • 콘텐츠에 초점을 맞추다.
  • 당신의 디자인을 밝은 모습과 어두운 모습 모두에서 시험해보라.
  •  
  • 대비 및 투명도 접근성 설정을 조정할 때 다크 모드에서도 내용을 쉽게 읽을 수 있도록 해라. (위 섹션의 팁을 통해 이 점을 확인할 수 있음)


색상:

  • 현재 모양에 맞는 색상을 사용한다. (다이나믹한 색상 – 두 컬러 팔레트 사용).
  •  
  • 모든 외관에서의 충분한 색상 대비를 보장한다.
  •  
  • 흰색 배경의 색상을 부드럽게 한다. (흰색 배경 – 더 어두운 색상, 어두운 배경 lighter 더 밝은 색상).


아이콘 & 이미지:

  • 가능한 경우 SF 기호를 사용해라. (암호 및 라이트 모드에 쉽게 조정).
  •  
  • 필요할 때 밝은 색과 어두운 색상을 위해 개별 글리프를 설계한다.
  •  
  • 전체 컬러 이미지와 아이콘이 보기 좋은지 확인해라.


텍스트:

  • 라벨에는 시스템에서 제공한 라벨 색상을 사용하십시오.
  •  
  • 시스템 뷰를 사용하여 텍스트 필드 및 텍스트 뷰를 그려라.


머테리얼 디자인 주요 원칙


일반:

  • 회색(순수한 검정 대신 진한 회색 사용)
  •  
  • 강조되는 색상(색상이 제한됨)
  •  
  • 에너지 절약(어두운 색상은 OLED 디스플레이로 장치의 전력 절약)
  •  
  • 접근성 향상(위 섹션에 언급된 사용 원칙)

 

 

 

 

 


밝은 테마와 어두운 테마로 테스트 수행

솔루션에 대한 인식은 주제에 따라 다를 수 있다. 테마가 잘 구성되었는지 확인할 수 있는 테스트를 준비해라.

또한 야간에는 낮은 조도 조건에서 다크 모드를 테스트해야 한다. 한편, 여러분은 밖에 나가서 다크 테마의 필수 요소들의 가독성이 대낮에 충분한지 확인할 수도 있다. 덕분에 사용자는 반드시 고퀄리티의 서비스를 얻을 수 있을 것이다.

 

 

 

 

 


설정하기

사용자가 원할 때 밝은 모드에서 다크 모드로 전환할 수 있도록 허용. 일광 조건에 따라 테마 간에 자동 토글을 수행할 수 있도록 설정되어야 한다.

UI 테마를 전환하는 것은 사용자의 눈에 심각한 변화로, 항상 사용자의 통제 하에 있어야 한다.

 

 

 

 

 


요약

다크 테마(또는 모드)는 현재 인기가 있다. 모든 주요 플랫폼은 그것을 지원하기 시작했고, 사용자들은 그것을 서비스에 구현해달라고 요구할 것이다. 지금은 원리를 배우고 프로젝트에 다크 테마를 만들기에 가장 좋은 시간이다.

 

 

 

 

-

저자 : Thalion
원문 링크: https://uxmisfit.com/2019/08/20/ui-design-in-practice-dark-mode/

반응형

댓글