설명
다크 모드란 무엇인가요?
자기 전에 침대에서 휴대폰을 집어 들었는데, 방 불은 꺼져 있고 하얀 화면이 전등처럼 얼굴을 비춥니다. 다크 모드는 바로 이런 순간을 위해 있습니다.
다크 모드(Dark Mode)는 웹사이트나 앱 화면을 평소의 흰 바탕에 검은 글자 대신, 어두운 배경과 밝은 글자, 밝은 아이콘으로 보여 주는 방식입니다. 내용은 그대로입니다. 버튼도 메뉴도 글자도 같습니다. 바뀌는 것은 색뿐이고, 주변이 어두울 때도 화면이 눈에 부드럽게 보이도록 하기 위해서입니다.
야간 모드나 다크 테마라고도 부릅니다. 지금은 휴대폰과 컴퓨터 시스템에도, 우리가 매일 쓰는 대부분의 앱에도 들어 있어서, 사람들은 새로 나오는 웹사이트와 앱에도 당연히 있기를 기대합니다.
다크 모드는 어떻게 작동하나요?
휴대폰과 컴퓨터에는 사용자가 밝은 화면과 어두운 화면 중 하나를 고르는 기본 설정이 있고, 해가 지면 저절로 바뀌는 기기도 있습니다. 잘 만든 웹사이트나 앱은 이 설정을 읽어서 처음 여는 순간부터 알맞은 색으로 보여 줍니다.
두 번째 방법도 있습니다. 사이트나 앱 안에 있는 작은 버튼으로, 흔히 해와 달 모양인데, 사용자가 직접 두 모드를 바꿀 수 있습니다. 그다음부터 시스템이 그 선택을 기억하기 때문에 방문할 때마다 라이트 모드로 돌아가지 않습니다.
속을 들여다보면, 디자이너는 화면의 모든 요소에 두 가지 색 묶음을 준비합니다. 배경, 글자, 버튼, 테두리, 표의 색입니다. 그러면 시스템이 모드에 맞는 묶음을 골라 씁니다. 낮에 쓰는 조명과 밤에 쓰는 조명이 따로 있는 방을 떠올려 보세요. 조명이 바뀌어도 가구는 제자리에 있습니다.
다크 모드가 왜 중요할까요?
웹사이트나 앱을 운영한다면 방문자는 하루 중 여러 시간대에 그것을 엽니다. 밤에 둘러보는 사람도 많습니다. 다크 모드는 그 시간대의 경험을 눈에 띄게 바꿉니다.
- 어두운 곳에서 편한 눈: 어두운 방에서도 어두운 화면은 눈부시지 않아서, 독자가 글을 끝까지 읽거나 상품을 더 오래 둘러봐도 불편하지 않습니다.
- 배터리 절약: OLED 화면 휴대폰에서는 검은 점이 거의 꺼져 있어 전기를 쓰지 않습니다. 그래서 이런 화면에서는 다크 모드가 배터리를 덜 씁니다.
- 오래 일하는 사람의 피로 감소: 하루 종일 대시보드나 관리 시스템 앞에 있는 직원은 하루가 끝날 무렵 차이를 느낍니다. 야간 근무라면 더 그렇습니다.
- 사용자의 선택 존중: 휴대폰에서 어두운 화면을 골라 둔 사람이 새하얗게 빛나는 여러분의 사이트를 열면, 이 사이트가 자신을 신경 쓰지 않는다고 느낄 것입니다.
그렇다면 다크 모드가 언제나 더 좋을까요? 아닙니다. 햇빛 아래나 밝은 사무실에서는 흰 바탕의 검은 글자를 더 쉽게 읽는 사람이 많습니다. 목표는 선택을 사용자에게 맡기는 것입니다.
라이트 모드와 다크 모드의 차이
| 항목 | 라이트 모드 | 다크 모드 |
|---|---|---|
| 배경 | 흰색이나 밝은 색 | 짙은 회색이나 남색 |
| 글자 | 검은색이나 어두운 색 | 살짝 회색빛이 도는 흰색 |
| 잘 맞는 시간 | 낮과 밝은 곳 | 밤과 어두운 방 |
| 배터리 | 보통 사용량 | OLED 화면에서 더 적은 사용량 |
| 긴 글 읽기 | 밝은 곳에서는 대부분의 사람에게 더 쉬움 | 어두운 곳에서 더 편함 |
눈이 편한 다크 모드를 디자인하는 방법
색을 뒤집기만 하면 대개 결과가 좋지 않습니다. 사람들이 편하게 느끼는 다크 모드에는 작은 결정이 많이 필요합니다.
- 완전한 검정 대신 짙은 회색: 새까만 색과 밝은 흰색이 나란히 있으면 대비가 너무 강해 눈이 피로해집니다. 짙은 회색이나 남색 배경이 더 차분합니다.
- 밝지만 눈부시지 않은 글자: 살짝 회색빛이 도는 흰색이 순수한 흰색보다 읽기 편합니다.
- 충분한 대비: 대비는 글자 색과 배경 색의 차이입니다. 이 차이가 너무 작으면 읽기 어려워지고, 특히 나이 드신 분과 시력이 약한 분에게 그렇습니다. 접근성 기준인 WCAG는 이 차이의 최소 기준을 정해 두었습니다.
- 조금 더 부드러운 브랜드 색: 강한 파랑이나 빨강은 어두운 배경에서 너무 튀기 때문에 조금 더 차분한 색조가 필요합니다.
- 두 배경 모두에 맞는 로고와 이미지: 검은 로고는 어두운 배경에서 보이지 않으므로 밝은 버전이 필요합니다. 아주 밝은 사진은 조금 어둡게 조정해야 할 수도 있습니다.
- 표와 그래프: 대시보드에서는 막대와 선의 색을 확인해서 두 모드 모두에서 잘 보이게 해야 합니다.
다크 모드를 추가할 때 자주 하는 실수
- 첫 페이지에만 다크 모드를 켜고 결제 페이지나 로그인 창 같은 다른 페이지를 잊어서, 그곳만 갑자기 하얗게 나타나는 경우.
- 어두운 배경 위에 흐린 회색 글자를 써서 거의 아무도 읽지 못하는 경우.
- 사용자의 선택을 저장하지 않아서 사이트가 매번 라이트 모드로 돌아가는 경우.
- 기기 설정을 무시하고 모두에게 한 가지 모드만 쓰게 하는 경우.
- 화면마다 색이 다르게 보이는데도 출시 전에 실제 휴대폰에서 다크 모드를 확인하지 않는 경우.
- 디자인이 끝난 뒤 프로젝트 마지막에 덧붙여서, 화면의 일부가 아니라 땜질처럼 되어 버리는 경우.
우리가 만드는 웹사이트와 앱의 다크 모드
Linkysoft는 디자인이 끝난 뒤가 아니라 디자인 첫날부터 다크 모드를 계획합니다. 웹사이트 디자인 및 개발 서비스로 만드는 모든 사이트에는 다크 모드가 기본으로 들어 있고, 아랍어와 오른쪽에서 왼쪽으로 쓰는 글(RTL)을 지원하며, 접근성 기준인 WCAG 2.2를 따릅니다. 출시 전에는 실제 휴대폰에서 확인합니다.
모바일 앱 개발에서는 iPhone과 Android용 앱을 라이트 모드와 다크 모드, 누구나 쓰기 쉬운 화면을 갖추어 처음부터 디자인합니다. 그다음 App Store와 Google Play에 출시하고 업데이트도 계속 맡습니다.
여러분의 프로젝트가 팀이 하루 종일 쓰는 판매, 재고, 인사 같은 관리 시스템인가요? 그렇다면 웹 애플리케이션 및 관리 시스템 서비스로 여러분 회사의 일하는 방식에 맞춰 만들고, 모든 기기에서 작동하게 합니다. 이런 경우에는 눈의 편안함도 계획에 넣을 만합니다. 같은 화면이 직원 앞에 8시간 넘게 열려 있기 때문입니다.
새 웹사이트나 앱을 생각하고 계신가요? 우리와의 무료 상담으로 시작해서, 사용자가 낮과 밤에 무엇을 필요로 하는지 함께 정해 보세요.