1. 색상 용어 이해: HSB 모델
디지털 UI 색상 작업에서는 HSB(Hue, Saturation, Brightness) 모델이 핵심입니다.
-
Hue (색조): 빨강, 초록, 파랑 등 우리가 ‘색상’이라고 부르는 것으로, 빛 스펙트럼의 파장과 관련됩니다.
-
Saturation (채도): 색상의 강도를 나타내며, 순수한 회색과의 차이를 측정합니다. 색상이 얼마나 창백하거나 강렬한지를 결정합니다.
-
Brightness (밝기): 색상의 밝고 어두운 정도를 나타내며, 화면에서 방출되는 빛의 양과 관련됩니다. HSB를 조작하여 브랜드 색상에서 확장된 색상 램프를 만들 수 있으며, 이는 실제 세계의 빛과 그림자가 색상에 미치는 영향을 모방하여 깊이감을 부여합니다.
2. 색상과 접근성: WCAG 지침
웹 콘텐츠 접근성 지침(WCAG)은 시각, 청각, 인지 등 다양한 장애를 가진 사용자를 위해 웹 콘텐츠의 접근성을 높이는 표준을 제공합니다.
-
대비율: WCAG는 두 색상 간의 대비율에 대한 지침을 제공합니다(예: 일반 텍스트는 배경 대비 4.5:1).
-
색상 단독 사용 금지: 색맹 등 다양한 시각 장애를 고려하여, 정보를 전달하는 유일한 수단으로 색상에만 의존하지 않아야 합니다.
3. 색상 인지 및 상대성
색상은 단순히 물리적인 빛의 파장 처리 결과가 아니라, 뇌가 주변 색상, 빛의 온도, 반사율 등 주어진 맥락에서 색상을 해석하는 방식에 따라 달라집니다. 이를 ‘색상 상대성’이라 부르며, 특히 다크 모드에서 중요합니다. 밝은 배경에서 선명했던 색상이 어두운 배경에서는 탁하게 보이거나 인지되는 채도가 달라질 수 있습니다.
- 어둠 속에서 가까운 물체는 더 밝게 보인다: 주간에는 멀리 있는 물체가 더 밝게 보이지만, 어둠 속에서는 광원에 가까운 물체가 더 밝게 보입니다. 이 원리는 다크 모드 UI 디자인에서 ‘가까운’ UI 요소에 더 밝은 배경색을 사용하여 입체감을 부여하는 데 적용됩니다.
4. 흔한 오해들
-
“그냥 색상을 반전시키면 된다”: 이는 그림자 요소에 빛나는 효과를 주거나 브랜드 색상을 왜곡할 수 있습니다.
-
“색상 램프를 반전시키면 된다”: 어두운 배경에서 채도가 과도하게 높아져 ‘탁한’ 느낌을 주거나 대비율을 충족하지 못할 수 있습니다.
-
“Tailwind의 ‘.dark’ 클래스만 사용하면 된다”: 모든 요소에 적절한 색상을 명시하거나 Tailwind 컴포넌트를 그대로 사용하는 경우에만 유효합니다.
5. 다크 모드 디자인 팁 및 요령
-
1. 채도가 높은 색상 사용 지양: 어두운 배경에서 채도가 높은 색상은 너무 강렬하게 느껴지며 접근성 기준을 통과하기 어렵습니다. 브랜드 표현이나 CTA 등 특정 상황에만 제한적으로 사용합니다.
-
2. 라이트 모드 색상 단순 반전 지양: 다크 모드 전용 색상 팔레트를 신중하게 구축하여 충분한 대비와 시각적 편안함을 확보합니다.
-
3. 순수한 흰색 또는 검은색 사용 지양: 순수한 흰색 텍스트는 순수한 검은색 배경 위에서 특정 시각 장애가 있는 사용자에게 불편함을 줄 수 있습니다.
-
4. 밝은 표면으로 입체감 표현: 라이트 모드에서 그림자로 깊이를 표현하듯, 다크 모드에서는 ‘앞에 있는’ UI 요소(예: 팝업 메뉴)에 더 밝은 회색을 사용하여 입체감을 전달합니다.
-
5. 브랜드 색상을 담은 회색 팔레트 활용: 완전히 중립적인 회색 대신, 브랜드 색상의 채도를 낮춘 버전을 포함하는 회색 팔레트를 사용하면 UI 요소 간의 조화를 이루고 세련된 느낌을 줄 수 있습니다.