애플이 공간 컴퓨팅을 디자인하는 방식.

Vision Pro와 visionOS에서 톺아볼 만한 디테일들.

이 글은 제가 지난 6월에 Medium에 올린 'Apple Vision Pro — Details that weren’t mentioned at the keynote.'를 다시 한국어로 번역해 업로드하는 것입니다. 따라서 시점 표현이나 일부 정보가 현재 상황과 약간 다를 수 있음을 감안해 주시기 바랍니다.

지난주, WWDC에서 Apple은 그들이 최근 10년 간 만든 신제품 중 가장 야심찬 Vision Pro를 발표했습니다.

강력한 Apple Silicon 칩셋, 공간 오디오, TrueDepth 카메라 시스템, 혼합 현실, 시선 및 손 추적, 표정을 인식하는 가상 아바타 생성 등, 지난 몇 년 동안 Apple이 개발하여 iPhone 및 iPad에서 선보여 온 거의 모든 기술이 AirPods Max와 Apple Watch를 연상시키는, 정교하게 마감된 인클로저에 담겨 있습니다.

발표를 보자마자 저는 이 기기를 직접 사용해 본 몇몇 저널리스트와 유튜버들의 리뷰를 찾아보았습니다. 그들의 리뷰는 유익하고 기기의 실제 사용 경험에 대한 많은 정보를 담고 있었지만, 특히 디자이너로서 제가 관심 있는 부분들에 대해서는 여전히 많은 의문이 남아 있었습니다. 그래서 Apple의 개발자 웹사이트를 좀 더 자세히 살펴본 결과 몇 가지 흥미로운 사실을 알 수 있었고, 이를 이곳에 공유하고자 합니다.

Apple은 iPadOS와 macOS 사이의 어딘가쯤에 "떠 있는" 듯한 새로운 OS를 공개했는데, 그들은 이를 visionOS라고 이름 붙였습니다.

visionOS는 3가지 방식으로 컨텐츠를 표시합니다. 바로 Windows, Volumes, Spaces 입니다. 후자로 갈수록 AR보다는 VR에 더 가깝고 가상 세계에 몰입하는 데에 더 중점을 둡니다.

Vision Pro의 조금 독특한 점은 기기 자체가 VR HMD이긴 하지만 완전한 VR보다는 AR 경험에 더 초점을 맞추고 있다는 점입니다. Apple이 선보인 대부분의 데모는 Window나 Volume 기반이었고, Space 데모는 상대적으로 적었으며, Vision Pro를 위해 준비된 일부 '몰입형 비디오'를 제외하고는 대부분 다른 메인 컨텐츠를 뒷받침하기 위해 구현되었습니다. 가령 영화를 보는 동안 주변 환경을 조용한 호수로 변경하는 등의 효과 말이죠.

이러한 혼합 현실 환경에서는 거의 항상 패스스루가 활성화되어 있는데, 이는 항상 두 대의 고화질 카메라로 주변 상황을 녹화하고 렌더링한다는 의미이며, 이는 Vision Pro의 배터리 수명이 짧은(2시간 남짓) 이유 중 하나일 수 있습니다.

심지어 컨텐츠에 몰입하는 VR 상태에서도 패스스루가 완전히 꺼지지 않는 것 같습니다. 주변 환경과 완전히 고립된 Vision Pro의 가상 환경을 감상하고 있을 때에도, 누군가 다가와 말을 걸면 그 영역이 점차 투명해지면서 너머의 사람을 볼 수 있습니다. 혼합 현실뿐만 아니라 완전한 가상현실을 경험하는 동안에도 주변 환경과 어느 정도 소통할 수 있다는 것이죠.

그렇다면 이토록 주변 환경과 상호 작용할 수 있게 애를 쓴 Vision Pro의 인터페이스와 디자인에는 어떤 디테일들이 녹여져 있을까요?

Apple의 광고 영상에서 가장 자주 등장하는 창 인터페이스부터 살펴보겠습니다. visionOS의 모든 창은 반투명 재질입니다. 따라서, 컨텐츠와 인터페이스가 실제 환경과 조화를 이루게 됩니다. 사용자는 자신이 있는 공간을 인식하면서 모든 종류의 앱과 콘텐츠를 즐길 수 있습니다.

모든 창은 환경에 반응하는 하이라이트 및 그림자 효과를 보여줍니다. 이러한 디테일은 컨텐츠, 인터페이스 및 환경 간의 통합을 극대화합니다. 또한 사진이나 동영상을 볼 때 주변 공간에서 컨텐츠의 반사광을 볼 수 있습니다. 따라서 사진이나 영상이 단순히 패스스루 비디오 위에 겹쳐진 것이 아니라, 사용자가 있는 공간의 한가운데에 떠 있는 듯한 느낌을 줍니다.

