UI & UX, UX & Design

다크 모드 파헤치기

UI에 새로운 바람이 불었다. 명백히 트렌드라 부를 수 있는 바람. 많은 디자이너가 MacOS 모하비(MacOS Mojave)를 통해 다크 모드에 주목했으리라. 공개된 지 2년이 넘었으나 여전히 수많은 서비스가 다크 모드에 대응하며 유행을 거세게 밀어붙이고 있다.

머티리얼 가이드에 따르면 다크 모드는 ‘어두운 표면 위의 저조도 UI’를 의미한다. 이제 다크 모드는 옵션을 넘어 UI의 필수 요소로 자리 잡았다. 애플은 WWDC19를 통해 iOS 13의 다크 모드를 공개했고, AndroidQ 또한 같은 해에 다크 모드를 공개했다. 사실 Windows 10, Chrome, Firefox 등 웬만한 OS와 웹 브라우저는 이미 다크 모드를 제공하고 있었다. 페이스북, 트위터 등 글로벌 서비스뿐 아니라 카카오톡 등 국내 서비스도 다크테마를 제공하기 시작했다. 전혀 새로운 개념이 아니었음에도 다크 모드가 주목 받게 된 이유는 뭘까. 그 전에 다크 모드의 진실에 다가가보자.

1. 다크 모드에서 더 잘 읽히는 것은 아니다

애플은 다크 모드에서 읽기 쉽다고 했지만, 완벽히 맞는 말은 아니다. 대다수의 연구에서 밝은 배경 위의 어두운 요소가 더 보기 쉽다는 결론을 내렸다.*(참고자료1) 흰 배경 위의 검은 글자가 가독성, 판독성, 가시성 면에서 모두 우월하다는 것이다. 참고로 가독성(Readability)은 글의 흐름이 잘 읽힌다는 의미를, 판독성(Legibility)은 글자 하나하나가 또렷하게 구분되어 보이는 것을, 가시성(Visibility)은 선명하게 잘 보이는 것을 의미한다. 현실 세계에서 밝은 환경에서의 활동이 보편적이기 때문에 밝은 배경 위의 물체가 더 잘 보이는 심리적 이유도 있다.

하지만 디스플레이에서 흰 배경일 때 조도가 높기 때문에 눈의 피로도가 높은 것은 사실이다. 개발자들이 검은 배경으로 코딩하는 이유지만, 이것이 생산성과 직접 관련있다는 근거는 아직 없다고 한다.*(참고자료2)

2. 다크 모드에서 배터리가 더 절약되는 것은 아니다

구글은 AndroidQ를 공개하며 다크 모드일 때 배터리가 절약된다고 밝혔다. 유튜브 다크 모드에서 배터리가 최대 60%까지 절약된다고. 하지만 이는 OLED 스크린일 때만 해당된다. 애플은 XS가 돼서야 OLED 스크린을 도입했고, 아직까지 맥북을 포함해 대부분의 PC 화면은 OLED가 아니다. 결국 일반적인 LCD 스크린의 배터리와는 상관이 없다는 뜻이다. 구글 픽셀과 삼성 갤럭시를 제외한 나머지 안드로이드 스마트폰 또한 OLED 스크린이 아니다.

슬프게도 OLED라고 해도 True black #000000이어야 픽셀이 완전히 꺼진다. 구글이 거짓말을 할리 없겠지만 머티리얼 디자인에서 추천하는 다크 모드 배경색은 #121212이며, 우리가 보는 대부분의 앱들은 완벽한 검정이 아니라 어두운 회색 정도다. XDA Developers*(참고자료3)에 따르면 일반적인 다크 모드에서 배터리는 0.3% 절약되기 때문에 사용자가 거의 인지할 수 없을 정도라고 한다. 

그렇다고 다크 모드가 쓸 데 없는 장식용 옵션 중 하나라고 생각하진 않는다. 사용성과 콘셉트 측면에서 다크모드의 가치를 소개해본다.

1. 어두운 환경

상식적으로 이해할 수 있는 장점이다. 어두울 때 눈이 부시지 않는다는 점. 잠들기 전 침대에서 핸드폰을 볼 때 조도를 낮춰본 경험이 한 번쯤은 있을 것이다. 낮에만 활동할 수 있었던 인류는 이제 밤에도 활동해야 하기 때문에 이에 맞는 디스플레이가 필요해졌다. 어두운 환경에서의 디지털 노동을 위한 UI가 드디어 완성된 셈이다.

2. 접근성 향상

저시력자 혹은 밝은 빛에 예민한 사용자들에게는 다크테마가 확실히 도움이 된다. 앞서 눈의 피로도를 낮추는 데는 효과가 있다고 한 것과 같은 맥락이다. 이 때문에 다크 모드가 유행하기 훨씬 이전에도 많은 OS에서 접근성 향상을 위한 시도가 이뤄지고 있었다. 이를테면 iOS는 디스플레이 옵션에서 투명도를 낮추는 기능, 명도를 낮추는 기능, 백색 영역을 줄이는 기능 등을 제공하고 있었고, 색 반전(Invert color) 옵션이 가능하기도 했다. 이는 컴포넌트 간 대비를 높여 저시력자에게 도움을 준다.

3. 콘텐츠 주목도 향상

다크 모드가 유행하기 훨씬 전에 이를 효과적으로 사용한 서비스는 넷플릭스다. 왓챠 플레이 또한 영화관의 느낌을 주기 위해 다크 모드를 사용했다고 한다. 영상에 몰입할 수 있게 다른 방해 요인을 차단하는 것이다. 유튜브의 다크 모드까지 더해져, 확실히 영상 콘텐츠에는 다크 모드가 잘 어울리고 자연스럽다는 것을 체감할 수 있다.

