다크모드는 라이트모드의 반전상태일까
다크모드를 단순히 라이트모드의 반전색으로 만들 수 없는 이유
과거 회사에서 디자인 시스템을 재정비할 때 훗날 사용할지도 몰라 다크모드를 함께 구현하려고 했다. 당시에는 흰색(#FFFFFF) 배경을 기준으로 라이트모드의 컬러 스케일을 만들었기 때문에 다크모드는 단순히 검은색(#000000) 배경을 기준으로 기존의 컬러 스케일을 반전시키면 될 거라 생각했다. 하지만 만들면서 다크모드가 단순히 라이트모드의 반전상태가 아니라는 것을 깨달았다. 그 이유를 살펴보자.
깊이를 표현하는 방식이 다르다
Material Design에서 계층의 위계를 나타내는 방법우리가 보는 화면은 계층적 구조를 가지고 있다. 평면상에서 이런 계층의 깊이감을 효과적으로 나타내기 위해 구글과 같은 디자인 시스템은 색의 명도 차이를 활용하여 배경의 레이어를 구분한다. 이런 방식은 전통적인 회화에서 사물의 명암을 표현하는 방법과 같다. 화가들이 뒤에 있는 사물일수록 어둡게 명암을 칠해 공간감을 만들어내는 것처럼 우리의 눈은 자연스럽게 어두운 요소를 더 멀리 있는 것으로 인지하는 특성을 가지고 있다.
그럼 이 그림은 어떨까? 무엇이 가장 위에 있는 색으로 보이는가? 라이트모드에서는 흰색이, 다크모드에서는 gray-800이 가장 위에 있는 색으로 보인다. 우측의 다크모드에서 그레이 스케일의 첫 단계에 해당하는 검은색은 레이어의 최하단에 배치해도 문제가 되지 않는다. 어두운 요소일수록 더 멀리 있는 것으로 인지되기 때문이다.
반면 라이트모드의 그레이 스케일은 흰색에서 검은색으로 갈수록 숫자가 높아진다. 배경색이 흰색일 경우 가장 밝은 색이 레이어의 최하단에 배치되는 결과가 발생한다. 어도비 디자인 스펙트럼은 라이트모드에서 배경의 깊이감을 표현할 때 흰색을 기본 배경으로 사용하지 않는다. 우리가 어두운 것을 더 멀리 있는 것으로 인지하는 시지각적 특성을 거스르기 때문이다. 그렇기 때문에 단순히 그레이 스케일의 순서를 반전시키면 명도의 대비를 통한 깊이감을 표현하는 데에 문제가 생긴다.
명도대비율이 일정하지 않다
라이트모드에서 지정한 열 가지 그레이 스케일은 웹 콘텐츠 접근성 지침(WCAG) 기준에 따라 세밀하게 설계되었다. 각각의 색상은 특정 용도(본문의 색상, 보더라인, 배경색 등)에 맞춰 명도대비율을 정밀하게 조정하여 구성했으며, 이는 모든 사용자가 콘텐츠를 명확하게 인식할 수 있도록 하기 위함이다. 특히 배경과 본문 텍스트 사이의 명도대비는 가독성을 보장하기 위해 WCAG에서 권장하는 최소 4.5 대 1의 비율을 엄격히 준수해야 한다. 그러나 라이트모드를 단순히 반전시켜 만든 다크모드에서는 이러한 세심한 설계가 무너지게 된다. 검은색 배경과 나머지 색상들 사이의 명도대비율이 라이트모드에서 준수했던 규칙을 따르지 못하고 각각 상이한 값을 가지게 되는 문제가 발생하기 때문이다.
따라서 다크모드에서도 사용자의 가독성과 시각적 인지성을 효과적으로 보장하기 위해서는 WCAG의 기준에 부합하는 적절한 명도대비율을 새롭게 설정할 필요가 있다. 이를 위해서는 단순히 라이트모드의 색상을 반전시키는 것이 아니라 새로운 모드의 배경색을 기준에 두고 각 요소별로 최적화된 새로운 컬러 스케일을 독립적으로 제작해야 한다.
