HIG - Dark Mode

안다은·2022년 7월 13일

Let's Study HIG

목록 보기

1/4

안녕하세요. 주니어 UXUI 디자이너 다나입니다.
애플 개발자 환경을 공부하는 중에
많은 분들이 히그와 친해졌으면 하는 취지로
재량껏 번역하여 정리했습니다.
오번역이 있을 시 알려주시면 감사하겠습니다.

다크모드란,
밝은 화면에 어두운 글자를 대신하여
어두운 화면에 밝은 글자를 나타내는 반전 테마로,
조명이 낮은 환경에서 편안하게 인터페이스와 상호작용 하도록 돕는
전체 시스템에 대한 설정입니다.

A. 기본

사람들은 모든 기기 안에서 다크모드를 설정하여
앱과 인터페이스에서 다크모드가 유지될 것을 기대합니다.
다크모드에는 모든 요소를 비교적 어두운 색감으로 디자인하는 스타일이 있고,
배경을 어둡게 함으로써 콘텐츠나 아이콘 등을 반전하여 눈에 띄도록 강조하는 스타일을 택할 수도 있습니다.
다크모드를 설정할 수 있을 때, 앱별 모양 설정도 되도록 같이 제공하지 마세요. 상황마다 바뀔 수 있는 UI 요소가 있으면, 다크모드를 포함해 둘 이상의 설정을 조정해야 하기 때문에 더 많은 작업을 수행해서 렉이 걸린 것 처럼 표시될 수 있습니다.
어둡거나 밝은 장소에서 두 모드의 UI를 모두 확인하여 배경과 글자 및 요소의 대비감이 애매하지 않고 확실히 구분되었는지 확인하며 디자인해야합니다.
다크모드에 최적화된 앱이 있습니다. 미디어 중심의 콘텐츠를 제공하는 앱은 다크모드만 제공하여 콘텐츠에 몰입할 수 있도록 유도하세요.

B. 색상

배경색이 밝아보여도 다크모드인 경우가 있습니다.
시맨틱 컬러(반대 색상 미리 지정)를 사용하면 어떤 모드에서든 자동으로 색상이 변경되고, 일일히 지정이 필요한 경우에는 Xcode 의 asset catalog 에서 Color Set asset 을 추가해서 사용해야 합니다.
HIG에 명시되어 있는 시스템 정의 색상(system-defined colors)을 그대로 가져다 쓰면 명암대비가 확실합니다. 최소한 색상 간의 명암비가 4.5:1 이상이어야 합니다. 사용자가 지정할 경우,(특히 작은 텍스트에서) 7:1의 명암비를 맞춰야 합니다.
시각장애인까지 고려한 색상의 명암비를 맞추기 위해 아래 사이트를 참고하여 디자인하세요. (개인자료)
https://webaim.org/resources/contrastchecker/
다크모드 시 밝은 이미지를 사용할 때, 밝기를 살짝 낮추어 너무 눈에 띄지 않도록 해야합니다. 같은 맥락으로 흰색 배경일 경우, 약간 어두운 흰색으로 하세요.

C. 아이콘 및 이미지

아이콘은 기존 SF Symbol 로 사용하면 두가지 모드에서 자동 지원됩니다.
배경색과 함께 아이콘의 의미를 얼마냐 강조하고 싶은지 고려하여 아이콘을 커스터마이징 해도 좋습니다.
두가지 모드에서 잘보이는 이미지와 아이콘 하나를 통일해서 사용하도록 노력하세요. 한가지 모드에서만 잘보이면 전체를 수정하거나 별도로 두개의 요소를 준비해야 하는 번거로움이 있습니다.

D. 텍스트

(tvOS, watchO X)

다크모드 시
화면 위에 화면인 인터페이스 레이어가 쌓일 경우 (예를 들어, 시트나 모달)
기존화면에는 '기본 다크모드 세트 색상'이 적용되고,
그 위의 화면에는 좀더 밝은 '높은 다크모드 세트 색상'이 적용되어 레이어간의 깊이감을 나타냅니다. 그래서 사용자가 배경색을 일일히 지정하기보다, 시스템 배경색 (system background colors)을 사용하여 레이어가 쌓이는 여러가지 상황에 자연스러운 깊이감으로 적용되도록 하세요.

맥 OS

설정에서 graphite accent color(흑연 강조 색상)을 선택하면, 윈도우가 주변 콘텐츠와 더 조화로운 '데스크탑 틴팅' 효과를 띕니다.

디자이너