🪄

VR로 재해석하는 UX/UI

새로운 기술의 등장은 사람들에게 새로운 변화를 일깨워 줍니다. 19세기 전기의 상용화로 도시화, 산업화 등이 촉진되어 생산성이 크게 향상되고, 1960년대 인터넷의 발전으로 전 세계 사람들이 하나의 “지구촌 사회”의 일원으로 원격 소통이 용이해진 것처럼 말이죠. 비슷한 맥락에서 XR(Extended Reality, 확장현실)은 현 시대를 살아가는 인류에게 기존에 경험할 수 없던 새로운 차원의 몰입감을 선사하며, 의료, 교육, 제조업 등 다양한 분야의 콘텐츠 주축으로 자리잡아 가고 있습니다. 이렇게 확장현실 기술의 발전에 힘입어 UX(User Experience) / UI(User Interface) 업계 실무진들도 단순 2D 인터페이스를 넘어 3D 기반의 VR/AR 경험을 셰이핑 해나가고 있습니다.

출처: What is XR? Towards a Framework for Augmented and Virtual Reality(Philipp et al, 2022)

XR은 평면이 아닌 공간입니다. 따라서 본질적으로 XR 환경을 체험하기 위해 착용해야 하는 HMD(Head-Mounted Display) 기기의 하드웨어적 특성과, 위 그림에서 제시된 가상도 (VR/AR 등) 등이 필수적으로 반영되어야 합니다. 이에 따라, 3D 공간인 XR 특유의 입체감과 몰입감을 생생하게 살릴 수 있는 적절한 UX/UI 구현이 주요 요구사항으로 자리잡게 되었습니다. 따라서 본 글에서는 본질적인 UX/UI에 대한 소개에 더불어, 3D 공간 기반의 VR 환경에서 구현할 수 있는 최적의 UX/UI 포뮬라를 소개해드리고자 합니다.

UX와 UI는 무엇인가?

UX vs UI?

UX와 UI는 20세기 중반부터 인간 중심 디자인(User-centered Design), 인간-컴퓨터 상호작용 (Human-Computer Interaction) 에 대한 연구가 진행됨에 따라 디자인 분야에서는 미학적인 것 뿐 아니라 사용자의 경험 및 사용자 중심의 개발 프로세스에 대한 연구가 활발히 진행되었습니다. 이후, 1980년대 말 애플의 부사장 출신인 Donald A. Norman 은 대표적인 그의 저서인 “디자인과 인간심리(The Design of Everyday Things)” 에서 사용자 경험 디자인(User eXperience Design, 이하 UX) 에 대해서 인지심리학, 경영학 등 다양한 이론과 연계해 체계를 잡으며 UX는 디자인 업계 뿐만 아니라 제품과 서비스를 설계하는 공학자들에게도 필수 교양으로 자리잡게 되었습니다. 그러면 우리가 자주 쓰는 UX와 UI는 어떤 의미이고 어떤 차이가 있을까요?

출처: UI vs. UX Design: What’s the Difference? written by Coursera Staff

위 그림에 나와있는 것과 같이 UX 와 UI는 서로 밀접하게 연결된 사이입니다. 우선, UX 란 전반적인 제품 및 서비스의 경험, 사용자 리서치, 그것을 검증하는 사용자 평가를 모두 총괄합니다. 따라서, UX Design 을 위해서는 사용자 경험과 관련된 인지심리학, 인간공학, 사회학 등 전반적인 공부를 해야 합니다. 반면, UI 란 사용자와 디지털 제품 간의 상호작용에 초점을 맞추는 구체적이고 시각적인 요소에 관련된 디자인 분야입니다. 따라서 UX 와 다르게 시각 디자인, 인터랙션 디자인, 프론트엔드 등 구체적으로 구현에 초점을 맞춥니다. 정리하자면 UX는 사용자 경험을 고려한 전반적인 분야라면 UI는 UX 를 구체화하고 실현하는 세부 분야라고 볼 수 있습니다.

왜 UX/UI는 중요할까?

출처 : Utah Teapot or Newell teapot

출처 : 마조히스트를 위한 커피 주전자

