고객사 미팅에서 "다크 모드도 지원해 주세요"라는 요청을 받으면 가장 먼저 떠올리는 건 "그냥 색만 반전시키면 되지 않나"라는 생각이다. 흰 배경을 검정으로, 검정 글씨를 흰 글씨로 바꾸면 끝날 것처럼 보이기 때문이다. 그런데 막상 그렇게 만든 다크 모드는 글씨가 너무 강하게 튀고, 카드와 배경이 구분되지 않으며, 버튼 색이 눈을 찌르는 경험으로 돌아온다. 다크 모드는 색을 반전시키는 일이 아니다. 빛의 방향이 정반대로 바뀐 환경에서 처음부터 다시 설계해야 하는 디자인 작업이다.
1. 순수한 검정은 가장 피해야 할 색이다
다크 모드의 배경을 #000000으로 깔면 OLED 디스플레이에서는 픽셀이 완전히 꺼져 깊은 검정이 만들어진다. 그러나 그 위에 올라간 흰 글씨와의 대비가 너무 강해서 글자가 진동하듯 흔들리는 현상이 일어나고, 장시간 읽기 힘들어진다. 머티리얼 디자인이 권장하는 #121212처럼 살짝 회색이 섞인 베이스를 쓰면 콘트라스트가 부드럽게 떨어지면서 가독성이 살아난다. 검정에 가깝되 검정은 아닌 색, 그것이 다크 모드의 출발선이다.
2. 흰색 글씨 대신 투명도로 위계를 만든다
라이트 모드에서 본문 텍스트로 짙은 회색을 쓰고 보조 텍스트로 옅은 회색을 썼다고 해서, 다크 모드에서 같은 발상으로 회색 두 가지를 새로 고르면 안 된다. 다크 배경 위에서는 색을 더하는 대신 흰색의 불투명도를 낮추는 방식이 자연스럽다. 본문은 87%, 보조 텍스트는 60%, 비활성 상태는 38% 정도로 위계를 만들면 한눈에 정리된다. 알파값으로 표현해 두면 배경색이 바뀌어도 자연스럽게 따라가는 장점도 함께 얻는다.
3. 그림자 대신 더 밝은 면으로 깊이를 만든다
라이트 모드에서 카드가 배경 위로 떠 보이게 하려면 옅은 회색 그림자를 깔면 된다. 그러나 다크 모드에서는 검정 위에 검정 그림자가 거의 보이지 않는다. 대신 떠 있는 면일수록 배경보다 더 밝은 색을 입혀야 한다. 머티리얼 디자인은 이를 엘리베이션 오버레이(elevation overlay)라고 부르는데, 살짝 떠 있는 카드는 5%, 모달처럼 더 떠 있는 면은 11% 정도의 흰색을 베이스에 섞어 한 단계 밝게 만든다. 빛이 위에서 떨어지는 게 아니라 떠 있는 면 자체가 스스로 빛난다고 생각해야 한다.
4. 채도가 높은 색은 다크 배경 위에서 진동한다
라이트 모드에서 시원하게 보이던 채도 100%의 파랑이 다크 모드로 넘어오면 갑자기 화면 위에서 떨리는 듯한 잔상을 남긴다. 어두운 배경과 진하고 밝은 색의 대비가 너무 강하기 때문이다. 다크 모드용 컬러 팔레트는 라이트 모드 색에서 채도를 한 단계 낮추고, 밝기는 한두 단계 올린 변형을 따로 만들어 두는 게 좋다. 동일한 브랜드 컬러를 두 환경에서 모두 자연스럽게 보이도록 두 벌의 변주를 준비하는 작업이 다크 모드 디자인의 절반을 차지한다.
5. 사용자가 결정할 여지를 남겨야 한다
OS의 다크 모드 설정을 무시하고 라이트만 보여주는 사이트는 시대에 뒤처진 느낌을 주고, 반대로 강제로 다크만 띄우는 사이트는 사용자를 당황하게 만든다. 가장 안정적인 방법은 처음 진입할 때 prefers-color-scheme 미디어 쿼리로 OS 설정을 따라간 다음, 헤더 모서리에 작은 토글 버튼을 두어 사용자가 명시적으로 모드를 바꿀 수 있게 하는 것이다. 토글 결과는 로컬 저장소에 기억해 두어 다음 방문에서도 사용자의 선택이 유지되어야 한다.
다크 모드는 디자인 시스템의 시험대다
다크 모드를 잘 만들려면 색을 한 벌 더 그리는 것만으로는 부족하다. 컬러는 의미 단위의 토큰으로 추상화되어 있어야 하고, 모든 컴포넌트는 그 토큰을 참조해서 그려져야 한다. 잘 정리된 디자인 시스템이 있다면 다크 모드 추가는 토큰만 갈아 끼우는 작업이 된다. 반대로 디자인 시스템이 없는 사이트라면 다크 모드 작업은 사실상 사이트를 다시 한 번 만드는 일이 된다.
CYAN 에이전시는 처음부터 라이트와 다크 양쪽을 모두 고려한 디자인 토큰 체계로 사이트를 설계한다. "나중에 다크 모드도 추가해 주세요"가 비싼 작업이 되지 않도록, 시작 시점부터 두 환경을 함께 그려 두는 것이 우리가 일하는 방식이다.