페이스북, 인스타그램, 트위터 등 콘텐츠 소비가 많은 SNS 서비스도 완벽하게 다크 모드 대응을 해뒀고, 이제 웬만한 글로벌 서비스들 중 다크 모드 대응이 되지 않는 서비스는 보기 어려워졌다. 트위터는 미묘하게 쿨톤을 사용해 약간의 차별화를 꾀했다.

4. 어두운 감성

사용성 측면에서 다크 모드를 제공하는 경우도 있겠지만, 의도적으로 다크 ‘테마’로 시작하는 서비스들도 있다. 아무래도 다크 모드를 사용하면 브랜드 맥락상 차별화하기 쉽기 때문이다.

Private & Personal

일찍이 다크 모드를 부분적으로 사용했던 크롬을 보자. 시크릿 탭을 열 때 다크 모드가 되는데, 굉장히 비밀을 잘 지켜줄 것 같은 느낌이다.

Professional & Geek

Framer는 프로토타입을 만드는 툴인데, 올해 Framer web을 발표하며 메인 페이지를 다크 테마로 바꿨다. 좀 더 기술적이고 전문적인 느낌이다.

앞서 이야기했듯 개발자들이 다크 모드에서 코딩하는 것을 선호하다 보니 개발 관련 이벤트에 다크 테마가 자주 활용되기도 한다.

Special & Premium

검은색은 보통 프리미엄 서비스의 느낌을 주기 위해 사용된다. 이를테면 카카오 블랙, 우버 블랙처럼 프리미엄 이미지를 주기 위해 네이밍부터 블랙을 사용하는 서비스도 자주 볼 수 있다. 애플의 경우 항상 일반 제품은 라이트 테마를, Pro 제품은 다크테마를 사용하고 있다. 프리미엄 혹은 특별함을 표현하는 가장 빠른 방법 중 하나다.

다크 모드에서의 UI 디자인

다크테마는 UI 디자이너들에게 새로운 도전이다. 흰 배경 위에서의 UI와 검은 배경에서의 UI는 생각보다 많이 다르기 때문이다. 예를 들어 흰 배경 위에 개체를 표현할 땐 그림자를 짙게 깔면 되지만 검은 배경 위에선 그림자가 두드러지지 않기 때문에 더 높은 레이어일수록 표면을 밝게 빼야 한다. 순수한 검은색이 아니라 어두운 회색을 사용하는 이유도 그림자를 표현할 수 있는 여지를 남기고, 강렬한 흑백 대비를 피하기 위함이다.

흰 배경에 비해 검은 배경이 더 어두워 보이기 때문에 같은 색이어도 명도를 더 높여야 한다. 언뜻 보기에는 같은 컬러처럼 보여도 실제론 선연하게 다른 값을 사용하고 있다. 배경 컬러를 이용해서만 작업할 것이 아니라 처음부터 컬러 팔레트를 다시 잡아야 한다.

명도를 높이면 채도도 올라가겠지만 다크테마에서는 지나치게 채도가 높은 컬러는 배경과 진동하며 가시성을 떨어뜨린다. 머티리얼 가이드 컬러툴*(참고자료4)에서 접근성까지 확인할 수 있으니 다크 테마 제작 시 활용해보자. 색상 대비는 가독성의 중요한 요소 중 하나인데, 웹 콘텐츠 접근성 지침에 따르면 배경과 텍스트 간의 명도 차는 최소 4.5:1 이상이어야 한다.

다크 테마의 맥락

컬러만으로 다크 테마를 완성하기는 어렵다. 특별한 느낌을 주고 싶다고 해서 아무 곳에나 다크 테마를 활용하는 것은 지양해야 한다. 원래 다크 모드를 지원하지 않았던 서비스가 갑자기 다크 테마를 사용한다면, 잠시 시선을 끌 수는 있어도 사용성이 오히려 떨어지게 된다. 줄곧 다크 테마를 원활하게 유지했던 사례로는 Spotify가 있다. 

다크 테마의 존재 이유에 부합하는 새로운 사용성을 발굴하는 것이 중요하다. 맥의 다이나믹 월페이퍼가 적절한 예시다. 바탕화면이 시간대에 따라 변하는데, 아주 작은 인터랙션일 수 있으나 사용자의 입장에선 은근한 감동이다. 일출-일몰에 따라 변하는 나의 공간이라니. 애플은 전 제품에 다크 테마를 적용해 기기 간 일관성을 잘 구축하고 있다.


참고자료

https://tidbits.com/2019/05/31/the-dark-side-of-dark-mode/

https://medium.com/@tigranbs/why-developers-prefer-dark-coding-themes-a00cbf9d8900

https://www.androidauthority.com/true-black-dark-mode-1003537/

https://material.io/resources/color/#!/?view.left=0&view.right=0

Comments
  • digital-insight-202102-offline-ads-theuber
© DIGITAL iNSIGHT 디지털 인사이트. 무단전재 및 재배포 금지

뉴스콘텐츠는 저작권법 제7조 규정된 단서조항을 제외한 저작물로서 저작권법의 보호대상입니다. 본 기사를 개인블로그 및 홈페이지, 카페 등에 게재(링크)를 원하시는 분은 반드시 기사의 출처(로고)를 붙여주시기 바랍니다. 영리를 목적으로 하지 않더라도 출처 없이 본 기사를 재편집해 올린 해당 미디어에 대해서는 합법적인 절차(지적재산권법)에 따라 그 책임을 묻게 되며, 이에 따른 불이익은 책임지지 않습니다.

Related Posts