💡 애플의 WWDC 2023 Design for spatial user interfaces 세션을 정리한 내용입니다.
> Design for spatial user interfaces <
01. UI Foundation
App icons
여러 레이어를 사용하세요.
모든 앱 아이콘에는 최대 3개의 레이어를 사용합니다. 각 레이어는 1024x1024픽셀로 구성합니다.
1개의 Background 레이어와 그 위에 최대 2개의 Foreground 레이어를 사용할 수 있습니다. (01) 두 Foreground 레이어는 모두 투명한 Bakcground를 가져야 합니다. 그래픽을 중앙에 유지하고, Foreground 레이어에 투명도를 사용하지 마세요. (02) 투명도가 낮은 레이어는 그림자와 겹쳐보여 사용성을 저해합니다.
Materials
Window에 단색을 사용하지 마세요.
단색 Window가 너무 많으면 답답하고 무겁게 느껴집니다. Glass는 조명에 동적으로 반응하여 대비와 색상 밸런스를 조정하여 낮에서 밤으로 전환되는 것처럼 자연스러움을 느끼도록 합니다.
Glass Window
Sidebar처럼 앱의 섹션을 구분하려면 더 어두운 재질을 사용합니다. 또는 버튼과 같이 인터랙티브한 요소에 주의를 끌기 위해 더 밝은 재질을 사용할 수도 있습니다. 또는 입력 필드와 같은 표준 구성 요소의 대비를 높이기 위해 더 어두운 재질을 사용하는 것도 고려할 수 있습니다.
텍스트는 기본적으로 White를 사용합니다. 버튼을 강조하고 싶다면 Glass 위에 배치하는 것이 좋습니다. (01) 또는 대비를 더 높이고 싶다면 그 뒤에 더 어두운 배경을 사용할 수 있습니다. (02) 가독성에 영향을 미치고 대비를 감소시키므로 밝은 소재를 겹처서 사용하지 않도록 합니다. (03)
Typography
Weight
기존 IOS에서 Body-Regular, Title-Semibold를 사용했다면 Vision OS에서는 Body-Medium, Title-Bold를 사용하여 선명하게 유지합니다. 창의 크기가 얼마든지 확장될 수 있기 때문에 작거나 가벼운 글꼴은 읽기 어려울 수 있습니다. 이를 개선하려면 글꼴의 무게를 늘리거나 시스템에 최적화된 서체를 사용하는 것이 좋습니다.
Vibrancy
생동감은 시스템 전체에서 가독성을 유지하는 데 가장 중요한 세부사항 중 하나입니다.
이는 Material 위에 표시되는 Foreground 콘텐츠를 밝게 하고 그 뒤에 있는 콘텐츠의 빛과 색상을 앞으로 끌어당기는 방식으로 작동합니다. Vision OS 플랫폼에서는 배경이 계속 변경될 수 있으므로 생동감이 실시간으로 업데이터되어 텍스트가 항상 가독성을 유지할 수 있습니다.
생동감을 사용하여 텍스트, 기호 및 채우기의 계층 구조를 표시합니다. Primary, Secondary, Tertiary의 세 가지 모드가 있습니다. 표준 텍스트에는 Primary를 사용하고, description, footnotes, and subtitles에는 Secondary를 사용합니다.
Colors
대부분의 경우 White 텍스트나 Symbol을 사용하여 명확하게 볼 수 있도록 하고, 색상을 사용해야 하는 경우에는 Background 레이어나 버튼 전체에 색상을 사용합니다. 가급적이면 시스템 색상을 사용하는 것이 좋습니다.
💡 UI Foundation 기억할 것
App icons
- 아이콘은 Background 레이어 1개와 Foreground 2개를 가진다.
- 각 레이어는 1024x1024px로 구성한다.
Material
- 단색 Windon 보다 Glass 재질로 유지하여 조명에 동적으로 반응하여 자연스러움을 더한다.
- 앱 내의 섹션을 구분할 때는 대비를 활용한다.
Typography
- 공간이 얼마든지 확장될 수 있기 때문에 기존 IOS보다 Font Weight를 한 단계 굵게 사용한다.
- 텍스트는 White나 Symbol를 활용하고, 색상을 사용하는 경우는 텍스트가 아닌 Background 레이어 또는 버튼 전체에 색상을 사용한다.
02. Layout
Ergonomics
Vision OS에서는 주로 눈과 손으로 상호작용하기 때문에 신체적 편안함과 안전은 우선시하는 경험을 만드는 것이 중요합니다. 그 어느 때보다 디자인의 인체공학적 측면을 고려하여 콘텐츠를 의도적으로 배치하고 눈이나 목의 피로를 유발하지 않도록 하는 것을 우선적으로 고려해야 합니다.
너무 높거나 낮은 곳에 콘텐츠를 배치하지 마세요.
대부분의 사람들은 고개를 상하로 움직이는 것보다 좌우로 움직이는 것이 더 쉽습니다.
큰 캔버스가 필요한 경우 세로보다는 가로로 넓게 사용하세요.
사람들이 콘텐츠를 편안하게 볼 수 있도록 중요한 정보를 항상 중앙에 배치해야 합니다.
Sizing
최소 60pt 이상으로 버튼을 만드세요.
인터랙티브한 요소는 최소 60pt의 공간이 있어야 쉽게 선택이 가능합니다.(01) 섹션 헤더와 같은 영역에 28pt인 미니 버튼을 사용할 때 버튼이 작아 보일 수 있지만 주변에 60pt의 공간이 있기 때문에 선택이 쉬워집니다. 또는 Large 버튼과 X-Large 버튼을 사용한다면 더 적은 간격을 사용하면 됩니다.
만약 스택에 여러개의 Medium 버튼이 있어야 한다면 버튼 사이에 최소 16pt의 간격이 있어야 하는 것입니다.(02)
Focus feedback
Focus feedback은 시스템 속 구성 요소를 볼 때 자동으로 미묘한 시각적 밝기 또는 호버링 효과를 보여줍니다.
Hover를 고려하세요.
Lockup을 디자인할 때 사람들의 초점에 맞춰 시스템에 Hover 효과가 표시합니다.
각각의 Lockup은 인터랙티브 요소입니다. 초점이 향할 때 밝아질 수 있도록 영역을 여유있게 구성해야 합니다. 이렇게 하면 전체 영역에서도 단일 요소라는 것을 이해하는데 도움이 됩니다. (01)
목록이나 메뉴를 만드는 경우 각 항목 사이에 약간의 여백을 두어 Hover 효과가 겹치지 않도록 해야 합니다. (4pt 권장) (02)
Radius
시스템 내의 모든 요소간의 Radius 관계는 동심원이여야 합니다.
Inner Radius 값 + Padding 값 = Outer Radius 값
💡 Layout 기억할 것
Ergonomics
- 디자인의 인체공학적 측면을 고려하여 콘텐츠를 의도적으로 배치하고 눈이나 목의 피로를 유발하지 않도록 하는 것을 우선적으로 고려한다.
- 너무 높거나 낮은 곳에 콘텐츠를 배치하지 않는다.
- 캔버스를 넓게 사용할 때는 세로보다 가로로 사용한다.
Sizing
- 인터랙티브 요소는 최소 60pt의 공간을 확보한다.
44pt(Icon Size) + 16pt(8pt*2 Padding)= 60ptFocus Feedback
- Hover 효과를 적극적으로 활용한다. 전체 영역에서도 단일 요소라는 것을 이해하는데 도움을 준다.
- 시스템 내의 모든 요소간의 Radius 관계는 동심원을 유지한다.
Inner Radius 값 + Padding 값 = Outer Radius 값
03. From screen to spatial
Window, Tab Bar, Side Bar
Window는 여러 요소를 배치할 수 있는 캔버스를 제공합니다. Glass 재질로 만들어졌으며 아래에 window Bar 가 위치합니다.
Tab Bar는 가벼운 느낌을 유지하기 위해 6개 이상의 항목으로 구성하지 않는 것이 좋습니다. 사용자의 시선이 Tab Bar를 향하여 항목을 빠르게 선택할 수 있고, 오래 보면 확장하면서 각 항목에 대한 레이블이 표시됩니다. 시선이 Tab Bar를 벗어나면 다시 줄어듭니다.
Side Bar는 앨범처럼 하위 탐색 기능을 제공해야 하는 경우 Tab Bar와 함께 Window에 표시됩니다. 이렇게 하면 사용자가 해당 Tab의 위치를 명확하게 파악할 수 있습니다.
Ornaments
Spatial 플랫폼에서는 화면 제약이 없기 때문에 해당 악세사리가 Window보다 약간 앞쪽 하단에 장식으로 배치합니다. 이렇게 하면 사용자가 깊이를 통해 계층 구조를 인식할 수 있습니다. Ornaments는 도구 모음을 표시하는데 용이합니다. 이것은 일반적으로 버튼 모음이며 자체 Container 위에 놓이기 때문에 테두리없는 버튼을 사용하기에 좋습니다. 이 경우 인터랙티브한 요소라는 것을 쉽게 알 수 있습니다.
음악 앱이 Ornaments의 훌륭한 예 입니다.
Ornaments가 Window 하단 가장자리와 20pt 겹치도록 배치하면 최대한 콘텐츠를 가리지 않으며 Window와 통합된 느낌을 줄 수 있습니다.
Menus, Popovers
이 플랫폼에서 Menu와 Popover는 창 밖으로 확장될 수 있습니다. 또한 흰색 배경에 검은색 레이블을 통해 버튼이 선택되었음을 표시합니다. 이렇게 하면 화살표 없이도 어떤 버튼의 Popover인지를 명확하게 알 수 있습니다.
이 플랫폼에서는 일반적으로 선택되지 않은 버튼은 흰색 배경을 사용하지 않는 것이 원칙입니다.
Sheets
이 플랫폼에서 Sheet는 Modal로 표시되며 앱의 중앙에 나타납니다. 이렇게 나타난 Modal은 기존 Window와 동일한 Z축을 나타나고 기존 Window는 뒤로 밀려나며 어두워집니다. 사용자는 Sheet를 닫기 전까지 밀려난 요소와는 상호 작용할 수 없습니다. Sheet 앞에 또 다른 Sheet를 띄워야 하는 경우 앞선 과정을 반복합니다.
항상 Close 및 Back 버튼은 Modal의 왼쪽 상단 모서리에 배치합니다.
💡 From screen to spatial 기억할 것
Window, Tab Bar, Side Bar
- Tab Bar는 6개 항목을 넘지 않도록 유의한다.
Orna
- Window보다 앞쪽 하단에 장신으로 배치한다.
- 대체로 버튼 모음에 사용되며 개별적인 Container이기 때문에 테두리 없이 버튼을 사용하기에 좋다.
Menus, Popovers
- 선택되지 않은 버튼은 흰색 배경을 사용하지 않는다.
Sheets
- Window가 Z축으로 밀려 나며 어두워지고 Modal 형태의 Sheet가 나타난다.
