[iOS / HIG] Dark Mode

Dark Mode

In iOS 13.0 and later, people can choose to adopt a dark system-wide appearance called Dark Mode. In Dark Mode, the system uses a darker color palette for all screens, views, menus, and controls, and it uses more vibrancy to make foreground content stand out against the darker backgrounds. Dark Mode supports all accessibility features.

iOS 13.0 이상에서 사람들은 Dark Mode라고 불리는 어두운 시스템 전체의 외관을 채택할 수 있습니다. 다크 모드에서는 시스템이 모든 화면, 뷰, 메뉴 및 컨트롤에 대해 더 어두운 색상 팔레트를 사용하며 더 많은 진동을 사용하여 어두운 배경에 대해 전경 콘텐츠를 돋보이게 합니다. 다크 모드는 모든 내게 필요한 옵션 기능을 지원합니다.

 

검은색 배경과 어두운 모드를 사용하는 다크 모드의 메일 받은 편지함에 대한 부분 스크린샷입니다.

검은색 배경과 흰색 또는 연한 회색 텍스트 및 기호를 사용하는 어두운 모드의 메일 받은 편지함에 대한 부분 스크린샷입니다. 뒤로 단추, 편집 단추 및 읽지 않은 문서 표시기는 파란색입니다.
어두운 모드입니다

Dark Mode

 

흰색 배경과 검은색 또는 회색 텍스트 및 기호를 사용하는 라이트 모드의 메일 받은 편지함에 대한 부분 스크린샷입니다.

뒤로 가기 버튼, 편집 버튼 및 읽지 않은 문서 인디케이터는 파란색입니다.

Light mode

 

In Settings, people can choose Dark Mode as their default interface style and schedule automatic changes between the appearance modes. Because people make these choices at a systemwide level, they generally expect all apps to respect their preferences.

설정에서 다크 모드를 기본 인터페이스 스타일로 선택하고 모양 모드 간에 자동 변경을 예약할 수 있습니다. 사람들은 이러한 선택을 시스템 전반에서 하기 때문에 일반적으로 모든 앱이 자신의 선호도를 존중하기를 기대합니다.

 

Comply with the appearance mode people choose in Settings. If you offer an app-specific appearance mode option, you create more work for people because they have to adjust more than one setting. Worse, they may think your app is broken because it doesn't respond to their systemwide appearance choice.

설정에서 사람들이 선택하는 모양 모드를 준수합니다. 앱별 모양 모드 옵션을 제공하면 사용자가 둘 이상의 설정을 조정해야 하므로 더 많은 작업을 만들 수 있습니다. 설상가상으로, 그들은 당신의 앱이 시스템 전체의 선택에 반응하지 않기 때문에 그것이 고장났다고 생각할 수 있습니다.

 

Test your designs in both light and dark appearances. See how your interface looks in both appearances, and adjust your designs as needed to accommodate each one. Designs that work well in one appearance might not work in the other.

밝은 모양과 어두운 모양 모두에서 디자인을 테스트할 수 있습니다. 두 가지 모양 모두에서 인터페이스가 어떻게 표시되는지 확인하고 필요에 따라 디자인을 조정할 수 있습니다. 한 가지 모양에서 잘 작동하는 디자인은 다른 모양에서는 작동하지 않을 수 있습니다.

 

Ensure that your content remains comfortably legible in Dark Mode when you adjust the contrast and transparency accessibility settings. In Dark Mode, you should test your content with Increase Contrast and Reduce Transparency turned on, both separately and together. You may find places where dark text is less legible when it’s on a dark background. You might also find that turning on Increase Contrast in Dark Mode can result in reduced visual contrast between dark text and a dark background. Although people with strong vision might still be able to read lower contrast text, such text could be illegible for people with visual disabilities. For guidance, see Color and Contrast.

