다크 모드

밤에 불을 끈 방에서 흰 배경 화면을 보면 눈이 부십니다. 이 불편은 오래 있었지만 대응할 방법이 마땅치 않았습니다. 사용자가 고를 수 있는 것은 화면 밝기를 낮추는 것뿐이었고, 그러면 글자까지 흐려졌습니다.

운영체제가 밝은 테마와 어두운 테마를 사용자 설정으로 제공하기 시작하면서 상황이 바뀌었습니다. 시스템이 어둡게 설정돼 있는데 앱 하나만 하얗게 켜지면 그 앱이 튀어 보였고, 사용자는 그것을 제품이 덜 만들어진 신호로 읽었습니다.

처음에는 색을 그대로 뒤집는 방식으로 대응한 팀이 많았습니다. 흰 배경을 검게, 검은 글자를 하얗게 바꾼 화면은 만들기는 쉬웠는데 읽기 어려웠습니다.

색마다 밝은 화면용 값과 어두운 화면용 값을 짝으로 들고 있다가, 사용자 설정에 따라 한 벌을 골라 씁니다. 뒤집는 것이 아니라 두 벌을 따로 정의하는 일입니다.

같은 색이 배경 밝기에 따라 다르게 보이기 때문에 두 벌이 필요합니다. 어두운 배경 위의 파랑은 밝은 배경 위에서보다 훨씬 세게 튀어 보여서, 대개 한두 단계 연한 값으로 바꿉니다. 컬러 팔레트를 밝기 단계로 번호 붙여 두면 이 교체가 600번에서 400번으로 내리는 작업이 됩니다.

층을 표현하는 방법도 달라집니다. 밝은 화면에서는 카드 아래에 그림자를 넣어 떠 있음을 보여 주는데, 어두운 배경에서는 그림자가 보이지 않습니다. 그래서 위에 뜬 요소의 배경을 한 단계 밝게 만들어 층을 대신 표현합니다.

배경에 순수한 검정을 쓰지 않는 것도 규칙에 가깝습니다. 완전한 검정 위의 흰 글자는 테두리가 번져 보여서 오래 읽기 어렵습니다. 한 단계 올린 짙은 회색이 같은 글자를 더 편하게 읽히게 합니다.

글자와 배경의 밝기 차이를 나타내는 명도 대비는 두 벌 모두 따로 재야 합니다. 밝은 화면에서 4.7 대 1로 통과한 회색이 어두운 화면에서는 2.9 대 1로 떨어지는 일이 흔합니다.

"다크 모드는 다음 분기로 미루죠. 색마다 값이 두 벌 필요해서 지금 팔레트로는 안 됩니다."

색 한 벌만 정해 둔 상태에서는 화면을 뒤집는 것으로 끝나지 않는다는 뜻입니다.

"이 회색이 다크에서 안 읽혀요. 대비 재 보면 3 대 1도 안 나옵니다."

밝은 화면 기준으로 고른 값이 어두운 화면에서 걸렸다는 지적입니다.

"그림자로 잡아 둔 층이 다크에서 다 사라졌는데, 배경을 한 단계 올려서 구분하죠."

같은 위계를 다른 수단으로 다시 만들자는 제안입니다.

페이지덱에서는 민서가 색마다 이름을 붙여 디자인 토큰으로 등록하면서 밝은 값과 어두운 값을 함께 적어 두었습니다. 태오는 값을 새로 받아 적지 않고 같은 이름이 가리키는 값이 테마에 따라 바뀌게만 해 두었습니다.