[WWDC23] Design for spatial input

Published in

daily-monster

11 min readFeb 18, 2024

안녕하세요 일욜 괴물 소깡입니다 ~ 오늘은 비전 프로 개발할 때 참고하면 좋을 내용을 정리해 보았습니다 !!

오늘 내용은 WWDC23의 “Design for spatial input” 영상을 보고 정리하였습니다. 잘못된 내용이나 질문이 있으시다면 댓글로 알려주세요 :)

눈과 손을 위한 훌륭한 상호작용을 디자인하는 방법을 배우겠습니다. 공간 입력을 위한 디자인 원칙을 공유하고, 입력 방법 주변의 좋은 사례를 탐색하며, 편안하고 직관적이며 만족스러운 공간 경험을 만들 수 있는 방법을 알아보겠습니다.

Vision Pro를 통해 상호작용할 수 있는 방법은 무엇이 있을까요?

무릎 위에 손을 올려두고 편안하게 버튼을 바라보면서 손가락을 탭 하여 선택할 수 있고
가상 키보드와 같이 요소와 직접 상호작용할 수도 있습니다. (이렇게 공중에 손을 올려두고 인터랙션을 하는 것은 불편할 수 있지만 몇가지 케이스의 경우에는 이렇게 요소와 직접적으로 상호작용 하는 것이 더 적합합니다.)

눈과 손은 새로운 공간 입력 방식이지만 익숙한 다른 입력 방식을 사용할 수 있습니다.

목소리
키보드, 트랙패드
게임 컨트롤러

눈과 손을 이용한 상호 작용은 몇 가지 측면에서 특수합니다.

Spatial input is personal : 기기 내/외부에 있는 카메라가 개인정보를 보호하면서 상호작용을 도와줍니다.
Spatial input is comfortable : 손을 편하게 내려놓고 상호작용할 수 있습니다. (손은 내려둔채로 눈을 이용하여 더 넓은 영역을 볼 수 있습니다.)
Spatial input is precise : 공간 상호 작용이 정확해집니다.

Eyes

Eyes are the primary targeting mechanism for spatial experiences. (시스템의모든 인터페이스가 바라보는 곳에 반응합니다.)

Comfortable

Place content inside the field of view

눈에 편안한 앱을 빌드하기 위해서는 콘텐츠가 기기에서 어떻게 표시되는지 알아야 합니다.

시야에 한눈에 들어올 수 있는 콘텐츠는 한정적이며 아래 상황을 고려해야 합니다.

시야 내에서는 중앙을 보는 것이 가장 편안합니다.
목과 몸의 움직임을 최소화해야 합니다.

그렇기 때문에 중앙에는 주요 콘텐츠를 배치해야 하고 가장자리에는 필요하지 않은 콘텐츠를 배치해야 합니다.

*여기서 말하는 필요하지 않은 콘텐츠란? 사용할 수는 있지만 주요 콘텐츠를 방해하지 않는 작업을 말합니다.

Keep interactive content at the same depth

눈의 편안함을 생각해서 깊이도 고려해야 합니다.

깊이는 공간 경험의 독특한 특징입니다.

콘텐츠를 가까이 또는 멀리 배치하면 프로젝트에서 다른 느낌을 줍니다. 다만, 눈은 한 번에 하나의 거리에만 초점을 맞출 수 있기 때문에 초점 거리를 자주 변경하면 눈이 쉽게 피로해질 수 있습니다.

그러므로 UI 간에 이동하는 것이 쉽도록 상호 작용하는 콘텐츠를 동일한 깊이로 유지하는 것이 좋습니다.

예를 들어)

모달 뷰를 표시하는 경우 메인 뷰가 z축으로 밀려 나가고 모달이 원래 해당 위치에 위치하게 됩니다. 이런 식으로 같은 z축을 유지한다면 눈이 새로운 거리(깊이감)에 적응할 필요가 없습니다.

추가로,

깊이감의 변화를 통해서 계층 구조를 전달할 수 있습니다.

위와 같이 좌측, 하단에 요소를 배치하게 되면 눈에 피로감을 주지 않고 정보를 제공할 수 있습니다 .

Easy to use

눈은 UI 요소를 잘 타겟팅 하는 특성이 있습니다.

Guide the eyes to the center of the element

눈은 자연스럽게 요소의 중앙에 초점을 맞춥니다.

그렇기 때문에 눈을 돕기 위한 원형의 모양을 사용해야 합니다.

원, 타원, 모서리가 둥근 사각형
만약 모서리가 각진 형태를 사용하게 되면 눈이 외부에/가장자리에 초점을 맞추기 때문에 정확도가 떨어집니다.
또한 윤곽선, 과한 그림자와 같이 모서리에 주의를 집중시키는 효과도 피해야 합니다.

텍스트 글리프는 중앙에 위치시키고 넉넉한 패딩을 줘야 합니다.

결과적으로, 요소의 중앙으로 눈을 이끌어야 합니다.

Make target areas of at least 60 points

눈을 잘 타게팅 할 수 있는 크기는 60pt입니다.

경우에 따라 60pt보다 작아도 괜찮습니다. 크기와 간격을 고려해서 요소를 배치해야 합니다.

만약, 자체적으로 커스텀하여 요소를 만들 경우 “Design for spatial user interfaces” 세션을 참고해 주세요.

Use dynamic scale for UI

