[HIG] Materials
시각적 분리감을 주는 머터리얼(Material)
본 문서는 Apple의 Human Interface Guideline(이하 HIG) 문서를 한글로 번역한 것입니다. iOS 생태계 내에서 HIG를 읽으시는 분들이 번역본이 없어 불편함을 겪는 것을 알게 되었고, 이에 한글로 번역을 하게 되었습니다. iOS 커뮤니티 Async Swift에서 자율적으로 모인 9명이 함께 번역했으며, 일체의 상업적인 목적을 띄지 않습니다. 이 문서를 학습에 적극적으로 이용해 주시돼, 상업적인 용도로 이용하시는 것은 지양해 주시기 바랍니다. 감사합니다.
Introduction
Apple의 플랫폼에서 머터리얼(Material)은 배경에 반투명도와 흐림 효과를 부여하여 전경과 배경 레이어 사이에 시각적인 분리감을 만듭니다.
머터리얼(Material)은 인터페이스에 시각적 흥미를 더하기 위해 생동감(Vibrancy)과 함께 사용될 수 있습니다. 생동감(Vibrancy)은 텍스트, 심벌, 그리고 채우기 색 등 전경 위에 표시되는 콘텐츠에 적용되며, 머터리얼(Material) 뒤에서 색상을 앞으로 끌어와 심도감을 높입니다.
NOTE : 생동감(Vibrancy)은 macOS의 메뉴 및 iOS의 레이블 등 몇몇 컴포넌트에 기본으로 적용되어 있기 때문에 생동감을 적용한 화면을 표시하지 않더라도 모든 앱과 게임에 영향을 줄 수 있습니다.
역자설명 : 생동감 효과 즉 Vibrancy Effect는 아래 예시와 같이 반투명한 Material Effect에 텍스트, 심벌 그리고 색상이 사용될 때 보다 잘 어울릴 수 있게 애플이 제공하는 효과입니다.
Best Practices
시스템은 라이트 모드와 다크 모드에 모두 기본으로 적용되는 특정한 용도로 쓰이는 몇 가지 머터리얼(Material)을 정의합니다. 또한 UI 컴포넌트에 적용할 수 있는 몇 가지 흐림(blur) 및 생동감(Vibrancy) 효과를 제공해 컴포넌트가 머터리얼(Material)과 잘 통합되고 돋보일 수 있게 도와줍니다. 시스템 정의 머터리얼(Material)과 효과를 사용하면 앱이나 게임에 자연스러움을 줄 수 있으며, 사람들이 앱 간 전환을 할 때 부드러운 전환 효과를 만들 수 있습니다.
의미와 권장 용도에 따라 시스템 머터리얼과 효과를 선택하세요. 시스템 설정에 따라 앱의 형태와 동작이 변경될 수 있으므로 인터페이스 색상을 기반으로 머터리얼(Material) 또는 효과를 사용하지 않는 것이 좋습니다. 대신 특정 사용 사례에 맞는 머터리얼(Material)이나 스타일을 선택하세요. 예를 들어, macOS앱의 메뉴에서 menu 머터리얼(Material)을 사용하고, iOS앱의 레이블에서 label 생동감(Vibrancy) 스타일을 사용하고, tvOS앱의 적응형 전체 화면 배경에서 prominent 머터리얼(Material)을 사용 것이 좋습니다.
머터리얼(Material) 위에 선명한 색상만을 사용해 읽기 쉽게 하세요. 시스템 정의된 선명한 색상을 사용할 때 사용 맥락에서 너무 어둡거나 밝게 보이고, 채도가 높거나 대비가 낮아 보이는 것에 대해 걱정할 필요는 없습니다. 예를 들어 iOS는 텍스트, 채우기, 글리프 및 구분선에 대해 동적인 시스템 색상을 정의해 이러한 항목을 반투명 배경에서 멋지게 보이게 합니다. macOS에서 모든 표준 시스템 색상에는 적절한 버전이 있습니다. 가이드라인은 Color를 참고하세요.
풀컬러 아이콘이 아닌 SF 기호를 사용하는 것이 좋습니다. 풀컬러 이미지는 뷰의 배경과 충분한 대비가 되지 않아 배경이 반투명하면 자연스럽지 않을 수 있습니다. 기호 및 인터페이스 아이콘은 동적 시스템 색상(Dynamic System Color) 및 생동감(Vibrancy) 효과와 함께 작동하며 모든 맥락에 적절히 적용됩니다. 가이드라인은 SF Symbols를 참고하세요.
흐림(Blur) 및 생동감(Vibrancy) 효과와 함께 사용될 머터리얼(Material)을 선택할 때는 대비와 시각적 분리를 고려하세요. 예를 들면 다음과 같습니다.
더 흐린(Thicker) 머터리얼(Material)은 텍스트 및 작은 기능이 있는 기타 요소에 대해 더 나은 대비를 제공할 수 있습니다.
반투명성을 통해 백그라운드에 있는 콘텐츠를 시각적으로 확인할 수 있으므로 콘텍스트를 유지할 수 있습니다.
시스템은 콘텐츠를 방해하지 않고 깊이(depth)와 계층적 구조를 전달하기 위해 사용할 수 있는 몇 가지 머터리얼(Material)을 제공합니다. 가장 선명한(Ultra Thin) 것부터 가장 흐린(Ultra thick) 것까지, 몇 개의 머터리얼은 화면 모드에 대해 적응형이고 일부 머터리얼(Material)은 항상 밝거나 어둡습니다. 선택한 머터리얼에 관계없이 그 위에 생동감(Vibrancy)이 없는(Non-Vibrant) 색상을 사용하는 것은 피해야 합니다. 개발자 가이드라인은 UIBlurEffect.Style를 참고하세요.
역자설명 : 하단의 예시가 Apple이 제공하는 깊이감을 느끼는 머터리얼(Material) 효과들입니다.
Platform considerations
Not supported in watchOS.
iOS, iPadOS
iOS 및 iPadOS는 각 머터리얼(Material)과 함께 작동하도록 특별히 설계된 레이블, 채우기 및 구분선에 대한 생동감(Vibrancy) 값을 정의합니다. 표준 시스템 색은 생동감(Vibrancy) 효과를 사용할 수 없습니다.
레이블과 채우기 색은 각각 여러 수준의 생동감(Vibrancy) 효과를 제공합니다. 구분선에는 하나의 수준이 있습니다. 수준의 이름은 요소와 배경 간의 상대적인 대비 정도를 나타냅니다. 기본(Default)은 가장 높은 대비를 갖는 반면 4 수준(Quaternary)은 가장 낮은 대비를 갖습니다.
4 수준(Quaternary)을 제외하고 모든 머터리얼의 레이블에 다음과 같은 생동감(Vibrancy) 값을 사용할 수 있습니다. 대비가 너무 낮은 4 수준(Quaternary)을 가장 선명한(Ultra thin) 머터리얼(Material) 효과 위에 사용하지 않는 것이 좋습니다.
label(기본)
모든 머터리얼(Material)에 다음과 같은 생동감(Vibrancy) 값을 사용할 수 있습니다.
fill(기본)
시스템은 대비의 구분에 대해 모든 머터리얼(Material)에서 잘 적용되는 하나의 기본 생동감(Vibrancy) 값을 제공합니다.
macOS
macOS는 모든 표준 색상에 대한 생동감(Vibrancy) 효과를 제공하며 인터페이스에 사용되는 투명도, 흐림 및 생동감(Vibrancy) 효과의 정도를 정의하는 머터리얼(Material)을 제공합니다. 시스템은 각각 지정된 용도를 가진 몇 가지 표준 머터리얼(material)을 제공합니다. 예를 들어 창, 메뉴, 팝오버, 사이드바, 제목 표시줄 등의 기본 모양과 어울리는 머터리얼(Material)을 선택할 수 있습니다. 개발자 가이드라인은 NSVisualEffectView.Material를 참고하세요.
사용자 지정 뷰 및 컨트롤에서 생동감(Vibrancy) 효과를 사용할 때를 선택하세요. 구성 및 시스템 설정에 따라 시스템 뷰 및 컨트롤은 생동감(Vibrancy) 효과를 사용하여 전경 콘텐츠를 어떤 배경에서도 돋보이게 만듭니다. 다양한 상황에서 인터페이스를 테스트하여 생동감(Vibrant) 효과가 사용자와의 상호작용을 향상하는 경우를 찾는 것이 좋습니다.
인터페이스 디자인을 보완하는 배경 혼합 모드를 선택하세요. macOS는 배경 콘텐츠를 혼합하는 두 가지 모드(창 뒤 및 창 내)를 제공합니다. 개발자 가이드라인은 NSVisualEffectBlendingMode를 참고하세요.
(좌) 창 뒤 블렌딩, (우) 창 내 블렌딩창 뒤 블렌딩.(Behind-window blending) 이 모드에서는 창 뒤에 있는 콘텐츠가 표시되어 사람들이 앱 또는 게임에서 콘텍스트를 유지하도록 돕습니다. 메뉴, 시트, 사이드바와 같은 구성 요소는 이 모드를 자동으로 사용합니다.
창 내 블렌딩.(In-window blending) 이 모드를 사용하면 창 콘텐츠가 또 다른 다른 창 구성 요소를 통해 표시됩니다. 예를 들어 툴바는 이 모드를 사용해 창 콘텐츠가 툴바 아래에서 스크롤될 때 사람들에게 연속성을 제공할 수 있습니다.
tvOS
더 선명하고 반투명한 머터리얼(Material)을 선택해 콘텐츠를 강조하고 사용자들이 선명함을 느낄 수 있도록 하세요. 어두운 머터리얼(Material)은 그림자 효과를 숨기는 경향이 있어 깊이감을 줄이고 내용을 명확하게 알아보기 어렵게 만듭니다. 더 무거운 느낌을 주기 위해서 어두운 머터리얼(Material)을 사용하는 것을 고려할 수 있습니다.
예를 들어, 다음과 같은 방법으로 시스템 머터리얼(Material)을 사용하는 것을 고려해 보세요.
Resources
Related
Developer documentation
Videos
What's New in iOS Design WWDC 2019
