HIG 번역) Visual Design - 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 이상의 버전에서, 사용자들은 시스템 전반의 어두운 모습을 채택하는 다크 모드 기능을 선택할 수 있습니다. 다크 모드에서 시스템은 모든 screens, views, menus 및 controls에서 더 어두운 색을 사용하고, 더 많은 vibrancy를 사용하여 어두운 배경에서 전경의 콘텐츠가 강조되도록 합니다. 다크 모드는 모든 손쉬운 사용 기능을 지원합니다.

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 impairments. For guidance, see Color and Contrast.

손쉬운 사용 설정에서 대비와 투명도를 조정할 때, 다크 모드에서 콘텐츠를 편하게 읽을 수 있도록 유지하세요. 다크 모드에서 대비 증가와 투명도 줄이기 기능을 각각 그리고 동시에 사용했을 때, 콘텐츠를 확인해야 합니다. 어두운 배경에서 어두운 텍스트가 잘 보이지 않는 곳을 발견할 수도 있습니다. 또한 다크 모드에서 대비 증가 기능을 사용했을 때, 어두운 텍스트와 어두운 배경 사이에 시각적인 대비가 낮아지는 것을 확인할 수도 있습니다. 시력이 좋은 사용자들은 색의 낮은 텍스트도 여전히 잘 읽을 수 있지만, 시각 장애가 있는 사용자들은 읽기 힘들 수 있습니다. 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.

다크 모드에서, 시스템은 base와 elevated라고 불리는 두 가지 종류의 배경 색을 사용하여 어두운 인터페이스가 다른 하나와 겹쳐졌을 때, 깊이감을 증가시킵니다. 배경 인터페이스가 뒤로 물러나는 듯하게 만드는 base 색들은 더 어둡고, 전경 인터페이스가 더 나아오는 듯하게 만드는 elevated 색들은 더 밝습니다.

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.

시스템 배경색을 선호하세요. 다크 모드는 popover 또는 modal sheet와 같이 인터페이스가 전경에 있을 때, 배경색이 자동으로 base에서 elevated로 변경하는 것과 같이 역동적입니다. 또한 시스템은  멀티태스킹 환경에 있는 애플리케이션들 사이와 다중 화면 콘텍스트에 있는 화면들 간 시각적인 분리를 위해 elevated 배경 색을 사용합니다. 커스텀 배경 색을 사용하는 것은 사용자가 이러한 시스템에서 제공하는 시각적인 특별함을 인지하기 어렵게 만들 수 있습니다.

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.

현재 화면 스타일에 맞는 dynamic colors를 사용하세요. Separator와 같이 의미적인 색들은 자동으로 현재 화면 스타일에 맞게 변경됩니다(Dynamic System Colors와 관련된 가이드는 다음 문서를 참조하세요). 커스텀 색상이 필요한 경우, 앱의 asset catalog에 Color Set asset을 추가하고, 색상의 밝은 색과 어두운 색을 지정하여 현재 화면 스타일에 맞게 조정하세요. 하드 코딩된 색의 값이나 맞지 않는 색의 사용은 피하세요.

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을 목표로 하세요. Dynamic System Colors와 관련된 가이드는 다음 문서를 참조하세요.

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.

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 Symbols는 자동으로 다크 모드에 맞게 변경되고 라이트 모드와 다크 모드 양쪽 모두에 최적화된 full-color 이미지입니다.

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 Symbols를 사용하세요. Symbols는 라이트 모드와 다크 모드 양 쪽에 dynamic colors를 사용하여 색을 넣을 때 또는 vibrancy를 추가할 때 모두 적합합니다.

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.

Full-color 이미지와 아이콘이 적합하다는 것을 기억하세요. 라이트 모드나 다크 모드에서 잘 보인다면, 같은 asset을 사용하세요. Asset이 한쪽 스타일에서만 적합하다면, asset을 수정하거나 라이트 모드와 다크 모드의 asset을 따로 만드세요. Asset을 하나로 합치고, 이름을 짓기 위해서 asset catalogs를 사용하세요.

Materials

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

Vibrancy는 더 어두운 배경에서 텍스트의 대비가 잘 나타나도록 돕습니다.

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.

Labels로 시스템에서 제공하는 label 색들을 사용하세요. Primary, secondary, tertiary 및 quaternary label 색들은 라이트 모드와 다크 모드에서 자동으로 변경됩니다. Typography와 관련된 가이드는 다음 문서를 참조하세요.

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.

Text fields와 text views를 그리기 위해 system views 사용하세요. System views와 controls는 자동으로 vibrancy의 유무를 조정하여 모든 배경에서 애플리케이션의 텍스트가 잘 보이도록 도와줍니다. 가능한 한, 텍스트를 보여주기 위해서 텍스트를 직접 그리기보다는 시스템에서 제공하는 view를 사용하세요. UITextField 및 UITextView와 관련된 개발자 가이드는 다음 문서를 참조하세요.

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

Vibrancy와 materials의 상호작용에 대해서 더 알기 원하면 Materials 문서를 참조하세요.

---

수정해야 할 부분이 있다면 알려주세요!

감사합니다!