- 3 MIN READ
- 2025년 2월 13일
Takeaway
장점- 눈의 피로 감소: 저조도 환경에 이상적입니다.
- 큰 대비를 통해서 주요 요소(예: 로고, 주요 버튼) 의 가시성을 향상시킵니다.
- OLED/AMOLED 화면에서 배터리를 절약하는 효과가 있습니다.
- 다양한 색상 사용에 제한이 있습니다
- 색상의 대비율이 낮으면 가독성이 저하될 수 있습니다.
다크 모드는 UI의 대부분을 어둡게 표현하며, 밝은 테마를 보완하는 용도로 만들어졌습니다. 오늘날 현재 다크 모드는 선호도를 넘어 진화중입니다.
다크 모드를 사용하는 이유
접근성 (Accessibility) 개선
시각에 불편함을 가진 사용자를 위해 시스템 전체의 밝기 설정을 강제로 적용하기보다는, 사용자를 존중해 밝기 모드(밝은 모드 Light mode 또는 어두운 모드 Dark mode) 설정을 강요하는 대신 자유롭게 할수있게 반영하는 것이 바람직 합니다.눈의 피로 감소
다크 모드는 화면의 밝기를 낮추고, 색상 대비를 적절하게 유지하여 시각적인 편안함을 높여줍니다.배터리 절약
배터리 소모를 줄여주는데, 특히 OLED 디스플레이를 사용하는 기기에서는 검은색 부분을 완전히 꺼서 전력 효율을 극대화할 수 있습니다. 하지만 밝기를 낮추면 동일한 효과가 유지됩니다.시각적 매력
미적 사용성 효과는 매력적인 디자인이 더 나은 사용성을 의미할 수 있음을 시사하지만, 항상 그런 것은 아닙니다.다크 모드 사용시 유념해야 할 사항들
그래픽 형식
JPG는 투명한 배경을 지원하지 않으므로, 투명한 이미지를 사용하려면 SVG, WEBP 또는 PNG 이미지 형식을 선택해야 합니다.가독성 (Readability)
너무 복잡한 글꼴, 너무 두꺼운 글꼴, 배경과 색상 대비가 충분하지 않은 글꼴은 어둡거나 밝은 모드에서 모두 보고 읽기가 어렵습니다.색상 대비 (Color contrast)
다크 모드 디자인에서는 접근성과 가독성을 위해 충분한 색상 대비를 보장하는 것이 중요합니다. 이는 일반 텍스트의 경우 최소 4.5:1, 큰 텍스트의 경우 최소 3:1의 대비율을 권장하는 WCAG 가이드라인을 따르기 때문입니다.화면에서 떠다니는 (Floting) 구성 요소:
어두운 배경에 색깔을 입히면 시각적인 접근성이 떨어질 수 있으니, 가급적 사용을 자제하는 것이 좋습니다.겹쳐서 보여주기(Overlay)
아래쪽에는 어두운 색감을, 위쪽에는 밝은 색감을 겹쳐서 배치하면 깊이감을 줄수 있습니다.페이지 구조(Page structure)
배경과 각 영역을 구별하기 위해 색상을 아주 살짝 다르게 적용하는 것이 좋습니다.다크 모드가 유용하게 활용될 수 있는 산업 분야
🏁 이 글이 도움이 되었으면 좋겠습니다.
"함께" 결과물을 만들어내는 방식을 통해 세상을 디자이너 관점으로 보는 시각을 키우는 것을 수업 목표로 합니다. 수업에 대한 질문 또는 15-20분 무료 coffee chat (online) 신청은 아래 방법을 이용해 남겨 주세요.