이 외에도 사용자가 주변 환경을 인지할 수 있도록 UI 곳곳에 의도적인 디테일이 적용되어 있습니다. 예를 들어, 창 위치를 변경하는 동안에는 창 뒤의 환경을 볼 수 있도록 창이 더 투명해집니다. 이렇게 하면 사용자가 주변 환경과 비교하여 창을 어디로 이동해야 할지 쉽게 알 수 있습니다. 즉, Apple은 사용자가 가상 세계에 창을 흩어놓는 것이 아니라 실제 공간에서 창을 정렬하는 것처럼 느끼기를 원하는 것이죠. 같은 이유로 iOS나 macOS에서와 같은 '다크 모드'가 없습니다. 모든 인터페이스는 반투명하므로 환경이 어두워지면 자연스럽게 인터페이스도 어두워집니다.

이러한 환경과의 일체감을 위해 Apple은 불투명한 창을 인터페이스에 사용하지 말 것을 권장합니다. 불투명한 창이 여러 개 있으면 사용자와 주변 환경이 분리되어 시각적으로 폐쇄적이고 답답한 느낌을 줍니다.

반투명 창에서 다양한 UI 요소는 투명도와 밝기의 차이로 구별됩니다. 따라서 Apple은 요소 간에 충분한 대비를 제공하고 텍스트 가시성에 주의를 기울일 것을 제안합니다.

예를 들어 상단 우측의 버튼 라벨처럼, 작고 채도가 높은 텍스트는 지양해야 합니다. 대신 흰색 텍스트나 아이콘을 사용하는 편이 낫겠죠. 색상을 사용해야 하는 경우 시인성을 확보할 수 있도록 배경 레이어 또는 버튼 전체에 색상을 적용하는 것이 좋습니다.

Apple은 iOS에서 기본적으로 SF  Regular을 사용하고 헤드라인이나 하이라이트에는 Semibold를 사용합니다. 그러나 visionOS에서는 기본적으로 SF Medium을 사용하고 강조할 때는 Bold를 사용합니다. 이처럼, visionOS 앱은 전반적으로 iOS 대비 더 굵은 서체를 사용할 것을 권장합니다. 이는 Vision Pro의 디스플레이 해상도와 반투명 창의 시인성을 고려한 것입니다.

visionOS의 또 다른 중요한 요소는 시선 추적입니다.

사람들은 대부분의 최신 AR/VR 기기를 컨트롤러와 함께 사용합니다. 시선이나 손 추적을 지원하더라도 정확도가 떨어지고, 대부분은 눈을 매우 집중해서 움직여야 하며 허공에 손을 흔드는 듯한 느낌이 듭니다. 하지만 Vision Pro는 매우 정확하고 빠른 시선 추적을 지원합니다. 실제 사용해 본 리뷰어들은 이 기능이 매우 부드러우면서도 아주 정확해서 마치 텔레파시로 디바이스를 조작하는 것처럼 느껴진다고 언급하기도 했니다.

시선 추적은 힘을 들이지 않고 혼합 현실 경험을 누리는 데에 매우 중요한 역할을 합니다. 눈을 이리저리 굴리는 것만으로 UI를 빠르게 탐색할 수 있으므로 이상한 사람처럼 팔을 허공에 흔들지 않고도, 무릎에 손을 얹고 손가락만 움직이면서 인터페이스를 조작할 수 있습니다.

visionOS의 인터페이스가 시선 추적을 활용하는 방식 중 하나를 홈 화면에서 볼 수 있습니다. 여러 앱 중에 하나로 시선을 향하면, 아이콘이 약간 커지고 입체적으로 분리되며 3D 그림자 효과를 보여줍니다.

이를 위해 visionOS의 아이콘은 배경 레이어와 최대 2개의 전경 레이어를 사용합니다. 전경 레이어는 투명한 배경을 가져야 하며, 배경은 꽉 채워진 정사각형 이미지여야 합니다. 배경 레이어는 원 형태로 마스크 처리되고, 전경 레이어는 사용자가 아이콘을 볼 때 자동으로 떠오르는 듯한 3D 그림자 효과를 구현해 줍니다.