대비 및 투명도 접근성 설정을 조정할 때 다크 모드에서 콘텐츠를 쉽게 읽을 수 있도록 합니다. 다크 모드에서는 콘텐트를 개별적으로 또는 함께 콘트라스트 증가 및 투명도 감소가 켜진 상태에서 테스트해야 합니다. 어두운 배경에 어두운 텍스트가 있을 때 가독성이 떨어지는 곳을 발견할 수 있습니다. 어두운 모드에서 대비 증가를 설정하면 어두운 텍스트와 어두운 배경 사이의 시각적 대비가 줄어들 수 있습니다. 강한 시력을 가진 사람들은 여전히 낮은 대비의 텍스트를 읽을 수 있지만, 그러한 텍스트는 시각 장애가 있는 사람들에게는 읽기 어려울 수 있습니다. 자세한 내용은 색상 및 대비를 참조하십시오.

 

Dark Mode Colors

The color palette in Dark Mode includes darker background colors and lighter foreground colors that are carefully selected to ensure contrast while maintaining a consistent feel between modes and across apps.

다크 모드의 색상 팔레트에는 모드와 프로그램 간에 일관된 느낌을 유지하면서 대비를 위해 신중하게 선택한 어두운 배경색과 밝은 전경색이 포함됩니다.

 

In Dark Mode, the system uses two sets of background colors — called base and elevated — to enhance the perception of depth when one dark interface is layered above another. The base colors are darker, making background interfaces appear to recede, and the elevated colors are lighter, making foreground interfaces appear to advance.

다크 모드에서는 시스템이 두 가지 배경색 세트(기본색 및 상승색)를 사용하여 하나의 다크 인터페이스가 다른 다크 인터페이스 위에 레이어될 때 깊이 인식을 향상시킵니다. 기본 색상은 어둡기 때문에 배경 인터페이스가 후퇴하는 것처럼 보이고, 높아진 색상은 밝기 때문에 전경 인터페이스가 발전하는 것처럼 보입니다.

 

Prefer the system background colors. Dark Mode is dynamic, which means that the background color automatically changes from base to elevated when an interface is in the foreground, such as a popover or modal sheet. The system also uses the elevated background color to provide visual separation between apps in a multitasking environment and between windows in a multiple-window context. Using a custom background color can make it harder for people to perceive these system-provided visual distinctions.

시스템 배경색을 선호합니다. 다크 모드는 동적 모드입니다. 즉, 팝오버 또는 모달 시트와 같은 인터페이스가 포그라운드에 있을 때 배경색이 베이스에서 상승으로 자동 변경됩니다. 또한 시스템은 다중 작업 환경의 앱과 다중 창 컨텍스트의 창 사이를 시각적으로 구분하기 위해 높은 배경색을 사용합니다. 사용자 지정 배경색을 사용하면 시스템이 제공하는 이러한 시각적 차이를 사람들이 인식하기가 더 어려워질 수 있습니다.

 

Use dynamic colors that adapt to the current appearance. Semantic colors like separator automatically adapt to the current appearance (for guidance, see Dynamic System Colors). When you need a custom color, add a Color Set asset to your app’s asset catalog and specify the light and dark variants of the color so that it can adapt to the current appearance mode. Avoid using hard-coded color values or colors that don’t adapt.

현재 모양에 맞는 역동적인 색상을 사용합니다. 구분 기호와 같은 의미 색상은 현재 모양에 맞게 자동으로 조정됩니다(지침은 동적 시스템 색상 참조). 사용자 지정 색상이 필요하면 앱의 자산 카탈로그에 색상 세트 자산을 추가하고 현재 모양 모드에 적응할 수 있도록 색상의 밝은 색상과 어두운 색을 지정합니다. 하드 코딩된 색상 값 또는 적응되지 않는 색상을 사용하지 않도록 합니다.

 

Base

Elevated

Light

Ensure sufficient color contrast in all appearances. Using system-defined colors ensures a proper contrast ratio between your foreground and background content. For custom colors, aim for a contrast ratio of 7:1, especially for smaller text. For guidance, see Dynamic System Colors.

모든 모양에서 충분한 색상 대비를 보장합니다. 시스템 정의 색상을 사용하면 전경과 배경 콘텐츠 간의 적절한 대비 비율을 보장할 수 있습니다. 사용자 정의 색상의 경우, 특히 작은 텍스트의 경우 대비율이 7:1이 되어야 합니다. 자세한 내용은 동적 시스템 색상을 참조하십시오.

 

