다크 모드의 배경은 순수 검정이 아니다다크 모드의 배경은 순수 검정이 아니다

다크 모드를 만들 때 가장 흔한 실수는 배경을 순수 검정(#000000)으로 칠하는 것입니다. 구글 머티리얼 디자인이 다크 테마 표준 배경으로 제시한 색은 검정이 아니라 짙은 회색 #121212입니다. 이 미묘한 차이에는 분명한 이유가 있습니다.

순수 검정의 세 가지 문제

첫째, 대비 피로입니다. 순흑 배경 위의 흰 글씨는 대비가 21:1로 극단적이어서 장시간 읽으면 눈이 쉽게 피로해지고, 난시가 있는 사용자에게는 글자가 번져 보이는 헐레이션 현상을 일으킵니다. 둘째, 깊이 표현이 불가능합니다. 다크 모드에서는 그림자가 보이지 않아 표면의 밝기 차이로 높이를 표현해야 하는데, 배경이 #000이면 더 어두운 층을 만들 수 없습니다. 셋째, 질감의 상실입니다. 순흑은 화면이 꺼진 영역처럼 느껴져 공간감이 사라집니다.

다크 테마의 표면 시스템

#121212를 기준층으로 두고, 엘리베이션이 올라갈수록 표면을 점점 밝게 만듭니다. 카드(#1e1e1e), 드롭다운(#252525), 모달(#2c2c2c)처럼 떠 있는 요소일수록 밝아지는 방식입니다. 머티리얼은 이를 흰색 오버레이(5~16%)로 구현합니다. 브랜드 톤을 입히고 싶다면 회색 대신 짙은 남색(#0f1117)이나 보라 기운의 다크(#16161e)처럼 색조가 있는 다크를 써도 좋습니다. 이 사이트의 다크 모드도 같은 원리를 따릅니다.

텍스트와 색상의 조정

텍스트도 순백(#fff)보다 살짝 낮춘 #e8eaf6, rgba(255,255,255,.87) 수준이 편안합니다. 보조 텍스트는 60%, 비활성은 38% 투명도가 머티리얼의 권장값입니다. 채도가 높은 브랜드 색은 다크 배경에서 진동하듯 보이므로, 라이트 모드보다 채도를 낮추고 명도를 올린 변형 색을 준비해야 합니다. 라이트 모드의 색을 그대로 뒤집기만 한 다크 모드가 어색한 이유가 여기 있습니다.

다크 모드는 색 반전 필터가 아니라 별도의 조명 환경을 설계하는 일입니다. #121212에서 시작해 표면의 층을 쌓아 보세요. 밤에도 편안한 화면은 디테일에서 갈립니다.

CSS로 다크 모드 구현하기

다크 모드의 구현 표준은 CSS 변수 교체입니다. :root에 라이트 토큰을, [data-theme="dark"]나 @media (prefers-color-scheme: dark)에 다크 토큰을 정의하면 컴포넌트 코드는 한 줄도 바꾸지 않고 테마가 전환됩니다. 중요한 것은 색을 직접 쓰지 않는 규율입니다. #fff 대신 var(--surface)를 쓰는 습관이 박혀 있어야 다크 모드 작업이 '전체 재도색'이 아니라 '변수 교체'로 끝납니다. 시스템 설정을 따르되 사용자가 수동으로 바꿀 수 있는 토글을 함께 제공하는 것이 모범 사례입니다.

다크 모드에서 이미지와 차트 다루기

UI 색은 변수로 해결돼도 콘텐츠는 남습니다. 흰 배경이 포함된 이미지나 로고는 다크 화면에서 빛나는 네모가 되므로, 투명 배경 버전을 준비하거나 CSS filter로 보정해야 합니다. 차트는 라이트용 색을 그대로 쓰면 채도가 과해 보이므로 다크 전용 팔레트(채도 낮추고 명도 올린)를 따로 정의하는 것이 좋습니다. 코드 하이라이팅 테마, 그림자 대체(표면 밝기), 스크롤바 색까지 챙기면 다크 모드의 완성도가 한 단계 올라갑니다.