다크모드 켰더니 브랜드 색이 칙칙해진 이유

다크모드 토글 하나 붙였을 뿐인데 로고 파란색이 탁하게 죽는 경험, 혹시 없나요? 대부분 원인은 색을 그냥 반전시켰기 때문이에요. 배경만 검게 만들고 나머지를 계산으로 뒤집으면 브랜드 색의 색상(hue)까지 함께 틀어져요.

저도 처음엔 CSS 필터로 invert(1) 한 줄만 걸어봤어요. 배경은 어두워졌는데 브랜드 파랑이 주황빛으로 변하더라고요. 순수 반전은 명도만 뒤집는 게 아니라 색상환 반대편으로 색을 던지거든요.

색은 코드가 아니라 데이터로

이걸 프런트에서 계산으로 풀면 화면마다 결과가 갈려요. 백엔드 관점에선 색을 시맨틱 토큰으로 두고, 라이트·다크 값을 각각 명시로 저장하는 게 깔끔해요. brand.primary 하나에 라이트값·다크값 2벌을 붙이는 식이죠.

시맨틱 토큰라이트/다크 2벌 저장API 응답클라이언트 적용

반전 계산을 지우고 토큰 테이블로 바꿔보니, 다크용 파랑을 직접 정할 수 있어서 브랜드가 살았어요. oklch로 명도만 0.15 근처로 낮추고 채도는 유지해 적용해 봤더니, 어두운 배경에서도 같은 브랜드로 읽히더라고요.

로그인 사용자는 선호 테마를 DB 설정에 저장하고, 비로그인은 쿠키에 담아요. 쿠키는 SameSite=Lax로, 만료는 1년 정도면 넉넉해요.

중요한 건 첫 렌더예요. 클라이언트가 뒤늦게 테마를 읽으면 100ms 남짓 밝은 화면이 번쩍하고 지나가요. 저는 쿠키값을 서버에서 먼저 읽어 초기 HTML에 테마 속성을 심어 내려봤더니 그 깜빡임이 사라졌어요.

라이프케어로그에서 플랜씨(plan-c) 같은 도구를 만들 때도 같은 원칙을 써요. 색을 계산하지 말고 데이터로 관리하고, 라이트·다크를 각각 정하고, 첫 렌더 전에 서버가 테마를 정해 내려주기. 이 세 가지만 지켜도 다크모드에서 브랜드가 쉽게 죽지 않아요.