다크모드

다크 모드는 어두운 색 팔레트를 사용하여 저조도 환경에 맞는 편안한 시청 경험을 제공하는 시스템 차원의 외관 설정입니다.

iOS, iPadOS, macOS 및 tvOS에서 사람들은 종종 다크 모드를 기본 인터페이스 스타일로 선택하며, 일반적으로 모든 앱과 게임이 선호도를 존중할 것으로 기대합니다. 다크 모드에서 시스템은 모든 화면, 보기, 메뉴 및 컨트롤에 어두운 색상 팔레트를 사용하며, 더 큰 지각 대비를 사용하여 더 어두운 배경에서 전경 콘텐츠를 돋보이게 할 수도 있습니다.

모범 사례

앱별 모양 설정을 제공하지 마세요. 앱별 모양 모드 옵션은 원하는 모양을 얻기 위해 하나 이상의 설정을 조정해야 하기 때문에 사람들에게 더 많은 작업을 만듭니다. 더 나쁜 것은, 그들은 당신의 앱이 시스템 전반의 외모 선택에 반응하지 않기 때문에 고장났다고 생각할 수도 있다는 것입니다.

앱이 두 외관 모드에서 잘 보이는지 확인하세요. 한 모드 또는 다른 모드를 사용하는 것 외에도, 사람들은 앱이 실행되는 동안 하루 종일 조건이 변경됨에 따라 밝고 어두운 모양 사이를 전환하는 자동 모양 설정을 선택할 수 있습니다.

두 외관 모드에서 편안하게 읽을 수 있도록 컨텐츠를 테스트하세요. 예를 들어, 대비 증가와 투명도 감소가 켜져 있는 다크 모드에서는 어두운 배경에서 어두운 텍스트가 어두운 배경에 있을 때 덜 읽기 쉬운 장소를 찾을 수 있습니다. 다크 모드에서 대비 증가를 켜면 어두운 텍스트와 어두운 배경 사이의 시각적 대비를 줄일 수도 있습니다. 시력이 강한 사람들은 여전히 낮은 대조도 텍스트를 읽을 수 있지만, 그러한 텍스트는 많은 사람들에게 읽을 수 없습니다. 지침은 Color and effects를 참조하십시오.

드물게 인터페이스에서 어두운 외관만 사용하는 것을 고려해 보세요. 예를 들어, 몰입형 미디어 보기를 가능하게 하는 앱이 UI가 물러나고 사람들이 미디어에 집중할 수 있도록 영구적으로 어두운 모양을 사용할 수 있습니다.

다크 모드 색상

다크 모드의 색상 팔레트에는 희미한 배경색과 더 밝은 전경색이 포함되어 있습니다. 이러한 색상이 반드시 빛에 대한 반전은 아니라는 것을 깨닫는 것이 중요합니다: 많은 색상이 거꾸로 되어 있지만, 일부는 그렇지 않습니다. 자세한 내용은 Color > Specifications을 참조하십시오.

현재 외관에 적응하는 색상을 받아들이세요. macOS의 labelColor 및 controlColor 또는 iOS 및 iPadOS의 separator와 같은)시맨틱 색상은 현재 모양에 자동으로 적응합니다. 사용자 지정 색상이 필요한 경우, Xcode의 앱 자산 카탈로그에 색상 세트 자산을 추가하고 색상의 밝고 희미한 변형을 지정하십시오. 하드 코딩된 색상 값이나 적응하지 않는 색상을 사용하지 마세요.

모든 외관에서 충분한 색상 대비를 목표로 하세요. 시스템 정의 색상을 사용하면 전경과 배경 콘텐츠 사이의 좋은 명암비를 달성하는 데 도움이 될 수 있습니다. 최소한, 색상 간의 명암비가 4.5:1보다 낮지 않은지 확인하세요. 사용자 지정 전경색과 배경색의 경우, 특히 작은 텍스트에서 7:1의 명암비를 위해 노력하십시오. 이 비율은 전경 콘텐츠가 백그라운드에서 눈에 띄도록 보장하며, 콘텐츠가 권장되는 접근성 지침을 충족하는 데 도움이 됩니다.

흰색 배경의 색을 부드럽게 하세요. 흰색 배경이 포함된 콘텐츠 이미지를 표시하는 경우, 주변 다크 모드 컨텍스트에서 배경이 빛나지 않도록 이미지를 약간 어둡게 하는 것을 고려하십시오.

아이콘과 이미지

시스템은 SF Symbols(다크 모드에 자동으로 적응)와 밝고 어두운 모양 모두에 최적화된 풀 컬러 이미지를 사용합니다.