Apple은 모든 상호작용 가능한 UI 요소에 최소 60포인트의 공간을 주어 사용자가 시선과 손을 이용해 모든 요소를 쉽게 선택할 수 있게 하라고 권장합니다. 위 그림에서 버튼 자체는 44포인트의 크기이지만, 주변에 상하좌우로 8포인트의 빈 공간이 있으므로 최소 60포인트의 타겟 영역을 충족합니다.

시선 추적은 인터페이스의 공간을 최적화하는 데도 도움이 됩니다. 예를 들어 visionOS의 사이드바 UI는 평소에 아이콘만 표시되지만, 눈길을 주면 각 아이콘에 대한 텍스트가 있는 패널로 확장됩니다.

사용자가 손가락의 감각을 통해 상호작용에 대한 피드백을 즉시 받을 수 있는 멀티터치 인터페이스와 달리, visionOS에서는 시선이 얼마나 잘 추적되고 있는지에 대한 물리적 피드백을 받을 수 있는 방법이 없습니다.

그래서 visionOS에는 '포커스 피드백'이라는 시스템이 적용되어 있습니다. 사용자가 visionOS의 상호작용 가능한 요소를 바라보면 은은하게 빛나는 호버링 효과가 나타납니다. 이를 통해 사용자는 인터페이스의 어느 부분이 상호작용 가능한 것인지 이해할 수 있으며. 시선 추적이 제대로 작동하고 있다는 시각적 피드백도 받을 수 있습니다. 또한 시선 추적은 추가적인 정보를 제공하는 데에도 사용할 수 있습니다. 예를 들어 버튼의 기능이 헷갈릴 경우, 1~2초 정도 바라보기만 하면 아래에 기능을 설명해 주는 텍스트가 표시됩니다.

visionOS에서 디자이너는 콘텐츠 배치가 눈이나 목의 피로를 유발하지 않도록 인체공학적 설계를 고려해야 합니다. 예를 들어, 우리의 신체 구조상 고개를 위아래로 움직이는 것보다 좌우로 움직이는 것이 더 쉬운데, 이는 우리의 시력과 목구조가 지평선 위의 여러 상황과 사물을 둘러보도록 진화했기 때문입니다. 따라서 UI를 사람들의 시야 높이에 맞추고, 너무 높거나 너무 낮은 곳에 배치하지 않도록 주의해야 합니다. 앱에 넓은 창이나 캔버스가 필요한 경우, 가로 비율이 더욱 긴 창을 사용하는 편이 낫습니다.

그러나 당연하게도 컨텐츠에 따라 예외도 있습니다. 가령, 대부분의 웹사이트는 세로로 스크롤되므로 Safari 창은 대부분의 창보다 세로로 더 길게 디자인되었습니다.

visionOS의 창에는 이 외에도 새로운 UI 요소가 도입되었습니다. 창 아래에 표시되는 작은 바인데, Apple에서는 이를 Ornament라고 부릅니다. 탭 바와 달리 Ornament는 현재 진행 중이거나 편집 가능한 옵션을 표시하는 역할을 합니다. 이는 별도의 레이어로 떠 있지만, 메인 창과 20포인트 정도 겹쳐 표시되므로 같은 앱이라는 것을 쉽게 알아볼 수 있습니다.

visionOS의 제스처는 iPhone 또는 iPad의 멀티터치 제스처와 거의 동일한 방식으로 작동하므로 쉽게 익숙해질 수 있습니다.

실제로 visionOS의 전체적인 UI는 iOS 또는 macOS와 유사하게 디자인되었습니다. 따라서 iPhone, iPad 또는 Mac을 사용해 본 적이 있다면 최소한의 러닝 커브로 Vision Pro를 쉽게 사용할 수 있을 겁니다. 하지만 혼합 현실 환경에서 더욱 명료하고 인지하기 쉬운 인터페이스를 제공하기 위한 몇 가지 차이점은 존재합니다.

가령, iPad에서는 옵션 메뉴가 디스플레이의 가장자리에 정렬되고, 옵션 열리면 모든 버튼이 회색으로 변하며 비활성 상태라는 것을 알려주며, 옵션 메뉴 가장자리의 작은 화살표가 원래의 버튼을 가리킵니다. 반면 visionOS에서는 옵션 메뉴가 원래의 UI 경계 바깥으로 확장될 수 있습니다. 따라서 메뉴가 버튼의 중앙에 정렬되어 사용자가 보고 있던 위치에 최대한 가까이 옵션 컨텐츠가 표시되도록 합니다. 또한 옵션 메뉴가 활성화된 상태에서 해당 버튼에 흰색 배경에 검은색 라벨을 사용하여 선택된 상태임을 알려줍니다.

