Dark Mode is a systemwide appearance setting that uses a dark color palette to provide a comfortable viewing experience tailored for low-light environments.
다크 모드는 어두운 색상 팔레트를 사용하여 저조도 환경에 맞게 조정된 편안한 시각적 경험을 제공하는 시스템 전체에 걸친 세팅입니다.
→ 저조도 환경에서 다크 모드를 이용하면 편한 시각적 경험을 느낄 수 있다
In iOS, iPadOS, macOS, and tvOS, people often choose Dark Mode as their default interface style, and they generally expect all apps and games to respect their preference. In Dark Mode, the system uses a dark color palette for all screens, views, menus, and controls, and may also use greater perceptual contrast to make foreground content stand out against the darker backgrounds.
iOS, iPadOS, macOS 및 tvOS에서, 사람들은 종종 기본 인터페이스 스타일로 다크 모드를 선택하고 일반적으로 모든 앱과 게임들이 그들이 선호하는 것을 존중해주기를 기대합니다. 다크 모드에서 시스템은 모든 화면, 뷰, 메뉴 및 제어하는 것들에 어두운 색상 팔레트를 사용하며, 더 큰 지각적 대비를 사용하여 중요한 위치의 컨텐츠가 어두운 배경에 대비하여 두드러지도록 할 수도 있습니다.
* 지각 : 감각 기관을 통하여 대상을 인식함. 또는 그런 작용
→ 사람들은 종종 다크 모드를 선택하며, 이 기대에 부응하기 위해서 어두운 색상 팔레트를 사용하되 중요한 컨텐츠는 어두운 배경에 대비해 두드러지도록 하는 등의 디자인/개발이 필요하다
Avoid offering an app-specific appearance setting. An app-specific appearance mode option creates more work for people because they have to adjust more than one setting to get the appearance they want. Worse, they may think your app is broken because it doesn't respond to their systemwide appearance choice.
앱 특유의 외관 설정을 제공하는 것을 피해야 합니다. 앱 특유의 외관 모드 옵션은 원하는 모양을 얻기 위해 더 많은 설정을 조정해야 하므로 작업량이 더 많아집니다. 또한, 시스템 전체에 반응하지 않기 때문에 그들은 당신의 앱이 고장났다고 생각할 수도 있습니다.
→ 앱에서 사용자가 직접 설정할 수 있는 모드를 제공하게 된다면, 앱 개발/디자인 시에 작업량이 많아질 뿐만 아니라 사용자가 앱에 문제가 있다고 생각하게 될 수도 있다
역자 첨언
Ensure that your app looks good in both appearance modes. In addition to using one mode or the other, people can choose the Auto appearance setting, which switches between light and dark appearances as conditions change throughout the day, potentially while your app is running.
당신의 앱이 두 가지 외관 모드에서 모두 잘 나타나도록 해야 합니다. 사람들은 특정 하나의 외관 모드를 사용하는 것 외에도, 앱이 실행되는 동안의 하루 중 조건이 변화함에 따라 밝은 외관 모드와 어두운 외관 모드 사이를 자동으로 전환시켜 주는 자동 외관 설정을 선택해 사용할 수 있습니다.
→ 사람들은 특정 모드 하나를 선택할 수도 있지만, 주변 환경에 따라 자동으로 모드(라이트/다크)를 전환시켜 주는 자동 외관 설정을 선택할 수도 있으니 앱이 이 두 가지 모드에서 모두 잘 나타나도록 해야 한다
Test your content to make sure that it remains comfortably legible in both appearance modes. For example, in Dark Mode 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 many. For guidance, see Color and effects.
두 가지 외관 모드에서 모두 컨텐츠를 편안하게 읽을 수 있는지 테스트해야 합니다. 예를 들어, 다크 모드에서 ‘대비 증가’ 및 ‘투명도 줄이기’(따로 혹은 함께) 옵션을 켰을 때, 어두운 배경의 어두운 텍스트가 더 읽기 힘들어지는 경우가 있을 수 있습니다. 또한 다크 모드에서 대비 증가를 설정하면 어두운 배경과 어두운 텍스트 간의 시각적 대비가 감소한다는 사실 또한 알 수 있습니다. 시력이 좋은 사람들은 낮은 대비를 가진 텍스트를 읽을 수 있지만, 많은 사람들에게 그러한 텍스트는 읽기 어려울 수 있습니다. 자세한 내용은 색상 및 효과를 참조하십시오.
→ 배경과 텍스트 사이의 대비나 텍스트 투명도 옵션들에 따라 다크 모드에서 텍스트 가독성이 좋지 않을 수도 있으니, 두 가지 외관 모드(라이트/다크)에서 텍스트를 모두 편안하게 읽을 수 있도록 해야 한다
역자 첨언
In rare cases, consider using only a dark appearance in the interface. For example, it can make sense for an app that enables immersive media viewing to use a permanently dark appearance that lets the UI recede and helps people focus on the media.
드물게 인터페이스에서 다크 모드만 사용하는 것이 적절한 경우가 있습니다. 예를 들어, 몰입형 미디어 시청을 가능하게 하는 앱은 UI를 어둡게 하고 미디어에 초점을 맞추도록 도와주기 위해 다크 모드를 사용하는 것이 합리적일 수 있습니다.
→ 컨텐츠에 몰입하는 것이 중요한 일부 앱들은 다크 모드만을 지원하는 것이 적절한 경우가 있다
역자 첨언
The color palette in Dark Mode includes dimmer background colors and brighter foreground colors. It’s important to realize that these colors aren’t necessarily inversions of their light counterparts: while many colors are inverted, some are not. For more information, see Color > Specifications.
다크 모드의 색상 팔레트에는 어두운 background 색과 밝은 foreground 색이 포함됩니다. 이러한 색들이 라이트 모드의 반전된 색이 아니라는 것을 아는 것이 중요합니다. 많은 색상이 반전되긴 하지만, 일부는 그렇지 않습니다. 자세한 내용은, 색상 > 사양을 참조하세요.
→ 다크 모드에 쓰여진 색상들이 무조건 라이트 모드에 쓰여진 색상들의 반전된 색은 아니다
Embrace colors that adapt to the current appearance. Semantic colors (like labelColor and controlColor in macOS or separator in iOS and iPadOS) automatically adapt to the current appearance. When you need a custom color, add a Color Set asset to your app’s asset catalog in Xcode, and specify the bright and dim variants of the color. Avoid using hard-coded color values or colors that don’t adapt.
* separator : 일부 하위 콘텐츠를 볼 수 있게 하는 얇은 테두리 또는 구분선을 위한 색상
* 에셋 : 앱에서 사용되는 이미지, 아이콘, 음악, 비디오 등의 자산
→ Semantic colors나 사용자 지정 색상을 지정할 수 있는 Xcode ‘Color Set’을 이용해 외관에 따라 자동으로 적용되는 색상을 이용해야 한다
역자 첨언
Aim for sufficient color contrast in all appearances. Using system-defined colors can help you achieve a good contrast ratio between your foreground and background content. At a minimum, make sure the contrast ratio between colors is no lower than 4.5:1. For custom foreground and background colors, strive for a contrast ratio of 7:1, especially in small text. This ratio ensures that your foreground content stands out from the background, and helps your content meet recommended accessibility guidelines.
모든 외관에서 충분한 색상 대비를 목표로 해야 합니다. 시스템에서 정의한 색상을 사용하면 foreground와 background 컨텐츠 간의 좋은 대비 비율을 달성하는 데 도움이 됩니다. 최소한 색상 간 대비 비율이 4.5:1 이상이어야 합니다. foreground 색과 background 색상을 커스텀하는 경우, 특히 작은 텍스트에서 대비 비율이 7:1인 것을 목표로 해야 합니다. 이 비율은 foreground 컨텐츠가 background에서 두드러지게 하며 권장되는 접근성 지침을 충족하는 데 도움이 됩니다.
→ 시스템에서 정의한 색상을 사용할 경우, 대부분은 이미 적절한 대비 비율을 갖기 때문에 최소한 4.5:1 이상의 색상 간 대비 비율을 충족하는 것으로 충분하다
역자 첨언
Soften the color of white backgrounds. If you display a content image that includes a white background, consider slightly darkening the image to prevent the background from glowing in the surrounding Dark Mode context.
흰색 배경이면 색을 부드럽게 해야 합니다. 배경이 흰색인 컨텐츠 이미지를 표시하는 경우, 다크 모드에서 이미지의 색을 약간 어둡게 만들어서 주변 배경이 빛나지 않도록 해야 합니다.
→ 다크 모드에서 배경이 흰색인 이미지가 있을 경우, 이미지의 색을 약간 어둡게 만드는 것이 좋다
역자 첨언
The system uses SF Symbols (which automatically adapt to Dark Mode) and full-color images that are optimized for both light and dark appearances.
* full-color 이미지 : RGB (Red Green Blue) 색 공간에서 모든 색을 사용하여 구성된 이미지
→ 시스템은 라이트 모드와 다크 모드에 최적화된 SF 심볼과 full-color 이미지를 사용한다
역자 첨언
Use SF Symbols wherever possible. Symbols work well in both appearance modes when you use dynamic colors to tint them or when you add vibrancy. For guidance, see Color.
가능한 한 SF Sybmols을 사용하세요. SF 심볼은 동적 색상을 사용해 색조를 조정하거나 생동감을 추가하는 경우, 두 가지 모드(라이트/다크)에서 잘 작동합니다. 자세한 내용은 Color를 참조하세요.
* 동적 색상 : 애플 플랫폼에서 사용되는 색상의 하나로, 앱이 실행 중에 동적으로 변경될 수 있는 색상
→ 동적 색상을 사용해 두 가지 모드(라이트/다크)에서 잘 작동하도록 할 수 있으니, 가능한 SF 심볼을 사용해야 한다
역자 첨언
Design separate interface icons for light and dark appearances if necessary. For example, an icon that depicts a full moon might need a subtle dark outline to contrast well with a light background, but need no outline when it displays on a dark background. Similarly, an icon that represents a drop of oil might need a slight border to make the edge visible against a dark background.
필요한 경우, 라이트 모드 및 다크 모드 각각 별도의 인터페이스 아이콘을 디자인해야 합니다. 예를 들어, 보름달을 묘사하는 아이콘은 밝은 배경과 잘 대비하기 위해 약간 어두운 외곽선이 필요하지만, 어두운 배경에서는 필요하지 않을 수 있습니다. 마찬가지로 기름 방울을 나타내는 아이콘은 어두운 배경에서 가장자리가 잘 보이도록 약간의 테두리가 필요할 수 있습니다.
→ 각 모드(라이트/다크)에 따라 동일한 아이콘이더라도 약간씩 다른 디자인이 필요할 수 있다
Make sure full-color images and icons look good in both appearances. Use the same asset if it looks good in both light and dark appearances. 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 이미지와 아이콘은 라이트 모드와 다크 모드에서 모두 잘 보이도록 해야 합니다. 라이트 모드와 다크 모드 모두에서 잘 보이는 경우, 동일한 에셋을 사용하세요. 하지만 에셋이 하나의 모드에서만 좋아 보인다면, 해당 에셋을 수정하거나 별도의 라이트 모드와 다크 모드 에셋을 생성해야 합니다. 이후에 에셋 카탈로그를 사용해 여러 에셋을 하나의 이미지로 결합할 수 있습니다.
→ 라이트 모드와 다크 모드 각각의 에셋을 생성하거나 동일한 에셋을 사용해 어느 모드에서건 모두 잘 보이도록 해야 한다
역자 첨언
The system uses vibrancy and increased contrast to maintain the legibility of text on darker backgrounds.
시스템은 어두운 배경 위에 있는 텍스트의 가독성을 유지하기 위해 생동감과 대비를 증가시킵니다.
→ 생동감(vibrancy)과 대비(contrast)를 증가시켜, 배경의 색상과 밝기에 상관없이 텍스트가 잘 보이도록 한다
역자 첨언
Use the system-provided label colors for labels. The primary, secondary, tertiary, and quaternary label colors adapt automatically to light and dark appearances.
시스템에서 제공하는 라벨 색상을 사용해야 합니다. primary, secondary, tertiary, 그리고 quaternary 라벨 색상은 라이트 모드와 다크 모드에 따라 자동으로 조정됩니다.
→ 시스템에서 제공하는 라벨 색상을 사용해야 한다
역자 첨언
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.
시스템 뷰를 사용해 텍스트 필드 및 텍스트 화면을 그릴 수 있습니다. 시스템 뷰 및 제어 기능은 모든 배경에서 당신 앱의 텍스트를 잘 보이게 하기 위해, 생동감 효과의 유무를 자동으로 조정해 줍니다. 가능하면 텍스트를 직접 그리지 말고 시스템에서 제공하는 뷰를 사용해 텍스트를 표시합니다.
→ 시스템 뷰를 사용해 텍스트를 표시해야 한다
역자 첨언
No additional considerations for tvOS. Dark Mode isn't supported in watchOS.
tvOS에서는 추가적인 고려 사항이 없습니다. watchOS에서는 다크 모드를 지원하지 않습니다.
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 dimmer, making background interfaces appear to recede, and the elevated colors are brighter, making foreground interfaces appear to advance.
다크 모드에서 시스템은 두 개의 background 색(base, elevated)을 사용해, 하나의 어두운 인터페이스가 다른 인터페이스 위에 층으로 구성된 경우 깊이 인식을 향상시킵니다. base 색은 어둡게 처리되어 background 인터페이스가 후퇴하는 것처럼 보이게 하고, elevated 색은 밝게 처리되어 foreground 인터페이스가 진입하는 것처럼 보이게 합니다.
* 깊이 인식 : 물체들의 거리나 위치에 대한 인식 능력
→ 다크 모드에서는 두 개의 background 색(base, elevated)을 사용해 깊이 인식을 향상시킨다
역자 첨언
Base
Elevated
Light
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.
다크 모드는 시스템에서 제공하는 background 색을 선호합니다. 다크 모드는 동적이며, 이는 인터페이스가 foreground(팝업, 모달 창 등)에 있는 경우에 background 색이 자동으로 base에서 elevated으로 변경됨을 의미합니다. 또한 시스템은 멀티태스킹 환경의 앱과 다중 창 환경에서 창 간의 시각적 구분을 제공하기 위해 elevated background 색상을 사용합니다. 사용자 정의 background 색상을 사용하면 시스템에서 제공하는 시각적 구분을 인식하는 데 어려움이 있을 수 있습니다. 따라서 시스템에서 제공하는 background 색상을 사용하는 것이 좋습니다.
→ 다크 모드에서 인터페이스에 따라 elevated 색으로 자동 변경되기 때문에 시스템에서 제공하는 background 색을 사용해야 한다
When people choose the graphite accent color in General settings, macOS causes window backgrounds to pick up color from the current desktop picture. The result — called desktop tinting — is a subtle effect that helps windows blend more harmoniously with their surrounding content.
사람들이 일반 설정에서 graphite accent 색상을 선택하면, macOS는 현재 배경화면 이미지에서 색상을 가져와 창 배경 색상을 변경합니다. 그 결과로 나타나는 것을 desktop tinting이라고 부르며, 창이 주변 컨텐츠와 더 조화롭게 어우러지도록 돕는 섬세한 효과입니다.
역자 첨언
Include some transparency in custom component backgrounds when appropriate. Transparency lets your components pick up color from the window background when desktop tinting is active, creating a visual harmony that can persist even when the desktop picture changes. To help achieve this harmony, add transparency only to a custom component that has a visible background or bezel, and only when the component is in a neutral state, such as state that doesn’t use color. You don’t want to add transparency when the component is in a state that uses color, because doing so can cause the component’s color to fluctuate when the window background adjusts to a different location on the desktop or when the desktop picture changes.
필요한 경우 커스텀 구성 요소의 background에 투명성을 일부 포함합니다. 투명도를 사용하면 desktop tinting이 활성화된 경우, 현재 데스크탑 배경에서 구성 요소의 색상을 선택할 수 있어서 바탕화면 사진이 변경되어도 시각적인 조화를 유지할 수 있습니다. 이러한 조화를 이루려면 구성 요소가 시각적인 background나 베젤을 가지고 있는 경우나, 색상을 사용하지 않는 중립적인 상태일 때만 투명도를 추가해야 합니다. 창 배경이 데스크탑에서 다른 위치로 이동하거나 바탕화면 이미지가 변경될 때, 구성 요소의 색상이 변하는 것을 방지하기 위해서 구성 요소가 색을 사용하는 상태에서는 투명도를 추가하지 않도록 주의해야 합니다.
* 베젤 : 데스크탑이나 모바일 기기의 화면 주변에 위치한 테두리 부분
→ 커스텀 구성 요소에 투명도를 추가했을 때, 뒷 배경에 따라 색상이 변동될 수 있기 때문에 필요에 따라 투명도를 추가하는 것이 좋다
역자 첨언
Change Log
작성 날짜 | 작성자 | 수정사항 |
2023/04/18 | 린 | 초기 번역 |
2023/12/22 | 린 | 배포 |