다크 테마 파헤치기
Dark side of dark theme
UI에 새로운 바람이 불었다. 명백히 트렌드라 부를 수 있는 다크 테마의 바람. 많은 디자이너가 MacOS Mojave를 통해 다크 테마에 주목했으리라 생각한다. 이제 공개된지 약 10개월이 지났고, 수많은 써드파티 앱들이 이에 대응하며 다크 테마의 유행을 더욱 거세게 밀어 붙이고 있다.
2019.06 WWDC 2019에서 공개된 iOS13머테리얼 가이드에 따르면 다크 테마는 어두운 표면 위의 저조도 UI를 의미한다. 이제 다크 모드는 옵션을 넘어 UI의 필수 요소로 자리 잡게 되었다. 애플은 WWDC19를 통해 iOS 13의 다크 모드를 공개 했고, AndroidQ 또한 올해에 다크 모드를 공개했다. Window10, Chrome, Firefox 등 왠만한 OS와 웹 브라우저는 이미 다크 모드를 제공하고 있었다. 페이스북, 트위터 등 글로벌 서비스 뿐 아니라 카카오톡 등 국내 서비스들도 다크 테마를 제공하기 시작했다. 전혀 새로운 개념이 아님에도 갑자기 다크 테마가 주목 받게 된 이유는 뭘까. 그 전에 다크 테마의 진실에 다가가보자.
1. 다크 테마에서 더 잘 읽히는 것은 아니다.
애플은 다크 모드에서 더 읽기 쉽다고 했지만 완벽하게 사실은 아니다. 대부분의 연구에서 밝은 배경 위의 어두운 요소들이 보기 쉽다는 결론을 내린다. 관련 글 흰 배경 위의 검은 글자가 가독성, 판독성, 가시성 면에서 모두 우월하다는 것이다. 참고로 가독성은 글의 흐름이 잘 읽힌다는 의미의 Readability를, 판독성은 글자 하나 하나가 또렷하게 구분되어 보이는 Legibility를, 가시성은 선명하게 잘 보이는 Visibility를 의미한다.
현실 세계에서 밝은 환경에서의 활동이 보편적이기 때문에 밝은 배경 위의 물체들이 더 잘 보이는 심리적 이유도 작용한다.
Typescript 화면하지만 디스플레이에서 흰 배경일 때 조도가 높기 때문에 눈의 피로도가 높은 것은 사실이다. 개발자들이 검은 배경으로 코딩하는 이유지만, 이것이 생산성과 직접 관련된다는 증거는 아직 없다고 한다. 관련 글
2. 다크 테마에서 배터리가 더 절약되는 것은 아니다.
구글은 AndroidQ를 공개하며 다크 모드일 때 배터리가 절약된다고 말했다. 유튜브 다크 모드에서 배터리가 최대 60%까지 절약된다고. 하지만 이는 OLED 스크린일 때만 해당된다. 애플은 XS가 되서야 OLED 스크린을 도입했고, 아직까지 맥북을 포함해 대부분의 PC화면은 OLED가 아니다. 결국 일반적인 LCD 스크린의 배터리와는 상관이 없다는 뜻이다. 구글 픽셀과 삼성 갤럭시를 제외한 나머지 안드로이드 폰들 또한 OLED 스크린이 아니다.
슬프게도 OLED라고 해도 True black #000000이어야 픽셀이 완전히 꺼진다. 구글이 거짓말을 할리 없겠지만 머테리얼 디자인에서 추천하는 다크 테마 배경색은 #121212이며, 우리가 보는 대부분의 앱들은 완벽한 검정이 아니라 어두운 회색 정도다. XDA Developers에 따르면 일반적인 다크 테마에서 배터리는 0.3% 절약되기 때문에 사용자가 거의 인지할 수 없을 정도라고 한다. 약간 배신감이 느껴지는 건 나만 그런가.
그렇다고 다크 테마가 쓸데없는 장식용 옵션 중 하나라고 생각하진 않는다. 사용성 측면에서 효용이 크다고 생각하는데, 내가 공감하는 다크 테마의 용도는 이렇다.
1. 어두운 환경
상식적으로 이해할 수 있는 장점이다. 어두울 때 눈이 부시지 않는다는 점. 잠들기 전 침대에서 핸드폰을 볼 때 조도를 낮춰본 경험이 한 번 쯤은 있지 않나. 낮에만 활동할 수 있었던 인류는 이제 밤에도 활동해야하기 때문에 이에 맞는 디스플레이가 필요해졌다. 어두운 환경에서의 디지털 노동을 위한 UI가 드디어 완성된 셈이다.
트위터 다크테마2. 접근성 향상
저시력자 혹은 밝은 빛에 예민한 사용자들에게는 다크 테마가 확실히 도움이 된다. 앞서 눈의 피로도를 낮추는 데는 효과가 있다고 한 것과 같은 맥락이다. 이 때문에 다크 테마가 유행하기 훨씬 이전에도 많은 OS에서 접근성 향상을 위한 시도가 이뤄지고 있었다. 이를테면 iOS는 디스플레이 옵션에서 투명도를 낮추는 기능, 명도를 낮추는 기능, 백색 영역을 줄이는 기능 등을 제공하고 있었고, Invert color 옵션(색 반전)이 가능하기도 했다. 이는 컴포넌트 간 대비를 높여 저시력자에게 도움을 준다.
Inverted color3. 컨텐츠 주목도 향상
다크 테마 유행 이전에 이를 효과적으로 사용한 서비스는 넷플릭스다. 왓챠 플레이는 영화관의 느낌을 주기 위해 다크 테마를 사용했다고 하는데 우리가 어두운 곳에서 영화를 보는 이유와 같다. 영상에 몰입할 수 있게 다른 방해 요인을 차단하는 것. 유튜브는 작년 여름부터 다크 테마를 제공하기 시작했는데, 확실히 영상 컨텐츠에는 다크 테마가 잘 어울린다.
팽창색과 수축색은 보통 난색과 한색일 때 자주 쓰지만, 명도가 높으면 확산되어 보이고 명도가 낮으면 축소되어 보이기 때문에 때문에 검은색은 수축색, 흰색은 팽창색으로 볼 수 있을 것이다. 수축색이기 때문에 집중도가 높아지는 것은 아닐지 추측해본다.
다크 테마의 대표주자 넷플릭스
Youtube 다크 모드4. Private & Personal
혹은 Special & Premium 감성
일찍이 다크 모드를 부분적으로 사용했던 크롬을 보자. 시크릿 탭을 열 때 다크 모드가 되는데, 굉장히 비밀을 잘 지켜줄 것 같은 느낌이다.
여기서 부터는 사용성 측면이라기 보다는 브랜드 맥락 상 블랙을 사용하는 경우에 가깝다. 검은색은 보통 프리미엄 서비스의 느낌을 주기 위해 사용된다. 이를테면 카카오 블랙, 우버 블랙처럼 프리미엄 이미지를 주기 위해 네이밍부터 블랙을 사용하는 서비스들이 많다. V live 앱의 경우 유료 서비스인 Fanship은 진입 시 다크 테마로 변경된다. 29cm는 3일 간만 열리는 기획전 블랙딜을 운영하며, 이벤트 페이지는 항상 다크 테마를 유지하고 있다. 프리미엄 혹은 특별함을 표현하는 가장 빠른 방법 중 하나.
현대카드 스튜디오 블랙 또한 브랜드 컬러와 명칭 자체를 블랙으로 가져가며 Extraordinary함을 표현하고 있고, 마찬가지로 다크 테마로 웹사이트를 유지하고 있다. 앞서 인간은 밝은 환경에서의 활동을 보편이라고 느끼기 때문에 블랙으로 전환하는 것 만으로도 쉽게 특이하고 새로운 뉘앙스를 전달할 수 있다.
다크 테마에서의 UI 디자인
다크 테마는 UI 디자이너들에게 새로운 도전일 것이다. 흰 배경 위에서의 UI와 검은 배경에서의 UI는 생각보다 많은 것이 다르기 때문이다. 예를 들어 흰 배경 위에 개체를 표현할 땐 그림자를 짙게 깔면 되지만 검은 배경 위에선 그림자가 두드러지지 않기 때문에 더 높은 레이어일수록 표면을 밝게 빼야한다. 순수한 검은색이 아니라 어두운 회색을 사용하는 이유도 그림자를 표현할 수 있는 여지를 남기고, 너무 강렬한 흑백 대비를 피하기 위함이다.
출처 : 구글 머테리얼 디자인흰 배경에 비해 검은 배경이 더 어두워 보이기 때문에 같은 색이어도 더 명도를 높여야한다. 언뜻 보기에 같은 컬러처럼 보여도 실제론 선연하게 다른 값을 사용하고 있다. 배경 컬러로 끝날 게 아니라 거의 처음부터 컬러 팔레트를 다시 잡아야 한다.
Mac Finder 태그 부분명도를 높이면 채도도 올라갈테지만 다크 테마에서는 지나치게 채도가 높은 컬러는 배경과 진동하며 가시성을 매우 떨어뜨린다. 머테리얼 가이드 컬러툴에서 접근성까지 확인할 수 있으니 다크 테마 제작 시 활용해보자.
채도가 너무 높으면 안 보여요색상 대비는 가독성의 중요한 요소 중 하나인데, 웹 콘텐츠 접근성 지침에 따르면 배경과 텍스트 간의 명도차는 최소 4.5:1 이상이어야한다.
.Go extra mile with darkness
컬러만 세심하게 튜닝한다고 다크 테마를 완성할 수 있는 것은 아니다. 다크 테마의 존재 이유에 부합하는 새로운 사용성을 발굴해야 완성도를 높일 수 있을 것이다. iOS 13의 경우 컨트롤 패널에서 바로 다크 테마 진입이 가능해졌다. "어디서 어떻게 다크 테마에 진입할지"는 디자이너들에게 과제로 남은 것 같다.
iOS 13의 컨트롤 패널
앱바에서 토글로 전환하는 형태OS Mojave 사용자라면 공감할 수 있을 기능 중 하나로 다이나믹 월페이퍼가 있다. 맥 바탕화면이 시간대에 따라 변화하는 것인데, 아주 작은 인터렉션일 수 있으나 사용자의 입장에선 은근히 감동으로 다가온다. 일출-일몰에 따라 변하는 나의 공간이라니. 애플은 전제품에 다크 테마를 적용해 기기 간 일관성을 아주 잘 구축하고 있다.
다크 테마에 대한 대부분의 것을 정리했지만 직접 가이드를 보는 것이 제일 큰 도움이 될 것이다. 다크 테마 UI 디자인을 정리해놓은 머테리얼 가이드와 Human Interface Guidelines를 통해 더 상세한 정보를 얻기를 바라며, 틀린 정보와 새로운 정보는 댓글로 알려주세요!
