MRTK 유니티 사용법: 홀로렌즈, 혼합현실, 증강현실, 가상현실 앱 개발을 위한 필수 인터랙션 UX 컴포넌트 (HoloLens 2, HoloLens, Windows Mixed Reality, OpenVR, OpenXR)

혼합현실에서 많이 사용되는 필수적인 인터랙션 패턴들을 MRTK를 이용하여 어떻게 구현할 수 있는지 알아봅니다. 본 글은 MRTK 2.7을 기반으로 작성 되었습니다. (2021년 5월 릴리즈)

디자이너이자 크리에이티브 테크놀러지스트이며 저자인 박동윤(Yoon Park)은 현재 미국 마이크로소프트 본사의 홀로렌즈와 혼합현실관련 서비스의 디자인을 담당하는 Mixed Reality Design & UX Research 팀에서 Principal UX Designer로서 일하고 있다. 엔지니어로서의 경험을 바탕으로 디자이너와 개발자의 연결고리 역할을 하고자 노력하고 있으며, 혼합현실을 위한 오픈소스 프로젝트인 MRTK, 샘플 앱, 디자인 가이드라인 등 개발자 경험과 관련된 디자인을 담당하고 있다.
http://dongyoonpark.com

MRTK(Mixed Reality Toolkit)은 마이크로소프트가 제공하는 오픈소스 프로젝트로서, 혼합현실의 경험 디자인 및 개발에 필요한 크로스 플랫폼 인풋 시스템, 공통적인 인터랙션 및 UI 등을 제공합니다. 유니티(Unity) 및 언리얼(Unreal) 모두 제공되고 있으며, 이 포스팅에서는 유니티의 컴포넌트들을 소개합니다.

  • 유니티 에디터에서 입력 시뮬레이션 하기
  • 오브젝트를 잡아서 움직이기
  • 오브젝트의 크기를 조절하기
  • 오브젝트를 좀 더 정확도 있게 크기를 조절하거나 회전시키기
  • 입력 이벤트에 대해서 오브젝트가 반응하도록 하기
  • 시각적인 피드백 추가하기
  • 청각적인 피드백 추가하기
  • 홀로렌즈2 스타일 버튼 사용하기
  • 오브젝트가 사용자를 따라다니게 하기
  • 오브젝트가 사용자를 항상 바라보게 하기

유니티와 MRTK의 설치 및 환경 설정에 대해서는 다음 튜토리얼을 참고하시기 바랍니다.
Introduction to the MRTK tutorials — Mixed Reality | Microsoft Docs

유니티 에디터에서 입력 시뮬레이션 하기

MRTK는 유니티 에디터에서 입력 시뮬레이션을 지원합니다. 유니티의 플레이 버튼을 클릭하여 씬을 실행하기만 하면됩니다. 다음의 키를 사용하여 입력을 시뮬레이션합니다.

MRTK의 입력 시뮬레이션을 사용하면, 기기 없이도 다양한 인터랙션을 구현 및 테스트할 수 있어, 보다 빠른 혼합현실 디자인 및 개발, 프로토타이핑에 큰 도움이 됩니다.

  • W, A, S, D, Q, R 키를 눌러 카메라를 이동합니다.
  • 마우스 오른쪽 버튼을 누른 상태에서 마우스를 움직여 주위를 둘러봅니다.
  • 시뮬레이션 된 손을 불러 오려면 스페이스 바 (오른손) 또는 왼쪽 Shift 키 (왼손)를 누릅니다.
  • 시뮬레이션 된 손을 항상 뷰에 유지하려면 T 또는 Y 키를 누릅니다.
  • 시뮬레이션 된 손을 회전하려면 CTRL 키를 누른채로 마우스를 움직입니다. 핸드 메뉴등을 테스트할 때 유용합니다.
MRTK’s Input simulation in Unity editor

오브젝트를 잡아서 움직이기

오브젝트를 잡아서 움직일 수 있게 하려면, ObjectManipulator.cs 와 NearInteractionGrabbable.cs (홀로렌즈2와 같은 관절식 핸드트래킹으로 직접 잡는 경우) 두가지의 스크립트를 할당합니다.

