다크모드에서 같은 폰트가 더 읽기 어려운 이유

배경색 #1C1C1E, 텍스트 #ffffff. 라이트모드에서 멀쩡하게 쓰던 폰트를 그대로 올렸는데 뭔가 이상하다. 획이 번지는 것 같고, 분명 Regular인데 Medium처럼 뭉쳐 있다. 굵기도 건드리지 않았고 색상도 흰색으로 바꿨을 뿐인데.

이 조합을 처음부터 따라가 보면 문제가 세 단계로 쌓인다. 착각이 아니라 눈과 화면 사이에서 물리적으로 일어나는 일이다.

1단계, 동공이 열리면서 번짐이 시작된다

#1C1C1E 같은 짙은 배경을 마주하면 눈은 동공을 열어 빛을 더 받아들이려 한다. 그 상태에서 흰 글자에서 나오는 빛이 망막의 인접 광수용체 세포까지 자극하게 된다. 글자의 경계선이 실제보다 바깥쪽으로 번져 보이기 시작하는 건 이 때문이다.

이걸 할레이션(halation), 또는 조사 착시(irradiation illusion)라고 부른다. 어두운 밤 가로등 주변에 뿌연 후광이 생기는 것과 같은 원리다. 텍스트에 이 현상이 생기면 획의 테두리가 흐려지고, 글자가 실제보다 굵고 뭉쳐 보이게 된다.

접근성 연구에 따르면 인구의 약 30%가 어느 정도 난시를 가지고 있는데, 이들은 어두운 배경 위 흰 글자에서 이 번짐을 훨씬 강하게 경험한다.

2단계, #ffffff가 번짐을 최대치로 끌어올린다

#1C1C1E + #ffffff 조합의 구체적인 문제는 양 극단의 충돌이다. #ffffff는 OKLCH 명도 기준으로 L=100, 가능한 밝기의 최대치다. #1C1C1E 같은 짙은 배경과 조합하면 할레이션이 최대 강도로 일어날 수밖에 없다.

Apple의 Human Interface Guidelines는 다크모드 기본 텍스트 색으로 #EBEBF5(RGB 235, 235, 245)를 정의해 쓴다. 순백보다 약 8% 어두운 오프화이트인데, WCAG 4.5:1 대비 기준을 유지하면서도 할레이션을 눈에 띄게 줄이는 범위다. Google Material Design 3도 어두운 배경 위 텍스트에 불투명도 87%를 권장하는데, 실질적으로 오프화이트 계열 색을 쓰는 것과 같은 효과다.

실무에서 기준점으로 삼을 만한 범위는 RGB 220~235, 색상코드로는 #DCDCDC ~ #EBEBEB 정도다. 배경도 순흑(#000000)보다 짙은 회색(#111111~#1E1E1E)이 낫다. 이 케이스에서 #1C1C1E는 이미 그 범위 안이니 배경은 괜찮다. 글자색만 #ffffff에서 #E8E8E8이나 #EBEBF5로 내리는 게 첫 번째 처방이다.

3단계, Regular가 Medium처럼 보이기 시작한다

색상을 아직 바꾸지 않은 상태라면 번짐은 굵기 착시로도 이어진다. 할레이션 때문에 다크모드의 밝은 텍스트는 실제 폰트 굵기보다 한 단계 더 무겁게 인식된다. Regular(400)가 Medium(500)처럼, Light(300)가 Regular(400)처럼 보이는 식이다. CSS에서 font-weight를 전혀 건드리지 않았는데도 생기는 광학적 착시다.

얇은 굵기일수록 이 타격이 크다. Light나 ExtraLight는 획 자체가 가늘어서 번짐이 차지하는 비율이 상대적으로 높다. 정교하게 설계된 획 간격이 번짐으로 채워져 낱자 사이 여백이 급격히 좁아진다.

한글 본문은 여기서 더 불리하다. 초성·중성·종성이 한 글자 안에 밀집되는 구조라 획 수가 많고 글자 내부 여백이 촘촘하다. 얇은 weight에서 번짐이 시작되면 라틴 알파벳보다 훨씬 빠르게 내부가 뭉개진다. 모바일 소형 화면에서 14px 이하 Light 계열 한글 본문이 읽기 힘들어지는 건 이 때문이다.

굵기는 올리는 게 아니라 낮추는 거다

여기서 많은 가이드가 틀린 방향을 알려준다. "다크모드에서 가독성이 떨어지면 굵기를 올려라"는 조언이 꽤 퍼져 있는데, 이건 irradiation illusion을 고려하지 않은 얘기다. 이미 한 단계 굵어 보이는 상태에서 굵기를 더 올리면 의도한 것보다 훨씬 무거운 인상이 된다.

맞는 방향은 반대다. 라이트모드 Regular(400)를 다크모드에서 그대로 유지하거나, 번짐이 유독 심하다면 Light(300)로 한 단계 낮추는 쪽을 먼저 시도해야 한다.

variable font를 쓰고 있다면 GRAD 축(Grade axis)으로 미세 조정이 가능하다. GRAD 값을 음수 방향으로 내리면 글자의 외형 너비는 그대로 두면서 획의 시각적 무게만 줄일 수 있어, 레이아웃을 건드리지 않고 번짐만 보정하는 깔끔한 방법이다. CSS로는 아래처럼 쓴다.

@media (prefers-color-scheme: dark) {
  body {
    font-variation-settings: 'GRAD' -50;
  }
}

폰트를 고를 때 weight 계열이 얼마나 촘촘하게 지원되는지, 웹사이트에 사용 가능한 라이선스인지를 미리 확인해두면 이 과정이 훨씬 수월하다. 폰트비에서 폰트별 굵기 목록과 사용 범위, 라이선스를 한눈에 볼 수 있다.

#1C1C1E + #ffffff 케이스, 이 순서대로 잡는다

색상부터, 굵기는 그 다음이다. 굵기를 먼저 건드리면 색상 조정 후 다시 손봐야 하는 상황이 생긴다.

배경 #1C1C1E는 이미 적정 범위 안이므로 건드리지 않아도 된다. 글자색 #ffffff를 #E8E8E8 또는 #EBEBF5로 바꾸는 게 시작점이다. 바꾼 뒤 WebAIM Contrast Checker로 배경 대비 4.5:1 이상인지 확인한다. 색상 조정만으로 번짐이 잡혔다면 굵기는 건드리지 않아도 된다.

번짐이 여전하다면 그때 굵기를 본다. 올리는 게 아니라 낮추는 것이다. variable font라면 GRAD 축으로 정밀 조정하고, 한글 본문이 포함되어 있고 모바일에서도 제공된다면 14px 이하 Light 계열이 뭉개지는지 실기기에서 반드시 재확인한다. 크기와 굵기를 함께 재검토해야 할 수도 있다.

사용할 폰트를 아직 못 골랐다면, 폰트비의 AI 폰트 찾기에서 '본문', '가독성' 같은 조건으로 weight 계열이 풍부한 폰트를 추려볼 수 있다 💡

같은 폰트라도 다크모드에서는 다른 눈으로 봐야 한다. 번짐은 색상 대비에서 시작되고, 굵기 착시는 그 다음에 온다. 이 순서를 알면 어디서부터 손을 댈지가 명확해진다.