왜 지금 다크 모드인가
스마트폰 사용자의 80% 이상이 다크 모드를 켜놓고 있다는 조사 결과가 있습니다. 운영체제부터 주요 앱까지 다크 모드를 기본으로 지원하는 시대, 웹사이트만 하얀 화면으로 눈을 자극하고 있지는 않은지 점검할 때입니다. 다크 모드는 단순한 미적 선택이 아니라 사용자 경험에 대한 배려이며, 특히 야간 사용이 많은 서비스라면 더 이상 선택이 아닌 필수입니다.
다크 모드의 실질적 이점
다크 모드를 도입하면 여러 가지 실질적인 효과를 기대할 수 있습니다. 첫째, OLED 디스플레이에서 검은 픽셀은 전력을 소모하지 않아 배터리 절약에 직접적으로 기여합니다. 둘째, 밝은 화면에 비해 눈의 피로가 줄어들어 체류 시간이 늘어나는 효과가 보고되고 있습니다. 셋째, 어두운 톤은 콘텐츠에 시선을 집중시켜 제품 사진이나 영상이 돋보이는 프리미엄 감성을 연출합니다.
순수한 검정은 피하라
다크 모드 디자인에서 가장 흔한 실수는 배경을 #000000 순수 검정으로 설정하는 것입니다. 순수 검정 위의 흰색 텍스트는 대비가 너무 강해 오히려 눈이 피로해지고, 스크롤할 때 번짐 현상(halation)이 생깁니다. 대신 #121212에서 #1E1E1E 사이의 다크 그레이를 배경으로 사용하세요. Google Material Design에서도 권장하는 이 범위는 눈에 자연스러우면서도 충분한 어두움을 제공합니다.
색상 체계를 다시 설계하라
라이트 모드의 색상을 그대로 어두운 배경에 올리면 채도가 과하게 느껴집니다. 다크 모드에서는 채도를 낮추고 명도를 높인 색상을 별도로 준비해야 합니다. 브랜드 컬러도 예외가 아닙니다. 예를 들어, 밝은 파란색(#2196F3)은 다크 모드에서 #82B1FF 정도로 조정해야 배경과 자연스럽게 어울립니다. CSS 변수(Custom Properties)를 활용하면 라이트/다크 모드 전환을 깔끔하게 관리할 수 있습니다.
그림자 대신 밝기로 깊이를 표현하라
라이트 모드에서는 그림자(box-shadow)로 카드나 요소 간 깊이를 표현하지만, 다크 모드에서 그림자는 거의 보이지 않습니다. 대신 elevation(높이)이 올라갈수록 배경을 미세하게 밝게 만드는 방식으로 깊이감을 만듭니다. 기본 배경이 #121212이라면 카드는 #1E1E1E, 모달은 #2C2C2C처럼 단계를 두는 것이죠. 이 원칙만 지켜도 다크 모드에서 요소 간 계층 구조가 명확해집니다.
구현은 CSS 변수와 미디어 쿼리로
가장 실용적인 구현 방법은 prefers-color-scheme 미디어 쿼리와 CSS 변수를 조합하는 것입니다. 시스템 설정에 따라 자동으로 전환되면서도, 토글 버튼을 추가해 사용자가 직접 선택할 수 있도록 합니다. 주의할 점은 사용자의 선택을 localStorage에 저장해 재방문 시에도 유지되게 하고, 페이지 로드 시 깜빡임(flash of unstyled content)을 방지하기 위해 HTML head에서 먼저 테마를 적용하는 것입니다.
다크 모드, 브랜드를 한 단계 끌어올리는 디자인
다크 모드는 어두운 화면 이상의 의미를 가집니다. 사용자의 환경과 취향을 존중하는 디자인이자, 브랜드의 세련됨을 보여주는 요소입니다. CYAN은 클라이언트 프로젝트마다 라이트/다크 양면을 고려한 디자인 시스템을 설계합니다. 눈에 보이지 않는 배려가 사용자의 신뢰로 이어진다고 믿기 때문입니다.