고마워요! 다크모드
U-Biz Consulting Div. 시드
나는 왜 다크모드를 좋아하게 되었는가?
우리는 온종일 핸드폰을 끼고 산다. 아침에 일어나서 날씨를 확인하고 어떤 옷을 입을지 고른다. 버스나 지하철 시간표를 확인하면서 집을 나선다. 퇴근길도 물론 마찬가지다.
특히, 자기 전에 침대에 누워 핸드폰을 볼 때가 아마 하루 중 가장 편안한 시간이 아닐까 한다. 나 또한 아기를 재우고 어두운 방 안에서 인스타그램이나 웹툰을 보며 하루를 마감한다. 그럴 때마다 다크모드가 얼마나 고마운지 새삼 깨닫게 된다. 이제 다크모드가 없는 앱을 켜면 눈을 찌푸리게 된다.
그렇다면 어떤 다크모드가 있고 어떤 점이 좋은 경험을 주었는지, 어떻게 쓰면 좋은지 한번 확인해보자.
블랙이 너무 깊으면 눈이 아프다
개인적으로 가장 마음에 안 드는 다크모드는 iOS 기본 다크모드다.
아래 그림을 보자. iOS는 기본 BG Color를 완전 블랙(#000000)으로 사용하고 포인트 컬러(EB4B62)를 약간 형광 느낌의 색상으로 사용했는데 어두운 방 안에서 보면 발광하는 것처럼 보여 눈이 부시다.
우측 화면처럼 모든 화면이 다 그런 것은 아니지만 BG컬러의 색상 뎁스를 정할 때 가장 어두운 색상을 완전 블랙(#000000)으로 설정한 것이 문제로 보인다.
개인적으로 빛이 완전히 차단된 공간에서는 더욱 대비가 심해져서 흰색 텍스트나 형광색상 등이 둥둥 떠다니는 것처럼 보일 때가 있다. 이건 개인적인 느낌이라 논리적으로 설명하긴 힘들다. 아마도 난시가 있는 사람은 빛 번짐을 느끼는데 그것과 같지 않을까 추측해볼 수 있다.
피로를 줄여주는 탁월한 색상 조합은 어떤 기준을 가지는가?
다크모드 색상 조합을 가장 잘 사용한 앱으로는 에버노트, 틱틱, 토스를 들 수 있다.
각각의 색상 조합을 살펴보자 (이하 BG=배경색, P=포인트 컬러 , T=텍스트 컬러)
에버노트는 BG#262626, P#AA540, T#F7F7F7, 틱틱은 BG#212121, P#F19 E54 , T#DEDEDE를 사용했다.
눈의 피로감을 최소화해주면서도 각 앱의 포인트 컬러 또한 아주 잘 사용했다.
토스는 투톤의 블랙 컬러(#17171B, #202026)를 사용했는데 아이덴티티 컬러인 블루를 섞어서 매우 세련된 느낌을 주고 있다.
(틱틱은 기본 나이트 모드가 TrueBlack인데 TrueBlack은 iOS 기본 모드처럼 완전 블랙을 사용하기 때문에 눈에 피로감이 있다. 다행히 DarkMode가 따로 있어서 그것으로 비교했다)
자! 이제 눈이 피로하지 않다는 '느낌'을 실체화해보자.
구글 머터리얼 가이드에 나와 있는 '다크테마'에 있는 자료를 살펴보면 아래와 같이 적혀있다.
대비 : 어두운 표면 및 100 % 흰색 본문의 대비 수준은 15.8 : 1 이상입니다.
채도 : 기본 색상의 채도가 낮아서 모든 고도 수준에서 최소 4.5 : 1 (본문과 함께 사용 시)의 WCAG (Web Content Accessibility Guidelines) AA 표준을 통과합니다.
에버노트와 iOS를 비교해보면 확연히 차이가 나는 것을 볼 수 있다.(역시 느낌적인 느낌은 아니었다!)
에버노트 : 14.126(배경 컬러와 텍스트 컬러) / 4.862(배경 컬러와 포인트 컬러)
iOS : 21(배경 컬러와 텍스트 컬러) / 5.715(배경색과 포인트 컬러)
iOS 기본 앱들도 완전히 어두운 장소가 아니라면 크게 문제없을 수도 있다. 하지만 기왕이면! 어떤 곳에서라도 사용할 수 있도록 배려해준다면 더욱 완벽한 유저 경험을 제공할 수 있지 않을까?
완전 블랙(#000000)을 활용하는 방법
Dark grey계열의 색상을 배경으로 사용했을 때 완전 블랙(#000000)이 더 도드라져 보이는 효과를 줄 수 있다.
아래 세 가지 앱의 검색 영역을 살펴보자.
어떠한가?
개인적으로 포커싱을 주는 부분에 완전 블랙을 사용했을 때 더 눈에 잘 들어오는 느낌이다. 대부분의 다크 모드가 BG컬러를 기준으로 뎁스가 위로 올라올수록 더 연한 그레이톤을 사용하는 컬러 패턴을 보이는데, BG컬러보다 더 어두운 컬러를 사용한 것이 의외로 더 포커싱 되어 보이는 효과를 낳았다.
내비게이션 앱에서 위험 색상은 왜 꼭 레드여야 하나
내비게이션도 요새는 모두 다크모드가 적용되어 편하게 운전을 하고 있다.
자주 사용하는 2가지 앱을 보면서 느낀 공통점은 모두 위험 색상을 레드로 표현하고 있다는 거였다.
이 부분은 논란이 있을 수 있으니 전제를 하자. 지금의 분석은 화면만 가지고 하는 분석이다.
즉 GUI적 분석이다. 실제 운전상황에서의 위험 알림(과속 시)은 청각에 더 좌우되기 때문에 레드냐 엘로우냐가 중요하지 않을 수 도 있다.
하지만 지금은 청각은 제쳐두고, 과속 속도 숫자와 깜빡이는 레드 색상을 옐로우로 바꾼다면 어떨까? 옐로우가 훨씬 더 잘 보이지 않을까? 예를 들면 교통 표지판 중 옐로우 계열이 특히 밤에 더 눈에 잘 띈다.
어두운데서 테스트를 한번 해보자정리하며...
다크모드가 적용되는 앱이 많아지고 이제는 데스크탑 서비스(비캔버스나 잔디, 드롭박스 등)들도 다크모드를 만들어주고 있다. 물론 데스크탑에서는 다크모드는 취향으로써의 가치가 더욱 높다.
가끔 아쉬운 건, 다크모드를 적용하며 다크테마를 없앤 어플들이 있다. 시간에 따라 자동으로 변하는 다크모드와 내가 스킨을 바꿀 수 있는 다크테마 모두 개인의 선택으로 남겨두면 더 좋을 것 같다.
효율을 중시하는 구축 프로젝트에서 다크모드를 서비스에 접목시키는 건 쉬운 일은 아니다. 다크모드가 적용되는 서비스 또한 한정적일 수밖에 없다. 나중에 기회가 된다면 멋진 다크모드나 다크테마의 UX를 진행해 보고 싶다.
ps.
다크모드에 대해 한번 다뤄보고 싶었는데 생각보다 쓸 말이 없어서 별 것 아닌 것까지 들춰낸 느낌이다.
혹시 글의 논점과 의견이 다르거나, 오류가 있다면 알려주시길 바란다.
