[HIG] Foundations - Materials

https://developer.apple.com/design/human-interface-guidelines/foundations/materials

Materials - Foundations - Human Interface Guidelines - Design - Apple Developer

참고 - UIVisualEffect : https://zeddios.tistory.com/1140  

iOS ) UIVisualEffect (Blur, Vibrancy)

 

애플 플랫폼에서, material은 배경에 반투명성과 흐려짐 효과를 주며, 전경과 배경 레이어 사이에 시각적으로 분리된 감각을 줍니다.

material은 vibrancy(생동감)과 결합되어 인터페이스에 시각적인 관심을 더할 수 있습니다. Vibrancy 는 material의 최상위에 표시된 전경 내용에 적용됩니다(예를 들어 텍스트, 기호, 채우기 효과와 같은). 그리고 뒤에 깔린 material로부터 색깔을 앞으로 끌어오는 식으로 작동함으로써 깊이감을 향상시킵니다.

노트
vibrancy는 모든 앱과 게임에 영향을 줄 수 있습니다. (심지어 어떤 vibrant도 표시하지 않는 뷰에 대해서도 그렇습니다). 이는 어떤 구성요소는 기본적으로 vibrant하기 때문입니다. 예를 들어 macOS의 menu나 iOS의 label이 그러합니다.

모범 사례

시스템은 몇몇 material을 정의하고 있습니다. 각각은 특정 목적으로 사용하도록 의도되어졌으며, 라이트 모드와 다크 모드에 모두 자동적으로 적응됩니다. 이에 더해 시스템은 당신이 UI 구성요소에 적응할 수 있는 몇몇 흐림 처리와 vibrancy 효과를 제공해, material과 잘 통합되고 당신이 원하는 강조를 할 수 있게 도와줍니다. 시스템 지정 material과 효과를 사용하여 당신의 앱 또는 게임에 자연스러운 느낌을 주고, 사람들이 앱 사이를 전환할 때 부드러운 전환 효과를 줄 수 있습니다.

의미론적 의미와 추천되는 사용법에 기반해 시스템 material과 효과를 선택하십시오.

당신의 인터페이스에 전달하는 겉색상을 기준으로 material 또는 효과를 선택하지 마십시오. 시스템 설정이 그 외형과 동작을 바꿀 수 있기 때문입니다. 그 대신, 특정한 사용 예에 material 또는 스타일을 맞추십시오. 예를 들어, macOS앱의 메뉴에 대해 menu material을 사용하고, iOS앱의 주요 레이블에 대해 label vibrancy 스타일을 사용하고, tvOS앱의 적응적이고 전체 화면 배경에 대해 prominent material을 사용하십시오.

최상위 material에 대해서만 vibrant 색상을 사용함으로서 가독성을 보장하십시오.

시스템 정의 vibrant 색상을 사용할 때, 맥락에 따라 색상이 너무 어둡거나, 밝거나, 채도가 높거나, 대비가 낮아 보일까봐 걱정할 필요가 없습니다. 예를 들어, iOS는 Dynamic System Colors를 문자, 채우기, glyph, 구분선에 대해 정의해 두어 이 요소들이 반투명한 배경에서도 잘 보이도록 하고 있습니다. macOS는 모든 표준 시스템 색상이 vibrant 버전을 갖습니다. 가이드가 필요하다면 Color 를 참조하십시오.

풀 컬러 아이콘(색을 꽉 채운 아이콘) 대신 SF Symbols를 사용하는 것을 고려하십시오.

풀 컬러 이미지는 뷰의 배경과 효과적인 대비를 갖지 못할 수 있으며, 배경이 반투명할 때 동떨어진 느낌을 줄 수 있습니다. 반면 symbols와 인터페이스 아이콘은 동적 시스템 색상 및 vibrancy효과와 함께 동작해 어떤 맥락에서도 잘 보입니다. 가이드가 필요하다면 SF Symbols 를 참조하십시오.

흐림 또는 vibrancy효과와 결합할 material을 선택할 때, 대비와 시각적 분리를 고려하십시오.

예를 들어, 아래 사항을 고려하십시오:

• 두꺼운 material은 텍스트와 세부 기능이 있는 다른 요소에 대해 더 나은 대비를 제공합니다.
• 반투명함은 배경에 있는 컨텐츠에 대해 시각적인 알림을 제공함으로서 사람들이 자신의 맥락을 유지하도록 돕습니다.

시스템은 몇몇 material들을 제공해 당신이 컨텐츠에 대한 집중을 해치지 않으면서 깊이감과 계층 구조를 전달할 수 있도록 합니다. 매우 얇은 것부터 매우 두꺼운 것 까지, 어떤 material은 표시 모드에 적응하며 어떤 것은 항상 밝고 어떤 것은 항상 어둡습니다. 당신이 선택한 material과 관계없이, 최상위 요소에 대해 vibrant하지 않은 색상을 사용하는 것은 피해야 합니다.

개발자 가이드가 필요하다면, UIBlurEffect.Style 을 참조하십시오.

플랫폼 고려사항

watchOS에는 지원되지 않습니다.

iOS, iPadOS

iOS와 iPadOS는 레이블(label), 채우기(fill), 구분선(separator)에 대해 각 material에 작동하도록 특별히 디자인된 vibrancy 값을 정의합니다. 표준 시스템 색상은 vibrant 버전에 사용할 수 없습니다.

label과 fill은 각각 몇몇 수준의 vibrancy를 제공합니다; separator는 하나의 수준을 제공합니다. 수준의 이름은 요소와 배경 사이의 상대적 대비의 양을 나타냅니다. 기본 수준은 가장 높은 대비를 가지는 반면, 4번째의 수준은 (만약 존재한다면) 가장 낮은 대비를 갖습니다.

4번째 수준을 제외하고, 모든 material의 label에 대해 아래와 같은 vibrancy 값을 사용할 수 있습니다. 4번째 수준을 thin이나 ultra thin material에 사용하는 것은 추천하지 않습니다. 대비가 너무 낮기 때문입니다.

• label (기본)
• secondaryLabel
• tertiaryLabel
• quaternaryLabel

모든 material의 fill에 대해 아래와 같은 vibrancy 값을 사용할 수 있습니다.

• fill (기본)
• secondaryFill
• tertiaryFill

시스템은 separator에 대해 모든 material에 대해 잘 작동하는 하나의 기본 vibrancy 값을 제공합니다.

macOS

macOS는 모든 표준 색상에 대해 vibrant버전을 제공하며, 인터페이스에 적용된 반투명성, 흐림, vibrancy의 양을 정의하는 material을 제공합니다. 시스템은 몇몇 표준 material을 제공하며, 각각은 목적에 따라 디자인되어 있습니다. 예를 들어, 윈도우, 메뉴, 팝오버, 사이드바, 타이틀바(제목표시줄) 등의 기본 모습과 일치하도록 material을 선택할 수 있습니다. 개발자 가이드를 위해서는 NSVisualEffectView.Material를 참조하십시오.

(아래 내용은 생략합니다 - https://developer.apple.com/design/human-interface-guidelines/foundations/materials#:~:text=on all materials.-,macOS,-macOS provides vibrant 참조)