가능한 한 SF 기호를 사용하세요. 기호는 동적 색상을 사용하여 색을 칠하거나 활기를 더할 때 두 모양 모드에서 잘 작동합니다. 지침은 Color을 참조하십시오.

필요한 경우 밝고 어두운 모습을 위해 별도의 인터페이스 아이콘을 디자인하세요. 예를 들어, 보름달을 묘사하는 아이콘은 밝은 배경과 잘 대조하기 위해 미묘한 어두운 윤곽이 필요할 수 있지만, 어두운 배경에 표시될 때는 윤곽이 필요하지 않습니다. 마찬가지로, 기름 한 방울을 나타내는 아이콘은 어두운 배경에 가장자리를 볼 수 있도록 약간의 테두리가 필요할 수 있습니다.

풀 컬러 이미지와 아이콘이 두 외모 모두에서 잘 보이는지 확인하세요. 라이트 모드와 다크모드 모두에서 좋아 보이면 동일한 에셋을 사용하세요. 자산이 하나의 모드에서만 좋아 보인다면, 자산을 수정하거나 별도의 밝고 어두운 에셋을 만드세요. 자산 카탈로그를 사용하여 자산을 하나의 명명된 이미지로 결합하십시오.

텍스트

이 시스템은 더 어두운 배경에서 텍스트의 가독성을 유지하기 위해 활기와 향상된 대비를 사용합니다.

라벨에 시스템 제공 라벨 색상을 사용하세요. 1차, 2차, 3차 및 4차 라벨 색상은 밝고 어두운 모양에 자동으로 적응합니다.

시스템 뷰를 사용하여 텍스트 필드와 텍스트 뷰를 그리세요. 시스템 보기와 컨트롤은 앱의 텍스트를 모든 배경에서 멋지게 보이게 하며, 생동감의 존재 또는 부재에 따라 자동으로 조정됩니다. 가능한 경우, 직접 텍스트를 그리는 대신 시스템에서 제공하는 보기를 사용하여 텍스트를 표시하십시오.

플랫폼 고려사항

iOS, iPadOS

다크 모드에서 시스템은 베이스와 상승이라고 불리는 두 세트의 배경색을 사용하여 한 어두운 인터페이스가 다른 인터페이스 위에 계층화될 때 깊이에 대한 인식을 향상시킵니다. 기본 색상은 더 어둡고, 배경 인터페이스가 물러난 것처럼 보이고, 높은 색상은 더 밝아 전경 인터페이스가 발전하는 것처럼 보입니다.

시스템 배경색을 선호하세요. 다크 모드는 동적입니다. 즉, 팝오버나 모달 시트와 같은 인터페이스가 전경에 있을 때 배경색이 기본에서 높이로 자동으로 바뀝니다. 이 시스템은 또한 높은 배경색을 사용하여 멀티태스킹 환경에서 앱과 다중 창 컨텍스트의 창 간의 시각적 분리를 제공합니다. 사용자 지정 배경색을 사용하면 사람들이 이러한 시스템에서 제공하는 시각적 차이를 인식하기가 더 어려워질 수 있습니다.

macOS

사람들이 일반 설정에서 그레파이트(graphite) 악센트 색상을 선택하면 macOS는 현재 데스크톱 사진에서 창 배경이 색상을 선택하게 합니다. 데스크톱 색조라고 불리는 결과는 윈도우가 주변 콘텐츠와 더 조화롭게 조화를 이루는 데 도움이 되는 미묘한 효과이다.

적절한 경우 사용자 지정 구성 요소 백그라운드에 약간의 투명도를 포함하세요. 투명도를 사용하면 데스크톱 색조가 활성화되어 있을 때 구성 요소가 창 배경에서 색상을 픽업하여 데스크톱 사진이 변경되더라도 지속될 수 있는 시각적 조화를 만들 수 있습니다. 이러한 조화를 이루기 위해, 배경이나 베젤이 보이는 사용자 지정 구성 요소에만 투명도를 추가하고, 구성 요소가 색상을 사용하지 않는 상태와 같은 중립 상태에 있는 경우에만 투명도를 추가하십시오. 구성 요소가 색상을 사용하는 상태에 있을 때 투명도를 추가하고 싶지 않습니다. 이렇게 하면 창 배경이 데스크톱의 다른 위치로 조정되거나 데스크톱 사진이 변경될 때 구성 요소의 색상이 변동할 수 있기 때문입니다.

https://developer.apple.com/design/human-interface-guidelines/foundations/dark-mode