Dark Mode - 번역
Dark Mode
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에서 사람들은 자주 다크 모드를 기본 인터페이스 스타일로 선택하며, 모든 앱과 게임이 자신의 선호도를 존중하기를 기대합니다. 다크 모드에서는 시스템이 모든 화면, 뷰, 메뉴, 컨트롤에 어두운 색상 팔레트를 사용하며, 어두운 배경에 대해 전경 콘텐츠를 돋보이게 하기 위해 더 큰 지각적 대비를 사용할 수도 있습니다.
Best practices
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 supports immersive media viewing to use a permanently dark appearance that lets the UI recede and helps people focus on the media.
드문 경우에, 인터페이스에서 다크 외관만 사용하는 것을 고려하세요. 예를 들어, 몰입형 미디어 시청을 지원하는 앱이 UI를 뒤로 물리게 하고 사람들이 미디어에 집중할 수 있도록 영구적으로 어두운 외관을 사용하는 것은 타당할 수 있습니다.
Dark Mode colors
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 Specifications.
다크 모드의 색상 팔레트에는 어두운 배경색과 밝은 전경색이 포함됩니다. 이러한 색상이 반드시 밝은 카운터파트의 반전은 아니라는 것을 인식하는 것이 중요합니다: 많은 색상이 반전되지만 일부는 그렇지 않습니다. 더 많은 정보는 사양을 참조하세요.
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.
현재 외관에 적응하는 색상을 받아들입니다. 의미론적 색상(예: macOS의 labelColor 및 controlColor 또는 iOS 및 iPadOS의 separator)은 현재 외관에 자동으로 적응합니다. 사용자 정의 색상이 필요한 경우 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.
모든 외관에서 충분한 색상 대비를 목표로 합니다. 시스템 정의 색상을 사용하면 전경과 배경 콘텐츠 사이에 좋은 대비 비율을 달성할 수 있습니다. 최소한, 색상 간 대비 비율이 4.5:1보다 낮지 않도록 하세요. 사용자 정의 전경 및 배경 색상의 경우, 특히 작은 텍스트에서는 대비 비율이 7: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.
흰색 배경의 색상을 부드럽게 합니다. 흰색 배경을 포함하는 콘텐츠 이미지를 표시하는 경우, 주변 다크 모드 컨텍스트에서 배경이 빛나는 것을 방지하기 위해 이미지를 약간 어둡게 하는 것을 고려합니다.
Icons and images
The system uses SF Symbols (which automatically adapt to Dark Mode) and full-color images that are optimized for both light and dark appearances.
시스템은 다크 모드에 자동으로 적응하는 SF 심볼과 밝고 어두운 외관 모두에 최적화된 전체 색상 이미지를 사용합니다.
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 심볼을 사용하세요. 심볼은 동적 색상으로 채색하거나 활기를 더할 때 양쪽 외관 모드에서 잘 작동합니다. 지침은 색상을 참조하세요.
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.
풀컬러 이미지와 아이콘이 두 가지 모습 모두에서 잘 보이는지 확인합니다. 밝은 모드와 어두운 모드에서 모두 잘 보이는 경우 동일한 자산을 사용합니다. 에셋이 한 가지 모드에서만 잘 보이는 경우 에셋을 수정하거나 별도의 밝은 에셋과 어두운 에셋을 만듭니다. 에셋 카탈로그를 사용하여 에셋을 하나의 명명된 이미지로 결합합니다.
Text
The system uses vibrancy and increased contrast to maintain the legibility 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.
라벨에 대해서는 시스템에서 제공하는 라벨 색상을 사용하세요. 주요, 보조, 삼차, 사차 라벨 색상은 밝고 어두운 외관에 자동으로 적응합니다.
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.
텍스트 필드와 텍스트 뷰를 그리기 위해 시스템 뷰를 사용하세요. 시스템 뷰와 컨트롤은 앱의 텍스트가 모든 배경에서 좋아 보이도록 자동으로 조정합니다. 가능하다면 직접 텍스트를 그리는 대신 시스템에서 제공하는 뷰를 사용하여 텍스트를 표시하세요.
Platform considerations
No additional considerations for tvOS. Dark Mode isn’t supported in visionOS or watchOS.
tvOS는 추가 고려 사항이 없습니다. Dark Mode는 visionOS나 watchOS에서 지원되지 않습니다.
iOS, iPadOS
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.
다크 모드에서 시스템은 두 가지 배경 색상 세트를 사용합니다. 하나는 베이스이고 다른 하나는 상승된 색상입니다. 이는 어두운 인터페이스가 다른 위에 쌓일 때 깊이 인식을 향상시키기 위함입니다. 베이스 색상은 더 어둡게 하여 배경 인터페이스가 후퇴하는 것처럼 보이게 하고, 상승된 색상은 더 밝게 하여 전경 인터페이스가 전진하는 것처럼 보입니다.
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.
시스템 배경 색상을 선호하세요. 다크 모드는 동적이므로, 인터페이스가 전경에 있을 때 (예: 팝오버나 모달 시트) 배경 색상이 자동으로 베이스에서 상승된 색상으로 변경됩니다. 시스템은 또한 멀티태스킹 환경에서 앱 간의 시각적 분리와 다중 창 컨텍스트에서 창 간의 분리를 제공하기 위해 상승된 배경 색상을 사용합니다. 커스텀 배경 색상을 사용하면 이러한 시스템 제공 시각적 구분을 인식하기 어려워질 수 있습니다.
macOS
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.
사용자가 일반 설정에서 그라파이트 강조 색상을 선택하면, macOS는 창 배경이 현재 데스크탑 이미지의 색상을 반영하도록 합니다. 이러한 결과는 데스크탑 틴팅이라고 불리며, 창이 주변 콘텐츠와 더 조화롭게 혼합되도록 하는 미묘한 효과를 낳습니다.
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.
적절한 경우 맞춤 구성 요소 배경에 일부 투명도를 포함시키세요. 투명도는 데스크탑 틴팅이 활성화될 때 구성 요소가 창 배경의 색상을 흡수하게 하여, 데스크탑 이미지가 변경되더라도 시각적 조화를 유지할 수 있도록 합니다. 이러한 조화를 달성하기 위해, 구성 요소가 중립 상태일 때 (예: 색상을 사용하지 않는 상태) 배경이나 베젤이 보이는 맞춤 구성 요소에만 투명도를 추가하세요. 구성 요소가 색상을 사용하는 상태일 때 투명도를 추가하는 것은 피하세요. 이렇게 하면 창 배경이 데스크탑의 다른 위치로 조정되거나 데스크탑 이미지가 변경될 때 구성 요소의 색상이 변동될 수 있습니다.