ObjectManipulator는 근거리 및 원거리 인터랙션을 모두 지원합니다. HoloLens 2의 핸드 트래킹 입력 (근거리), 핸드 레이(원거리), 모션 컨트롤러의 빔 (원거리), HoloLens 게이즈(시선) 커서 및 에어 탭 (원거리)을 사용하여 오브젝트를 잡고 이동할 수 있습니다.

Grab and move with input simulation — far interaction with hand ray / near interaction with articulated hand

오브젝트의 크기 조절하기

ObjectManipulator.cs는 양손 조작을 통한 크기 조정 및 회전을 지원합니다. 이는 HoloLens 2의 관절식 핸드트래킹 입력, HoloLens 1의 시선 + 제스처 입력, Windows Mixed Reality VR 헤드셋의 모션 컨트롤러 입력과 같은 다양한 입력 유형에서 작동합니다.

Resizing object with two-handed manipulation

오브젝트의 크기를 조절하거나 회전시키는 방법

홀로렌즈와 Windows Mixed Reality에서는 바운딩 박스 라는 인터페이스를 사용하여 오브젝트의 크기를 조절하거나 회전을 시킬 수 있습니다. 임의의 오브젝트에 BoundsControl.cs를 할당하면 크기 조정 및 회전을위한 인터페이스 인 Bounding Box가 표시됩니다. 기본적으로 HoloLens 1 스타일의 핸들 및 와이어가 표시됩니다. HoloLens 2 스타일 근접 기반 애니메이션 핸들을 사용하려면 프리팹과 머티리얼을 할당해야합니다. 바운딩 박스의 비쥬얼에 대한 구성 방법은 Bounds Control 문서 및 BoundingControlExamples.unity 예제 씬을 참조하십시오.

Default Bounding Box and HoloLens 2 style in the BoundingBoxExamples.unity scene

오브젝트가 입력 이벤트에 응답하도록 만드는 방법

PointerHandler.cs를 오브젝트에 할당하면, 인스펙터에서 OnPointerDown (), OnPointerUp (), OnPointerClicked (), OnPointerDragged () 등의 포인터 이벤트를 사용할 수 있습니다.
스크립트 내에서 이러한 이벤트를 사용하려면 IMixedRealityPointerHandler를 구현하면 됩니다.

비주얼 피드백을 추가하는 방법

Interactable.cs스크립트를 오브젝트에 할당합니다. 인스펙터에서 새로운 테마를 생성하고 다양한 테마 프로필을 활용하면 다양한 입력 상태에 따른 시각적 피드백을 쉽게 추가 할 수 있습니다. 예를 들면, Interactable의 Color Theme을 사용하면 입력 상태에 따라 컬러를 변경 할 수 있습니다. Shader Theme을 이용하면 셰이더의 프로퍼티를 입력 상태에 따라 컨트롤 할 수도 있습니다.

시각적 피드백을 만드는데 또 다른 유용한 방법은 MRTK Standard Shader (MRTK 표준 셰이더)를 활용하는 것 입니다. MRTK Standard Shader를 사용하면 호버 라이트 및 근접 라이트와 같은 시각적 피드백 효과를 쉽게 추가 할 수 있습니다. MRTK Standard 셰이더는 Unity Standard 셰이더보다 훨씬 적은 계산을 수행하도록 퍼포먼스가 최적화 되어 있습니다.

새로운 머티리얼을 만들고 셰이더를 ‘Mixed Reality Toolkit> Standard’로 바꿉니다. 또는 MRTK_Standard_Cyan과 같은 MRTK 표준 셰이더를 사용하는 기존 재질 중 하나를 선택할 수 있습니다.

머티리얼을 Mesh Renderer의 materials 프로퍼티에 할당합니다.

Assigned material with MRTK Standard Shader’s proximity light and border light options

오디오 피드백을 추가하는 방법

