다크모드 디자인
UI/UX 디자이너의 공부하는 삶
현재 라이트모드에서 다크모드로 디자인 Tone&Manner를 변경하는 프로젝트를 진행 중이다.
다크모드의 사용 통계와 필요한 이유, 다크모드로 디자인 시 중요한 지식들, 참고하면 좋은 사이트들을 공유하고자 한다.
다크모드 사용 현황과 필요성
1. 다크모드 기능이 실제로 효과가 있는지 입증된 바는 없지만, 권고하는 입장이 높다.
2. 장시간 사용할 경우 눈의 피로도가 감소하고, 에너지 절약, 가시성 및 가독성이 향상된다.
3. 현재 80%가 넘는 개인이 전자기기에서 다크모드를 사용하는 것으로 보인다. (2023년 통계 기준 - 참고 사이트 : https://marketsplash.com/ko/statistics-dark-mode-usage/)
다크모드 디자인 시 주의할 점
1. 적절한 대비 적용하기
- WCAG의 레벨에 따라 적절한 대비를 사용하면 사용자에게 편안한 UI를 제공할 수 있다. WCAG는 2008년에 발표된 웹 콘텐츠 접근성 가이드라인이다. 모든 사람이 웹 콘텐츠에 쉽게 접근할 수 있게 발표된 W3C의 권장 표준이다. AA레벨을 적용하는 것을 권고하며 상황에 따라 A와 AAA 레벨을 적용하면 좋다.
[WCAG 레벨]
A(at least) 3:1, AA(기준) 4.5:1, AAA 7:1
2. 채도가 높은 색상 피하기
- 채도가 높은 색상은 어두운 배경색 위에서 가독성이 떨어질 수 있기 때문에 낮은 채도를 설정해야 한다. 색상은 200~50 범위의 색을 사용하면 눈에 너무 많은 부담을 주지 않으며 적절한 대비를 유지할 수 있다.
3. 기본 배경 컬러의 선정
- Material Design과 HIG 두 가이드라인에서 배경색에 대한 가이드를 다르게 정의하고 있는데, Material은 검은색이 아닌 짙은 회색을 배경으로 사용하는 것을 권고하고, HIG는 명확한 대비를 위해 블랙 색상을 권고합니다. (추가로 아이폰의 베젤과 경계를 없애기 위해서도!)
4. 상단의 레이어일수록 더 밝은 표면 색상 사용
- 라이트 모드에서는 그림자를 통해서 레이어의 고도(elevation)를 표현할 수 있지만 다크 모드에서는 그림자가 잘 보이지 않는다. 그러므로 상단의 레이어일수록 더 밝은 표면 색상을 사용해야 레이어 고도를 표현할 수 있다. (Material Design에서는 구체적인 수치까지 제시하고 있다!)
참고하면 좋은 사이트
1. COLOURCONTRAST : 명도 대비 확인
https://colourcontrast.cc/3c3c3c/6a6a6a
2. Medium 게시글 : 컬러 관련 참고
https://medium.com/design-bootcamp/color-for-good-ui-afd19424cc89
3. Material Design Dark Theme Guidelines : 구글의 다크모드 디자인 가이드 확인
https://m2.material.io/design/color/dark-theme.html
4. iOS Human Interface Guidelines : 애플의 다크모드 디자인 가이드 확인
https://developer.apple.com/design/human-interface-guidelines/dark-mode
이번 게시글에는 다크모드 디자인을 시작하면서 찾아본 필요한 내용들을 정리해 봤다. 다음 게시글에서는 다크모드 디자인을 진행하면서 아쉬웠던 점과 배웠던 점을 공유해보려 한다.
