“요즘 사이트는 다 다크모드 되던데요.” 사장님들이 자주 건네는 말입니다. 그래서 막상 배경을 검게 뒤집어 보면, 정성껏 찍은 제품 사진이 칙칙해지고 로고 주변에 흰 테두리가 번지며 본문 글씨가 눈을 찌릅니다. 다크모드는 분명 좋은 도구지만, 모든 사이트에 필요한 기능은 아닙니다. 작은 회사가 다크모드를 결정할 때 따져야 할 5가지 기준을 정리했습니다.
1. 다크모드는 필수가 아니라 선택이다
다크모드가 빛을 발하는 곳은 글을 오래 읽거나 화면을 장시간 들여다보는 서비스입니다. 뉴스, 문서 도구, 개발자 대시보드처럼 말이죠. 반대로 제품과 브랜드를 보여주는 쇼케이스형 사이트는 사정이 다릅니다.
음식 사진, 패션 화보, 공예품처럼 색이 곧 상품인 경우 밝은 배경이 색을 더 정직하게 전달합니다. 우리 사이트가 ‘읽는 곳’인지 ‘보는 곳’인지부터 구분하세요. 보는 곳이라면 다크모드는 우선순위가 아닙니다.
2. 색을 그냥 반전하지 마라
가장 흔한 실수가 배경을 순수 검정(#000000)으로, 글씨를 순수 흰색(#FFFFFF)으로 뒤집는 것입니다. 이 조합은 대비가 너무 강해 눈이 쉽게 피로해지고, 글자 가장자리가 번져 보이는 헤일로 현상이 생깁니다.
- 배경은 완전한 검정 대신 짙은 회색(#121212 계열)을 씁니다.
- 본문 글씨는 순백 대신 살짝 낮춘 회백색으로 대비를 누그러뜨립니다.
- 강조색은 채도를 한 단계 낮춰 어두운 배경에서 튀지 않게 조정합니다.
3. 이미지와 로고가 어떻게 보이는지 먼저 확인하라
다크모드에서 가장 자주 깨지는 요소가 이미지입니다. 특히 흰 배경을 전제로 만든 투명 PNG 로고는 어두운 배경에서 검은 글자가 묻혀 사라지거나, 흰 테두리가 지저분하게 드러납니다.
제품 사진도 마찬가지입니다. 밝은 배경에서 또렷하던 사진이 어두운 화면에서는 경계가 사라져 둥둥 떠 보입니다. 다크모드를 도입한다면 로고는 밝은 버전을 따로 두고, 이미지에는 옅은 테두리나 카드 배경을 둘러 분리해 주어야 합니다.
4. 시스템 설정을 존중하되 수동 토글도 제공하라
좋은 다크모드는 사용자를 강요하지 않습니다. 방문자가 휴대폰을 야간 모드로 쓰고 있다면 사이트도 자연스럽게 어두워지는 것이 이상적입니다. 이는 CSS의 prefers-color-scheme 한 줄로 시스템 설정을 따라가게 만들 수 있습니다.
다만 시스템 설정과 다른 취향을 가진 사람도 많으므로, 밝게/어둡게 전환하는 토글 버튼을 함께 두고 그 선택을 기억해 두는 것이 좋습니다. 들어올 때마다 매번 바꾸게 만들면 오히려 불편합니다.
5. 한 번 만들고 끝이 아니라 유지보수가 두 배다
다크모드를 켜는 순간 우리 사이트는 사실상 두 벌의 디자인을 갖게 됩니다. 새 배너 하나, 새 버튼 하나를 추가할 때마다 밝은 화면과 어두운 화면 양쪽에서 모두 멀쩡한지 확인해야 합니다.
한쪽만 보고 넘어가면 어느 날 어두운 화면에서만 글씨가 안 보이는 영역이 생깁니다. 다크모드는 ‘기능 추가’가 아니라 지속적인 관리 약속이라는 점을 처음부터 염두에 두어야 합니다.
결국 기준은 ‘우리 고객’이다
다크모드는 멋이 아니라 선택의 문제입니다. 우리 고객이 화면을 오래 들여다보는가, 우리 상품이 색으로 팔리는가, 두 벌의 디자인을 꾸준히 관리할 수 있는가. 이 질문에 답하면 도입 여부는 자연스럽게 정리됩니다.
CYAN은 작은 회사의 웹사이트를 만들 때 다크모드 같은 기능을 무작정 얹지 않고, 그 브랜드의 상품과 고객에게 정말 필요한지부터 함께 따져봅니다. 트렌드보다 ‘우리 사이트에 맞는 선택’이 먼저라고 믿기 때문입니다.