다음 주전자 예시를 통해 UX의 필요성을 살펴 보겠습니다. 오른쪽 작품은 “마조히스트를 위한 커피 주전자”로, 일상생활에서 흔히 살펴볼 수 있는 왼쪽 주전자와 달리 손잡이가 입구와 같은 면에 위치해 있습니다. 말 그대로 뜨거운 물을 붓다가 손에 화상을 입고 싶은 “마조히스트”가 아니라면 누구도 사용하지 않을 주전자입니다. 이렇게 두 주전자 예시 모두 손잡이, 물 입구, 뚜껑 등 “주전자”라면 가져야 할 구성 요소들을 모두 포함하고 있지만, 구성 요소의 위치 설계에 따라 하나는 사용성이 완전히 엉망이 될 수도 있음을 시사합니다. 주전자 예시에서 좋은 UX를 설계하기 위해서는 본질적으로 “사람들이 어떻게 뜨거운 물을 따르는가”에 대한 플로우적 탐구가 필요합니다. 한 손으로 손잡이를 잡고, 반대 방향으로 주전자를 기울여 각도에 따라 물이 흘러나오게 하는 것이 핵심입니다. 이 핵심 유저 플로우를 제품에 반영해야만이 좋은 디자인, 좋은 UX로 자리잡을 수 있습니다.

출처 : Rev Homepage (왼쪽 - 기존 거, 오른쪽 - 개선 후)

그러면 현재 우리가 활발하게 사용하고 있는 UI 디자인은 왜 중요할까요? 위의 좋은 UI와 잘못된 UI 를 통해서 알 수 있습니다. 두 화면 모두 자막 및 필사 서비스를 제공하는 미국의 음성-문자 변환 회사 Rev의 공식 웹사이트입니다. 두 그림 모두 동일한 정보를 제공하지만 오른쪽의 경우 색의 대비를 이용해 아이콘을 사용하지 않아도 충분히 이해하기 쉽게 제작 되었습니다. 이를 VR 공간으로 확대를 하면 3차원의 공간에서 정보를 제공해야 하기 때문에 색의 대비 및 정보의 우선순위를 정확하게 정의를 하는 것이 중요합니다.

VR 환경에서의 UX/UI

이번 단락에서는 서론에서 언급한 것 처럼 UX/UI 디자인을 위해 HMD 내에서 고려해야 할 사항과 VR 만이 가지고 있는 특성에 대해 정리하고 이에 따른 주요 준수사항을 공유해보고자 합니다.

HMD의 특성

VR HMD 는 1/ 디스플레이, 2/ 시야각(FOV), 3/ 렌즈, 4/ 트래킹, 5/ 프로세서 5가지의 성능 지표를 사용하게 되는데요. 2015년에 나온 Google VR Design guideline 에서는 시야각을 중심으로 HMD 내에 있는 인간공학적인 요소를 언급합니다. 우리가 보는 실제 시야각은 최대 220도까지 이르지만 실제로는 그 모든 각을 활용할 수 없습니다. 따라서 우리가 디자인을 할 때는 특정 각에 대한 고려가 필요합니다.

출처 : Visual Design Methods for Virtual Reality, Mike Alger

시야각은 인간공학에서 제품 디자인 뿐 아니라 제품과 연계되는 UI 디자인에서도 자주 사용하는 중요한 개념으로 통상적으로 수평각, 수직각 이렇게 두가지를 동시에 정의합니다. Google VR Design 가이드북에서는 왼쪽 그림과 수평각은 최대 55도, 수직각은 아래로 최대 40도, 위로 60도까지 라고 정의합니다. 즉 위에서 정의한 시야각을 벗어난 곳에 UI를 생성하게 된다면, 사용자가 보기 어려운 곳에 위치했다 할 수 있습니다.

출처 : Visual Design Methods for Virtual Reality, Mike Alger

앞에서는 제품 디자인이나 기존의 UI 제작 시에도 고려가 되었던 사항이라면 이번 사진에서는 VR 분야에서 중요한 HMD 착용시에 발생하는 사각지대를 언급했습니다. 특히 사용자 기준 직경 0.5m 이내로는 사각지대 (No-no Zone) 으로, 이 범위 내에서는 UI를 놓지 않는 것을 권장하고 있습니다. 그리고 콘텐츠가 소비되는 Content Zone, 후두부에 해당하는 Curiosity Zone, 그리고 나머지 Peripheral Zone 3가지를 잘 활용하는 것이 중요합니다.

VR 만이 가지고 있는 특성

