다크 모드 디자인, 검정 바탕에 흰 글자만으로는 부족한 이유

다크 모드는 단순히 배경을 검게, 글자를 하얗게 바꾸는 것이 아니라 어두운 화면에서도 눈이 편하고 정보의 위계가 유지되도록 색을 다시 설계하는 작업입니다. 완전한 검정 배경에 순백색 글자를 쓰면 대비가 너무 강해 눈이 피로하고, 그림자로 표현하던 깊이감도 사라지기 때문입니다. 밝은 모드의 색을 그대로 뒤집지 말고, 어두운 환경에 맞는 색 단계를 따로 정하는 것이 좋습니다.

왜 완전한 검정을 피하나요?

순수한 검정 배경에 순백색 글자를 올리면 대비가 지나치게 강해 글자 주변이 번져 보이거나 눈이 쉽게 피로해질 수 있습니다. 그래서 많은 서비스가 다크 모드 배경으로 아주 짙은 회색을 쓰고, 글자도 순백색보다 살짝 낮춘 밝은 회색을 씁니다. 이렇게 하면 충분한 대비를 유지하면서도 눈이 편해집니다.

요소	밝은 모드	다크 모드
배경	흰색 계열	짙은 회색 계열
본문 글자	짙은 회색	밝은 회색
깊이 표현	그림자	표면을 조금씩 밝게
강조색	진한 원색	채도를 낮춘 색

깊이감은 어떻게 표현하나요?

밝은 모드에서는 카드나 팝업 창 아래에 그림자를 넣어 위로 떠 있는 느낌을 줍니다. 그런데 어두운 배경에서는 그림자가 잘 보이지 않습니다. 그래서 다크 모드에서는 위에 있는 요소일수록 표면 색을 조금씩 밝게 만들어 깊이를 표현합니다. 바탕보다 카드가, 카드보다 팝업이 조금 더 밝은 회색이 되는 방식입니다. 이 단계를 미리 정해 두면 화면 전체가 일관되게 보입니다.

강조색은 그대로 써도 되나요?

밝은 모드에서 쓰던 진하고 선명한 강조색을 어두운 배경에 그대로 쓰면 지나치게 튀어 눈이 부시거나 번져 보일 수 있습니다. 다크 모드에서는 강조색의 채도를 조금 낮추고 밝기를 조정해 어두운 배경과 어울리게 만듭니다. 다만 브랜드 색이 너무 달라지면 같은 서비스라는 느낌이 약해지니, 원래 색의 느낌을 유지하는 범위에서 조정합니다.

이미지와 로고는 어떻게 하나요?

흰 배경에 맞춰 만든 로고나 아이콘은 다크 모드에서 잘 보이지 않거나 흰 네모 상자가 둥둥 떠 보일 수 있습니다. 투명 배경의 로고를 쓰고, 어두운 배경용 로고 버전을 따로 준비하는 것이 좋습니다. 사진은 너무 밝으면 어두운 화면에서 눈이 부시므로 밝기를 살짝 낮추는 처리를 하기도 합니다. 그래프와 도표의 색도 어두운 배경에서 구분이 잘 되는지 다시 확인해야 합니다.

대비 기준은 어떻게 확인하나요?

다크 모드에서도 글자와 배경의 명도 대비가 접근성 기준을 충족해야 합니다. 회색 글자를 너무 어둡게 하면 대비가 부족해 읽기 어려워집니다. 보조 설명 글처럼 덜 중요한 글자도 최소 대비는 지켜야 합니다. 대비 계산 도구로 주요 색 조합을 점검하고, 실제 어두운 방에서 화면을 켜 보며 확인하면 좋습니다. UI 디자인 사례는 에서 볼 수 있습니다.

자주 묻는 질문

다크 모드가 배터리를 아끼나요?

일부 화면 방식에서는 어두운 화소가 전력을 덜 써 도움이 될 수 있습니다.

사용자가 모드를 고를 수 있게 해야 하나요?

기기 설정을 따르면서 직접 바꿀 수 있게 하는 경우가 많습니다.

다크 모드에서 빨간 오류 표시는요?

채도를 조정해 어두운 배경에서도 잘 보이도록 하십시오.