오브젝트에 AudioSource를 추가합니다. 그런 다음 입력 이벤트를 노출하는 스크립트 (예 : Interactable.cs 또는 PointerHandler.cs)에서 오브젝트 자신을 이벤트에 할당하고 AudioSource.PlayOneShot ()을 선택합니다. 오디오 클립을 사용하거나 MRTK의 오디오 에셋 중 하나를 선택할 수 있습니다.

홀로렌즈 2 스타일 버튼을 사용하는 법

MRTK는 다양한 유형의 HoloLens 2의 셸 (OS) 스타일 버튼을 제공합니다. 근접 라이트 이펙트, 압축 애니메이션, 이벤트 발생시 버튼 표면의 펄스 효과와 같은 정교한 시각적 피드백을 통해 핸드 트래킹 입력의 사용성을 향상시키고 있습니다.

PressableButtonExample.unity 예제 씬에서 다양한 버튼의 종류를 확인 할 수 있습니다.

PressableButtonExamples scene

HoloLens 2 스타일의 버튼 들은 프리팹으로 제공 되므로, 씬에 드래그엔 드롭 하여 사용 가능합니다. 버튼 프리팹은 위에서 소개 한 Interactable.cs를 포함 하고 있습니다. Interactable에서 OnClick()과 같은 노출 된 이벤트를 사용하여 작업을 트리거 할 수 있습니다. OnClick() 이벤트를 사용하여 근거리 (직접) 및 원거리 (간접) 상호 작용을 모두 처리합니다.

오브젝트가 사용자를 따라다니게 하는 방법

RadialView.cs 또는 Follow.cs 스크립트를 오브젝트에 할당합니다. 이 스크립트들은 3D 공간에서 다양한 방법으로 오브젝트의 위치를 컨트롤 할 수있는 Solver 스크립트 시리즈의 일부입니다. SolverHandler.cs가 자동으로 추가됩니다.

다음은 홀로렌즈 OS의 시작 메뉴와 유사한 ‘태그-얼롱(Tag-along)’ 동작을 구현하는 RadialView의 옵션 값들 입니다. 최소 / 최대 거리 및 최소 / 최대 좌우 움직임 각도 등을 지정할 수 있습니다. 아래 예는 좌우 15 ° 내에서 0.4m에서 0.8m 범위 사이에 오브젝트를 위치시키는 예 입니다. Lerp Time 값을 조정하여 위치 업데이트를 더 빠르게 또는 더 부드럽게 만들 수 있습니다.

Example of using Radial View Solver on the Toggle Features Panel in the HandInteractionExamples scene

오브젝트가 항상 사용자 방향을 바라보게 하는 법

Billboard.cs 스크립트를 오브젝트에 할당합니다. 사용자의 위치에 관계없이 항상 오브젝트가 사용자 방향을 바라보게 하며, 피봇 축 옵션을 지정할 수 있습니다.

The left object always faces the camera with Billboard script, with Y-axis pivot option
Example of using Billboard script in the Tooltip prefab to make the labels always face the camera

혼합현실과 MRTK에 관한 유용한 리소스들을 소개합니다

MRTK의 UX 컴포넌트 영상 시리즈 (한글)

마이크로소프트 Mixed Realty Dev Days 2020에서 진행했던 세션 발표 내용을 한글로 다시 작업한 영상 입니다.

https://www.youtube.com/playlist?list=PLDZRZwFT9Wkt4mOxKetaC5Z80XdcaJfSP

마이크로소프트 MR Dev Days 2020 세션 비디오: MRTK’s UX Building Blocks (영문)

혼합현실 디자인/개발 스토리들

다양한 혼합현실 관련 개인 프로젝트에 대한 포스트들 입니다.

Designing Type In Space for HoloLens 2

Designer & Creative Technologist. UX Designer @Microsoft HoloLens. Creator of http://typeinsight.org Opinions are my own. http://dongyoonpark.com

Designer & Creative Technologist. UX Designer @Microsoft HoloLens. Creator of http://typeinsight.org Opinions are my own. http://dongyoonpark.com