다크모드 구성, 어떻게 하면 좋을까?

–

창업부터 지금까지, 저는 쭉- 스타트업 환경에서 업무를 진행했어요. 기획 업무를 바탕으로 프로젝트와 프로덕트 관리를 병행하면서요. 저의 첫 번째 스타트업은 솜클라우드와 폰테마샵 등을 운영하는 ‘위자드웍스’였습니다. 창업을 하면서 간단한 와이어프레임이나 기능 정의들을 해본 적 있었지만, 본격적으로 프로덕트를 담당하면서 배워야 할 것들이 참 많았어요. 사수가 있었으면 정말 좋았겠지만, 스스로 해결해야 할 일들이 더 많았기에 당시에는 구글링을 하거나 기획자로 일하는 선배들에게 염치 없이 묻고 또 물으며 필요한 것들을 배워나갈 수 있었습니다. 그래서 저는 사실.. 야매 기획자이기도 해요. 좋게 말하면 들야, 매화매 – 들에서 거칠게 자란 기획자로도 볼 수 있지만 반대로 보면 FM이 아닌 기획자이기도 합니다.

저는 지금 잠시 일을 쉬고 있어요. 그 쉬는 시간들을 어떻게 활용하면 좋을까 고민하다 지난 기획 업무들을 되돌아보며 필요한 콘텐츠들을 만들고 있습니다. 그 출발점은 ’00:00’이라는 이름의 뉴스레터고, 지금 쓰고 있는 이 글이 두 번째 출발점이 될 것 같네요. 가이드북. 되게 쉽지만 어려웠어요. 나도 아직 잘 모르는데, 누군가에게 기준이 될 만한 글을 작성해서 배포해도 되는걸까? 다행히 뉴스레터를 통해 내보내는 서비스 구성 요소들에 대한 내용이 좋은 반응을 얻고 있고, 용기를 내 기획 시 참고하면 좋은 내용들을 하나, 둘 정리해보려고 합니다.

두 가지 방향으로 진행이 될 것 같아요. 하나는 또 한 명의 기획자와 함께 기획의 A-Z에 대한 내용을 정리, 발행하는 것이며 또 하나는 지금처럼 개인적으로 한 번씩 마주칠 수 있는 문제들에 대해 자료를 정리하고 생각을 덧붙이는 형태의 콘텐츠를 발행하는 것으로요. 오늘은 ‘다크모드’에 대한 내용을 먼저 정리해볼까 합니다.

–

그야 말로 다크 모드의 시대입니다. 맥OS는 모하비 버전 부터 다크 모드를 지원하고 있으며, 윈도우 10에서도 즐길 수 있게 되었죠. 안드로이드와 iOS 역시 OS 차원에서의 다크 모드 지원과 디자인 가이드를 제공하고 있습니다. 앱스토어 같은 경우 작년 가을 iOS 13 버전을 정식 배포하며 기본 앱 내 다크모드를 일괄 적용한 바 있습니다. 또 다크 모드를 발빠르게 지원한 앱들을 앱스토어 내 피처드 하기도 했죠. 크롬과 같은 브라우저에서도 마찬가지! 작년에는 슬랙을 시작으로 노션 등 다양한 서비스에서 다크 모드가 지원되기 시작했습니다.

사실 왜 다크모드를 지원해야 하지? 라는 질문에 대한 답은 간단해요. 스마트폰과 같은 디바이스를 사용하는 시간이 점점 길어지면서 눈의 피로를 덜어주고 집중도를 높여 줄 수 있는 방법 중 다크모드만큼 효율적인 방법이 없기 때문이죠.

• 눈의 피로를 덜고, 집중할 수 있는 환경을 제공해줍니다. 디지털 화면의 배경색을 어둡게 설정할 경우 눈의 피로가 줄어들고, 글자를 더 선명하게 볼 수 있어 보다 잘 집중할 수 있게 된다는 연구결과가 여럿 나와 있기도 하죠.

