다크모드 디자인
How to design a dark mode for your app
모두가 다크모드가 뭔지는 알고 있지만, 건강하지 않은(unhealthy) 다크모드가 있을 수 있다는 것은 모를 것이다.
건강하지 않은 다크모드
검은색 배경에 흰색 텍스트를 읽으면, 홍채가 조금 더 열리고 수정체가 변형되면서 눈의 초점이 흐려진다. 이런 현상은 "fuzzing effect" 또는 "Halation"으로 알려져 있다. 건강하지 않은 다크모드는 너무 높은 대비로 몇 분 사용하지 않아도 눈에 해를 줄 수 있다.
A: Unhealthy dark mode, B: Healthy dark modePhone이나 PC의 밝기를 밝게 하고 이미지 A의 텍스트를 읽어보자. 눈에 약간 피로를 느끼며 다른 곳이 보고 싶어 질 것이다. 이제 B를 보자. 훨씬 보기 편할 것이다.
다크모드는 백과 흑의 단순한 조합이 아니다. 다크모드는 주로 불빛이 없어 눈에 피로가 별로 없는 야간에 사용한다. 그러나 어두운 배경에 밝은 텍스트는 읽기가 쉽지 않다.
그리고 다크모드는 배터리를 더 오래갈 수 있게 해 준다. 그러나 이것은 OLED 디스플레이에만 해당하며 LCD를 사용하는 스마트폰에는 별로 도움이 되지 않는다.
OLED 디스플레이 기술은 각각의 픽셀이 불을 밝힌다. 검은색은 전혀 빛을 낼 필요가 없는 것이다. 그리고 OLED 패널은 주사율이 최대 60Hz이기 때문에 다크모드에서 스크롤을 하면 순차적으로 빛을 내는 픽셀들이 낮은 주사율로 불안정해 보이게 된다. 그리고 순간적으로 시야를 흐리게 만들며 지속적으로 사용하면 피로감을 느끼게 된다.
다크모드는 배터리는 절약해 주지만 시야를 불편하게 한다.
그래서 다크모드를 어떻게 디자인해야 하나?
완전한 검정(#000000) 배경과 흰색(#ffffff) 텍스트를 조합하지 말아라. 어두운 회색 배경과 밝은 회색의 텍스트를 조합하는 것이 좋다.
앱이 순수한 검은색 테마를 사용해야 해서 다크 그레이를 사용할 수 없다면, 흰색 텍스트를 밝은 회색으로 바꾸는 것이 좀 더 낫다.
건강하지 않은 다크모드의 예
아래의 앱들은 오랜 시간 바라보기가 힘들며 피로감을 유발한다.
iOS 13’s messaging app, Twitter’s dark mode, iOS 13’s Dialler app, iOS 13’s Calendar app건강한 다크모드의 예
Slack, Twitter’s dark mode (dim mode), Spotify, CricPlay원문 출처 : https://uxplanet.org/how-not-to-design-a-dark-mode-for-your-app-1dff5977b540
