'다크모드 디자인'으로, 사용자 경험을 최상으로 높일 수 있다?

여러분은 혹시 다크모드를 알고 계시나요? 다크모드는 우리가 잘 알고 있는 구글, 인스타그램, 페이스북, 애플, 왓츠앱과 같은 세계적인 브랜드들까지도 이미 사용하고 있는 거대한 디자인 트렌드 중 하나인데요. 단순히 블랙이란 색상이 깔끔하고 보기 좋아서 유행하게 된 것이 아니라, 사용자들의 눈을 편안하게 하고, 사용자 경험을 높여주는 장점을 갖추고 있기 때문에 점점 더 선호되고 있습니다.

​이번 시간 위시켓은 이런 '다크 모드'라는 트렌드를 잘 활용하고 있는 브랜드들은 어떤 게 있는지, 그리고 여러분의 비즈니스에도 어떻게 다크모드 UI를 적용해볼 수 있을지에 대해 살펴보려고 합니다. 여러분의 웹과 앱의 디자인이 보기에도 좋고, 완벽하게 기능하길 원한다면 지금부터 집중해 주세요!

다크모드, 먼저 알아볼까요?

다크모드는 일반적으로 검은색 또는 회색의 음영 등 어두운 색상을 기본 배경색으로 사용하는 조도가 낮은 사용자 인터페이스(UI)입니다. 이는 디자이너들이 수십 년 동안 사용해 온 기본적인 흰색 UI를 역전시킨 것인데요. 다크 테마의 인터페이스는 눈의 피로도를 줄여주는 것은 물론, 사용자 경험까지 더욱 향상시킨다고 알려져 있습니다. 다크 모드의 장점들은 다음에서 구체적으로 알아보세요.

1) 눈의 피로를 줄여준다.
장시간 스크린을 보고 있으면, 눈의 피로/ 흐릿한 시야/ 겹쳐 보이는 현상/ 두통/목과 등의 통증 등이 발생합니다. 다크모드는 이러한 문제들을 줄여줄 수 있습니다.

2) 주변의 조명이 낮은 상황에서도 잘 보일 수 있게 해준다.
다크모드는 밝은 빛을 줄이고, 조도가 낮은 상황에서도 내용을 더 쉽게 볼 수 있게 해줍니다.

3) 배터리를 절약해 준다.
OLED 스크린을 사용하는 디지털 기기라면, 사용하지 않을 때는 검은색 픽셀의 전원을 끌 수 있습니다. 다크 모드는 검은색 픽셀을 더 많이 사용하기 때문에, 기기에서 에너지 사용을 줄여줍니다.

​

디자인에서 다크모드를 사용하는 법

다크모드 디자인은 어디에서나 적용할 수 있습니다. 모바일 앱에서부터 스마트워치와 TV의 인터페이스에 이르기까지, 이러한 디자인 트렌드는 브랜드를 더욱 빛나게 만듭니다. 다크모드를 제대로 사용하기만 한다면 엄청난 파급력을 자랑할 수 있습니다. 지금부터는 웹사이트와 앱의 인터페이스에서 다크 테마를 디자인할 때, 사용할 수 있는 최고의 팁들을 소개해드리겠습니다.
​

1. 너무 어둡지 않게 한다.

출판업계에서는 순백색의 종이를 사용하지 않습니다. 그 이유는 검은색 잉크와의 대비가 지나치게 두드러지기 때문인데요. 그렇게 하면 눈살을 찌푸리게 하고 두통까지 일으킬 수 있다고 합니다. 디지털 기기에서도 비슷하게 생각할 수 있습니다. 너무 새까맣고 짙은 검은색은 피하세요. 지나치게 검은색은 대비가 높은 화면을 들여다보기 어렵게 만듭니다. 다크모드에 좋은 색상은 회색 음영과 채도가 낮은 색상을 결합하는 겁니다.

​

2. 적절한 대비를 갖게 한다.

다크 모드의 배경은 흰색 텍스트가 충분히 보일 수 있을 정도로 어두워야 합니다. 구글 매터리얼 디자인(Google Material Design)이 제안하는 텍스트와 배경의 대비는 최소 15.1: 1dlqslek.

​

3. 색상의 채도를 낮춘다.

어두운 배경에서 총천연색의 색상은 피하세요. 어두운 화면에서 총천연색 색상은 '떨리는'것처럼 보일 때가 많습니다. 대신에, 파스텔 색조나 회색과 흰색이 섞여서 음영 처리된 채도가 낮은 색상을 사용해보세요. 브랜드의 컬러 자체를 조정하는 것도 좋습니다. 만약 브랜드의 색상이 파란색이라면, 그 파란색을 흰색 배경에서 사용할 때와 검은색 배경에서 사용할 때는 다르게 보일 겁니다. 다크 모드에서는 라이트 모드에서 사용할 때와 동일한 반응을 이끌어내기 위해 기존의 색상을 조정해야 할 필요가 있습니다.

​

​4. 올바른 '온(on)'컬러를 사용한다.

'온(on)'컬러가 무엇일까요? 여러 디자인과 핵심 개체의 맨 위에서 보이는 색상을 말합니다. '온'컬러는 일반적으로 글자에서 사용됩니다. 다크 모드 UI에서의 기본적인 '온'컬러는 순백색(#FFFFFF)입니다. 이것만큼은 사용하지 마세요. #FFFFFF는 다크모드 배경화면에서 떨리는 것처럼 보일 수 있습니다. 대신 밝은 회색을 사용해보세요.

​​

5. 단순히 색상만 반전시키지 않는다.

표준 모드에서 다크모드로 전환을 할 때는, 오리지널 테마에서 시각적으로 중요한 요소가 포함되어있을 수도 있습니다. 그저 단순하게 다크테마에 맞춰서 색상을 반전시키지 마세요. 그렇게 한다면 신중하게 생각해서 사용했던 색상이 무의미한 회색으로 변하게 될 수 있습니다.

​

​6. 깊이감을 준다.

레이어가 높아질수록, 그 레이어의 색상은 더 밝아져야 합니다. 이렇게 하면 다크모드 화면에서 가장 많이 사용되는 요소들에서부터 가장 적게 사용되는 것까지 시각적인 우선순위를 만들어낼 수 있습니다.

​​

7. 테스트하고, 선택의 자유를 준다.

디자인에서 다크모드와 라이트 모드를 모두 테스트해보세요. 각각의 스타일을 테스트하고, 사용자의 피드백을 기반으로 적절하게 수정하는 게 좋습니다. 어떤 것이든 사람들의 선호도를 예측할 수 없기 때문에, 사용자들에게 선택권을 주는 겁니다. 사용자들이 라이트모드와 다크모드를 직접 설정하면서, 자신의 경험을 직접 컨트롤할 수 있고, 보다 개인에게 맞춤화된 방식으로 사용하고 있다는 느낌도 줄 수 있습니다.

> 이 글은 'Dark mode design: tips for creating dark theme websites and apps'를 각색하여 작성되었습니다.