색
다크 모드
Dark Mode
다크 모드는 밝은 배경 대신 어두운 배경을 기본으로 삼는 테마로, 단순한 색 반전이 아니라 어두운 환경에 맞춰 색과 밝기를 다시 설계하는 작업입니다.
정의
다크 모드는 밝은 배경 대신 어두운 배경을 기본으로 삼는 테마입니다. 흔히 밝은 테마의 색을 그대로 뒤집으면 된다고 생각하지만, 단순한 색 반전은 거의 항상 실패합니다. 흰 배경을 검게 바꾸는 순간 글자, 카드, 그림자, 강조 색이 모두 원래 의도와 다르게 보이기 때문입니다. 그래서 다크 모드는 색을 뒤집는 작업이 아니라, 어두운 환경에 맞게 색과 밝기를 처음부터 다시 설계하는 작업에 가깝습니다. 밝은 테마와 어두운 테마를 서로 다른 두 벌의 옷이라고 생각하면 이해가 쉽습니다.
왜 중요한가
다크 모드는 야간이나 어두운 공간에서 눈의 피로를 줄여 주고, 사용자에게 취향에 맞는 선택지를 제공합니다. 요즘은 운영체제 차원에서 다크 모드를 지원하는 경우가 많아, 사용자는 자연스럽게 모든 앱과 사이트가 자기 설정을 따라 주기를 기대합니다. 하지만 더 중요한 것은 다크 모드를 만드는 과정에서 화면의 위계와 색 역할을 다시 점검하게 된다는 점입니다. 밝은 배경에서는 그림자로 표현하던 깊이를 어두운 배경에서는 표면의 밝기 차이로 표현해야 하므로, 어떤 요소가 더 위에 떠 있는지를 색으로 다시 정의해야 합니다. 이 과정을 제대로 거치면 밝은 테마의 구조까지 함께 탄탄해집니다. 반대로 대충 반전만 하면 글자가 배경에 묻히거나 강조 색이 눈부시게 튀어, 오히려 밝은 테마보다 읽기 어려운 화면이 되고 맙니다. 그래서 다크 모드는 부가 기능이라기보다, 색 설계 실력을 한 단계 끌어올리는 훈련에 가깝습니다.
흔한 실수
- 배경을 순수 검정(#000)으로 두는 것입니다. 완전한 검정은 대비가 지나치게 강해 눈이 금세 피로해지고, 위에 얹은 그림자도 보이지 않습니다. 살짝 밝은 짙은 회색을 배경으로 쓰는 편이 훨씬 편안합니다.
- 밝은 테마에서 쓰던 채도 높은 색을 그대로 옮기는 것입니다. 어두운 배경 위에서는 같은 색이 형광펜처럼 번져 보여 눈이 부십니다. 채도와 밝기를 함께 낮춰야 자연스럽게 어울립니다.
- 위로 뜬 카드나 모달을 배경보다 더 어둡게 만드는 것입니다. 어두운 테마에서 깊이는 어두워지는 것이 아니라 밝아지는 방향으로 표현해야 합니다. 방향을 반대로 잡으면 위에 떠 있어야 할 요소가 오히려 화면 안쪽으로 파묻힌 것처럼 보입니다.
실무 팁
- 위로 뜬 표면일수록 배경보다 조금씩 밝게 하세요. 카드는 배경보다 밝고, 그 위의 모달은 카드보다 한 단계 더 밝게 두면, 그림자 없이도 요소가 떠 있는 고도가 자연스럽게 표현됩니다.
- 배경은 순수 검정 대신 살짝 밝은 짙은 회색으로, 글자는 순수 흰색 대신 약간 톤을 낮춘 밝은 회색으로 두세요. 대비를 아주 조금만 눅이면 장시간 봐도 눈이 편안해집니다.
- 강조 색은 밝은 테마의 값을 그대로 쓰지 말고, 채도를 낮추거나 밝기를 조정한 별도 값을 준비하세요. 두 테마의 색을 각각 관리해야 어느 쪽에서도 눈부심이 생기지 않습니다.
AI에게 시키기
아래에 붙여넣을 라이트 테마 색을 다크 모드로 옮겨줘. 단, 색을 그대로 반전하지 말고 어두운 환경에 맞게 다시 설계해줘 — 배경은 순수 검정(#000)이 아니라 #121212처럼 살짝 밝은 짙은 회색으로, 글자는 순수 흰색 대신 톤을 살짝 낮춘 밝은 회색으로 잡아줘. 강조 색은 라이트 값을 재사용하지 말고 채도와 밝기를 함께 낮춘 별도 값으로 만들어 형광펜처럼 번지지 않게 해줘. 카드·모달처럼 떠 있는 표면은 배경보다 어둡게가 아니라 한 단계씩 밝게 해서 깊이를 표현하고, 라이트/다크 두 벌의 값을 표로 나란히 정리해줘.
[서비스 성격 — 예: 장시간 보는 코드 에디터]의 다크 모드 색 토큰을 처음부터 설계해줘. 배경은 순수 검정을 피하고 살짝 밝은 짙은 회색 한 개를 기준으로 잡은 뒤, 그 위에 뜨는 표면을 배경 < 카드 < 모달 순으로 한 단계씩 밝게 해서 그림자 없이도 고도가 읽히는 표면 밝기 사다리를 만들어줘. 글자는 순수 흰색 대신 톤을 조금 낮춘 밝은 회색 1~2단계로, 강조 색은 채도와 밝기를 낮춰 눈부시지 않은 값으로 준비해줘. 각 값을 --bg, --surface-1, --surface-2, --text, --accent 같은 CSS 변수로 뽑고 어느 표면이 몇 단계인지 근거와 함께 표로 줘.
아래에 붙여넣을 다크 모드에서 강조 색이 눈부시게 튀거나 카드·모달이 배경에 파묻혀 보이는 문제를 고쳐줘. 배경이 #000에 가까우면 살짝 밝은 짙은 회색으로 올려 대비를 아주 조금 눅이고, 순수 흰색 글자도 톤을 낮춘 밝은 회색으로 바꿔줘. 강조 색은 채도와 밝기를 함께 낮춘 값으로 교체하고, 떠 있는 카드나 모달이 배경보다 어둡다면 방향을 뒤집어 배경보다 한 단계씩 밝게 만들어 고도가 위로 뜨게 해줘. 바꾼 값과 그 이유를 원래 값→새 값 매핑표로 정리해줘.