다크모드는 색 반전이 아니다 — 멀티프로덕트 브랜드 토큰 설계

혹시 다크모드 버튼을 눌렀다가 바로 꺼 본 적 없나요? 배경만 검게 뒤집힌 화면은 눈이 편하기는커녕 브랜드가 낯설어 보여요.

저는 플랜씨(plan-c)·플랜비(plan-b)·플랜엘(plan-l)에 개발 중인 플랜티(plan-t)까지, 라이프케어로그라는 이름으로 4개 제품을 혼자 만들고 있어요. 처음 다크모드를 넣을 때 밝은 색을 어두운 색으로 단순히 뒤집어 봤는데, 제품마다 분위기가 제각각이 됐어요. 라이트모드에서는 분명 한 브랜드였는데 다크모드에서는 남의 서비스처럼 보였죠.

반전이 아니라 재설계인 이유

직접 만들어 보니 문제는 세 가지였어요. 순수 검정 배경은 눈이 아프고, 밝은 화면용 브랜드 색은 어두운 배경에서 형광펜처럼 떠 보여요. 구글 머티리얼 디자인 문서도 순수 검정 대신 짙은 회색 표면을 권하고요. 본문 텍스트는 WCAG 기준 명도 대비 4.5대 1을 지켜야 하는데, 색만 뒤집으면 이 대비가 어긋나는 곳이 꼭 생겨요.

• ✓배경은 짙은 회색
• ✓채도는 한 단계 낮추기
• ✓브랜드 색은 값만 조정

브랜드를 지키는 건 색 값이 아니라 토큰 이름

해법은 색을 이름으로 관리하는 거예요. background, accent, danger처럼 역할 이름을 붙인 시맨틱 토큰을 두고, 라이트와 다크에서 값만 갈아 끼우는 방식이에요. 원시 색, 시맨틱 토큰, 컴포넌트로 이어지는 3층 구조면 충분했어요.

원시 색 팔레트→시맨틱 토큰→컴포넌트 적용

이 구조를 적용해 봤더니 멀티프로덕트 운영이 훨씬 가벼워졌어요. 로그인 없이 쓰는 무료 금융계산기 플랜씨(plan-c)와 월 3건 무료로 쓰는 법령 검색 플랜엘(plan-l)은 성격이 전혀 다른 서비스지만, 같은 토큰 이름 체계를 쓰니 다크모드에서도 한 브랜드로 읽혀요. 새 화면을 만들 때도 색 값을 고민하지 않고 토큰 이름만 고르면 되고요.

1인 브랜드일수록 효과가 커요

혼자 운영하면 디자이너 손을 빌릴 수 없으니, 일관성은 사람이 아니라 구조가 지켜줘야 해요. 토큰 파일 하나만 고치면 4개 제품의 다크모드가 같이 바뀌는 구조는 그 자체로 브랜드 자산이에요. 실제로 테스트해 보면 제품 하나당 두 시간 정도면 토큰 교체가 끝났어요.

다크모드는 기능이 아니라, 브랜드가 밤에도 같은 사람으로 보이게 하는 일이에요. 색을 뒤집기 전에 이름부터 붙여 보세요.