2026.10.04 - 다크 UI에서 순검정을 피하게 된 이유

처음 다크 모드를 만들 때는 배경을 #000000으로 했다. 가장 어두우니까 가장 다크하다고 생각했다. 지금은 그렇게 안 한다. 이유는 대략 세 가지다.

1. 흰 글자가 너무 세게 번진다

검정 배경에 흰 글자를 올리면 대비가 극단적이다. 대비는 높을수록 좋다고 배웠는데, 긴 글에서는 오히려 읽기 피곤하다. 글자 가장자리가 번져 보이는 느낌이 생긴다. 밤에 방을 어둡게 하고 폰으로 긴 글을 읽어 본 사람은 알 것이다.

그래서 이렇게 바꿨다.

:root {
  --bg: #121316;      /* 순검정 대신 아주 어두운 회색 */
  --surface: #1a1c20; /* 카드 */
  --text: #e6e7ea;    /* 순백 대신 약간 낮춘 흰색 */
}

배경은 어둡게, 글자는 살짝 낮춘다. 대비비는 여전히 충분히 높다(WCAG 기준은 본문 4.5:1 이상이고 이 조합은 훨씬 넘는다). 그런데 눈에 닿는 느낌은 훨씬 부드럽다.

2. 깊이를 표현할 방법이 없어진다

라이트 모드에서는 그림자로 층을 만든다. 카드가 배경보다 위에 떠 있다는 걸 그림자가 알려준다. 그런데 순검정 위에서는 그림자가 보이지 않는다. 검정 위에 더 검정을 올릴 수 없기 때문이다.

배경이 #121316이면 얘기가 달라진다. 위에 올라오는 층일수록 조금 더 밝게 만들면 된다.

.card       { background: var(--surface); }      /* #1a1c20 */
.card-hover { background: #21242a; }
.modal      { background: #272a31; }

높이가 올라갈수록 밝아지는 규칙 하나면 그림자 없이도 층이 보인다. 이 규칙을 정해 두면 새 컴포넌트를 만들 때도 “이건 몇 층이지?”만 생각하면 된다.

다크 모드의 층은 그림자가 아니라 밝기로 만든다.

3. OLED 번인은 생각보다 작은 이유다

순검정을 쓰는 이유로 OLED 절전이 자주 언급된다. 맞는 말이다. 검정 픽셀은 꺼지니까 전력이 덜 든다. 하지만 웹 UI에서 배경 전체가 순검정일 때 얻는 이득은 내가 쓰는 서비스 규모에서는 체감할 수준이 아니었다. 눈의 피로와 깊이 표현을 포기하면서 얻을 만큼은 아니라고 판단했다. 배터리가 정말 중요한 앱이라면 따로 측정해 보고 정하면 된다.

채도도 한 번 확인한다

회색에 아주 약한 색 기운을 섞으면 훨씬 고급스러워 보인다. 위의 #121316도 파랑이 아주 조금 섞여 있다. 다만 브랜드 색이 강한 서비스에서는 배경에 색이 섞이면 어색해질 수 있어서 이건 취향과 맥락의 문제다.

정리

• 배경은 순검정 대신 #101010 ~ #1a1a1a 언저리의 어두운 회색
• 본문 글자는 순백 대신 약간 낮춘 흰색
• 층이 높을수록 배경을 조금 밝게
• 대비비는 눈으로만 판단하지 말고 도구로 한 번 확인

바꾸고 나서 밤에 내 사이드 프로젝트를 켜 봤는데, 확실히 눈이 덜 아팠다. 이런 변화는 스크린샷으로는 안 보이고 써 봐야 안다.