혼합 현실을 위한 설계: MARS HMD 컴패니언 앱 개발 과정 소개

Unity Labs의 제작 툴 그룹 중 하나인 공간 설계팀은 Project MARS(실제 세계와 지능적으로 상호작용하는 혼합 및 증강 현실 경험을 빌드할 수 있도록 지원하는 Unity 확장 기능)를 위한 HMD 컴패니언 앱을 개발하고 있습니다. HMD 컴패니언 앱은 에디터와 실제 세계를 연결합니다. 

Unity Mars는 에디터가 기본 제작 환경이지만, 모바일 및 HMD 컴패니언 앱은 마우스와 키보드에만 머무르지 않고 제작 범위를 확장해주는 온디바이스 솔루션을 제공합니다. HMD 컴패니언 앱에서는 실제 세계의 환경을 빠르게 캡처한 다음 에디터로 가져와 시뮬레이션하고, 콘텐츠 편집 및 그레이박싱을 실행하고 조건과 쿼리를 작성할 수 있습니다. 또한 재사용 가능한 컴포넌트를 제공하는 Editor XR과 XR Interaction Toolkit을 활용하여 실감나는 인터랙티브 경험을 빠르고 쉽게 빌드할 수 있습니다. 이번 포스팅에서는 디자인 프로세스에 관한 통찰력과 더불어 디지털 세계와 실제 세계를 의미 있는 방식으로 연결하고 증강 현실(AR)에 보다 적합한 인터페이스를 제작하는 방법을 보여드리고자 합니다. 

베타 신청하기

스크린을 대상으로 설계하는 경우, 디지털 표현은 디자인 툴과 주로 밀접한 관련이 있습니다. 그러나 증강 현실을 설계하는 경우, 실제 사물과 표현 간의 차이를 정확히 파악하기 어려울 수 있습니다. 우리가 살고 있는 환경은 수시로 변화하기 때문에, 가상 공간 역시 주변의 컨텍스트에 맞게 변화하고 대응할 수 있어야 합니다. 그래서 유니티는 디자인 프로세스 전반에서 1:1 스케일의 3D 온디바이스 작업을 선호합니다. 유일하게 이 방법만이 사용자가 완성된 앱을 어떤 방식으로 경험할지 알 수 있게 해주기 때문입니다. 

제한된 시야각(FOV), 근거리 클리핑 평면 및 밝기/콘트라스트 수준 등과 같은 제약 조건은 의사 결정 과정에 큰 영향을 줄 수 있으므로, 피드백을 빠르게 확보해야 합니다. AR HMD의 제한된 시야각(FOV)으로 인해 유니티는 여러 디자인 문제를 해결해야 했습니다. 예를 들어, Unity Mars에서 특정 조건에 맞춰 환경을 제작할 때, 일치 항목이 사용자 주변 전체, 심지어는 다른 공간에서도 채워지는 경우가 있습니다. 대형 공간 맵이 포함된 기기에서 프로토타이핑을 한 후 비로소 대규모 공간 안에서 “미니월드” 버전을 보유하는 것이 얼마나 중요한지 이해할 수 있었습니다. 미니월드를 통해 씬에 위치한 사물을 다양한 각도로 볼 수 있게 되면 공간 감각이 더 정확해지고 오클루전 발생이 감소합니다.

주변 환경을 3D 맵으로 보여주는 미니월드 프로토타입

유니티는 항상 크리에이터를 염두에 두고 공간 컴퓨팅을 설계하며, 인체를 둘러싸는 일련의 레이어로 공간을 구조화하는 방식을 모색하고 있습니다. 의복, 오브젝트 및 내/외부 경계 모두가 공간을 구성할 때 영향을 줄 수 있는 레이어에 해당됩니다. 이러한 레이어는 대개 스케일에 따라 우리가 공간을 인지하는 방식을 결정합니다. 

디자인 프로세스에서 스케일이 의미하는 바는 굉장히 복잡합니다. 공간 UI 요소는 사용자를 둘러싼 다양한 레이어에 어떻게 반응하고 대응할까요? 특정 작업을 수행하려면 공간이 얼마나 필요할까요? 지정된 스케일에서 조작을 수행하는 적절한 방법은 무엇일까요? HMD 컴패니언 앱이 선호하는 Unity Mars의 기능은 본질적으로 공간적 특성을 지니며 3D 조작을 필요로 하고, 가상 공간과 병치된 실제 세계의 컨텍스트 정보를 활용합니다. 

거리 조작용 프로토타입