Soften the color of white backgrounds. If you must use a white background for your content in Dark Mode, choose a slightly darker white that prevents the background from glowing against the surrounding dark content.

For related guidance, see Color.

흰색 배경의 색을 부드럽게 하세요. 다크 모드에서 콘텐츠에 흰색 배경을 사용해야 하는 경우 주변 다크 콘텐츠에 대해 배경이 밝게 빛나지 않도록 약간 더 어두운 흰색을 선택합니다.

관련 지침은 색상을 참조하십시오.

 

Image, Icon, and Symbol Color

The system uses SF Symbols, which automatically look great in Dark Mode, and full-color images that are optimized for both light and dark appearances.

시스템은 어두운 모드에서 자동으로 멋져 보이는 SF 기호와 밝은 색상과 어두운 모양 모두에 최적화된 풀 컬러 이미지를 사용합니다.

 

Use SF Symbols wherever possible. Symbols look great in both appearance modes when you use dynamic colors to tint them or when you add vibrancy.

가능하면 SF 심볼을 사용하세요. 기호는 동적 색상을 사용하여 색조를 지정하거나 생동감을 추가할 때 두 가지 모양 모드에서 모두 잘 표시됩니다.

 

Design individual glyphs for light and dark appearances when necessary. A glyph that uses a hollow outline in light mode might look better as a solid, filled shape in Dark Mode.

필요할 때 밝은 모양과 어두운 모양을 위한 개별 글리프를 디자인합니다. 밝은 모드에서 빈 윤곽선을 사용하는 글리프는 어두운 모드에서 실선으로 채워진 모양으로 더 잘 보일 수 있습니다.

 

Make sure full-color images and icons look good. Use the same asset if it looks good in both light and dark modes. If an asset looks good in only one mode, modify the asset or create separate light and dark assets. Use asset catalogs to combine your assets into a single, named image.

풀 컬러 이미지와 아이콘이 보기 좋은지 확인합니다. 밝은 모드와 어두운 모드 모두에서 잘 보이면 동일한 자산을 사용합니다. 자산이 한 모드에서만 좋아 보이면 자산을 수정하거나 별도의 명암 자산을 생성하십시오. 자산 카탈로그를 사용하여 자산을 하나의 명명된 이미지로 결합합니다.

 

Materials

Vibrancy can help maintain good contrast of text on darker backgrounds.

진동은 어두운 배경에서 텍스트의 좋은 대비를 유지하는 데 도움이 될 수 있습니다.
 

Use the system-provided label colors for labels. The primary, secondary, tertiary, and quaternary label colors adapt automatically to light and dark appearances. For related guidance, see Typography.

라벨에는 시스템에서 제공한 라벨 색상을 사용합니다. 1차, 2차, 3차 및 4차 라벨 색상은 자동으로 밝고 어두운 모양에 적응합니다. 관련 지침은 타이포그래피를 참조하십시오.

 

Use system views to draw text fields and text views. System views and controls make your app’s text look good on all backgrounds, adjusting automatically for the presence or absence of vibrancy. When possible, use a system-provided view to display text instead of drawing the text yourself. For developer guidance, see UITextField and UITextView.

시스템 뷰를 사용하여 텍스트 필드 및 텍스트 뷰를 그립니다. 시스템 보기 및 컨트롤을 사용하면 앱의 텍스트가 모든 배경에서 보기 좋게 나타나며, 진동 유무에 따라 자동으로 조정됩니다. 가능하면 직접 텍스트를 그리는 대신 시스템에서 제공하는 뷰를 사용하여 텍스트를 표시합니다. 개발자 지침은 UITextField 및 UITextView를 참조하십시오.

 

To learn more about the interplay of vibrancy and materials, see Materials.

진동과 재료의 상호 작용에 대한 자세한 내용은 재료를 참조하십시오.

 

 

 

※ 참고 출처

애플 개발자 문서

Dark Mode - Visual Design - iOS - Human Interface Guidelines - Apple Developer