다크 모드는 iOS, iPadOS, macOS, tvOS에서 사용자들이 기본 인터페이스 스타일로 자주 설정하는 기능으로, 이 문서는 다크 모드에서의 모범 사례와 색상 사용에 대한 지침을 제공합니다. 특히, 앱은 시스템의 화면 모드 설정을 따르도록 해야 하며, 두 화면 모드 모두에서 콘텐츠의 가독성을 유지하는 것이 중요합니다. 따라서, 적절한 색상 대비와 시스템 제공 색상을 활용하여 사용자 경험을 최적화해야 합니다.
1. 다크 모드 개요
-
다크 모드는 iOS, iPadOS, macOS 및 tvOS에서 기본 인터페이스 스타일로 설정할 수 있음.
-
이 모드에서는 어두운 색상의 팔레트를 사용하여 콘텐츠를 강조하고, 더 높은 대비를 제공함.
2. 모범 사례
-
앱에서만 사용하는 화면 모드 설정을 제공하지 말 것.
사용자가 두 번 이상 설정을 조정해야 하므로 불편함이 증가함. -
두 화면 모드 모두에서 앱이 잘 표시되도록 할 것.
사용자가 ‘자동’ 설정을 선택할 경우, 앱이 실행 중일 때 모드가 전환될 수 있음. -
콘텐츠의 가독성을 테스트할 것.
다크 모드에서 어두운 배경에 어두운 텍스트는 가독성이 떨어질 수 있음. -
특정 상황에서 다크 모드만 사용하는 것을 고려할 것.
몰입감 있는 미디어 시청을 지원하는 앱에서는 다크 모드가 적합할 수 있음.
3. 다크 모드 색상
-
다크 모드의 색상 팔레트는 어두운 배경과 밝은 전경 색상을 포함함.
-
현재 화면 모드에 맞춰 조정되는 색상을 사용해야 함.
사용자 설정 색상은 Xcode에서 밝은 버전과 어두운 버전을 지정해야 함. -
모든 화면 모드에서 충분한 색상 대비를 사용해야 함.
최소 색상 간의 대비율은 4.5:1 이상이어야 하며, 작은 텍스트는 7:1을 권장함. -
흰색 배경 색상의 명도를 낮출 것.
흰색 배경이 다크 모드항목 사이에서 눈에 띄지 않도록 이미지를 어둡게 조정할 수 있음.
4. 아이콘 및 이미지
-
가능하면 SF Symbols를 사용해야 함.
이 아이콘은 두 화면 모드에서 잘 표시됨. -
라이트 모드와 다크 모드의 아이콘을 별도로 디자인할 것.
예를 들어, 보름달 아이콘은 배경에 따라 윤곽선이 필요할 수 있음. -
풀컬러 이미지와 아이콘이 두 화면 모드 모두에서 잘 표시되는지 확인할 것.
애셋이 한 모드에서만 잘 표시되면 수정하거나 별도로 생성해야 함.
5. 텍스트
-
시스템 제공 레이블 색상을 사용해야 함.
1차, 2차 레이블 색상은 자동으로 조정됨. -
시스템 보기를 사용하여 텍스트 필드와 텍스트 보기를 그릴 것.
시스템 제공 보기를 사용하면 모든 배경에서 텍스트가 잘 표시됨.
6. 플랫폼 고려 사항
-
iOS, iPadOS에서는 시스템 배경 색상을 사용하는 것이 좋음.
다크 모드에서는 배경 색상이 자동으로 조정되어 시각적 구별을 제공함. -
macOS에서는 사용자 설정 구성요소 배경에 약간의 투명도를 포함할 것.
투명도를 추가하면 데스크탑 색조 조정이 활성화될 수 있음.
7. 리소스
관련 콘텐츠 및 비디오 링크가 제공됨.
