[HIG] Foundations - Dark Mode

Foundations - Dark Mode를 읽으며 직역/의역한 글입니다.

아이폰 설정에서 'Appearance'는 '화면 스타일'로 번역되어 나오기 때문에 화면 스타일이라는 말로 번역했습니다.

오타, 오역, 업데이트가 필요한 부분은 꼭 알려 주세요 :)

 

 

 

 

 

 

 

다크모드

다크모드는 시스템 전반의 화면 스타일 설정으로, 어두운 환경에서 편하게 볼 수 있도록 어두운 색들을 사용합니다.

 

 

 

iOS, iPadOS, macOS, and tvOS에서 사람들은 종종 다크모드를 기본 설정으로 해 놓고, 모든 앱과 게임들이 설정에 맞도록 보일 것이라고 예상합니다. 다크모드에서 시스템은 모든 화면과 뷰, 메뉴, 제어 등에 어두운 색들을 사용하며, 어두운 배경화면에서 잘 보이도록 포그라운드 컨텐트에 더 잘 보이는 대비 높은 색을 사용할 수도 있습니다.

 

 

 

 

 

 

모범 사례

 

앱에만 특정된 화면 스타일 설정을 피하세요. 앱 특정 화면 스타일은 사용자가 원하는 하나 이상의 설정을 조정해야 하기 때문에 더 많은 일을 하도록 만듭니다. 더 심각한 것은, 사용자들은 자신이 선택한 화면 스타일에 맞게 앱이 바뀌지 않으니까 당신의 앱이 고장났다고 생각할 수도 있습니다.

 

당신의 앱이 반드시 두 화면 스타일 모드에서 좋아 보이도록 만드세요. 사용자들은 한 가지 모드만 선택할 수도 있지만, 하루 내내 조건에 맞게 자동으로 라이트 모드와 다크 모드를 전환하는 자동 변경 설정을 선택할 수도 있고, 이것은 당신의 앱이 실행중일 때일 수도 있습니다.

 

당신의 컨텐츠가 두 화면 스타일 모드에서 충분히 알아보기 쉬운 상태로 유지되는지 확실히 하기 위해 테스트하세요. 예를 들어 '대비 증가'와 '투명도 줄이기'가(각각 또는 둘 다) 켜진 상태의 다크모드에서는 어두운 텍스트와 어두운 배경화면 사이의 대비 정도가 더 적어 보일 수 있습니다.

시력이 좋은 사용자는 대비가 적어도 잘 읽을 수 있겠지만, 많은 사람들에게 읽기 어려울 수 있습니다. 컬러와 효과를 참고해 보세요.

 

드물게, 다크 모드만 사용하는 것을 고려해 보세요. 예를 들어 몰입형 미디어를 제공하는 앱의 경우에는 사용자들이 UI보다 미디어에 더 집중할 수 있도록 다크 모드만 사용하는 것이 타당하겠죠.

 

 

 

 

 

 

다크 모드 컬러

 

다크 모드의 컬러 팔레트는 더 어두운 백그라운드 컬러와 더 밝은 포그라운드 컬러를 포함합니다. 이 컬러들이 꼭 대응 관계에 있는 밝은 컬러의 반전된 색은 아니라는 것을 아는 것은 중요합니다: 많은 컬러들은 반전된 컬러지만, 아닌 것들도 있습니다. 더 많은 정보를 보려면 컬러 > 사양을 참고하세요.

 

현재 화면 스타일에 맞는 컬러들을 사용하세요. 시맨틱 컬러들은(macOS의 labelColor와 controlColor, 혹은 iOS and iPadOS의 separator같은) 현재 화면 스타일에 맞게 자동으로 바뀝니다. 커스텀 컬러가 필요하다면 Xcode의 에셋 카탈로그에 컬러셋을 추가하고 해당 컬러의 밝은 버전과 어두운 버전을 명시하세요. 하드코딩된 컬러값이나 맞지 않는 컬러를 사용하는 것을 피하세요. (하드코딩된 컬러값이라는 말은 rgb값이나 hex코드 같은 걸 사용하는 것을 피하라는 듯)

 

모든 화면 스타일에서 충분한 컬러 대비가 있도록 하세요. 시스템 지정 컬러를 사용하면 당신의 포그라운드와 백그라운드 컨텐츠에 충분한 대비가 있도록 하는 데에 도움이 될 수 있습니다. 최소한 반드시 컬러들 사이 대비율이 4.5:1보다 낮아지지 않도록 하세요. 커스텀 포그라운드와 백그라운드 컬러를 사용한다면 특히 작은 텍스트에서 7:1의 대비율을 내세요. 이 비율은 포그라운드 컨텐츠가 백그라운드 컨텐츠 위에서 눈에 띄도록 보장해 주는 비율이며, 권고되는 접근성 지침을 당신의 컨텐츠가 충족할 수 있도록 도와 줍니다.

 

흰 백그라운드를 은은하게 하세요. 흰 배경이 있는 이미지를 보여 주어야 한다면, 다크모드에서 이미지가 밝게 빛나지 않도록 이미지를 살짝 어둡게 하는 것을 고려하세요.

 

 

 

 

 

 

 

 

Dark Mode - Foundations - Human Interface Guidelines - Design - Apple Developer