Familiar
기존의 sidebars, search fields, tab과
visionOS
사람들은 앱의 윈도우에 익숙하다. Vision Pro에서는 윈도우는 당신의 공간에 존재하며 일부처럼 느껴지게 된다.
Windows
새로운 시각 언어와 함께 윈도우를 디자인 했다.
glass material은 실세계와의 contrast를 제공하며, 사람들이 주변을 잘 인지하게 도와주고, 다른 lighting condition에도 적응한다.
윈도우는 움직이고, 닫고, 크기 조절이 가능하다.
Size
적합한 사이즈를 찾는 방법.
윈도우는 사람의 시야 안에 들어올 수 있도록 설계되어 있지만 유연성이 높아 어떤 크기로도 늘릴 수 있다.
콘텐츠에 맞는 윈도우 크기를 선택해라.
사파리는 더 많은 콘텐츠를 볼 수 있게 세로로 길고
키노트는 좌우로 넓혀서 프레젠테이션 크기게 맞췄다.
여러 형태로도 구성이 가능한데, Tab bar와 Tool bar를 밖으로 뺄 수도 있다.
여러 섹션을 이용해서 컨트롤과 콘텐츠를 분리하기도 한다.
사파리에서는 네비게이션 바를 웹페이지와 분리해서 내용에 집중할 수 있게 한다.
윈도우 크기도 바꿀 수 있다.
사파이에서 사이드바를 열면 윈도우가 커지고 더 많은 컨트롤을 볼 수 있게 되지만 웹 페이지를 가리지는 않는다.
여러 윈도우를 띄울 수도 있다.
이상적으로는 앱의 인터페이스를 하나의 윈도우에 두는 것이 좋다.
윈도우가 많으면 관리가 힘들어질 수 있다.
Points
인터페이스의 확장성을 위해 포인트로 설계 되었다.
포인트를 통해 인터페이스 요소의 크기를 정의하고 인터페이스가 다른 화면에 adapt 할 수 있다.
사람들이 윈도우를 움직일 때 윈도우가 멀어지면 커지고
윈도우가 가까워지면 작아진다.
다른 플랫폼의 포인트에 익숙하다면 버튼과 같은 인터페이스 요소에 대한 크기 설정 방식이 비슷하다.
이미 알고 있는 단위를 사용하고 있다.
포인트로 인터페이스를 설계하면 모든 거리에서 적합해진다.
디자인 인터페이스에 대해 더 알고 싶다면 "Design Spatial User Interface" 세션을 살펴보아라.
Human-centered
좋은 디자인은 항상 human-centered하다. 근데 이 플랫폼에서는 완전히 새로운 의미를 갖게 된다.
사람들은 기기를 착용하여 눈과 손을 통해 상호작용하며 자기만의 시야와 공간에서 앱을 경험하게 된다.
spatial app을 설계할 때는 사람들이 볼 수 있는 것과 어떻게 움직여야 할지를 생각해야 한다.
Field of view
사람들은 중앙에 있는 것이 보기 쉬우니까 제일 중요한 콘텐츠는 중앙에 배치해야 한다.
그리고 시야의 폭이 넓으므로 가로 방향의 레이아웃을 사용해라.
사파리에서는 모든 탭을 한번에 볼 때 그리드 형태로 펼쳐진다.
탭의 크기를 줄여서 중앙에서 너무 멀어지지 않으면서도 양옆의 탭이 안쪽으로 둘러져 있어 쉽게 읽을 수 있다.
하지만 사람들은 가만히 있지 않고 주변을 둘러본다. 몰입감이 높은 경험을 위해 콘텐츠를 확장할 수도 있지만 주요 콘텐츠는 시야 안에 두는 것이 좋다.
그렇지 않으면 한번에 읽거나 이해하기가 힘들다.
Ergonomics
Human-centered design은 인체 공학적인 설계를 의미하기도 한다.
콘텐츠의 배치가 사람들의 신체적 반응에 큰 영향을 준다.
그래서 모든 차원의 오브젝트를 편한 곳에 배치해야 한다.
기본적으로는 윈도우를 자연스러운 시선에 배치하여 건강하고 편안한 자세를 유도한다.
콘텐츠를 배치할 때 사람의 머리와 보는 방향에 맞춰서 배치해라.
그러면 사람들이 콘텐츠를 보고 상호작용할 수 있고 다양한 키에 맞출 수 있으며 소파에 기댄 자세 등의 다양한 자세에 맞출 수 있다.
콘텐츠를 사람과 떨어뜨려 팔 길이보다 살짝 먼 곳에 배치하여 상호작용하도록 유도하는 것이 좋다.
앱을 사용할 때 움직이기 어려운 자세로 있을 수 있으니 immersive experience가 아니라면 사람 뒤에 콘텐츠를 배치하거나 너무 높거나 낮게 배치하지 마라.
그리고 사람의 시야에 콘텐츠를 고정하지 마라. 갇혀있다고 느끼거나 혼란을 유발 할 수 있다. 대신에 사람들의 공간에 콘텐츠를 고정해라.
이를 통해 사람들은 자연스럽게 주변을 둘러볼 수 있게 된다.
Movement
기기를 착용한 상태에서 일어나서 걸을 수도 있지만 최소의 동작을 요구하는 것을 권장한다. 그래야 모두가 앱을 쉽게 사용할 수 있다.
앱 경험의 핵심이 아니라면 사람들이 움직이지 않고 앱을 이용할 수도 있어야 한다.
때로는 사람들이 다른 곳에 앉아있거나 다른 곳을 향하기도 한다.
새로 자리를 잡았을 때는 Digital Crown을 길게 누르면 중앙값 재설정이 가능하다.
윈도우를 다시 불러오거나 화면을 리셋하는 특별한 방법을 앱에 제공할 필요 없다.
Dimensional
앱에 입체감 불어넣기
Space
좋은 앱은 사람들 주변의 공간을 활용한다.
캔버스는 무한하지만 유저의 물리적 공간은 제한적일 수 있다.
그래서 앱이 모든 공간에서 작동하도록 설계해야 한다. 물리적 공간에 앱을 제한해서는 안된다.
윈도우가 움직이는 동안에는 의자가 보여서 쉽게 배치할 수 있다.
하지만 윈도우를 배치 완료하면 의자는 가려지고 앱 콘텐츠를 볼 수 있게 된다.
따라서 시스템이 알아서 해결하기 때문에 윈도우가 공간에 맞을지 걱정하지 않아도 된다.
영화를 시작하면 영상이 윈도우 전체에 나타나며 윈도우 뒤의 배경은 보이지 않게 된다.
효과적으로 딤 처리가 되어 있어 공간은 극대화 된다. 영화가 실제 공간과 겹치더라도 딤 처리로 콘텐츠에 집중할 수 있다.
사람들은 주변 공간을 인지할 수 있지만 공간의 제약은 느끼지 않는다.
Environment 기능을 통해 차원을 확장시킬 수도 있다.
앱이 대규모 콘텐츠를 위해 공간이 더 필요하다면 실제보다 큰 경험을 만들 수도 있다.
Depth
앱에 차원을 더하는 것은 깊이감을 이용하는 것이다.
Spatial Platform에서는 hierachy와 focus를 위한 강력한 도구로써 깊이가 새로운 변수이다.
멀리 있는 물체를 크게 표현하여 먼 거리에서의 상호작용 유도한다.
가까이 있는 물체는 상호작용을 유도하며 여러 각도에서 살펴볼 수 있다.
작은 동작으로 물체를 모든 면에서 볼 수 있다.
깊이를 잘 활용하면 hierachy가 정립된다.
TV 앱의 예시
가까이에 있는 element는 작게 유지할 수 있지만 멀리 있는 큰 오브젝트보다 시각적으로 우선하게 된다.
깊이를 시각적 단서인 빛과 그림자 등으로 강화할 수 있다.
어떤 물체는 영화화면 처럼 빛을 낸다.
바닥과 천장에 빛이 남으로써 공간 내 위치를 강조한다.
빛을 내는 모든 물체는 근처에 있는 물체에 색을 비춰야 한다.
그리고 다른 물체들은 그림자를 드리워야 한다.
이를 통해 고정되고, 공간에 통합된 느낌을 준다.
앱의 커스텀 object들도 그림자를 드리워야 한다.
대부분은 잔잔한 깊이감을 이용하는게 좋다. 연출이 과하면 비현실적으로 보이고 몰입을 방해한다.
잔잔한 깊이감 정도로도 몰입을 이끌 수 있다.
ex) 모달
모든 것에 깊이감을 적용하지 않아도 된다.
텍스트는 3D로 표현될 때 오히려 방해되고 읽기 힘들다.
인터페이스 요소라면 텍스트를 2차원으로 유지해라.
Scale
Depth처럼 Scale을 통해 콘텐츠 강조가 가능하다.
작은 object는 개인적이고 가벼운 느낌이 든다.
호수 위에 띄운 커다란 화면 같은 object는 인상적이다.
규모를 키우면 영화의 느낌을 다르게 바꿀 수 있다.
어떤 물체는 실제 크기로 봤을 때 제일 좋다.
Immersive
Immersion spectrum
이 플랫폼에서 앱은 dynamic해 질 수 있다.
이 스펙트럼은 유연함을 제공한다.
Shared Space
당신의 앱은 다른 앱들과 함께 Shared Space의 윈도우에 있을 수 있다.
Full Space
더 많은 공간이 필요하다면 Full Space에서 실행되고, 다른 앱들은 숨겨질 수 있다.
앱을 Shared Space의 윈도우에서 시작하는 것을 시도해라. 이를 통해 사람들에게 그들이 원하는 Immerse 정도를 컨트롤 하게 할 수 있다.
Example
키노트 앱은 윈도우로 열린다.
하지만 슬라이드 쇼를 재생하면, dimming을 통해 presentation에 집중할 수 있게 한다.
Dimming은 사용자의 space를 침해하지 않으면서도 당신의 콘텐츠와 사용자 주변에 대한 contrast를 형성하기 위한 simple한 방법이다.
Presentation을 리허설 할 때면 사용자를 완전 몰입된 환경의 무대로 데려간다.
이 상태에서 키노트는 Full Space를 활용하며 다른 앱들은 숨겨지게 된다.
하지만 Full Space 경험이 항상 사용자를 새로운 곳으로 데려가진 않는다.
그들의 own space 내에서 존재할 수도 있다.
사용자의 전체 뷰를 사용하지 않고서도 풍성한 immersive experience를 제공할 수 있다.(14분 24초)
사용자가 키보드, 컨트롤러 사용 등을 위해 손을 봐야할 때 이는 유용할 수도 있다.
Immersive app은 사람들의 실제 주변과 연결된다고 느끼게 할 수도 있다.
big welcome moment가 테이블에 그림자를 드리움으로써 "hello"가 정말 그곳에 있는 것처럼 느끼게 만든다.
당신의 경험이 누군가의 실제 환경과 연관된다면, design을 유연하게 해야한다는 것을 명심해야한다.
모두의 space는 같지 않고 공간은 계속해서 바뀌기 때문에, 당신이 설계한 경험이 어디던 잘 어울리게 만들어야 한다.
Essential tips
great immersive 앱을 위한 essential tip을 소개한다.
immersive experience를 설계할 때, 새롭게 고려해야할 점이 있다.
사람들이 주변을 둘러보며 다양한 것에 집중하지만 너무 많은 요소를 동시에 제공하면 overwhemling되어 어쩔 줄 몰라할 수 있다.
Guide people's focus
그래서 가장 중요한 콘텐츠에 사람들의 관심을 유도해야 한다.
마음 챙기기 앱에서는 공중에 뜬 단일 물체에 집중하도록 한다. 다른 곳을 볼 수도 있지만 사용자의 attention이 움직임, 공간 오디오와 다채로운 소재에 집중된다.
deeper reflection이 일어날 때, 꽃은 서서시 확장되며 사용자 주변을 완벽히 감싸게 된다.
이처럼 부드럽고 예상할 수 있는 화면 전환을 설계하여 콘텐츠의 상태를 매끄럽게 연결해라. 이를 통해 사람들은 편안함을 느끼고 무슨 일이 일어나는지 알 수 있다.
Blend thoughfully with reailty
또 다른 중요한 것은 현실과의 사려깊은 blending이다.
앱이 전체 공간을 사용할 때, 공간의 모양을 활용하여 콘텐츠를 고정하거나 물리적 상호작용을 만들 수 있다.
사용자의 주변 환경을 인지해서 콘텐츠와 공간을 의미 있게 연결 할 수 있다.
전체 scene을 사용자 공간에 blending 할 때, soft edge를 사용하여 앱이 자연스럽게 intergrate 되게 해라.
이를 통해 갑작스러운 전환을 막고 사람들이 콘텐츠에 집중하게 해준다.
Make things feel alive
가장 인상적인 경험은 물체에 생동감을 부여한다.
호수에 퍼지는 동심원이나 하늘에 떠다니는 구름같은 미묘한 애니메이션은 장면에 활기를 줍니다.
미묘한 움직임이 정적인 경험을 활기 있고 동적인 경험으로 바꿔준다.
Create atmosphere with sound
몰입감을 더 높이기 위해.
Spatial Sound를 통해서 소리를 공간의 물체에 고정할 수 있고
사람들을 둘러싼 소리를 재생할 수도 있다.
더 많은 것은 'Explore Immersive Sound Design'을 봐라.
Do more with less
small effect를 통해 큰 효과를 생성할 수 있다.
시네마에서는 바닥과 천장에 비치는 미묘한 불빛을 통해 실제 공간이라는 느낌을 준다.
Comfort
사람들에게 안정감과 주도권을 주는 방법.
Immersive app을 움직여야 하거나 사람의 위치를 바꿔야 하면 크고 빠른 동작은 피해라. 사람들에게 혼란을 줄 수 있다.
Fade out content in motion
콘텐츠가 움직이는 중에는 페이드 아웃처리 했다가 자리를 잡은 뒤에 페이드인 처리를 해야한다. 이는 사람들이 steady하다고 느끼는데 도움을 준다.
사람들이 직접 움직일 때도 immersive experience는 fade out 된다.
그리고 immersive Experience를 들어가고 나가는 확실한 방법을 제시해야 한다.
작고 helpful한 label과 recoginizable symbol(화살표)와 같은 가이드를 제공해라.
Authentic
플랫폼에 어울리는 앱을 만드는 방법.
멋진 앱 경험을 만들 때 기기의 독특한 기능을 활용하는 것이 중요하다.
이 플랫폼에서는 사람들의 공간을 잘 활용하는 풍성한 몰입형 콘텐츠가 최고의 앱이다.
앱은 잠깐 들어가서 경험하는 것이 아니다.
재미를 느끼며 몰입할 수 있으며 독창적인 콘텐츠를 만들어 사람들의 공간에서 이용하도록 유도해라.
Find a key moment
당신들의 앱이나 게임에서 공간적이거나 몰입적인 면을 찾아 그 특징에 집중해봐라.
이를 위해서는 공간에서만 경험할 수 있는 핵심적인 순간을 찾아야 한다.
사진 앱의 예시
특별한 사진을 찾으면 사진은 공간에 맞게 커지고 주변은 어두워진다.
파노라마는 무한한 공간에서 확장된다.
당신 앱의 key moment를 고민해봐라.
이미 있는 콘텐츠에서 특별한 기능에 집중함으로써 독특하고 기억에 남는 경험을 만들 수 있을 것이다.
깊이감과 규모를 통해 moment에 대한 경험을 향상시키거나 누군가의 공간을 바꿀 수 있다.
또한, 사람들을 task에 집중시키거나 특정 감정을 유발 할 수도 있다.
spatial design에 대해 더 배우고 싶다면 아래 영상을 봐라.
