XR에서의 UI 표현법의 선택
XREAL 김윤진
I. 들어가며
스큐어모피즘과 플랫디자인, 그리고 XR
동일한 목적의 UI라도, VR/AR환경에서는 3차원 공간의 영향으로 그 표현법이 보다 다양해집니다. 2D 슬레이트 기반의 UI 뿐만 아니라, 실제 인터렉션이 가능한 피아노에서 손으로 잡아당기는 레버까지, 다양한 유형의 몰입형 UI가 선택지에 추가되지요. 한편, 오늘날 웹앱 디자인에서 이러한 현실에 대한 충실한 재현은 미니멀리즘적인 플랫디자인으로 대체된 지 오래입니다. 하지만 XR환경에서는 실제 조작 시 “신체 사용의 유사성”이라는 새로운 변수가 추가됩니다. 그렇다면 XR환경에서도 과연 플랫디자인으로의 이행은 필연적일까요?
IOS5 시절(2012)의 DJ앱
HoloLens2 AR Headset: 2019년 시연 영상최선의 UI 조합 찾아나가기
XR에서 인터페이스가 어떠한 방식으로 발전해나갈지는 결국, 최선의 사용성이라는 요인에 달려 있을 것입니다. 선구적인 기업들에 의해 재료는 계속 준비되고 있으니, 제작자 입장에서는 이것을 어떻게 조합해서 편리한 사용 흐름을 만들지가 중요하겠습니다. 이번 아티클에서는 XR분야에서 사용 가능한 UI의 유형에 대해 살피고, 앞으로 XR 프로덕트를 생산할 때 생각해볼 지점들을 세부적으로 살펴보겠습니다.
글의 목적 및 서술 방향
이 글은 저와 같은 XR 입문자분들이, 첫 XR 어플리케이션을 디자인하다가 막막함을 느낄 때, 함께 참조해볼 자료를 만드는 데에 목적을 둔 UI 아카이빙 목적의 글입니다. 게임 분야 이론을 부분적으로 참고하며, 주된 학습도구로는 UX for XR 책, 마이크로소프트의 MRTK 가이드라인, oculus best practices 문서를 이용하여 다양한 UI의 유형을 모았으며, 가능한 예제들은 오큘러스 퀘스트 2 기기에 어플리케이션을 다운로드하여 실사용해보며 각 정보를 재분류하였습니다.
II. UI 선택지 및 체크리스트
1. UI의 유형
2009년 스웨덴 샬머스 대학의 게임 인터페이스 분류를 참고하여, XR에서의 UI도 3D 공간 내에 표현되는지에 따라 Spatial / Non-spatial로 나누어 그 성격을 살펴보았습니다. 특히 spatial 한 UI들의 경우, 정보를 어떤 식으로 전달하는지에 따라 3가지로 나누어볼 수 있었습니다.
[Spatial]
a. 몰입형 UI (Diegetic Elements)
몰입형 UI란, 필요한 정보를 유저-캐릭터가 직접 인터렉션 할 수 있는 fictional 한 객체, 즉 XR 내 세계관에 어울리는 월드 내 3D 요소로 spatial 하게 나타낸 것입니다. 예시로는, Dead Space 게임에서 남은 체력 정보를 게임 캐릭터 의복 위의 게이지 바로 표현한 경우나, 스토리상 중요한 정보를 캐릭터가 들고 있는 책에 적힌 글귀로 표현한 경우가 있습니다. 컨셉 상 사용자가 반드시 상황에 몰입해야 할 때, 정보량이 일정량을 초과하지 않을 때에 응용 가능합니다.
b. 가상 도형 UI (Geometric Elements)
가상 도형 UI는 그저 안내 목적으로(non-fictional), 3D 월드 내에 spatial 하게 가이드라인을 제시할 때 주로 사용됩니다. 예시로는, 사용자가 이동해야 하는 방향에 ****2D 화살표, 가상의 3D 큐브 ****등을 띄워놓는 것이 있겠습니다. 3D 월드 내에서 행동을 유도하거나, 공간 기반의 정보를 전달해야 할 때 응용 가능합니다.
c. 2D 슬레이트 UI
non-fictional하며 공간 내 spatial 하게 배치되기는 하지만, 타블렛-노트의 텍스트 기반 UX 전통에 입각하여 정보전달에 집중할 때에 주로 사용됩니다. 예시로는, PaintingVR에서 그림을 그리는 영역은 모두 몰입형 UI로 구현했으나, 검색을 위한 브라우저는 2D 슬레이트로 사용한 것이 있겠습니다. 많은 양의 정보를 전달해야 할 때에 응용 가능합니다.
[Non-spatial]
a. HUD
HUD는 non-spatial 하게, 즉 게임 월드 바깥에 별도의 레이어로 존재하는 UI입니다. VR 헤드셋을 쓴 사용자의 시야에 특정 지표들을 고정해놓는 경우가 있겠습니다. VR 내 어지럼증의 원인이 된다고 하여 사용이 지양되고는 했습니다.
2. XR 유저 시나리오에서의 체크리스트
VR은 몰입형 매체 특성상, 사용자가 유저 시나리오를 강제받는 상황의 폐쇄성이 극대화되어 느껴질 수 있습니다. 사용자가 VR환경에 대해 답답함을 느낄 수 있기에, 능동적인 조작감을 위한 기능과 정보 배치는 더욱 중요합니다.
[빠른 메뉴]
XR환경에서는 몰입감을 위해 사용자에게 필요한 UI들을 시야에서 제거해두는 경우가 많습니다. 이때 VR에 갇힌 느낌을 받지 않기 위해, ‘앱 종료’ ‘녹화' 등 주요 기능에 대한 접근성 확보는 아주 중요하고, 현재 대부분의 XR기기에서는 2d 버튼의 집합 형태의 ‘빠른 메뉴’를 통해 이를 구현하고 있습니다. 그렇다면, 사용 여정에서 그런 빠른 접근이 필요한 것은 언제일까요.
[몰입형 UI 구성하기]
몰입형 UI로 조작할 때는 집중하여 글을 읽지 않고도, 현실세계의 원칙에 의거하여 관성적인 조작이 가능해집니다. 각 프로덕트의 컨셉 상에서, 글로 표현하지 않아도 되는 요소가 무엇인지 판단하여, 그것을 VR 월드라는 무대 위에 가상의 상황으로 연출해낼 수 있겠습니다. 그렇다면, 몰입형 UI가 어떤 사용 맥락 속에서 등장해야 가장 직관적일까요.
[2d 슬레이트 내 정보 배치]
한편, 그럼에도 많은 정보를 전달해야 한다면 2d 슬레이트의 전통에 의존해야 할 것입니다. 그렇다면 여기서는 기존 서비스 디자인 분야에서 다뤄지던 고민인, ‘언제’ ‘어떻게' 사용자들이 원하는 정보를 제공하여 본래 목적을 달성할 수 있을지를 다시 진행할 수 있을 것입니다.
3. XR 공간 설계 시 체크리스트
XR환경에서 사용자 여정 시나리오를 그릴 때는, 사용자의 신체와 연루된 ‘공간’에 대해 고려해보는 것이 필요합니다. XR환경이 미디어에서 자주 묘사되듯이 2d 슬레이트가 겹겹이 띄워진 모습이라면, 실제로 사용하기에 동선상의 불편함이 클 테니까요.
[2d 슬레이트의 월드 내 배치]
슬레이트가 겹치게 되면 정보가 가려지며 즉각적인 정보 습득이 어려워지고, 사용자와 슬레이트 간 거리가 일정 범위에서 벗어나면 조작의 편리성이 떨어집니다. 책 UX for XR에서는, 사용자를 중심으로 원형을 그리며 슬레이트를 배치하는 것이 일반적이라고 말합니다. 여기서 각 슬레이트들 간 z축(앞/뒤) 방향의 관계에 대해서 추가적으로 고민해볼 필요가 있겠습니다.
[몰입형 UI의 공간 내 배치]
몰입형 UI의 행동 유도성을 높이기 위해서는, 사용자의 신체가 놓인 조작 환경이 현실과 비슷해야 합니다. 예를 들어 선 자세로 VR를 즐기고 있는 상황에서 펜을 잡고 글씨를 쓰려하는 경우, 3D 월드 내 노트가 지면으로부터 30cm 높이의 박스 위에 놓여있다면 빠르게 글씨를 쓰기 어려울 것입니다.
[시야를 따라다니는 UI의 배치]
oculus best practices에서는 3D 공간 외부에 구현된 HUD가 어지럼증을 유발하기에 사용을 자제해야 한다고 말합니다. 한편 ‘항상 시야에 보이는 메뉴’에 대한 요구는, 시간 격차를 두고 사용자의 시야를 따라가게끔 하는 방식의 메뉴로 보완되어 사용되고 있기도 합니다. 이때 해당 UI가 중요한 3D 월드 내 UI를 가리어서, 사용자의 즉각적인 정보 습득을 방해하지 않도록 구성하는 것이 필요합니다.
III. 마치며
이번 아티클에서는 다양한 UI의 사례를 모으고 그 활용 가능성에 대해서만 언급해 보았습니다. 특정 프로덕트에 집중하여 깊게 분석하지 못했던 점, XR에서의 예시가 부족한 점, 직접 3D로 디자인 프로토타입을 제시하지 못한 점이 아쉬움으로 남습니다. 한편, 이후 구성원분들이 프로젝트를 진행해가며 프로토타입을 제작할 때에 참고할 수 있는 자료가 되었으면 좋겠습니다. 앞으로 활동 기간 동안 피그마로 유저 시나리오를 미리 구성했던 것처럼, 각 UI 요소들을 연결해서 프로토타입을 제작해보는 활동을 해볼 수 있을 것입니다. 각 재료들을 이어 붙여서, 어떤 조합이 가장 편안한 사용성을 제공할지 알아가는 것도 재미있는 과정이 될 거라 생각합니다.
작성자_XREAL 김윤진
XREAL 공식홈페이지_ https://www.xreal.info/
참고문헌
[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]
Oculus Best Practices, OculusVR, 2017.(https://scontent.oculuscdn.com/v/t64.5771-25/12482206_237917063479780_486464407014998016_n.pdf?_nc_cat=105&ccb=1-6&_nc_sid=489e6e&_nc_ohc=fcKqKoMXEpwAX8wXY-c&_nc_ht=scontent.oculuscdn.com&oh=00_AT_Aw3me1o4veLvt11FsF5aQZE6qmZZxxpL2Fnln01rniQ&oe=6285F012)
Microsoft Reality Toolkit Docs, Microsoft.(https://docs.microsoft.com/ko-kr/windows/mixed-reality/mrtk-unity/features/ux-building-blocks/app-bar?view=mrtkunity-2021-05)