• 효율적인 배터리 사용 환경 제공스마트폰 배터리 소모는 화면 밝기가 아닌 화면의 색에 따라 달라집니다. 즉, OLED(Organic Light Emitting Diodes) 디스플레이 패널을 탑재한 스마트폰의 경우 화면 밝기를 가장 어둡게 설정해두는 것보다 검은색 화면을 띄워 놓는 것이 배터리 소모를 줄일 수 있는 방법이라는 것입니다. 구글은 “유튜브를 이용할 때 다크모드를 적용할 경우, 일반 화면으로 이용할 때에 비해 43%의 배터리 절전 효과를 볼 수 있었다”는 연구 결과를 설명했습니다. 또한 아몰레드 디스플레이 탑재 스마트폰에서 구글 지도를 야간모드로 작동했을 경우에도 전력 소비량은 일반 모드에 비해 63% 가량 줄어들었다고도 부연했죠 (참고로 애플은 XS 모델에서부터 OLED 스크린을 도입했습니다)

• 접근성에서도 긍정적인 역할을 합니다. 저시력자가 눈을 편안하게 하고, 색맹과 색약이 있는 사람들이 더 편안한 환경에서 서비스를 즐길 수 있기 때문입니다. 물론 다크 모드 이전에도 iOS는 설정 – 디스플레이 내 투명도를 낮추게 하거나, 명도 조절, 백색 영역을 줄이는 기능 등을 접근성 측면에서 제공하고 있었습니다.

• 넷플릭스와 왓챠는 ‘영화관’의 느낌을 주기 위해 ‘검정색’ 배경을 다크 테마가 본격적으로 도입 되기 이전부터 사용해왔습니다. 유튜브 역시 2018년 여름부터 다크 모드를 지원하고 있는데요. 영상이라는 콘텐츠 주목도를 높이기 위한 목적에서 다크모드는 아주 중요한 역할을 하고 있습니다. 유튜브를 라이트 모드와 다크 모드로 각각 써보면 집중도의 차이를 확연히 느낄 수 있습니다.

이미 많은 서비스들이 ‘다크 모드’를 적용하고 있다는 점이 아직 다크모드를 적용하지 않은 서비스들에게는 ‘고민’의 출발점이 될 수 있습니다. 다크모드의 편리함을 알게 된 사용자들이 다크모드 지원에 대한 피드백을 잔뜩 보낼 수도 있고, 사용성에 있어 부정적인 생각을 하기 시작 할 수도 있기 때문이죠. 그래서 오늘은 다크모드 적용에 대한 글들을 찾아 정리함과 동시에 잘 적용된 사례들을 간략하게 소개해보고자 합니다.

–

국내 서비스들의 ‘다크 모드’ 적용기

1.원티드 – 안드로이드 앱 다크모드 적용

구글은 Google I/O 2019에서 다크모드 지원을 권장한다고 밝혔으며, 안드로이드 10 정식 출시 이후 시스템 설정에서 다크모드 활성화가 정식으로 지원되기 시작했습니다. 원티드는 사용자 관점에서 일관적인 경험을 할 수 있도록 디자인 하는 것을 목표로 하고 있으며, 언제나 유저 입장에서 제품을 만들기 위해 노력하고 있습니다. 이에 다크 모드 지원과 맞물려 어두운 환경에서도 편안하게 앱을 사용할 수 있도록 다크테마 도입에 대해 고민, 4.4.1 버전에 정식 도입을 하게 되었습니다.

GOAL – 안정성을 유지한 채 사용자 경험 개선하기

• 개발팀 주도 프로토타이핑
• 디자인 리뷰 1차 (대표 색상 정리, 다크모드 적용을 위한 이미지 리소스 작업 요청)
• 디자인 리뷰 2차 (동시 진행되는 과제들 통합 및 이미지 리소스 적용)
• 내부 피드백 및 출시

