[Apple Developer] VisionOS 사용자 인터페이스 및 상호작용을 위한 디자인 - 웨비나

iOS에서 적용되는 디자인 원칙에 이어

VisionOS에서 적용되는 디자인 원칙에 대한 웨비나를 진행했다.

아직 VisionOS를 통해 앱을 개발해보진 않았지만 추후 개발 시 염두에 두어야 할 것들이 많이 있던 것 같다.

두서없이 정리했지만

기록을 위해 남겨둔다.

 

VisionOS 사용자 인터페이스 및 상호작용을 위한 디자인

공간 컴퓨팅에서의 디자인 원칙

- iOS와는 다른 경험을 제공해야한다.

- 핵심 키워드 ( 공간, 몰입, 현실적, 사람 중심 )

- 좋은 공간 컴퓨팅은 친숙하고 (Familiar), 사람 중심적이며 (Human - Centered), 차원을 가진 (Dimensional), 몰입형 (Immersive) 그리고 믿을만한 것(Authentic) 이어야 한다.

공간 사용자 인터페이스

UI Foundations

1. App icons

- 익숙한 경험을 제공해야 함

- 공간경험에 맞게 3D로 제작 (깊이감)

- Multi-layer를 사용

- 이렇게 업로드하면 자동으로 3D 처리를 도와준다.

- 반투명은 사용 금지

2. Materials

- 제약된 공간에서 사용해야 하기에 Glass Material 채용

- 무거워 보이지 않고, 자연스럽게 현실과 어울릴 수 있음

- 대비와 색상을 자동으로 조절해서 보여준다. 따라서, 다크모드와 라이트모드는 별도로 존재하지 않는다.

- 활용방법

1. 섹션을 구분하려면, 어두운 Material을 사용해라.

2. 버튼과 같이 상호작용이 필요하면 연한 Material을 사용해라 등등

3. Typography

- 가독성을 위해서 일부 폰트의 두께가 수정되었음 / 조금 더 무겁게

- 넓은 레이아웃에서 사용할 수 있는 Extra-Large 폰트도 제공

4. Vibrancy

- 시스템 전체의 가독성을 유지하기 위해 가장 중요한 것.

- 뒷 배경의 색상을 끌어와 사용하는 것을 말한다. 따라서 가능하면 시스템 백그라운드를 사용하기 (커스텀하지 않기)

- 타이틀은 Primary 나머지는 Secondary 사용하기

5. Colors

- 대부분의 색은 흰색을 사용해서 명확하게 보이게 하기

- 커스텀하지 말고, 시스템컬러를 사용하기 ( 이미 보정된 형태로 컬러를 제공하고, 동적으로 색이 미묘하게 변하게 되어있음 ) → 가독성이 좋아짐

레이아웃

1. 인체공학적

- 목의 가동 범위를 생각해 너무 높거나 낮은 곳이 아닌 가로로 넓게 배치하는 것이 베스트

- 만약, 큰 캠퍼스가 필요하다면 가로 비율이 더 길어야 한다.

- 목을 많이 사용하지 않도록 중요한 정보는 가운데로 배치

- iOS에서는 가장 중요한 기능은 첫 번째 탭의 좌측으로 가장 코스트가 높다. 하지만 VisionOS의 경우, 정 가운데가 가장 코스트가 높다.

2. 사이징

- 최소 60pt 이상의 터치영역을 주어야 한다.

- 버튼들 사이의 간격은 16pt 이상으로

- 만약, 아이콘이 더 작더라도 주변에 여유 공간이 있다면 즉, 60pt를 가져갈 수 있다면 상관없다.

3. 포커스 피드백

- iOS에서 VisionOS로 앱을 가져왔을 때, Hover Effect 가 없기 때문에 사용이 힘들다. 레이아웃을 구성할 때, 가장 중요한 부분.

- 두 아이템 간에 최소한 4pt 이상을 가져가기

- 카드 모양의 경우, 텍스트가 존재할 때 텍스트를 포함한 영역을 Hover Effect 대상으로 삼아야 함.

스크린에서 공간으로 ( iOS → VisionOS )

1. 윈도우

- 모든 디자인 요소는 흰색 바탕이었지만 Glass Material로 변경되었음.

2. 탭바

- 하단이 아닌 좌측으로 이동

- iOS에서는 5개, VisionOS에서는 6개를 넘지 않도록 하기

3. 사이드바

- 탭바에서 세부 영역이 있다면 사이드바 사용을 권장

4. 오너먼트

- 상단 → 하단 + 최 앞단으로 배치

- 오너먼트에서는 버튼임을 알려주는 백그라운드가 필요 없음.

- 만약 오너먼트의 위치를 옮기려고 한다면 최소한 20pt의 간격은 필요함

5. 메뉴, 팝오버, 시트

- 아이패드의 팝오버

- VisionOS에서는 iPadOS와는 다르게 버튼이 선택되었을 때, 흰색 배경을 가져간다. 따라서 버튼은 기본적으로 흰색 배경을 사용하지 않아야 한다.

- 모달을 여러 개 사용하는 것보다는 내비게이션으로 처리하는 것이 좋음

- 항상 왼쪽 상단에 닫기버튼을 제공할 것

공간 입력

Eyes

1. 편안한

- 정가운데가 가장 편안한 시야권이다. 메인 콘텐츠는 항상 가운데. 가장자리는 피곤함을 가져옴.

- 기본 시야 안에 배치하려고 노력하기

- 상호작용이 가능한 콘텐츠는 동일한 깊이로 유지하기

2. 사용하기 좋은

- 물체의 중앙을 보려고 하는 본능이 있기에 둥근 형태의 모양을 사용할 것

- 그림자 효과는 사용하지 않기

- 기호는 항상 가운데 배치 / 즉, 시선을 중앙으로 유도하기

- 동적 스케일을 사용하기 ( Fixed는 사용을 지양하기 ) / 2D에서는 동적 / 3D에서는 정적

3. 반응이 있는

- 호버 효과를 사용하여 피드백을 반드시 제공하기 / 컨트롤할 수 있다는 것을 알려줘야 하기 때문

4. 의도에 맞게

- 가령 버튼을 오래 보고 있다면 버튼의 기능을 설명하는 것

- 탭바의 경우에도 오래보고 있다면 확장하여 제공하기

- 즉, 눈의 의도를 활용하기

5. 정리

- 콘텐츠는 바라보는 사람 앞에 배치하기

- 시선을 사로잡는 요소 디자인하기

- 눈이 인식할 수 있는 타겟팅 영역을 유지하기

- 호버 효과를 사용하여 피드백주기

Hands

1. 손 제스처

- 엄지와 검지를 통해 클릭, 스크롤을 할 수 있고, 두 손을 이용해 핀치 제스처가 가능

- 혹은 윈도우를 가까이 가져와 제스처 가능

2. 직접 터치를 사용해야 하는 경우

- 직접 터치를 사용할 시 광범위한 피드백을 제공해야 한다.

- 키보드에서, 가까이 이동하면 호버효과를 제공 + 터치 시 사운드 이펙트

3. 익숙한 제스처 언어 사용

4. 직접 상호작용 경험이 적합한 곳에 사용

5. 상호작용 상태에 대한 명확한 피드백 표시

6. 한 가지가 아닌 여러 개면 더 좋음 ( 키보드의 호버효과와 터치 사운드처럼 )

•  

•  

•