눈의 타겟팅 영역이 중요한 만큼 이 타겟 영역을 유지해야 합니다.그러기 위해서는 UI의 크기를 조절하는 방법을 알아야 합니다.

두 가지 다른 스케일 메커니즘을 살펴보겠습니다.

Dynamic Scale : 동적 스케일
Fixed Scale : 고정 스케일

동적 스케일의 경우 윈도우가 멀어질수록 커지고 가까워질수록 작아집니다.

→ UI를 같은 시야 영역에 맞추고 타겟 영역의 크기를 유지합니다. (윈도우가 어디에 위치에 있든)

반면에 고정 스케일의 경우 윈도우가 멀수록 작아집니다.

→ 크기가 변경되기 때문에 타겟 영역이 작아져서 불편합니다.

그러므로 동적 스케일을 유지해서 눈으로 모든 컨트롤을 타겟팅 할 수 있도록 해야 합니다.

Keep UI oriented to the viewer

인터페이스가 기울어지지 않도록 해야 합니다.

더 자세한 내용은 “Principles of spatial design” 세션을 참고해 주세요.

Responsive

눈은 매우 혁신적인 입력 방식으로 인터페이스가 눈에 반응하는 것이 매우 중요합니다. 하이라이트로 상호작용 표시를 하게 되면 사용자가 더 잘 인식할 수 있습니다.

각 버튼을 바라볼 때 하이라이팅이 됩니다. (영상 참고)

Use hover effects to provide feedback

모든 상호 작용 요소는 하이라이트로 표시되어야 하는데, 이를 호버 이펙트로 표시합니다.

하지만 눈은 빠르게 움직이므로 이펙트는 과하지 않아야 하고 모든 콘텐츠 위에서 작동해야 합니다. (그래야 눈을 따라서 움직인다고 인식할 수 있기 때문에)

⇒ 호버 이펙트를 사용해서 눈의 피드백을 추가하고 요소가 응답하는 느낌을 줄 수 있게 해야 합니다.

눈의 요소는 민감한 정보입니다. 눈 데이터를 다룰 때는 개인정보 보호가 가장 중요합니다.

호버 이펙트에서 사용하는 개인정보는 초점(초점을 받는 요소의 정보뿐입니다.)만 사용합니다.

Intentional

눈으로 요소를 호버링하는 것은 특정 의도가 있습니다. 무언가를 오래 바라보면 관심이 있다는 것을 의미합니다.

(버튼을 꾹 누르는 것과 같은?)

Take advantage of ey intent

예를 들어 버튼에 툴 팁을 추가할 수 있는데 바라보면 나타납니다.

탭 막대에 초점을 맞추면 확장되어 나타나고, 각 탭의 레이블을 보여줍니다.

서치 바에서 마이크 글리프에 초점을 맞추면 Speak to search 기능이 활성화되어 이 레이어가 보이고 눈과 음성만을 사용해서 검색할 수 있습니다.

시스템 요소는 (==기본적으로) 필요할 때 추가정보를 제공하며 초점에서 벗어나면 깔끔한 UI를 유지합니다. 앱을 개발할 때 이런 부분을 이용해서 개발해야 합니다.

또한 개인정보 보호를 고려하여 빌드되어서 초점 정보가 앱으로 전송되지 않습니다.

눈의 의도는 보조기술에도 도움을 줍니다. Dwell Control 을 사용하면 눈만으로 콘텐츠를 선택할 수 있습니다.

눈에 잠시 초점을 맞추면 Dwell Control UI가 표시되고 버튼을 선택합니다. 이렇게 하면 손으로 탭 제스처를 할 필요가 없습니다.

💡 Eyes

Place content in front of the viewer.
Design elements that attract your eyes.
Respect the minimum target area for eyes.
Use hover effects to provide feedback.
Reveal extra information on eye intent.

Hands

Hand gestures

시스템 전체에서 주 상호 작용 방법입니다.

Connect UI feedback to gesture

손가락을 모아 쥐는 것은 화면을 탭하는 것과 동일한 제스처입니다.
핀치 후 드래그 제스처를 통해 스크롤이 가능합니다.
양 손 제스처로 줌과 회전이 가능합니다.

UI 피드백은 손의 움직임을 따라가기 때문에 제스처와 연결된 것 같은 느낌을 줍니다.

Use familiar patterns

위와 같이 제스처는 시스템 전체에서 같은 방식으로 작동하며 Multi-Touch 제스처와 비슷한 논리로 동작합니다.
즉 사람들은 제스처에 대한 고민 없이 경험에 집중할 수 있습니다.

Custom gesture

사용자 경험의 일부가 특수한 동작이라 표준 제스처로 쉽게 표현되지 않는 경우 사용자 지정 제스처를 사용할 수 있습니다.

사용자 지정 제스처 가이드라인

Easy to explain and perform
Avoid gesture conflicts : 시스템 제스처나 보편적인 손동작과 명확하게 구별되어야 합니다.
Comfortable and reliable : 사용자가 노력하거나 지치는 일 없이 지속해서 반복할 수 있어야 하고 잘못 작동할 확률이 낮아야 합니다.
Accessible to everyone : 보조 기술을 사용하여 상호작용하는 사람들을 염두에 두고 그럴 때 사용자 지정 제스처가 어떻게 동작할지 고려해야 합니다. (접근성은 “Create accessible spatial experiences.” 세션을 참고해 주세요.)
Unambiguous