[HIG] Dark Mode
편안한 시청 경험을 제공하는 다크모드
본 문서는 Apple의 Human Interface Guideline(이하 HIG) 문서를 한글로 번역한 것입니다. iOS 생태계 내에서 HIG를 읽으시는 분들이 번역본이 없어 불편함을 겪는 것을 알게 되었고, 이에 한글로 번역을 하게 되었습니다. iOS 커뮤니티 Async Swift에서 자율적으로 모인 9명이 함께 번역했으며, 일체의 상업적인 목적을 띄지 않습니다. 이 문서를 학습에 적극적으로 이용해 주시돼, 상업적인 용도로 이용하시는 것은 지양해 주시기 바랍니다. 감사합니다.
Introduction
다크 모드는 어두운 색상에서 적절한 색상 팔레트를 사용하여 조명이 거의 없는 환경에 맞게 조정된 모드입니다. 사용자에게 편안한 시청 경험을 제공합니다.
iOS, iPadOS, macOS 및 tvOS에서 사람들은 종종 기본 인터페이스 스타일로 다크 모드를 선택합니다. 그리고 사용하는 모든 앱과 게임에 다크 모드가 적용되기를 원합니다. 다크 모드에서 시스템은 모든 화면, 보기, 메뉴 및 컨트롤에 대해 어두운 색상 팔레트를 사용하고 전면과 후면의 콘텐츠의 대비를 통해 콘텐츠를 눈에 띄게 만들 수 있습니다.
Best practice
앱 내부에서 디스플레이(Appearance) 설정을 제공하지 않는 것이 좋습니다. 앱에서 디스플레이 모드를 변경할 수 있게 되면, 더 많은 작업을 수행해야 할 수 있습니다. 설상가상으로 사용자가 설정해 둔 기본 디스플레이 설정에 앱이 적용되지 않아서 기기가 고장 났다고 사용자들은 생각할 수 있습니다.
앱이 두 가지 모드 모두에서 잘 보이는지 확인하세요. 라이트 모드와 다크 모드를 사용하는 것 외에, 사람들이 자동 디스플레이 설정(Auto appearance setting)을 사용할 때를 고려해야 합니다. 자동 디스플레이 설정(Auto appearance setting)은 앱이 실행되는 외부 환경에 따라 다크 모드와 라이트 모드를 자동으로 전환합니다. 자동 디스플레이 설정(Auto appearance setting)이 있을 때는 더 유의하여 두 가지 모드에서 테스트하세요.
테스트를 통해 두 가지 디스플레이(Appearance) 모드에서 사용자들이 편안하게 콘텐츠를 읽을 수 있는지 확인하세요. 예를 들어 대비 증가 및 투명도 감소를 사용하는 다크 모드에서, 어두운 배경에 있을 때 어두운 텍스트가 가독성이 떨어질 수 있습니다. 또한 다크 모드에서 대비 증가를 사용하면 어두운 텍스트와 어두운 배경 사이의 시각적 대비가 감소할 수 있습니다. 시력이 좋은 사람들은 대비가 낮은 텍스트를 읽을 수 있지만 대부분의 사람들은 텍스트를 읽을 때 어려움이 있을 수 있습니다. 가이드라인은 Color and effect를 참고하세요.
인터페이스에서 다크 모드만 사용하는 것이 좋을 수 있습니다. 예를 들어 몰입형 미디어 시청 앱에서 사람들이 미디어에 집중할 수 있도록 다크모드만 지원하는 것이 좋을 수 있습니다.
Dark Mode colors
다크 모드의 색상 팔레트에는 더 어두운 배경색과 더 밝은 전경색이 사용됩니다. 그래서 다크모드에서 어두운 색상만 사용되는 것은 아닙니다. 자세한 내용은 Color > Specificarions을 참고하세요.
현재 디스플레이(Appearance)에 어울리는 색상을 선택하세요. 시멘틱 색상(Semantic colors)(labelColor 그리고 controlColor in macOS 또는 separator in iOS, iPadOS)을 사용하면 어떤 모드에서든 자동으로 색상이 변경되고, 커스텀 색상이 필요한 경우에는 Xcode의 Asset catalog에서 Color Set asset을 추가해서 사용할 수 있습니다.
역자설명 : 시멘틱 색상(Semantic colors)이란, 반대 색상을 미리 지정해 놓는 시스템 색상이며, 시스템 정의 색상(System-defined colors)이란, 시스템이 정의한 색상입니다.
모든 디스플레이에서 충분한 색상 대비를 갖는 것을 목표로 해야 합니다. 시스템 정의 색상(System-defined colors)을 사용하면 전경 콘텐츠와 배경 콘텐츠 간에 좋은 명암비를 얻을 수 있습니다. 최소한 색상 간의 명암비가 4.5:1 이상이어야 합니다. 사용자 정의 색상의 전경색 및 배경색의 경우 작은 텍스트에서는 7:1의 명암비를 목표로 해야 합니다. 이 비율은 전경 콘텐츠가 배경에서 눈에 띄도록 하고 콘텐츠가 사용자를 위한 접근성 가이드를 만족하는 데 도움이 됩니다.
역자설명 : 색상대비 사이트 WebAIM에서 간단하게 색상 대비를 확인할 수 있습니다.
흰색 배경의 색상을 부드럽게 합니다. 흰색 배경이 포함된 콘텐츠 이미지를 표시하는 경우, 이미지를 약간 어둡게 하여 흰색 배경이 빛나는 것을 방지해야 합니다.
Icons and images
시스템은 SF Symbol(자동으로 다크모드에 맞춰지는)와 다크모드 및 라이트 모드에서 모두 잘 적용되는 풀 컬러 이미지를 사용합니다.
가능하면 SF Symbol를 사용하는 것이 좋습니다. SF Symbol은 다이내믹 컬러(Dynamic Color)를 통해 색조가 변경되거나 생동감이 더해질 때 두 가지 모드에서 모두 잘 적용됩니다. 가이드라인은 Color을 참고하세요.
필요한 경우 두 가지 모드에 대해 별도의 인터페이스 아이콘을 디자인합니다. 예를 들어, 보름달을 묘사하는 아이콘은 밝은 배경과 잘 대조되기 위해 은은하고 어두운 윤곽이 필요할 수 있지만 어두운 배경에서는 윤곽이 필요하지 않습니다. 마찬가지로 까만 기름을 묘사하는 아이콘은 어두운 배경에서 보이도록 약간의 테두리가 필요할 수 있습니다.
풀 컬러 이미지와 아이콘이 두 모드에서 모두에서 잘 보이는지 확인하세요. 다크 모드와 라이트 모드에서 모두 잘 보이면 동일한 에셋(Asset)을 사용하세요. 에셋(Asset)이 한 가지 모드에서만 잘 보이면, 에셋(Asset)을 수정하거나 별도의 라이트 모드의 에셋(Asset)과 다크 모드의 에셋(Asset)을 만듭니다. 에셋 카탈로그(Asset catalog)를 사용하여 단일 이미지로 결합할 수 있습니다.
Text
시스템은 더 어두운 배경에서 텍스트의 가독성을 유지하기 위해 생동감과 대비를 증가시킵니다.
시스템에서 제공하는 레이블 색상을 사용하십시오. 1차, 2차, 3차 및 4차 레이블 색상은 두 가지 모드에서 자동으로 적용됩니다.
시스템 뷰(System View)를 사용하여 텍스트 필드와 텍스트 보기를 만드세요. 시스템 뷰(System View) 및 컨트롤을 사용하면 앱의 텍스트가 모든 배경에서 보기 좋게 나타나며 자동으로 조정됩니다. 가능하면 텍스트를 직접 그리는 대신 시스템에서 제공하는 뷰(View)를 사용하여 텍스트를 표시하세요.
Platform considerations
No additional considerations for tvOS, or watchOS.
iOS, iPadOS
다크 모드에서 시스템은 하나의 다크 인터페이스가 다른 인터페이스 위에 레이어드 될 때 깊이감을 주기 위해 기본(base)과 높은(elevated)이라는 두 가지 배경 색상을 사용합니다. 기본(base)은 더 어두워서 배경 인터페이스가 뒤로 물러나는 것처럼 보이고, 높은(elevated)은 더 밝아져 전경 인터페이스가 앞으로 나와 있는 것처럼 보입니다.
시스템 배경색을 사용하는 것이 좋습니다. 다크 모드는 동적(여러 요인에 의해 자주 변경이 됨)입니다. 즉, 팝오버 또는 모달 시트와 같이 인터페이스가 전경에 위치할 때 배경색이 기본에서 높은 것(base to elevated)으로 자동으로 변경됩니다. 또한 시스템은 높은(elevated) 배경색을 사용하여 멀티태스킹 환경의 앱과 다중 창 사이를 시각적으로 구분합니다. 시스템이 아닌 사용자 정의 배경색을 사용하면 이러한 시스템이 제공하는 시각적 구분을 제공받지 못해 사용자들이 불편함을 느낄 수 있습니다.
역자설명 : 밑의 이미지는 Alert와 Modar입니다. 이처럼 기존 View에서 위에 새롭게 띄워지는 시트에서 다크모드는 동적으로 적용됩니다.
macOS
사람들이 일반 설정에서 흑연 강조 색상(Graphite accent color)을 선택하면, macOS는 현재 데스크톱 사진에서 색상을 선택하도록 합니다. 이를 통해 주변 콘텐츠와 더 조화롭고 은은한 데스크톱 틴팅(desktop tinting) 효과를 줄 수 있습니다.
필요에 따라 커스텀 요소(Custom Components)에 배경에 투명도를 추가합니다. 투명도는 바탕 화면 색조가 사용 중 일 때, 구성 요소가 배경에서 색상을 선택하도록 하여 바탕 화면의 배경이 변경되는 경우에도 시각적 조화를 사용자들에게 제공합니다. 이러한 조화를 이루려면 배경이나 베젤(Bezel)이 보이는 커스텀 요소(Custom Components)에 투명도를 추가하고 구성 요소(Components)가 색상을 사용하지 않는 상태일 때만 투명도를 추가합니다. 구성 요소(Components)가 색상을 사용할 때는 투명도를 추가하지 않습니다. 왜냐하면 배경이 바탕 화면의 다른 위치로 이동하거나 바탕 화면 그림이 변경될 때 구성 요소(Components)의 색상이 변동될 수 있기 때문입니다.
역자설명 : 간단하게 설명하면, 커스텀 요소(Custom Components)에 투명도를 추가했을 때 뒤에 배경에 따라 색상이 변동될 수 있기에 필요에 따라 투명도를 추가하는 것이 좋습니다. 투명도가 적용된 요소(Components)는 뒤에 배경색과 섞여 의도한 색과 다르게 보일 수 있습니다.