스크린 및 실제 오브젝트의 기존 설계 워크플로는 현재 XR 개발의 요구 사항을 충족하지 못합니다. XR은 그 어떤 디지털 미디어보다도 정교한 시각화, 빠른 반복 작업 및 끊임없이 변화하는 환경을 반영하는 방법을 필요로 합니다. 공간 팀은 기존 프로세스의 부족한 부분을 메우기 위해 독자적인 워크플로를 커스터마이징하고 설계하여 XR 환경을 구축할 때의 복잡성을 더 정확하게 파악하고자 했습니다. 유니티에서 그간 시도해 온 워크플로와 그에 따른 결과물을 아래에 소개합니다.

공간 설계는 단순히 오브젝트와 공간의 스케일에 대한 이해뿐 아니라, 피로감을 주지 않는 신체적 움직임에 대한 이해 역시 필요로 합니다. 일대일 페이퍼 프로토타입은 움직임과 인체 공학을 테스트하는 데 매우 효과적입니다.

예를 들어, 유니티는 사용자의 머리 기울기에 맞추어 움직이는 가상 트레이를 설계하고 테스트했습니다. 종이 모델을 기반으로 하는 이 물리적 프로토타입은 사용자의 턱 바로 아래 목에 걸려 있습니다. 평소 일할 때 자주 사용하는 도구인 휴대전화, 안경, 펜 등을 트레이에 놓습니다. 한 시간 동안 페이퍼 프로토타입을 착용한 결과, 물건을 가지고 오는 동작에서 목에 큰 피로감이 발생했으며, 목 근처의 툴에 접근하기 위해 자주 팔을 움직이는 동작 역시 피로감을 더했습니다. 따라서 이 설계 제안은 더 이상 진행하지 않기로 했습니다. 혼합 현실을 위해 설계할 때, 빠르고 간단한 페이퍼 프로토타입을 빌드하면 시간을 절감하고 공간적인 사고를 하는 데 도움이 됩니다. 

턱 트레이 설계 제안을 위한 페이퍼 프로토타입

프레젠테이션이나 애니메이션화한 목업(mockup)과 같은 기존의 2D 툴로는 혼합 현실에서의 사용자 흐름을 효과적으로 검토하기 어렵습니다. 따라서 2D 스토리보드를 제작하는 대신 Tvori를 사용하여 VR 환경에서 프로토타입을 빌드했습니다. Tvori는 상호작용을 편집하고 애니메이션하는 동안 빠른 반복 작업을 가능하게 합니다. 여기에 타임라인 기능을 사용하여 카메라, 잠재적인 UI 요소, 가상 오브젝트 및 입력 기기를 키프레임했습니다.

증강 현실 시야각(FOV)을 이용하여 Tvori VR에서 플로 프로토타이핑

가상 현실을 사용하여 월드 스케일에 지속적으로 변화를 줄 수 있었습니다. 사람이 인식하는 스케일에서 월드를 직접 경험하는 동시에 씬을 축소하여 더욱 쉽게 편집할 수 있도록 했습니다. 다른 팀원에게 플로를 제시할 때도, VR 헤드셋을 착용하고 스케일을 1:1로 설정한 후 타임라인을 스크럽하기만 하면 되었습니다. 

가상 요소의 적절한 스케일과 비율을 더 정확하게 파악하기 위해, 가상 현실에서 증강 현실을 빠르고 효율적으로 시뮬레이션할 수 있는 전형적인 AR 헤드셋 시야각(FOV) “안전 영역”이 도입되었습니다. 이 사각형 영역은 사람의 시야각을 막으며, 매우 유용합니다. 공간 디자이너는 이러한 제약 조건을 사용하여 보이는 대상뿐 아니라 움직이는 방식(예: 손동작)의 측면에서도 몰입감에 영향을 줍니다. 

팔레트 메뉴용 입력 매핑

디자인 프로세스 전반에서 각각 입력 매핑과 사용자 플로를 위한 두 가지 실시간 업데이트 문서를 만들었습니다. 사용자 플로 문서는 정보의 출처로서 지속적으로 업데이트되고 있으며, 사용자가 어디에서 어떻게 특정 작업을 수행하는지 파악했습니다. 예를 들어 작업이 특정 작업 공간(개별 XR UI를 말함) 또는 실제 세계 중 하나에서 수행되는지, 아니면 양쪽 모두에서 수행되는지 알 수 있습니다. 

또한 앱에서 수행되는 액션과 해당 빈도를 더 정확히 파악하기 위해 입력 매핑 활동을 도입했습니다. 이를 다음 단계로 간단히 설명할 수 있습니다.

• 모든 알려진 액션을 나열하고 우선 순위에 따라 순위를 매깁니다. 
• 각 액션이 수행되는 빈도를 기록합니다.
• 상호작용 유형을 결정합니다. 

