On Apple platforms, a material imparts translucency and blurring to a background, creating a sense of visual separation between foreground and background layers.
Apple 플랫폼에서, 재료는 배경에 반투명도와 흐림 효과를 부여하여 전경 레이어와 배경 레이어 사이에 시각적으로 분리된 느낌을 줍니다.
→ 재료에 반투명도와 흐림 효과를 부여해 각 레이어 사이를 분리시킴
역자 첨언
Translucency can improve the integration of foreground and background elements, visually communicating a separation between layers and helping people retain a sense of place. To enhance translucency, materials can combine with vibrancy. Vibrancy amplifies the sense of depth for foreground content like text, symbols, and fills, by pulling color forward from behind the material.
반투명성은 전경과 배경 요소의 통합을 향상시키고, 레이어 간의 구분을 시각적으로 전달하며, 사람들이 장소 감각을 유지하는 데 도움을 줄 수 있습니다. 반투명성을 강화하기 위해, 재료는 활기효과와 결합될 수 있습니다. 활기는 재료 뒤에서 색상을 끌어내어 텍스트, 상징, 채우기와 같은 전경 콘텐츠의 깊이감을 증폭시킵니다.
→ 반투명성 재질 = 활기. 활기효과는 레이어 안에서 특정 색상을 눈에 띄게하여 깊이감을 주는 방식으로 시각적 흥미를 이끌 수 있음
역자 첨언
Note
Vibrancy can affect all apps and games — even ones that don’t display any vibrant views — because some components are vibrant by default, such as menus in macOS and labels in iOS.
"활기(Vibrancy)"는 모든 앱과 게임에 영향을 미칠 수 있습니다. — 활기효과의 뷰를 전혀 표시하지 않는 것들까지도 — 왜냐하면 일부 구성 요소들은 기본적으로 활기효과로 설정되어 있기 때문입니다, 예를 들어 macOS의 메뉴, visionOS의 윈도우, 그리고 iOS의 레이블과 같은 것들이 그렇습니다.
→ 각 OS에서 기본적으로 활기를 가지고 있는 몇 가지 구성요소가 있다.
역자 첨언
The system supplies several materials you can use to convey a sense of depth and hierarchical structure without distracting from content. Ranging from the mostly translucent ultraThin to the mostly opaque ultraThick, materials can automatically adapt to appearance modes. In addition, you can apply system-provided visual effects — such as blur, vibrancy, and blending modes — to help UI components integrate well with materials and achieve the prominence you want. Using system-defined materials and effects can give your app or game a consistent appearance, and create smooth transitions when people switch between apps.
시스템은 콘텐츠에 방해가 되지 않으면서 깊이와 계층 구조를 전달하는 데 사용할 수 있는 여러 재질을 제공합니다. 대부분 반투명한 ultraThin부터 대부분 불투명한 ultraThick까지, 이러한 재질들은 외관 모드에 자동으로 적응합니다. 또한, 시스템에서 제공하는 시각적 효과들 — 예를 들어 흐림, 활기효과, 혼합 모드 등 —을 사용하여 UI 구성 요소가 재료와 잘 통합되도록 도와주고, 원하는 주목도를 달성할 수 있습니다. 시스템에서 정의한 재료와 효과를 사용하면 앱이나 게임에 일관된 외관을 부여하고, 사람들이 앱 간 전환 시 부드러운 이행을 만들 수 있습니다
→ 시스템에서 제공하는 재료와 효과를 사용해서 native feel을 부여해서 사람들이 앱을 전환할 때 일관된 경험을 제공하도록 해라
역자 첨언
Choose system materials and effects based on semantic meaning and recommended usage. Avoid selecting a material or effect based on the apparent color it imparts to your interface, because system settings can change its appearance and behavior. Instead, match the material or vibrancy style to your specific use case. For example, you can use the label vibrancy style for primary labels in your iOS app, the menu material for a menu in your macOS app, and the thin material to highlight interactive components in your visionOS app.
→ UI 구성요소의 의미에 따라 특정 사용 사례에 맞게 재료나 스타일을 선택해서 적용해라
역자 첨언
Help ensure legibility by using vibrant colors on top of materials. When you use system-defined vibrant colors, you don’t need to worry about colors seeming too dark, bright, saturated, or low contrast in different contexts. For example, iOS defines Dynamic System Colors for text, fills, symbols, and separators, making these items look great on translucent backgrounds. In macOS, all standard system colors have vibrant versions. In visionOS, the system uses the same dark vibrant colors that macOS uses, automatically adapting them to maintain contrast in different visual contexts. For guidance, see Color.
재료 위에는 활기를 가진 색상을 사용함으로써 가독성을 보장하는 데에 도움을 주세요. 시스템에서 정의한 활기 색상을 사용할 때, 다양한 상황에서 색상이 너무 어둡거나, 밝거나, 채도가 높거나, 대비가 낮아 보일 걱정을 할 필요가 없습니다. 예를 들어, iOS는 텍스트, 채우기, 상징, 구분자를 위한 동적 시스템 색상을 정의하여, 이러한 항목들이 반투명 배경에서 멋지게 보이게 합니다. macOS에서는 모든 표준 시스템 색상에 활기효과 버전이 있습니다. visionOS에서는 시스템이 macOS와 같은 어두운 활기 색상을 사용하며, 다양한 시각적 상황에서 대비를 유지하기 위해 자동으로 적응합니다. 지침을 보려면 색상을 참조하세요.
→ 재료 위에는 활기를 가진 색상을 적용하여 가독성을 보장해라
역자 첨언
Consider contrast and visual separation when choosing a material to combine with blur and vibrancy effects. For example, consider that:
흐림(blur) 및 활기(vibrancy) 효과와 결합할 재료를 선택할 때 대비와 시각적인 분리를 고려해야 합니다. 예를 들어, 다음 사항을 고려해 보세요 :
•
Thicker materials can provide better contrast for text and other elements with fine features
•
두꺼운 재료는 텍스트 및 세부 기능이 있는 다른 요소와의 대비를 향상시킬 수 있습니다.
•
Translucency can help people retain their context by providing a visible reminder of the content that’s in the background
•
투명도는 배경에 있는 내용을 시각적으로 상기시켜 사용자가 맥락을 유지할 수 있도록 도와줄 수 있습니다.
역자 첨언
Regardless of the material you choose, you want to avoid using nonvibrant colors on top of it.
선택한 재료에 관계없이, 그 위에 활기 없는 색상을 사용하는 것은 피해야 합니다.
Although the standard system colors aren’t available in vibrant versions, iOS and iPadOS define vibrant colors for labels, fills, and separators that are specifically designed to work with each material.
표준 시스템 색상은 활기 버전으로 제공되지 않지만, iOS와 iPadOS는 레이블, 채우기, 구분자를 위해 각 재료와 잘 어울리도록 특별히 설계된 활기 색상을 정의합니다.
역자 첨언
Labels and fills each provide several levels of vibrancy; separators have one level. The names of the levels indicate the relative amount of contrast between an element and the background: The default level has the highest contrast, whereas quaternary (when it exists) has the lowest contrast.
레이블과 채우기는 각각 여러 수준의 활기를 제공하며, 구분선은 하나의 수준을 가지고 있습니다. 수준의 이름은 요소와 배경 간의 대비 상대량을 나타냅니다: 기본 수준은 가장 높은 대비를 가지고 있으며, 사사(quaternary) 수준(있을 경우)은 가장 낮은 대비를 가지고 있습니다.
→ 레이블과 채우기는 각각 여러 수준의 활기를 제공하며, 구분선은 하나의 수준을 가지고 있다
역자 첨언
쿼터너리(quaternary)를 제외하고, 어떤 재료에도 다음과 같은 활기찬 값을 레이블에 사용할 수 있습니다. 일반적으로, 쿼터너리는 얇은(thin)과 매우 얇은(ultraThin) 재료 위에 사용하지 마세요, 왜냐하면 대비가 너무 낮기 때문입니다.
•
UIVibrancyEffectStyle.label (default)
You can use the following vibrancy values for fills on all materials.
다음과 같은 채우기(fill)에 대해 다음 활기 값을 모든 재료에 사용할 수 있습니다.
•
UIVibrancyEffectStyle.fill (default)
The system provides a single, default vibrancy value for a separator, which works well on all materials.
시스템은 모든 재료에 대해 잘 작동하는 단일 기본 활기 값을 제공합니다.
macOS provides materials that define the amounts of translucency, blurring, and vibrancy applied to your interface. In addition, macOS provides several standard materials, each with a designated purpose, and vibrant versions of all standard colors. For example, you can choose a material to match the default look of a window, menu, popover, sidebar, title bar, and more. For developer guidance, see NSVisualEffectView.Material.
macOS는 인터페이스에 적용되는 반투명도, 흐림 효과, 및 활기 효과의 양을 정의하는 재료를 제공합니다. 또한, macOS는 각각 특정 목적을 가진 여러 표준 재료와 모든 표준 색상의 활기 버전을 제공합니다. 예를 들어, 창, 메뉴, 팝오버, 사이드바, 타이틀 바 등의 기본 모습과 일치하는 재료를 선택할 수 있습니다. 개발자 지침은 NSVisualEffectView.Material에서 확인하세요.
→ macOS에서는 모든 표준 색상에 활기 버전을 제공하며, 투명도, 흐림 및 활기 정도를 정의하는 재료를 제공하므로 그것들을 목적에 맞게 써라
Light appearance
Dark appearance
Choose when to allow vibrancy in custom views and controls. Depending on configuration and system settings, system views and controls use vibrancy to make foreground content stand out against any background. Test your interface in a variety of contexts to discover when vibrancy enhances the appearance and improves communication.
사용자 정의 뷰와 컨트롤에서 vibrancy를 허용할 때를 선택하는 것이 중요합니다. 구성 및 시스템 설정에 따라 시스템 뷰와 컨트롤은 vibrancy를 사용하여 전경 콘텐츠가 어떤 배경에도 돋보이게 만듭니다. vibrancy가 외관을 개선하고 커뮤니케이션을 향상시키는지 알아보기 위해 다양한 상황에서 인터페이스를 테스트하는 것이 좋습니다.
→ 사용자 정의 뷰와 컨트롤에서 vibrancy를 허용할 때를 잘 선택하고, 인터페이스를 다양한 상황에서 테스트함으로써 vibrancy가 좋은 영향을 끼치는지 확인해라
Choose a background blending mode that complements your interface design. macOS defines two modes that blend background content: behind window and within window. For developer guidance, see NSVisualEffectBlendingMode.
인터페이스 디자인과 조화를 이루는 배경 혼합 모드를 선택하세요. macOS는 배경 콘텐츠를 혼합하는 두 가지 모드를 정의합니다: 창 뒤와 창 내부. 개발자 가이드는 NSVisualEffectBlendingMode를 참조하세요.
Behind-window blending. In this mode, the content behind a window shows through, helping people retain some of the context that surrounds your app or game. Components such as menus, sheets, and sidebars automatically use this mode.
Behind-window blending 모드. 이 모드에서는 창 뒤의 콘텐츠가 투과되어 앱 또는 게임 주변의 일부 맥락을 유지하는 데 도움이 됩니다. 메뉴, 시트, 사이드바와 같은 구성 요소들은 자동으로 이 모드를 사용합니다.
In-window blending. This mode lets window content show through other window components. For example, a toolbar can use this mode to give people a sense of continuity as window content scrolls under it.
In-window blending 모드. 이 모드는 창 콘텐츠가 다른 창 구성 요소를 통해 표시되도록 합니다. 예를 들어, 툴바는 창 콘텐츠가 그 아래로 스크롤될 때 사용자에게 일관성을 느끼게 할 수 있도록 이 모드를 사용할 수 있습니다.
Use thinner, translucent materials to elevate content and make it feel fresh. Thicker materials tend to hide shadows, reducing depth and making it harder to distinguish content clearly. You might consider using thicker materials if you want to evoke a heavier feeling or suggest that the content is older.
보다 얇고 반투명한 재질을 사용하여 콘텐츠를 부각시키고 신선하게 느끼게 하세요. 더 두꺼운 재질은 그림자를 숨겨 깊이를 줄이고 콘텐츠를 명확하게 구분하기 어렵게 만듭니다. 콘텐츠에 더 무거운 느낌을 주거나 오래된 것처럼 보이게 하고 싶다면 더 두꺼운 재질을 사용하는 것을 고려해볼 수 있습니다.
→ 콘텐츠를 돋보이게 하고 신선한 느낌을 주고싶다면 더 가벼운 투명 재료를 사용한다.
For example, consider using system materials in the following ways:
예를 들어, 다음과 같은 방식으로 시스템 재료를 사용하는 것을 고려해 볼 수 있습니다:
Material | Recommended for |
Full-screen views that require a light color scheme | |
Overlay views that partially obscure onscreen content and require a light color scheme | |
Overlay views that partially obscure onscreen content | |
Overlay views that partially obscure onscreen content and require a dark color scheme | |
Full-screen views that require a dark color scheme |
In visionOS, windows generally use an unmodifiable system-defined material called glass that helps people stay grounded by letting light, the current Environment, virtual content, and objects in people’s surroundings show through. Glass is an adaptive material that limits the range of background color information so a window can continue to provide contrast for app content while becoming brighter or darker depending on people’s physical surroundings and other virtual content.
visionOS에서는 창이 일반적으로 '유리'라고 불리는 수정 불가능한 시스템 정의 재질을 사용합니다. 이 재질은 빛, 현재 환경, 가상 콘텐츠, 그리고 사람들 주변의 객체가 비치도록 함으로써 사람들이 현실감을 유지하도록 돕습니다. 유리는 적응형 재료로, 배경색 정보의 범위를 제한하여 창이 앱 콘텐츠에 대한 대비를 계속 제공할 수 있도록 하면서, 사람들의 실제 주변 환경과 다른 가상 콘텐츠에 따라 밝아지거나 어두워지도록 합니다.
Note
visionOS doesn’t have a distinct Dark Mode setting. Instead, glass automatically adapts to the luminance of the objects and colors behind it.
visionOS에는 별도의 다크 모드 설정이 없습니다. 대신, '유리'는 그 뒤에 있는 객체와 색상의 밝기에 자동으로 적응합니다.
Avoid using opaque colors in a window. Areas of opacity can block people’s view, making them feel constricted and reducing their awareness of the virtual and physical objects around them.
창에서 불투명한 색상 사용을 피하세요. 불투명한 영역은 사람들의 시야를 가릴 수 있어, 제한된 느낌을 주고 주변의 가상 및 물리적 객체에 대한 인식을 감소시킬 수 있습니다.
If necessary, choose materials that help you create visual separations or indicate interactivity in your app. If you need to create a custom component, you may need to specify a system material for it. Use the following examples for guidance.
필요한 경우, 앱에서 시각적 구분을 만들거나 상호작용을 나타내는 데 도움이 되는 재질을 선택하세요. 사용자 정의 구성 요소를 만들어야 할 경우, 해당 구성 요소에 시스템 재료를 지정해야 할 수 있습니다. 다음 예시들을 참고하세요.
•
•
thin 재료는 버튼이나 선택된 항목과 같은 상호 작용 요소에 주의를 끕니다.
•
The regular material can help you visually separate sections of your app, like a sidebar or a grouped table view.
•
regular 재료는 사이드바나 그룹화된 테이블 뷰와 같은 앱의 섹션을 시각적으로 분리하는 데 도움을 줄 수 있습니다.
•
The thick material can give a component like a text field a recessed appearance that shows it’s an area that can accept text entry.
•
thick 재료는 텍스트 필드와 같은 구성 요소에 오목한 모습을 주어 텍스트 입력을 받을 수 있는 영역임을 나타냅니다.
To ensure foreground content remains legible when it displays on top of a material, visionOS applies vibrancy to text, symbols, and fills. Vibrancy enhances the sense of depth by pulling light and color forward from both virtual and physical surroundings.
재료 위에 표시되는 전경 콘텐츠가 가독성을 유지하도록 하기 위해, visionOS는 텍스트, 상징, 채우기에 활기를 적용합니다. 활기는 가상 및 물리적 주변 환경에서 빛과 색상을 앞으로 당겨 깊이감을 증폭시킵니다.
visionOS defines three vibrancy values that help you communicate a hierarchy of text, symbols, and fills.
visionOS는 텍스트, 상징, 채우기의 계층 구조를 전달하는 데 도움이 되는 세 가지 활기 값들을 정의합니다.
•
•
•
•
•
Use UIVibrancyEffectStyle.tertiaryLabel for inactive elements, and only when text doesn’t need high legibility.
•
Use materials to provide context in a full-screen modal view. Because full-screen modal views are common in watchOS, the contrast provided by material layers can help orient people in your app and distinguish controls and system elements from other content. Avoid removing or replacing material backgrounds for modal sheets when they’re provided by default.
전체 화면 모달 뷰에서 맥락을 제공하기 위해 재질을 사용하세요. watchOS에서 전체 화면 모달 뷰가 일반적이기 때문에, 재료 레이어가 제공하는 대비는 앱 사용자들이 방향을 잡는 데 도움을 주고 컨트롤 및 시스템 요소를 다른 콘텐츠와 구별하는 데 유용합니다. 기본적으로 제공되는 모달 시트의 재료 배경을 제거하거나 대체하는 것은 피하세요.
Change Log
작성 날짜 | 작성자 | 수정사항 |
2023/05/30 | 예나 | 초기 번역 |
2023/12/17 | 예나 | 2차 수정 |
2023/12/22 | 예나 | 배포 |