다크모드 디자인을 요청받으면 많은 팀이 라이트 모드 화면의 배경과 글자색을 뒤집는 것으로 작업을 시작한다. 하지만 며칠만 써보면 그림자가 어색하고 브랜드 컬러가 탁해 보이고 이미지 테두리가 붕 떠 보이는 문제가 하나씩 드러난다. 다크모드는 색상 반전 작업이 아니라 조명 조건이 바뀐 완전히 다른 화면을 새로 설계하는 일에 가깝다.
1. 왜 단순 반전이 실패하는가
라이트 모드에서 그림자는 표면이 배경 위에 떠 있다는 느낌을 준다. 하지만 어두운 배경에서는 검은 그림자가 거의 보이지 않기 때문에 같은 방식으로 위계를 표현할 수 없다. 어두운 화면에서는 그림자 대신 표면 자체를 더 밝은 회색으로 올리는 방식으로 깊이를 표현하는 것이 일반적이다.
채도가 높은 브랜드 컬러도 문제다. 어두운 배경 위에 놓인 순수한 원색은 진동하듯 눈을 피로하게 만들기 때문에, 다크모드용으로는 명도를 살짝 낮추고 채도를 조정한 별도의 톤을 준비해야 한다.
다크모드가 단순한 유행이 아니라 iOS와 안드로이드 모두에서 시스템 차원의 표준 옵션으로 자리잡은 데는 실무적인 이유가 있다. OLED 디스플레이는 검은 픽셀을 사실상 꺼서 표현하기 때문에 어두운 화면이 배터리 소모를 줄여주고, 야간이나 저조도 환경에서 눈부심을 낮춰주는 실질적인 효과도 있다. 이런 배경 때문에 다크모드는 부가 기능이 아니라 운영체제 레벨의 기본 지원 대상이 되었고, 디자인팀 입장에서는 “선택”이 아니라 “설계”의 문제로 다뤄야 하는 이유가 여기에 있다.
2. 색상 체계 다시 짜기
제대로 된 다크모드 디자인은 라이트 모드와 별개의 색상 토큰 세트에서 출발한다. 배경, 표면, 텍스트, 강조색을 각각 라이트와 다크 두 가지 값으로 정의하고, 이 값을 코드에서 자동으로 전환되게 만드는 구조가 필요하다. 시맨틱 컬러와 명도 단계로 설계하는 컬러 시스템을 먼저 갖춰두면 다크모드 대응은 값만 바꿔 끼우는 문제로 단순해진다.
두 세트의 토큰이 필요한 이유는 라이트와 다크가 단순히 색상만 다른 게 아니라 명도 대비의 방향 자체가 반대이기 때문이다. 라이트 모드는 밝은 배경 위에 어두운 글자를 올리는 구조이고, 다크 모드는 그 반대다. 이 둘을 하나의 색상값으로 억지로 통일하려 하면 어느 한쪽에서는 반드시 대비가 무너진다. 무인양품이 색을 절제하고 소재 본연의 톤을 살려 다양한 제품 라인을 하나의 인상으로 묶어내듯, 다크모드 팔레트도 화려한 원색보다 절제된 중간 톤을 기준으로 삼는 편이 화면 전반의 일관성을 지키는 데 유리하다.
3. 이미지와 아이콘까지 챙기기
텍스트와 배경만 신경 쓰고 이미지를 그대로 두면 다크모드에서 흰 배경의 로고나 스크린샷이 화면 위에 밝은 사각형으로 떠 보인다. 색 대비 체크리스트는 다크모드에서도 동일하게 적용해서, 어두운 배경에서 대비가 오히려 부족해지는 조합이 없는지 확인해야 한다.
타이포그래피도 다시 점검해야 할 대상이다. 어두운 배경 위의 얇은 글자는 밝은 배경 위에서보다 가늘어 보이는 헤일레이션 현상 때문에, 같은 굵기의 폰트라도 다크모드에서는 획이 번져 보이거나 반대로 지나치게 흐릿하게 읽히는 경우가 많다. 본문용 폰트 굵기를 라이트 모드보다 살짝 올리고, 순백색보다는 톤을 살짝 낮춘 흰색을 본문 텍스트 색으로 쓰는 것만으로도 눈의 피로를 상당히 줄일 수 있다.
흰 배경 로고·스크린샷은 투명 배경 PNG로 준비한다
이미지 주변에 은은한 테두리를 넣어 경계를 자연스럽게 만든다
아이콘은 다크모드용으로 선 굵기를 살짝 키워 흐려 보이지 않게 한다
다크모드 디자인 체크리스트
배경과 표면, 텍스트, 강조색을 다크모드 전용 값으로 따로 정의했는가
순수한 원색 대신 명도와 채도를 조정한 다크모드 전용 톤을 준비했는가
흰 배경 이미지와 로고에 투명 배경 또는 테두리 처리를 했는가
그림자 대신 표면 밝기로 위계를 표현하는 규칙을 세웠는가
다크모드에서도 텍스트 대비가 접근성 기준을 통과하는가
💡 실무 포인트 — 그림자 대신 표면 밝기로 위계를 표현하고, 순수한 원색 대신 명도·채도를 조정한 다크모드 전용 톤을 준비하면 눈의 피로를 크게 줄일 수 있다.
4. 전면 자동 전환이냐, 선택적 토글이냐
다크모드를 어떻게 노출할지도 놓치기 쉬운 결정이다. 운영체제 설정을 그대로 따라가는 시스템 자동 전환과, 앱 안에 별도 버튼을 두는 수동 토글 중 하나만 고르는 방법도 있지만, 실무에서는 두 방식을 함께 지원하는 쪽이 안전하다. 시스템 설정을 기본값으로 따라가되, 사용자가 원할 때는 앱 안에서 라이트나 다크를 직접 고정할 수 있게 열어두는 식이다.
실무에서 자주 나오는 실수는 이 결정을 미루다가 두 방식을 어중간하게 섞어버리는 것이다. 시스템 설정을 따르는 화면과 수동 토글이 적용된 화면이 한 앱 안에 공존하면, 사용자는 같은 화면인데도 열 때마다 다른 모드로 보이는 혼란을 겪는다. 전환 방식은 색상 토큰을 설계하기 전에 먼저 정해두어야 나중에 갈아엎는 일을 줄일 수 있다.
5. 마치며
다크모드 디자인을 색상 반전으로 접근하면 결과물은 늘 어딘가 어색하다. 별도의 조명 조건을 설계한다는 관점으로 색상 토큰부터 다시 짜면, 다크모드는 부가 옵션이 아니라 브랜드의 또 다른 얼굴이 될 수 있다. 애플의 다크 모드 휴먼 인터페이스 가이드라인은 이런 재설계 원칙을 잘 정리해둔 공식 문서다.
Design Daily Life · 디자인의 일상을 기록합니다