brunch

매거진 디자인 뉴스레터 디독

라이킷 77 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 김자유 Jul 11. 2019

이제는 다크모드도 디자인해야 할 때

앱 또는 웹사이트에서 다크모드를 디자인할 때 유의사항

해외 디자인 아티클 번역 뉴스레터 '디독' 구독링크: http://bit.ly/2FNQNpv

디독

page.stibee.com

다크 모드가 전혀 새로운 개념이 아니라는 것을 먼저 짚으며 이야기를 시작해보자. 사실 이는 이미 꽤 오랫동안 존재해 왔다. 정말 오래전엔 다크 모드가 전부였다고 할 수 있다. 사실 옛날에는 모니터가 녹색-검은색 이었는데, 이는 단지 내부에 있는 인광 코팅이 방사선과 맞았을 때 녹색 빛을 발산했기 때문이다.

하지만, 컬러 모니터 시대가 도래한 후에도 여전히 다크 모드는 유지되었는데, 왜 그런 걸까?

1. 온종일 스크롤, 에러의 연속

많은 사람들이 자신들의 앱에 왜 다크 모드를 추가하기 위해 서두르는지 설명하는 두 가지 주요 요인이 있다. 우선 첫 번째로, 우리가 보는 곳 어디든 화면, 컴퓨터가 어디에나 있을 뿐 더러 우리는 밤낮으로 모바일 기기를 사용하고 있다. 여기서 다크 모드를 사용하는 것은 잠들기 전 침대에서 마지막으로 당신의 피드를 스크롤 하며 구경할 때 여러분의 눈에 피로를 줄여준다. (나 같은 사람이라면, 그 ‘마지막으로'가 실은 R/EngineeringPorn를 3시간 동안 구경하는 것일 수 있겠지만. 다크 모드? 그래 �)

또 다른 이유는 끊임 없이 혁신하는 기술에 있다. 애플, 구글, 삼성, 화웨이 등 대기업에서 주력하는 상품들은 모두 OLED 화면을 갖추고 있는데. LCD 디스플레이와는 달리 백라이트가 필요하지 않기 때문에 이는 당신의 배터리 수명에 좋다. 스마트폰에서 검은 사각 이미지를 보고 있다고 상상해보자. LCD 디스플레이에서는 대부분의 화면이 검은색일지라도 백라이트는 화면 전체를 비추게 된다. 하지만, OLED 디스플레이에서 보는 똑같은 검은 사각 이미지를 구성하는 픽셀은 꺼질 것이다. 에너지 소비가 없다는 것이다.

이런 종류의 디스플레이들은 다크 모드를 수십억 배 더 흥미롭게 하는데, 어두운 인터페이스를 제공함으로써 장치의 배터리 수명을 엄청나게 늘릴 수 있다. 지난 11월 안드로이드 개발 논의의 결과와 수치를 직접 확인해보자. 다크 모드는 일부 UI 조정으로 제공되므로, 확실하게 최신 버전을 받자!

2. 다크 모드 101

먼저, ‘어두움’은 ‘검정'과 다르다. 단순히 하얀색 백그라운드를 검정 바탕으로 바꾸기만 하면 되는 것이 아니다. 물체의 그림자를 사용하는 것이 불가하기 때문에 이렇게 한다면 당신의 디자인은 매우 평면적으로 보일 것이다. (좋은 방향으로의 평면적임을 말하는 것이 아니다)

몇 가지 기본적인 조명 음영 원칙을 유념해두는 것이 중요하다. 실제 조명과 음영에 따라 더 높게 위치한 물체는 그늘에서 더 가벼워야 하는데, 이렇게 하면 다른 요소들과 계층을 구별하는데 더 용이하다.

같은 회색에 그림자가 있는 사각형 두 개 중 한 개는 100% 검은 바탕에 다른 하나는 #1212에 배치한 후, 물체가 상승할 때, 물체는 더 밝은 회색 음영으로 변한다.

다크 모드에서는 대비만 괜찮다면 기존의 원색 그대로 작업하는 것이 가능하다. 예를 들어 설명해보자면,

이 인터페이스에서 당신의 주된 행동은 하단 바에 있는 사이즈가 큰 파란색 버튼이다. 라이트나 다크 모드 사이를 전환할 때 대비에 큰 문제가 없으며, 버튼은 여전히 눈길을 끌고, 아이콘은 선명하며, 모든 것이 잘 되어 있다.

예를 들어 텍스트에서 같은 색을 다르게 사용했을 때 문제가 발생할 수 있다. 이 때 주요 색상 중에서 연한 색상을 사용하는 것을 고려하거나, , 브랜드 색상을 인터페이스에 표현하는 다른 방법을 찾아보자.

경고나 오류에 사용되는 강한 색상들에서도 동일하다. 다크 모드로 전환할 때, 구글은 머터리얼 가이드에서 기존의 오류 상태 색상 위에 추가로 불투명도 40%의 흰색 레이어를 얹어 새로운 색상으로 사용하고 있다. AA 레벨 기준을 통과하기 위해 색상 대비 정도를 향상시키기 때문에 이는 좋은 시작점이다. 물론 여러분은 매번 색상을 원하는 대로 수정할 수 있지만, 색상 대비 정도를 확인해야 한다. Stark은 스케치에 사용되는 유용한 플러그인으로, 두 개의 레이어 사이에 대비가 어느 정도 되는지 명확하게 알려준다.

텍스트는 또 어떻고?
규칙은 간단하다. 어떤 것도 100% 흰색에서 100% 검은색이 되어서는 안 된다. 정반대의 경우에도 마찬가지이다. 흰색은 모든 빛의 파장을 반사하고, 검정은 흡수하는데 만약 당신이 100% 검정 바탕에 100% 흰색 텍스트를 얹힌다면, 텍스트는 빛을 반사함과 동시에 산란하며, 서로 구별하기가 어려워져 결국 가독성에 영향을 미치게 된다.

100% 흰색 바탕에서도 이는 동일하게 적용되는데, 너무나 많은 빛을 반사하기 때문에 온전히 단어들에 집중하기가 어렵다. 흰색을 조금 부드럽게, 배경과 검은 바탕에 올라가는 텍스트에 밝은 회색을 사용해보자. 이는 읽기에 더 쉬울 뿐 아니라 눈의 피로를 예방해줄 것이다.

3. 다크 모드는 시작됐고 앞으로도 지속될 것이다

우리의 일일 화면 노출 시간은 매일 매일 증가하고 있고, 새로운 화면은 우리가 잠에서 깨는 순간부터 다시 잠을 잘 때까지의 일상에 계속해서 추가된다. 우리의 눈은 밤 늦게까지 스크린을 쳐다보는 것에 익숙하지 않을 뿐 더러 다소 생소하기까지 하다. 여기서 다크 모드가 시작되는데, 이 기능을 맥OS와 머터리얼 가이드(그리고 iOS)에 모두에 적용될 뿐만 아니라, 우리는 다크 모드가 모바일과 데스크탑을 포함한 모든 앱에서 기본적인 기능이 될 것이라 믿어 의심치 않는다. 미리 준비해두는 것이 좋을 것이다!

다크 모드를 구현하지 않는 단 하나의 이유는 밝은 대낮에 앱이 사용되고 있다고 100% 확신할 때인데, 오히려 이 경우는 상당히 예외적이라고 할 수 있다. 우리가 앞에서 요약한 기본 원칙과는 별개로 다크 모드 구현 시 필요한 추가적인 주의사항이 몇 가지가 있다. 웹 접근성 측면에서 볼 때, 다크 모드는 대체로 대비 정도가 전반적으로 낮기 때문에 사용자 친화적이지 않으며, 이는 실제로 가독성을 향상시키는 것은 아니다.

하지만, 잠들기 전에는 다를 것이다. 매우 졸리고, 막 잠들기 직전에 매우 중요한 누군가에게 문자를 보내야 한다는 걸 기억해냈다고 상상해보자. 당신이 휴대폰을 들고, 켰을 때.. 번쩍! iMessage의 밝은 배경의 여파로 이후 당신은 3시간 동안이나 더 깨어있었을 것이다. 어두운 배경의 밝은 텍스트가 언제나 가장 편안하게 읽을 수 있는 것은 아니지만, 그 순간 만큼은 다크 모드가 수많은 사람들의 사용성을 향상시켰을 것이다. 그것은 당신의 사용자가 그 순간 처한 상황에 달려있다.

이것이 우리가 저녁에 켜졌다가 아침에는 다시 꺼지는, 자동 다크 모드가 멋지다고 생각하는 이유이다. 당신의 사용자는 정말로 유용한 이것에 대해 더이상 생각할 필요조차 없다. 트위터는 그들의 다크 모드 설정으로 정말 멋진 일을 한다. 뿐만 아니라, 그들은 OLED 화면에 다크 모드와 그보다 더 어두운 모드를 가지고 배터리를 절약한다. 중요한 걸 덧붙이자면, 당신의 사용자에게 원할 땐 수동으로 다시 되돌릴 수 있는 선택권을 주자. 전체 인터페이스를 자동으로 변경하는 것보다 더 불만스러운 것은 없기 때문이다.