복잡도가 상승할수록, 프로토타입 정확도 역시 향상되어야 했으며, “마인드 맵” 뷰를 활용하여 입력이 겹치는 부분을 적절히 조정하는 방법을 더 정확하게 이해할 수 있었습니다. 이는 입력 횟수가 제한적일 수 있는 Magic Leap One 컨트롤러와 같은 입력 기기에서 특히 중요합니다. 특정 액션의 경우, 마우스 오버 상태를 요청하여 충돌을 피하면서 입력을 분산할 수 있었습니다. 일반적인 액션의 경우, 컨텍스트 메뉴와 홈 탭의 범퍼를 활용하여 메인 팔레트 메뉴를 불러오도록 했습니다. 또한, 피로감 문제를 해결하기 위해 터치 패드와 함께 트리거 또는 범퍼 프레스를 필요로 하는 입력은 모두 회피했습니다.  

Unity에서 3D 모델, UI 디자인 및 컨트롤러 스크립트를 조합하여 Magic Leap에 디자인을 빠르게 적용했습니다. 프로세스 초기에 완벽한 코드를 작성하지 않고도 상호작용 프로토타입의 빠른 반복 작업을 통해 피드백을 확보하는 것이 목표였습니다. 유니티는 독자적인 프로토타입을 빌드했을 뿐 아니라, 광범위한 XR 커뮤니티에서 개발한 수많은 앱에서 영감을 얻어 특정 인터랙션 동작을 구현하기 위한 레퍼런스로 종종 활용했습니다.

대부분의 인터랙션은 타이밍, 임계값 및 거리와 같은 “핵심” 수치에 의존합니다. 프로토타입을 빌드한 후의 첫 번째 단계에서는 이러한 수치를 해당 인터랙션을 고안했을 때의 느낌과 일치하도록 조정합니다. Unity 에디터의 플레이 모드에서 값을 미세 조정할 수 있지만, 동시에 런타임 빌드에서도 값을 조정할 필요가 있었습니다. 따라서 앱 내부에 재사용 가능한 간단한 설정 메뉴를 빌드했습니다. 어떤 프로토타입 스크립트에서든 단 한 줄의 코드로 슬라이더 또는 체크박스를 추가하여 핵심 수치를 미세 조정할 수 있습니다.

인터랙션 설정에 필요한 “핵심” 수치 조정

다음 단계에서는 피드백을 확보하고 반복 작업을 수행합니다. 인터랙션을 테스트할 때 유용한 팁을 아래에 소개합니다.

• 처음에는 최소한의 정보만 제공합니다. 정말 필요한 경우에만 사용자에게 지침을 전달하거나, 방법을 간략하게 설명합니다. 소프트웨어를 출시한 후의 상황을 고려하여 사용자가 개발자의 영향 없이 어떻게 상호작용하는지 관찰해야 한다는 점을 기억하세요.
• 혼란, 불만 또는 놀람과 같은 위험 신호를 파악하고, 실제 발생한 결과와 달리 사용자가 예상했던 결과가 무엇인지 질문합니다. 
• 만약 사용자가 피드백을 정확하게 전달하지 못할 경우, 헤드셋 뷰를 스트리밍하거나 녹화하여 사용자가 직접 가상 오브젝트를 향해 제스처를 취할 수 있도록 합니다.

가상 오브젝트의 스케일은 실제 세계에서 측정하기 어려우며 사용자의 시야 거리에 대해 반응할 수 있어야 합니다. 사용자는 입체시력, 광원의 이동과 같은 기타 뎁스 신호를 통해서만 UI가 물리적으로 더 크다는 점을 인지할 수 있기 때문에 실제 세계의 스케일을 유일한 레퍼런스로 삼을 수는 없습니다. 사용자가 한쪽 눈을 감거나 다른 컨텍스트 없이 UI를 보는 경우에는 크기나 거리를 전혀 구별하지 못합니다.

유니티는 VR 설계를 전담하는 Google의 Daydream 팀이 제작한 DMM(distance-independent millimeter) 시스템을 활용하여 거리와 크기를 비율에 맞게 조정했습니다. 예를 들어, 1dmm은 1미터 떨어진 위치의 1*1mm 버튼의 크기를 의미하며, 3미터 떨어진 위치에 놓인 3*3mm 버튼의 크기를 의미할 수도 있습니다. DMM 시스템을 활용하여 Google은 최소 폰트 크기 20dmm 및 패딩 16dmm이 포함된 최소 적중 크기 64dmm 등 권장 폰트와 최소 광선 기반 적중 크기를 몇 가지 제공했습니다. 

