XREAL
Vision

XR에서의 UI 표현법 선택 | UI 선택지 & 체크리스트

XR분야에서 인터페이스 디자인의 미래는?

동일한 목적의 UI라도, VR/AR환경에서는 3차원 공간의 영향으로 그 표현법이 보다 다양해집니다. 2D 슬레이트 기반의 UI 뿐만 아니라, 실제 인터렉션이 가능한 피아노에서 손으로 잡아당기는 레버까지, 다양한 유형의 몰입형 UI가 선택지에 추가되지요. 한편, 오늘날 웹앱 디자인에서 이러한 현실에 대한 충실한 재현은 미니멀리즘적인 플랫디자인으로 대체된 지 오래입니다. 하지만 XR환경에서는 실제 조작 시 “신체 사용의 유사성”이라는 새로운 변수가 추가됩니다. 그렇다면 XR환경에서도 과연 플랫디자인으로의 이행은 필연적일까요?
IOS5 시절(2012)의 DJ앱
HoloLens2 AR Headset: 2019년 시연 영상
XR에서 인터페이스가 어떠한 방식으로 발전해나갈지는 결국, 최선의 사용성이라는 요인에 달려 있을 것입니다. 선구적인 기업들에 의해 재료는 계속 준비되고 있으니, 제작자 입장에서는 이것을 어떻게 조합해서 편리한 사용 흐름을 만들지가 중요하겠습니다. 이번 아티클에서는 XR분야에서 사용 가능한 UI의 유형에 대해 살피고, 앞으로 XR 프로덕트를 생산할 때 생각해볼 지점들을 세부적으로 살펴보겠습니다.

UI 선택지 및 체크리스트

이 글은 저와 같은 XR입문자분들이, 첫 XR어플리케이션을 디자인하다가 막막함을 느낄 때, 함께 참조해볼 자료를 만드는 데에 목적을 둔 UI 아카이빙 목적의 글입니다.
주된 학습도구로는 UX for XR 책, 마이크로소프트의 MRTK 가이드라인, oculus best practices 문서를 이용하여 다양한 UI의 유형을 모았으며, 가능한 예제들은 오큘러스 퀘스트 2 기기에 어플리케이션을 다운로드받아 실사용해보며 각 정보를 재분류하였습니다.

UI의 유형

XR에서의 UI는 3D 공간 내에 표현되는지에 따라 Spatial / Non-spatial로 구분할 수 있습니다. 그중에서도 XR만의 특징인 spatial한 UI들의 경우, 정보를 어떤 식으로 전달하는지에 따라 3가지로 나누어볼 수 있었습니다.
[Spatial]
몰입형 UI
가상 안내도형 UI [게임 월드 내에 표현]
2D 슬레이트 UI
[Non-spatial]
HUD [게임 월드 바깥에 별도의 레이어로 존재]

XR 유저 시나리오에서의 체크리스트

VR은 몰입형 매체 특성상, 사용자가 유저 시나리오를 강제받는 상황의 폐쇄성이 극대화되어 느껴질 수 있습니다. 사용자가 VR환경에 대해 답답함을 느낄 수 있기에, 능동적인 조작감을 위한 기능과 정보 배치는 더욱 중요합니다.
[빠른 메뉴]
XR환경에서는 몰입감을 위해 사용자에게 필요한 UI들을 시야에서 제거해두는 경우가 많습니다. 이때 VR에 갇힌 느낌을 받지 않기 위해, ‘앱 종료’ ‘녹화' 등 주요 기능에 대한 접근성 확보는 아주 중요하고, 현재 대부분의 XR기기에서는 2d 버튼의 집합 형태의 ‘빠른 메뉴’를 통해 이를 구현하고 있습니다. 그렇다면, 사용 여정에서 그런 빠른 접근이 필요한 것은 언제일까요.
[몰입형 UI 구성하기]
몰입형 UI로 조작할 때는 집중하여 글을 읽지 않고도, 현실세계의 원칙에 의거하여 관성적인 조작이 가능해집니다. 각 프로덕트의 컨셉 상에서, 글로 표현하지 않아도 되는 요소가 무엇인지 판단하여, 그것을 VR 월드라는 무대 위에 가상의 상황으로 연출해낼 수 있겠습니다. 그렇다면, 몰입형 UI가 어떤 사용 맥락 속에서 등장해야 가장 직관적일까요.
[2d 슬레이트 내 정보 배치]
한편, 그럼에도 많은 정보를 전달해야 한다면 2d 슬레이트의 전통에 의존해야 할 것입니다. 그렇다면 여기서는 기존 서비스 디자인 분야에서 다뤄지던 고민인, ‘언제’ ‘어떻게' 사용자들이 원하는 정보를 제공하여 본래 목적을 달성할 수 있을지를 다시 진행할 수 있을 것입니다.

