다크 모드

정의

다크 모드는 밝은 배경 대신 어두운 배경을 기본으로 삼는 테마입니다. 흔히 밝은 테마의 색을 그대로 뒤집으면 된다고 생각하지만, 단순한 색 반전은 거의 항상 실패합니다. 흰 배경을 검게 바꾸는 순간 글자, 카드, 그림자, 강조 색이 모두 원래 의도와 다르게 보이기 때문입니다. 그래서 다크 모드는 색을 뒤집는 작업이 아니라, 어두운 환경에 맞게 색과 밝기를 처음부터 다시 설계하는 작업에 가깝습니다. 밝은 테마와 어두운 테마를 서로 다른 두 벌의 옷이라고 생각하면 이해가 쉽습니다.

왜 중요한가

다크 모드는 야간이나 어두운 공간에서 눈의 피로를 줄여 주고, 사용자에게 취향에 맞는 선택지를 제공합니다. 요즘은 운영체제 차원에서 다크 모드를 지원하는 경우가 많아, 사용자는 자연스럽게 모든 앱과 사이트가 자기 설정을 따라 주기를 기대합니다. 하지만 더 중요한 것은 다크 모드를 만드는 과정에서 화면의 위계와 색 역할을 다시 점검하게 된다는 점입니다. 밝은 배경에서는 그림자로 표현하던 깊이를 어두운 배경에서는 표면의 밝기 차이로 표현해야 하므로, 어떤 요소가 더 위에 떠 있는지를 색으로 다시 정의해야 합니다. 이 과정을 제대로 거치면 밝은 테마의 구조까지 함께 탄탄해집니다. 반대로 대충 반전만 하면 글자가 배경에 묻히거나 강조 색이 눈부시게 튀어, 오히려 밝은 테마보다 읽기 어려운 화면이 되고 맙니다. 그래서 다크 모드는 부가 기능이라기보다, 색 설계 실력을 한 단계 끌어올리는 훈련에 가깝습니다.

흔한 실수

• 배경을 순수 검정(#000)으로 두는 것입니다. 완전한 검정은 대비가 지나치게 강해 눈이 금세 피로해지고, 위에 얹은 그림자도 보이지 않습니다. 살짝 밝은 짙은 회색을 배경으로 쓰는 편이 훨씬 편안합니다.
• 밝은 테마에서 쓰던 채도 높은 색을 그대로 옮기는 것입니다. 어두운 배경 위에서는 같은 색이 형광펜처럼 번져 보여 눈이 부십니다. 채도와 밝기를 함께 낮춰야 자연스럽게 어울립니다.
• 위로 뜬 카드나 모달을 배경보다 더 어둡게 만드는 것입니다. 어두운 테마에서 깊이는 어두워지는 것이 아니라 밝아지는 방향으로 표현해야 합니다. 방향을 반대로 잡으면 위에 떠 있어야 할 요소가 오히려 화면 안쪽으로 파묻힌 것처럼 보입니다.

실무 팁

• 위로 뜬 표면일수록 배경보다 조금씩 밝게 하세요. 카드는 배경보다 밝고, 그 위의 모달은 카드보다 한 단계 더 밝게 두면, 그림자 없이도 요소가 떠 있는 고도가 자연스럽게 표현됩니다.
• 배경은 순수 검정 대신 살짝 밝은 짙은 회색으로, 글자는 순수 흰색 대신 약간 톤을 낮춘 밝은 회색으로 두세요. 대비를 아주 조금만 눅이면 장시간 봐도 눈이 편안해집니다.
• 강조 색은 밝은 테마의 값을 그대로 쓰지 말고, 채도를 낮추거나 밝기를 조정한 별도 값을 준비하세요. 두 테마의 색을 각각 관리해야 어느 쪽에서도 눈부심이 생기지 않습니다.

관련 개념