다크 모드는 반전이 아닙니다

1. 검정 바탕에 흰 글씨로는 부족합니다

2018년 macOS 모하비, 이듬해 iOS 13에 다크 모드가 들어온 뒤로 휴대폰을 늘 어둡게 해 두고 쓰는 사람이 꽤 많아졌습니다. 그런데 웹사이트에도 다크 모드를 넣자는 이야기가 나오면 '배경은 검정, 글자는 흰색으로 바꾸면 되지 않나요?'라는 반응이 먼저 나오곤 합니다. 애플의 휴먼 인터페이스 가이드라인은 이 부분을 분명히 짚어 둡니다. 다크 모드의 색이 밝은 화면 색을 그대로 뒤집은 값은 아니라고요. 구글 머티리얼 디자인은 바탕색으로 새까만 검정 대신 #121212라는 짙은 회색을 권하고, 글자도 100% 흰색보다 살짝 투명도를 낮춰 쓰라고 합니다. 어두운 바탕 위의 새하얀 글자는 빛이 번지듯 흐려 보일 수 있기 때문이죠.

2. 그림자 대신 밝기로 높이를 말합니다

밝은 화면에서는 카드나 팝업이 떠 있다는 걸 그림자로 보여줍니다. 문제는 바탕이 어두워지면 그림자가 거의 보이지 않는다는 점입니다. 그래서 다크 모드에서는 높이를 밝기로 표현합니다. 머티리얼 디자인은 표면이 위로 올라올수록 반투명한 흰 막을 0%에서 16%까지 조금씩 더 씌워 밝게 만들라고 안내합니다. 애플도 생각이 비슷합니다. iOS 다크 모드에는 바닥에 깔리는 베이스 배경과, 그 위에 뜨는 시트나 팝오버에 쓰는 엘리베이티드 배경이 따로 있고 위에 올라온 쪽이 한 톤 밝습니다. 색을 반전만 해서는 이런 층이 생기지 않습니다. 모든 면이 같은 검정으로 뭉개지고, 무엇이 앞에 있고 무엇이 뒤에 있는지 읽히지 않게 되죠.

3. 브랜드 색과 로고는 다시 골라야 합니다

흰 바탕에서 선명하던 브랜드 색이 어두운 바탕에서는 갑자기 눈을 찌르는 경우가 많습니다. 머티리얼 디자인은 채도가 높은 색이 어두운 배경 위에서 떨려 보인다고 설명하면서, 같은 계열의 더 밝고 채도를 낮춘 톤을 쓰라고 권합니다. 대비도 다시 재야 합니다. 애플은 최소 4.5:1, 직접 정한 색이라면 작은 글자 기준으로 7:1을 목표로 하라고 합니다. 이미지도 손이 갑니다. 흰 배경이 깔린 사진은 어두운 화면 한가운데서 혼자 빛나고, 검은 글씨로 된 투명 PNG 로고는 아예 사라져 버립니다. GitHub가 2022년부터 마크다운 문서에서도 picture 요소로 밝은 화면용과 어두운 화면용 이미지를 따로 지정할 수 있게 한 것도 같은 이유입니다.

4. 세컨드펭귄의 시선: 다크 모드는 두 번째 팔레트입니다

그래서 우리는 다크 모드를 색 반전 옵션이 아니라 팔레트를 하나 더 만드는 일로 봅니다. 처음부터 색을 배경, 카드, 본문 글자, 강조처럼 역할 이름이 붙은 CSS 변수로 정해 두고, 밝은 화면과 어두운 화면에 각각 값을 채우는 식이죠. 기기 설정은 prefers-color-scheme으로 따르고, color-scheme 속성을 함께 지정해 스크롤바와 입력창까지 어둡게 맞춥니다. 로고와 주요 이미지는 두 화면에 모두 올려 보고, 필요하면 버전을 따로 만들고요. 손이 두 배로 가는 작업이지만, 밤에 사이트를 연 사람이 눈부시지 않고 어디를 눌러야 할지 헷갈리지 않게 하려면 들여야 하는 품입니다.