XR 공간 설계 시 체크리스트

XR환경에서 사용자 여정 시나리오를 그릴 때는, 사용자의 신체와 연루된 ‘공간’에 대해 고려해보는 것이 필요합니다. XR환경이 미디어에서 자주 묘사되듯이 2d 슬레이트가 겹겹이 띄워진 모습이라면, 실제로 사용하기에 동선상의 불편함이 클 테니까요.
[2d 슬레이트의 월드 내 배치]
슬레이트가 겹치게 되면 정보가 가려지며 즉각적인 정보 습득이 어려워지고, 사용자와 슬레이트 간 거리가 일정 범위에서 벗어나면 조작의 편리성이 떨어집니다. 책 UX for XR에서는, 사용자를 중심으로 원형을 그리며 슬레이트를 배치하는 것이 일반적이라고 말합니다. 여기서 각 슬레이트들 간 z축(앞/뒤) 방향의 관계에 대해서 추가적으로 고민해볼 필요가 있겠습니다.
[몰입형 UI의 공간 내 배치]
몰입형 UI의 행동 유도성을 높이기 위해서는, 사용자의 신체가 놓인 조작 환경이 현실과 비슷해야 합니다. 예를 들어 선 자세로 VR를 즐기고 있는 상황에서 펜을 잡고 글씨를 쓰려 하는 경우, 3D 월드 내 노트가 지면으로부터 30cm 높이의 박스 위에 놓여있다면 빠르게 글씨를 쓰기 어려울 것입니다.
[시야를 따라다니는 UI의 배치]
oculus best practices에서는 3D 공간 외부에 구현된 HUD가 어지럼증을 유발하기에 사용을 자제해야 한다고 말합니다. 한편 ‘항상 시야에 보이는 메뉴’에 대한 요구는, 시간 격차를 두고 사용자의 시야를 따라가게끔 하는 방식의 메뉴로 보완되어 사용되고 있기도 합니다. 이때 해당 UI가 중요한 3D 월드 내 UI를 가리어서, 사용자의 즉각적인 정보 습득을 방해하지 않도록 구성하는 것이 필요합니다.
Written by 김윤진 (XREAL 2기 리서치그룹)
2022.5.15

참고문헌

[BOOK]
UX for XR: User Experience Design and Strategies for Immersive Technologies, Cornel Hillmann, Apress, 2021.
[RESEARCH PAPER]
Beyond the HUD - User Interfaces for Increased Player Immersion in FPS Games, E Fagerholt, M Lorentzon, Chalmers University of Technology, 2009.
Principles of mixed-initiative user interfaces, Horvitz, Eric, ACM, 1999, p.159-166.
[VIDEO]
Mike Alger, Essays on design in XR(https://www.youtube.com/watch?v=4o__z7aPlMw)
UploadVR, HoloLens 2 AR Headset: On Stage Live Demonstration (https://www.youtube.com/watch?v=uIHPPtPBgHk&t=197s)
[WEB]