완전히 흰색(#FFFFFF)혹은 검정색(#000000)을 제외하면 일반적으로 원본 컬러에 따라 Brightness Gradient / Saturation Gradient 20%, 30%, 40% 적용된 값이 프로토타이핑에 가장 적절한 색상.

다크모드 적용과 함께 기존 리소스 정리(미사용 리소스 제거, 리소스 네이밍 정리 등)도 함께 진행. 상당히 오랜 시간 걸리는 작업이기 때문에 병렬로 진행되는 다른 과제들에 대하여 컬러 리소스를 참조하지 않고 뷰에 직접 #RGB 형태로 디자인 작업을 하도록 사전에 공유.

HOW? – 어떻게? 그리고 무엇을 고려해야 할까?

다크모드 적용 자체는 어려운 일은 아닙니다. 안드로이드에서 제공해주는 개발자 가이드를 참고하면 됩니다. 다만, 적용 여부 확인 및 기존 화면을 확인하는 과정에 시간이 오래 걸리기에 꼼꼼하게 확인하는 것이 중요합니다.

• 대표 색상 값 정리
• 컬러 리소스 정리
• Vector Drawable 리소스 정리
• Tint 적용
• Adaptive Icon
• 미사용 리소스 제거 및 모듈 구성 변경
• 다크모드 체크 로직
• Google Map 스타일 적용

–

2.라인 무료 전화 – iOS 버전 다크 모드 적용

다크 모드 적용 전, 가장 먼저 해야 햘 일은 다크 모드로 설정을 변경한 뒤 화면이 어떻게 보이는지 파악하는 일입니다. iOS에서 기본으로 제공하는 뷰나 컨트롤을 별다른 수정 없이 사용하고 있다면 iOS가 자동으로 색상을 변경해 주기 때문에 생각보다 많은 작업이 필요하지 않을 수도 있습니다.

색상과 이미지

기존에는 한 가지 색상만 설정해도 화면 구현에 충분했기에 고정된 하나의 컬러 값을 이용해 색상을 설정. 하지만 다크 모드가 추가 되면서 같은 뷰나 컨트롤 일지라도 화면 스타일에 따라 다른 색상을 사용 할 수 있게 됨. 이에 따라 복수의 색상 관리를 위해 Xcoda부터 Semantic Colors를 제공 해줌. (다크 모드 적용 시, 다크모드 지원이 되지 않는 이전 버전에 표시될 색상을 별도로 관리해주거나 지정하는 것도 필요함)

UIImageView와 UIButton

LINE Free Call에서 사용하고 있는 대부분의 이미지들은 UIImageView나 UIButton에서 사용하는 단색의 아이콘 이미지입니다. 또한 각각의 상태(state)를 다른 색상으로 구분하여 표시하기 위해 필요한 상태의 개수만큼 동일한 모양의 다른 색상의 이미지를 여러 장 사용하고 있었습니다. 따라서 이미지와 버튼을 추가하거나 아이콘 이미지가 변경될 때마다 상태에 맞게 아이콘 이미지를 설정해야 하는 불편함이 있었습니다. 이런 불편함을 해소하기 위해 한 장의 아이콘 이미지와 tintColor를 이용하여 각 상태에 맞는 색상의 아이콘을 표시할 수 있는 SemanticImageView와 SemanticButton 클래스를 만들기로 했습니다.

좋아진 점은?

다크 모드에 대응하면서 이미지를 최대한 적게 추가하기 위해 시작한 작업이었는데요. tintColor를 이용한 덕분에 이전 버전보다 사용하고 있는 이미지 리소스 개수를 오히려 더 줄일 수 있었습니다. 게다가 아이콘의 색상이 변경될 때마다 매번 디자이너에게 수정된 이미지를 전달받아 적용하는 과정을 거쳐야 했었는데 이젠 컬러 값만 전달받아 이미지의 tintColor를 변경하는 것으로 간소화할 수 있어 작업의 효율도 조금 더 올랐습니다.

–

3.서핏 – 웹 버전 내 다크 테마 적용

다크 모드 적용 전, 선행되어야 하는 질문이 있습니다. 현재의 다크 테마는 우리에게 적합한 형태로 쓰이고 있는 걸까? 그리고 서핏은 어떤 특성을 지닌 서비스일까? 다시 한 번 정의해보면 “서핏은 디자이너들의 직무 개발을 위해, 유용한 콘텐츠를 큐레이션 해주는 서비스”

• 카테고리 선택, 스크롤 — 콘텐츠를 브라우징 합니다.
• 제목, 본문, 이미지를 파악 — 콘텐츠를 읽습니다.
• 북마크 — 콘텐츠를 저장합니다.
• 히스토리 페이지 — 읽었던 콘텐츠를 다시 읽습니다.
• 필터링, 검색 — 원하는 콘텐츠에 도달합니다.

이러한 사용자 경험들을 빗대어 봤을 때, 서핏에서 가장 중요시되어야 하는 부분은 ‘각 정보들의 우선순위 고려와 가독성’이었습니다. 어떻게 해야 사용자들이 특정 메뉴에서 피로감 없이 콘텐츠를 받아들이고, 주옥같은 콘텐츠를 발견할 수 있을지가 가장 큰 관건인 셈이죠. 뿐만 아니라 테마가 전환되더라도 일관된 브랜드를 느끼게 하는 것, 추후에 새로운 테마가 추가되더라도 최소한의 개발 공수로 작업할 수 있도록 구조화하는 것 또한 중요했습니다.

1. 콘텐츠와 메뉴의 가독성을 최우선으로 생각합니다.
2. 정보는 우선순위에 맞춰 제공합니다.
3. 코드를 구조화하여 테마 시스템을 개발합니다.

그리고 아래와 같은 기준을 잡아 다크 모드 디자인을 진행하게 되었습니다.

• 깊이감 – 정보의 우선순위 설정 : 서핏에서는 어느 곳에 깊이감을 표현해줄 수 있을까?
• 접근성과 대비 – 텍스트의 색상 대비를 이용하자

–

4.브랜디 – iOS 버전 다크 모드 적용

iOS 13에서 다크 모드 적용하기는 매우 쉽습니다. 하지만, 디자인적인 리소스가 필요하기 때문에 개발팀과 디자인팀의 협업이 반드시 필요합니다.

다크 모드에 색상 맞추기

• 다크 모드일 때는 색상 값들을 다시 지정해야 합니다. 다수의 색상을 사용할 경우, 다크 모드일 때의 색상들을 다시 지정해야 하기 때문에 관리해야 하는 색상 값들이 많아지고 불편해질 수 있습니다. 이런 점을 해결하기 위해 애플에서는 Semantic colors라는 것을 제공합니다. (라인 무료 전화에서도 활용 되었던 개념)

Semantic colors

• Semantic colors는 직역하면 “의미적 색채”의 뜻을 가지고 있는데, 조금 더 쉽게 이해하자면 ‘의미를 가진 색’으로 보면 됩니다. 예를 들어, ‘label’이라는 색상일 경우 텍스트 같은 문구에 사용하는 색상을 뜻합니다. 또한, ‘systemBackground’ 라는 색상은 배경색을 뜻하는 것으로 보면 됩니다. Semantic colors를 사용하면 좋은 점은, 개발자가 색상만 지정하면 나머지는 UIKit에서 작업합니다. 다크 모드인지 확인할 필요가 없고 시스템에서 알아서 적용합니다.
• 이와 별개로 다크 모드 일 때의 커스텀 컬러는 별도 지정해줘야 합니다.

다크 모드일 때의 이미지 적용 방법

• 이미지도 다크 모드일 때 적용하고 싶은 모습을 설정할 수 있습니다. 가장 쉬운 방법은 Image Asset Catalog를 이용합니다. Appearance를 Any, Dark로 변경하면 다크 모드일 때의 이미지를 추가할 수 있습니다. 똑같이 시스템에서 다크 모드일 때 해당 이미지를 사용하기 때문에, 개발자의 추가적인 작업은 필요 없습니다.

다크 모드 테스트 방법

• 다크 모드를 적용하면 시뮬레이터 혹은 디바이스를 통해서 테스트 가능합니다. 시뮬레이터와 디바이스를 통해서 테스트하는 방법을 설명하겠습니다. 단, 이 또한 iOS 13 이상에서만 테스트 가능합니다.

–

다크 모드 적용 시 고려해야 할 사항들은 무엇일까?

Avoid Pure Black/White

• 완벽한 검정과 흰색을 피해야 합니다. 이미 다크 모드가 잘 적용된 사례들을 보면 #000000 등의 컬러값을 쓰는 곳을 찾아보기 힘듭니다. 다크 그레이 형태의 #333335 등의 눈의 피로를 최소화 해주기 때문입니다.

Avoid Saturated Colors

• 채도가 너무 높으면 접근성에 좋지 않은 영향을 끼칠 수 있어요. 컬러 팔레트 내, 채도가 낮은 색상이 가독성을 높이고 시각적 안정감을 제공해줄 수 있습니다.

Accessibility and Contrast

• 어떤 컬러가 흰색 텍스트를 더 잘 보이게 할 수 있을까요? 이 질문에 대한 답을 색상 기준으로 꼭 생각 할 수 있어야 합니다.

Don’t convert Light to Dark

• 특정 영역만을 어두운 색으로 채우는 것은 옳은 방법이 아닙니다.

Low-Contrast grays on Imagery Products

• 1번 내용과 연결되는 내용입니다. 구글 포토는 완벽한 검정색이 아닌, 이미지를 더 잘 강조할 수 있는 어두운 회색을 사용하고 있는데요. 서비스 성격에 따라 주요 요소를 잘 보여줄 수 있는 대비를 활용할 수 있어야 합니다.

Text Opacity = Emphasis

• 불투명도를 적극 활용해야 합니다. 특히 타이틀, 버튼 등에 포함되는 텍스트의 강조를 위해서 말이죠. 가장 강조되어야 하는 텍스트는 87%, 그 다음은 60%, 비활성화 상태의 텍스트는 38% 정도가 적당하다고 하네요.

Avoid Shadows

• 가끔, 다크 모드 내 그림자를 사용하는 경우가 있어요. 안드로이드는 FAB 버튼 등에서 말이죠. 근데 생각해보면 밝을 때의 그림자는 확 눈에 띄지만, 어두울 때의 그림자는 눈에 잘 띄지 않는 것처럼 다크 모드에서의 그림자는 이도 저도 아닌 모습이 될 가능성이 높습니다.

–

다크 모드 적용 시 참고해야 할 가이드는?

1.[안드로이드] 머터리얼 디자인 – 다크 모드

구글은 머터리얼 디자인 가이드 내 ‘다크 모드’에 대한 내용도 함께 제공하고 있습니다. OS 차원에서의 가이드이기에 가장 먼저 읽어봐야 할 내용이기도 합니다.

–

2.[안드로이드] 다크 모드 개발자 문서

테마와 스타일 구성, 인앱에서 테마 변경하기 등 항목 별 자세한 설명을 확인해볼 수 있습니다.

–

3.[안드로이드] The Ultimate Guide on Designing a Dark Theme for your Android app

다크 모드와 관련된 꽤 많은 자료를 찾아봤는데, 내용이 구체적으로 잘 정리되어 있어요. 꼭 읽어 보셨으면 하는 글이기도!

–

4.[iOS] 애플 human-interface-guidelines – 다크 모드

구글 머터리얼 디자인과 같이 OS 차원, 애플에서 제공해주는 다크 모드 관련 가이드입니다. 구글에 비하면 상대적으로 빈약(?)하지만 꼭 읽어봐야 할 자료임은 분명합니다.

–

5.[iOS] Designing a Dark Mode for your iOS app — The Ultimate Guide!

3번과 동일한 글이에요. 안드로이드와 iOS 등의 차이가 있을 뿐! 마찬가지로 가이드 포함, 참고할만한 자료 등이 잘 정리되어 있어 저도 많은 도움을 받은 글입니다.

–

다크 모드 작업 시 참고 하면 좋은 서비스는?

1.dark mode design

웹 기반, 다크 모드가 적용된 사례들을 확인해 볼 수 있어요. ‘Framer’ 등의 사례도 등록되어 있어 참고하기 좋은 곳입니다. (자세히 보기)

–

2.dark mode list

1번과 비슷한 구성을 띄고 있는데요. 92개의 다크 모드 적용 웹서비스 사례를 살펴 볼 수 있는 곳입니다. (자세히보기)

–

3.dark mode design

1,2번 서비스들과 달리 다크 모드 적용 시 참고하면 좋은 자료들을 큐레이션 해주는 곳이에요. 저도 작년에 이 곳을 통해 많은 자료를 읽어볼 수 있었고, 실제 서비스 적용시에 많은 도움을 받았습니다. (자세히보기)

–

노션을 통해 1차로 정리하고 열심히 가공했지만, 쓰다 보니 부족한 점이 꽤 많은 글이 되어 버렸네요. 계속 읽어보며 보완할 점은 업데이트 하겠습니다. 다크 모드와 관련해 추가 되었으면 하는 링크나 자료가 있다면 댓글로 남겨주세요! 닉네임과 함께 각 항목에 따라 반영해두겠습니다.

–

지금 써보러 갑니다를 통해 발행되는 뉴스레터도 구독해주세요! 서비스를 구성하는 다양한 기능들을 중심으로 국/내외 사례와 에디터들의 코멘트로 구성된 내용이 격주로 발행됩니다. 이번주 발행된 내용은 ‘설정 화면 – 기능’이었어요. 구독은 이 곳을 통해 가능합니다!