이번 아티클에서는 두 가지를 중점적으로 언급하고자 합니다. 우선 VR 환경에서의 UX/UI 만이 가지는 차별점이 있다면 이는 3D 환경이라는 것과 HMD 에 따라서 시선이 자연스럽게 추적이 된다는 것입니다. 이 점은 기존의 정보를 명확하게 담는 것에 집중했던 2D 내에서의 UX/UI 와 다르게 보이지 않는 구간에 대한 고려가 필요하다는 것을 알 수 있습니다. 이에 따라서 바로 앞에서 언급한 3개의 Zone 을 잘 활용하면 VR만의 특성을 사용해 새로운 콘텐츠를 만드는 데 효과적일 것입니다. 예시로는 정보 전달중심의 콘텐츠의 경우 Content Zone 이 직관적으로 정보를 전달하는 데 있어 다른 두 존보다 더 중요할 것입니다. 반대로, VR 내에서의 공포 게임 콘텐츠를 기획하고 있다면, Content Zone 만으로도 직접적인 공포요소 를 줄 수 있지만, Peripheral Zone, Curiosity Zone 의 색 변화, 청각적 변화를 주는 간접적 요소 등을 통해 다른 공포감을 줄 수 있을 것입니다.

Taxonomy of controllers (출처 : Overview of Controllers of User Interface for Virtual Reality)

다른 특성으로는 VR 환경에서는 Controller 를 통한 Interaction 이 있다는 것입니다. 2022년 7월에 발간된 리뷰 논문 에서는 컨트롤러 종류들을 위의 그림과 같이 나열했습니다. 즉 현존하는 터치, 마우스나 키보드를 통해서 인터랙션했던 방식들에 비해 더 다양한 접근을 하고 있음을 확인할 수 있습니다. 이는 키보드 이번 아티클에서는 사용하는 컨트롤러 방식에 따른 UX 접근 방식의 중요성을 상기시켜주는 논문을 간단하게 공유하고자 합니다.

출처 : Influence of Gameplay Duration, Hand Tracking, and Controller Based Control Methods on UX in VR

공유하고자 하는 논문은 지난 달 15일에 나온 Influence of Gameplay Duration, Hand Tracking, and Controller Based Control Methods on UX in VR 로 위에 있는 두 게임을 게임 사용 시간, 컨트롤러 방식 두가지의 독립변수를 두고 Meta Quest 2 를 사용해 진행한 실험을 정리한 논문입니다. 여기서 흥미로운 결과는 기존의 컨트롤러의 경우, 신뢰성의 측면에서 우수한 성능을 보였고 목표를 추적하는 데 있어서 우수하다는 결과를 얻었습니다. 하지만 핸드 트래킹의 경우 기술적인 한계로 컨트롤러에 비해 신뢰성은 낮았으나, 새로 사용해본 사용자나 게임 사용 시간이 길지 않은 경우에 오히려 더 선호도가 높았음을 확인해볼 수 있었습니다. 이 논문에서는 결국 현재 VR 의 UX/UI 가 컨트롤러에 많이 의존함을 알 수 있고, 개선된 핸드 트래킹을 기반으로 한 새 UX/UI 가 필요할 수 있음을 암시했던 점이 인상적이었습니다. 본 논문을 통해 추후에 사용될 걸음 추적, 신체 추적 등 다양한 컨트롤러들을 고려한다고 하면, 우리는 UI 디자인을 위해서 다양한 데이터 추적에 사용되는 컨트롤러의 특성을 정확하게 이해해야함을 암시할 수 있습니다.

갈무리

이번 아티클에서는 VR 환경에서 진행되고 있는 UX/UI 를 중점적으로 살펴보았는데요. 현재는 우리가 바라보는 환경, 오감은 그대로 유지한 채로 새로운 경험을 선사하는 것이 중요합니다. 즉 눈 앞에 있는 어플리케이션 혹은 제품이 어떠한 매력을 줄 것인가? 에 대해서 고려를 해야 하는 것입니다. 하지만 우리가 미래에 다루게 될 VR 내에서의 UX/UI 는 우리가 보는 환경부터 그 환경 내의 모든 객체들까지 고려를 해야 한다고 생각합니다. 즉, HMD 내의 새로운 세계관을 보여줄 수 있는 셈입니다.

그런 의미에서 VR, 이를 넘어선 XR 환경에서의 UX/UI 구현을 한다는 것은 경험 제공이라는 측면에서 매우 중요한 요구사항이 될 것이고 이를 구현하기 위한 새로운 기술들이 나오거나 기존의 기술들이 개선될 것입니다. 이번 아티클을 통해 기술이 아닌 콘텐츠를 만드는 우리는 어떤 방식으로 우리만의 경험을 공유하고 제공해줄 수 있을 지 고민해보는 시간이 되었으면 합니다.

작성자 : XREAL 신영환