Magic Leap로 권장 크기를 테스트했을 때, 너무 크다는 느낌이 들어서 실제로는 조금 더 작게 제작했습니다. 아마 Magic Leap의 시야각(FOV)과 6DoF 컨트롤러가 Daydream의 시야각(FOV), 3DoF 컨트롤러에 비해 상대적으로 작기 때문일 겁니다. UI가 거리에 비례하여 스케일이 조정될 때, 동일한 픽셀 크기로 렌더링되고 레이캐스트도 동일한 각도 영역을 다루지만 왠지 달라 보였습니다. 만약 비슷한 점을 발견하셨다면 커뮤니티에서 이에 대한 의견을 공유해 주세요. 

컴패니언 앱을 위한 공간 UI 설계는 광원을 머티리얼로 사용합니다. 빛과 그림자의 레이어링은 더 촉각적인 경험을 제공하며, AR HMD에서 사용자의 뎁스 인지도를 향상합니다. 궁극적으로, 광원은 상대적이기 때문에 다른 머티리얼과 표면으로 인해 형태가 갖춰져야만 인지할 수 있습니다. 컴패니언 앱의 모든 공간 UI 요소는 물리적 구성처럼 간주되며, 광원과 빛의 평면 간의 관계를 면밀히 고려합니다.

이 효과는 네거티브 그림자 기술을 사용하여 만들어낼 수 있습니다. AR HMD는 광원 기반의 추가 색 공간을 활용합니다. 검정색은 빛이 없는 상태이므로 투명하게 렌더링됩니다. 다른 가상 오브젝트 앞에 검정색 오브젝트가 위치할 경우 마스크와 같은 역할을 합니다. 그림자 효과를 만들기 위해서는 어두운 그림자 영역을 빛으로 감싸야 합니다. 사람의 인지 체계는 3D 오브젝트의 움직임과 뎁스를 유추하기 위해 그림자를 통해 얻게 되는 신호에 많이 의존합니다. AR 앱이 그림자를 수용하지 않는 경우, 사용자는 매우 중요한 뎁스 신호를 받지 못하게 됩니다.

사용자에게 제공되는 뎁스 신호, 버튼 오버 상태 그림자(상단) 및 텍스처화된 가독성 마스크(하단)

그림자 외에도 텍스처를 사용하면, 사용자에게 스케일과 오브젝트의 상대적 위치를 파악할 수 있는 신호를 줄 수 있습니다. 광원 기반 HMD에서 컬러를 다룰 때 밴딩 현상이 문제가 되는데, 특히 고대비 그레디언트를 사용할 때 자주 발생합니다. 이를 제약 조건으로 사용하여, 공간 UI 요소 디자인에 텍스처를 통합하면 그레디언트에 사용할 수 있는 컬러 범위를 확장할 수 있고, 제작 경험에서 뎁스에 대한 인식을 향상할 수 있습니다.

팔레트 메뉴의 노이즈가 포함된 베이크된 그림자 텍스처 맵(왼쪽) 및 컨텍스트 메뉴(오른쪽)

공간 UI 요소와 광원 간의 관계는 인터페이스의 잠재적인 동작을 강조하도록 설계되었습니다. 이러한 시각적(청각적 및 물리적 포함) 양상은 어포던스(affordance)를 전달하거나 사용자에게 입력 피드백을 제공하는 데 도움이 됩니다. 일상 속의 공간과 마찬가지로, 가볍게 강조를 주게 되면 시각적인 흥미를 불러일으키며 오브젝트나 구체적인 공간상의 특징을 돋보이게 할 수 있습니다. 물리적 세계에서 찾아볼 수 있는 이러한 어포던스를 차용하여 오목한 곳에서의 빛 상태를 흉내내는 광원과 공간 UI 요소 간의 다양한 관계를 조성할 수 있었습니다. 

공간 UI 요소를 위한 입력 피드백 비주얼/모션 연구

유니티는 보다 나은 환경을 빌드하는 데 도움이 되는 새로운 워크플로를 항상 모색하고 있습니다. 이 포스팅에서 공유한 내용이 공간 설계에 도움이 되기를 바라며, 혹시 새로운 방법을 발견한 경우 언제든지 연락주시기 바랍니다. 크리에이터 커뮤니티는 새로운 매체를 형성하고, 이전에는 불가능하다고 여겨졌던 것을 창조하기 위해서 지식을 공유해야 합니다. 

Unity Mars Magic Leap 컴패니언 앱을 프로젝트에 활용하고 싶다면, 간단한 설문 조사에 참여하여 사용자 요구 사항을 보다 자세히 파악하는 데 도움을 주시기 바랍니다. 여러분의 많은 의견을 부탁드립니다.