보시다시피 visionOS에는 혼합 현실 환경에서 시각적 혼란을 피하고 명료함을 향상하기 위한 많은 디테일이 포함되어 있습니다. 하지만 혼합 현실에서는 기존의 X/Y 축뿐만 아니라 Z 축도 고려해야 합니다.

예를 들어, visionOS의 창은 동적으로 크기가 조정되므로 사용자가 창을 뒤로 멀리 밀면 자동으로 크기가 확장되어 버튼과 텍스트의 크기가 일정하게 유지됩니다. 또한, 사람의 눈은 초점 거리가 계속 바뀌면 쉽게 피로해지기 때문에 visionOS 팝업 창은 기본 창보다 더 앞쪽이 아니라, 같은 거리에 표시되도록 디자인되었습니다. 대신, 팝업 창이 활성화되어 있는 동안에는 메인 창이 약간 뒤로 이동합니다.

지금까지 살펴보셨다면 대부분의 버튼이 원이나 알약 모양이고 모든 창은 모서리가 둥근 사각형이라는 것을 알 수 있을 것입니다. 사람들은 본능적으로 둥근 도형에서는 중앙에, 각진 도형에서는 윤곽에 집중합니다. 그래서 Apple은 사용자가 콘텐츠에 더 쉽게 집중할 수 있도록 모든 인터페이스를 둥글게 디자인했습니다.

공간 오디오는 Apple이 Vision Pro에 많은 노력을 기울인 또 다른 분야입니다. 실제로, 설계에 참여한 한 엔지니어는 Vision Pro가 현존하는 전자제품 중 가장 진보된 공간 오디오 시스템이라고 언급했습니다.

Vision Pro에서 Apple은 오디오 레이 트레이싱이라는 기술을 사용하는데, 이는 음파가 공간 안에서 퍼지고 굴절되고 반사되는 방식을 최대한 그대로 재현하여 혼합 현실에서 일어나는 모든 일이 바로 눈앞에 있는 것처럼 느껴지는 몰입형 오디오 환경을 만듭니다. 이 기술은 방의 구조, 가구의 위치, 카펫과 벽과 책상의 재질까지 모두 고려하여 소리가 어떻게 전달될지를 가상으로 구현합니다. 또한 이 경험은 더욱 개인의 머리와 귀 형상을 캡처한 다음 그에 맞게 사운드를 보정하는 TrueDepth 시스템에 의해 더욱 향상됩니다.

이 기술이 적용된 예로 Vision Pro 가상 키보드의 타이핑 소리를 들 수 있습니다. 각 키가 실제 위치에서 누르는 것처럼 들리도록 설계되어, 키를 누를 때마다 위치에 따라 조금씩 다른 소리가 납니다.

또 다른 예는 가상 환경의 사운드 효과입니다. 사용자를 완전히 둘러싸는 가상 환경을 사실적으로 만들기 위해 Apple은 실제로 해당 장소에 가서 메뚜기 소리부터 바람 소리까지 다양한 소리를 녹음하고 거리에 따라 페이드 인/아웃하는 방식을 세심하게 고려해 실제 기기에 적용했습니다. 또한 낮과 밤의 분위기와 소리의 변화를 자연스럽게 구현하기 위해 어느 한 시점이 아니라 하루 종일 녹음 작업을 수행했다고 합니다.

주변 환경과 조화를 이루도록 최대한 세심하게 디자인된 인터페이스, 항상 근처의 사람들을 보고 상호작용할 수 있는 상시 패스스루, 주변 환경에 맞는 소리를 들을 수 있는 공간 오디오...

이 모든 기술은 사용자가 메타버스 속 가상 세계가 아니라, 여전히 현실 세계에 있는 것처럼 느끼게 해 주는 기술입니다. 즉 Apple은 Vision Pro 사용자를 현실 세계에 그대로 두고, 그저 visionOS를 통해 더 많은 경험을 누릴 수 있게 만들고자 하는 것이죠. 이는 애플이 Vision Pro 발표에서 '메타버스'라는 단어를 사용하지 않고 대신 '공간 컴퓨팅'이라는 용어를 사용한 것만 봐도 알 수 있습니다.

이 접근 방식은 사용자를 메타버스로 완전히 보내고, 가상 아바타를 통해 상호작용하도록 만드는 Meta의 방식과는 극명히 달라 재미있습니다. 어떤 접근 방식이 승자가 될지 지켜보는 것도 흥미진진할 것입니다.