주제 소개

팬덤 서비스는 밤에 많이 쓰입니다. 공연이 끝난 뒤, 잠들기 전, 혹은 해외 일정을 실시간으로 따라가는 새벽에도 팬은 앱을 엽니다. 어두운 환경에서 밝은 화면은 눈을 피곤하게 만들기 때문에, 다크 모드는 이제 선택이 아니라 기본에 가깝습니다.

그런데 다크 모드를 처음 만들 때 흔히 하는 실수가 있습니다. 밝은 화면의 색을 그대로 뒤집는 것입니다. 이렇게 하면 대비가 지나치게 강해지거나, 반대로 요소끼리 구분이 안 되는 화면이 나옵니다. 우리는 다크 모드를 설계하면서 확인해야 할 체크포인트를 여섯 가지로 정리했습니다.

분석

1. 완전한 검정 대신 깊은 회색을 씁니다

순수한 검정 배경 위에 흰 글자를 올리면 대비가 너무 강해 글자가 번져 보일 수 있습니다. 많은 디자인 시스템이 배경에 아주 어두운 회색을 쓰는 이유입니다. 브랜드 색을 아주 조금 섞은 어두운 색을 쓰면, 다크 모드에서도 서비스 고유의 분위기를 유지할 수 있습니다.

2. 높이는 그림자가 아니라 밝기로 표현합니다

밝은 화면에서는 그림자로 카드나 팝업이 떠 있는 느낌을 줍니다. 어두운 배경에서는 그림자가 잘 보이지 않습니다. 그래서 다크 모드에서는 위에 올라온 요소일수록 표면을 조금씩 밝게 만들어 높이를 표현합니다. 배경, 카드, 팝업처럼 단계별 표면 색을 미리 정해 두면 화면의 위계가 흐트러지지 않습니다.

3. 대비 기준을 다시 확인합니다

색을 바꾸면 대비도 달라집니다. 본문 글자는 배경과 최소 4.5:1, 큰 글자와 아이콘은 3:1 이상의 대비를 확보해야 한다는 WCAG 기준을 다크 모드에서도 똑같이 적용해야 합니다. 특히 회색 계열의 보조 텍스트와 비활성 버튼이 기준에 못 미치는 경우가 많으니 하나씩 확인하는 것이 좋습니다.

4. 강조 색은 채도를 낮춥니다

밝은 화면에서 잘 어울리던 선명한 브랜드 색이 어두운 배경 위에서는 눈을 찌르듯 강하게 보일 수 있습니다. 다크 모드용 강조 색은 채도를 살짝 낮추거나 밝기를 조정한 별도의 값을 두는 것이 좋습니다. 같은 브랜드 색이라도 모드별로 다른 값을 갖는다는 점을 디자인 토큰에 반영해야 합니다.

5. 이미지와 일러스트도 함께 점검합니다

색 체계를 모두 바꿨는데 이미지가 그대로라면 화면이 어색해집니다. 흰 배경이 들어간 이미지, 어두운 선으로 그린 아이콘, 투명 배경 로고는 다크 모드에서 문제가 되기 쉽습니다. 사용 빈도가 높은 이미지부터 다크 모드 버전을 준비하거나, 이미지 뒤에 밝은 받침을 두는 규칙을 정해 둡니다.

6. 실제 환경에서 확인합니다

다크 모드는 모니터에서 볼 때와 휴대폰에서 볼 때 느낌이 크게 다릅니다. 화면 밝기를 낮춘 상태, 어두운 방, 야외처럼 사용자가 실제로 앱을 쓰는 환경에서 확인해 보면 시안에서는 보이지 않던 문제가 드러납니다. 보조 텍스트가 거의 보이지 않거나, 구분선이 사라지거나, 강조 색이 생각보다 강하게 튀는 경우가 대표적입니다.

그래서 다크 모드 검수는 디자인 도구 안에서 끝내지 않고, 여러 기기에서 직접 확인하는 단계를 일정에 포함하는 것이 좋습니다. 특히 사용자가 많이 쓰는 기기 몇 종을 정해 두고 같은 화면을 반복해서 비교하면 판단 기준이 흔들리지 않습니다.

시사점

다크 모드는 ‘색상 목록’이 아니라 ‘역할’로 관리해야 합니다. 배경, 표면, 본문, 보조 텍스트, 강조처럼 색의 역할을 정하고, 역할마다 라이트·다크 값을 함께 정의하면 새로운 화면을 만들 때도 자동으로 두 모드가 맞춰집니다.

정리

잘 만든 다크 모드는 사용자가 모드를 바꿨다는 사실보다 ‘편안하다’는 느낌을 먼저 줍니다. 우리는 여섯 가지 체크포인트를 기준으로, 밤에도 오래 머물 수 있는 화면을 만들어 가려고 합니다.