[WWDC23] Vision Pro 디자인의 원리 (1) Familiar | Principles of spatial design

WWDC23에서 Apple의 최초의 공간 컴퓨터, Vision Pro가 공개되었다. 

Apple Vision Pro

 

Vision Pro는 공간 운영체제인 VisionOS를 통해 디지털 콘텐츠가 마치 실제 공간에 물리적으로 존재하는 것과 같은 느낌을 사용자에게 제공한다. Vision Pro 그리고 VisionOS까지 공개가 되며, Apple Developer 사이트에서는 VisionOS 내에서 앱 개발에 대한 정보들을 제공해 준다. 그중 VisionOS와 같은 공간 운영체제에서 공간 디자인이 어떠한 원리로 이루어져 있고, 어떠한 것들을 고려하여 디자인해야 할지 Principles of spatial design이라는 WWDC23 영상을 보며 알아보았다.

Principles of spatial design - WWDC23 - Videos - Apple Developer

 

친숙성 Familiar

공간 디자인 첫 번째 원리는 친숙성이다. 기존의 사람들이 사용하던 사이드바, 탭, 검색 필드 같은 요소들을 사람들이 원하는 목적을 이룰 수 있게 하는 데 도움이 된다. Vision Pro와 같은 공간 플랫폼에서도 사람들이 익숙하게 인식하고 사용하는 요소들을 사용해서 신뢰성 있게 사람들이 원하는 목적을 이룰 수 있도록 해야 한다.

좌 : iPadOS에서의 음악 앱, 우 : VisionOS에서의 음악 앱

Windows

공간 플랫폼에서 창을 새로운 시각 언어로 디자인하였다. 유리 재질은 세계와 대비되어 사람들이 주변 환경을 더 잘 인식할 수 있게 해 주며 다양한 조명 조건에 적응한다. 창은 이동, 닫기, 크기 조정의 컨트롤을 제공한다. 창을 이동하여도 읽기 쉽고 사용하기 쉽게 유지하기 위해 이동할 때는 항상 사람들 향하도록 회전한다.

유리 재질의 창을 적용하여 조명에 따라 적응한다.

 

Sizing

창은 사람들의 시야에 편안하게 맞도록 디자인되었지만 콘텐츠를 기준으로 편안한 창의 크기를 선택할 수 있다. MacOS 같은 경우 디스플레이의 크기가 고정적이기 때문에 전체 화면으로 앱을 실행했을 때, 같은 디스플레이에서라면 어떤 앱이든 같은 크기를 가졌지만, 디스플레이 크기의 제약이 없는 공간 플랫폼에서는 다르다. 예를 들어 Safari는 웹 페이지의 내용을 더 많이 볼 수 있도록 세로로 길게 디자인되었고, Keynote는 전체 크기의 프레젠테이션을 맞출 수 있도록 가로로 넓게 디자인되었다.

좌 : 세로로 길게 디자인된 Safari , 우 : 가로로 넓게 디자인 된 Keynote

 

또한 모든 인터페이스 요소가 창안에 있는 것이 아닌 탭 바와 도구 모음을 사용하여 창 바깥으로 넘어가도록 만들 수 있다. 이러한 컨트롤은 주 창 위에 층을 이루고 있으므로 항상 접근 가능하며 콘텐츠에 더 많은 공간을 제공한다. 또는 컨트롤과 콘텐츠를 분리하기 위해 여러 섹션을 사용할 수도 있다. Safari에서처럼 내비게이션 바가 웹 페이지와 분리되어 페이지에 초점을 둘 수 있게 한다. Safari에서 사이드바를 열면 창이 커져 웹 페이지를 가리지 않고 더 많은 컨트롤을 보여준다. 창은 화면에 제한되지 않으므로 가능한 경우에는 사람들의 시야를 너무 가리지 않도록 작게 유지해야 한다.

 

그리고 다른 플랫폼과 마찬가지로 앱에는 여러 창을 가질 수 있다. 여러 웹 페이지를 동시에 볼 수 있도록 콘텐츠를 나란히 표시하거나 함께 사용할 작업을 보여줄 수 있다. Keynote에서는 프레젠테이션 재생 시 슬라이드가 크고 멀리 있는 창에 표시되고, 프레젠터 디스플레이가 가까이 있는 작은 창에 표시된다. 이렇게 함으로써 사람들은 슬라이드를 크게 유지하면서 프레젠터 디스플레이를 원하는 곳에 배치할 수 있다. 가능하면 앱의 인터페이스를 하나의 창에 유지하는 것이 이상적이다. 여러 창은 사람들이 관리해야 할 것들이 많아질 수 있습니다.

좌 : 사이드바를 연 Safari, 우 : 프레젠터 디스플레이를 연 Keynote

 

Points

포인트는 인터페이스 요소의 크기를 지정하는 방법이다. 공간 플랫폼에서 창을 이동할 때 창이 멀어지면 더 크게, 가까이 오면 더 작게 스케일이 조정된다. 이렇게 하면 인터페이스가 가독성이 있고 사용하기 쉬워진다. 다른 플랫폼에서 포인트를 사용하여 포인트 단위로 버튼과 같은 인터페이스 요소의 크기를 설정하듯 공간 디자인에서도 적용할 수 있다.