혼합 현실 디자인Designing for Mixed Reality

혼합 현실에서 잘 보이도록 응용 프로그램을 디자인 하 고 새 입력 방법을 활용 하세요.Design your app to look good in Mixed Reality, and take advantage of new input methods.

개요Overview

혼합 현실 은 실제 세계를 디지털 세계와 혼합 한 결과입니다.Mixed Reality is the result of blending the physical world with the digital world. 혼합 현실 환경의 스펙트럼에는 HoloLens (예: 컴퓨터에서 생성 한 콘텐츠를 혼합 하는 장치) 및 가상 현실 (Windows Mixed Reality 헤드셋으로 표시 됨)의 완전히 몰입 형 보기와 같은 하나의 극단적인 장치가 포함 되어 있습니다.The spectrum of mixed reality experiences includes at one extreme devices such as the HoloLens (a device that mixes computer generated content with the real world), and at the other a completely immersive view of Virtual Reality (as viewed with a Windows Mixed Reality headset). 환경에 따라 달라 지는 방법에 대 한 예제는 혼합 현실 앱 유형 을 참조 하세요.See Types of mixed reality apps for examples of how experiences will vary.

거의 모든 기존 UWP 앱은이 항목의 지침에 따라 사용자의 경험을 향상 시킬 수 있지만 변경 되지 않은 2D 앱으로 혼합 현실 환경에서 실행 됩니다.Almost all existing UWP apps will run in the Mixed Reality environment as 2D apps with no changes, although the experience for the user can be improved by following some of the guidance in this topic.

혼합 현실 뷰

HoloLens 및 Windows Mixed Reality 헤드셋 모두 UWP 플랫폼에서 실행 되는 응용 프로그램을 지원 하 고 두 가지 유형의 경험을 모두 지원 합니다.Both the HoloLens and Windows Mixed Reality headsets support applications running on the UWP platform, and both support two distinct types of experience.

2D 및 몰입 형 환경2D vs. Immersive Experience

몰입 형 앱은 사용자에 게 표시 되는 전체 디스플레이를 사용 하 여 앱이 만든 보기의 중심에 배치 합니다.An immersive app takes over the entire display visible to the user, placing her at the center of a view created by the app. 예를 들어 몰입 형 게임은 사용자를 외계인 전 세계의 표면에 놓을 수 있습니다. 또는 둘러보기 가이드 앱이 사용자를 남부 아메리카 마을로 이동할 수도 있습니다.For example, an immersive game might place the user on the surface of an alien planet, or a tour guide app might place the user in a South American village. 몰입 형 앱을 만들려면 3D 그래픽 또는 캡처된 stereographic 비디오가 필요 합니다.Creating an immersive app requires 3D graphics or captured stereographic video. 모던 앱은 Unity와 같은 타사 게임 엔진과 DirectX를 사용 하 여 개발 되는 경우가 많습니다.Immersive apps are often developed using a 3rd party game engine such as Unity, or with DirectX.

몰입 형 앱을 만드는 경우 자세한 내용은 Windows Mixed Reality 개발자 센터 를 방문 해야 합니다.If you are creating immersive apps, you should visit the Windows Mixed Reality Dev Center for more information.

2D 앱은 사용자 뷰 내에서 기존 플랫 창으로 실행 됩니다.A 2D app runs as a traditional flat window within the user's view. HoloLens에서이는 벽에 고정 된 보기나 사용자 소유의 실제 실내 또는 사무실의 특정 지점에 고정 된 보기를 의미 합니다.On the HoloLens, that means a view pinned to the wall or a point in space in the users own real-world living room or office. Windows Mixed Reality 헤드셋에서 앱은 혼합 현실 홈 ( 절벽 집이라고 함)의 벽에 고정 되어 있습니다.In a Windows Mixed Reality headset, the app is pinned to a wall in the mixed reality home (sometimes called the Cliff House).

혼합 현실에서 실행 되는 여러 앱

이러한 2D 앱은 전체 뷰를 사용 하지 않습니다.These 2D apps do not take over the entire view: they are placed within it. 한 번에 여러 2D 앱이 환경에 존재할 수 있습니다.Multiple 2D apps can exist in the environment at once.

이 항목의 나머지 부분에서는 2 차원 환경의 디자인 고려 사항을 설명 합니다.The remainder of this topic discusses design considerations for the 2D experience.

2D 앱 시작Launching 2D apps

혼합 현실 시작 메뉴

시작 메뉴에서 모든 앱을 시작 하지만, 응용 프로그램 시작 관리자 역할을 하는 3D 개체를 만들 수도 있습니다.All apps are launched from the Start Menu, but it's also possible to create a 3D object to act as an app launcher. 자세한 내용은 이 비디오 를 참조 하세요.See this video for details.

2D 앱 입력 개요The 2D App Input Overview

HoloLens 및 Mixed Reality 플랫폼 모두에서 키보드와 마우스를 사용할 수 있습니다.Keyboards and mice are supported on both HoloLens and Mixed Reality platforms. Bluetooth를 통해 HoloLens와 직접 키보드와 마우스를 연결할 수 있습니다.You can pair a keyboard and mouse directly with the HoloLens over Bluetooth. 혼합 현실 앱은 호스트 컴퓨터에 연결 된 마우스 및 키보드를 지원 합니다.Mixed Reality apps support the mouse and keyboard connected to the host computer. 이 둘은 세밀 한 제어가 필요한 경우에 유용할 수 있습니다.Both may be useful in situations when a fine-level of control is necessary.

뿐만 아니라 보다 자연 스러운 입력 메서드도 지원 되며,이는 사용자가 앞에 있는 실제 키보드를 사용 하 여 책상에 앉아 있지 않거나 세밀 하 게 제어 해야 할 때 특히 유용할 수 있습니다.Other, more natural, input methods are also supported, and these may be particularly useful when the user isn't sitting at a desk with a real keyboard in front of them, or when fine control is needed.

추가 하드웨어 또는 코딩을 사용 하지 않으면 앱은 사용자가 사용 하는 벡터를 사용 하 여 사용자가 찾고 있는 벡터를 사용 합니다.Without any extra hardware or coding, apps will use gaze - the vector your user is looking along - as a mouse pointer when working with 2D apps. 이는 마우스 포인터가 가상 장면에서 무언가를 가리키는 것 처럼 구현 됩니다.It is implemented as if a mouse pointer was hovering over something in the virtual scene.

일반적인 상호 작용에서 사용자는 앱의 컨트롤을 확인 하 여 강조 표시 합니다.In a typical interaction, your user will look at a control in your app, causing it to highlight. 사용자는에서 제스처 (HoloLens) 또는 컨트롤러를 사용 하거나 음성 명령을 제공 하 여 동작을 트리거할 수 있습니다.The user will when trigger an action, using either a gesture (on the HoloLens), or a contoller or by giving a voice command. 사용자가 텍스트 입력 필드를 선택 하면 소프트웨어 키보드가 표시 됩니다.If the user selects a text input field, the software keyboard will appear.

혼합 현실에서 팝업 키보드

UWP 플랫폼에서 실행 되는 것 처럼 이러한 모든 상호 작용은 사용자의 추가 코딩 없이 자동으로 발생 합니다.It's important to note that all these interactions will happen automatically with no extra coding on your part, as a consequence of running on the UWP platform. HoloLens 및 Mixed Reality 헤드셋의 입력은 2D 앱에 대 한 터치 입력으로 표시 됩니다.Input from the HoloLens and Mixed Reality headset will appear as touch input to the 2D app. 이는 기본적으로 여러 UWP 앱이 실행 되 고 혼합 현실에서 사용할 수 있음을 의미 합니다.This means that many UWP apps will run and be usable in Mixed Reality, by default.

즉, 몇 가지 추가 작업을 수행 하면 환경이 크게 향상 될 수 있습니다.That said, with some extra work, the experience can be improved greatly. 예를 들어 음성 컨트롤이 특히 효과적일 수 있습니다.For example, voice control can be especially effective. HoloLens 및 Mixed Reality 환경 모두 앱을 시작 하 고 상호 작용 하는 음성 명령을 지원 하 고 음성 지원을 포함 하 여이 접근 방식에 대 한 자연 스러운 확장으로 나타납니다.Both HoloLens and Mixed Reality environments support voice commands for launching and interacting with apps, and including voice support will appear as a natural extension of this approach. UWP 앱에 음성 지원을 추가 하는 방법에 대 한 자세한 내용은 음성 상호 작용 을 참조 하세요.See Speech interactions for more information on adding voice support to your UWP app.

올바른 컨트롤러 선택Selecting the right controller

혼합 현실 동작 컨트롤러

특히 다음과 같이 혼합 현실에서 사용 하기 위해 몇 가지 novel 입력 메서드를 디자인 했습니다.Several novel input methods have been designed especially for use with Mixed Reality, specifically:

이러한 컨트롤러는 가상 개체와 상호 작용 하는 것이 자연스럽 고 정확 하 게 보입니다.These controllers make interacting with virtual objects seem natural and precise. 사용자가 무료로 얻을 수 있는 일부 상호 작용입니다.Some of the interactions you get for free. 예를 들어 HoloLens 선택 제스처 또는 이동 컨트롤러의 Windows 키 또는 트리거를 클릭 하면 사용자에 게 코딩 하지 않고 다시 필요한 입력 응답이 생성 됩니다.For example, the HoloLens select gesture or clicking on the Motion Controller's Windows key or trigger will generate the input response you would expect, again, with no coding on your part.

또는 사용 가능한 추가 정보 및 입력을 활용 하는 코드를 추가 하는 것이 좋습니다.At other times, you will want to add code to take advantage of the extra information and inputs that are made available. 예를 들어 위치 및 단추 누름을 고려 하는 코드를 작성 하는 경우 동작 컨트롤러를 사용 하 여 세밀 한 제어 수준으로 개체를 조작할 수 있습니다.For example, the Motion Controllers can be used to manipulate objects with a fine level of control, if you write code that takes their position and button presses into account.

참고

요약 하자면, 보안 주체는 항상 사용자에 게 자연스럽 고 원활한 입력 메서드를 최대한 제공 해야 합니다.In summary: the guiding principal should be to always provide the user with as natural and frictionless an input method as possible.

2D 앱 디자인 고려 사항: 기능2D App Design considerations: Functionality

혼합 현실 플랫폼에서 잠재적으로 사용 될 수 있는 UWP 앱을 만들 때는 몇 가지 사항을 염두에 두어야 합니다.When creating a UWP app that will potentially be used on a Mixed Reality platform, there are several things to keep in mind.

  • 끌어서 놓기가 동작 컨트롤러, gamepads 또는 제스처와 함께 사용 하는 경우 제대로 작동 하지 않을 수 있습니다.Drag and drop may not work well when used with Motion Controllers, gamepads or gestures. 응용 프로그램이 끌어서 놓기를 크게 좌우 하는 경우 개체를 새 위치로 이동할지 여부를 확인 하는 대화 상자를 표시 하는 것과 같이이 작업을 지 원하는 대체 방법을 제공 해야 합니다.If your application depends heavily on drag and drop, you will need to provide an alternative method of supporting this action, such as presenting a dialog confirming if objects to be moved to a new location.

  • 사운드가 어떻게 변경 될 수 있는지 알아 두어야 합니다.Be aware how sound changes. 앱에서 음향 효과를 생성 하는 경우에는 가상 세계에서 소리의 소스가 앱의 고정 된 위치에 표시 됩니다.If your app generates sound effects, the source of the sound will appear to be your app's pinned location in the virtual world. 사용자가 앱에서 벗어나면 소리가 감소 합니다.As the user moves away from the app, sound will diminish. 자세한 내용은 공간 사운드 를 참조 하세요.See Spatial sound for more information.

  • 보기의 필드를 고려 하 고 affordances를 제공 합니다.Consider the field of view and provide affordances. 모든 장치가 컴퓨터 모니터로 보기의 필드를 크게 제공 하는 것은 아닙니다.Not every device will provide as large a field of view as a computer monitor. 자세한 내용은 Holographic frame 을 참조 하십시오.See Holographic frame for complete details. 또한 사용자가 실행 중인 앱에서 멀리 떨어져 있을 수 있습니다.Furthermore, the user may be some distance away from a running app. 즉, 전 세계의 다른 위치에 있는 벽에 고정 된 앱이 표시 될 수 있습니다 (실제 또는 가상).That is, the app may appear pinned to the wall at a different location in the world (real or virtual). 앱에서 사용자에 게 주의가 필요 하거나 전체 보기가 항상 표시 되지 않는 것을 고려해 야 할 수 있습니다.Your app may need to get the users attention, or take into account that the entire view is not visible at all times. 알림 메시지를 사용할 수 있지만 사용자의 주의가 가능한 또 다른 방법은 소리 또는 음성 경고를 생성 하는 것입니다.Toast notifications are available, but another way to get the user's attention might be to generate a sound or speech alert.

  • 사용자가 가상 환경에서 이동 하 고 크기를 조정할 수 있도록 2D 앱에 앱 표시줄이 자동으로 부여 됩니다.A 2D app is automatically given an app bar to allow the user to move and scale them in the virtual environment. 뷰를 세로로 크기 조정 하거나 크기를 조정 하 여 동일한 가로 세로 비율을 유지할 수 있습니다.The views can be resized vertically, or resized maintaining the same aspect ratio.

2D 앱 디자인 고려 사항: UI/UX2D app design considerations: UI/UX

  • 탐색 보기와 같은 흐름 디자인 시스템 을 구현 하는 XAML 컨트롤 및 아크릴 All Work와 같은 효과는 2d 혼합 현실 앱에서 특히 잘 작동 합니다.XAML controls which implement the Fluent Design System such as the Navigation view, and effects such as Acrylic all work especially well in 2D Mixed Reality apps.

  • 혼합 현실 장치에서 또는 혼합 현실 시뮬레이터에서 앱 텍스트와 windows 크기를 테스트 합니다.Test your app's text and windows size in a Mixed Reality device, or at the very least in the Mixed Reality Simulator. 앱에는 기본 windows 크기가 853x480 유효 픽셀로 포함 됩니다.Your app will have a default windows size of 853x480 effective pixels. 더 큰 글꼴 크기 (약 32의 포인트 크기 권장)를 사용 하 고 Hololens 용 기존 유니버설 앱의 업데이트를 읽습니다.Use larger font sizes (a point size of approximately 32 is recommended), and read Updating your existing universal app for Hololens. 문서 입력 체계 는이 항목에 대해 자세히 설명 합니다.The article Typography covers this topic in detail. Visual Studio에서 작업 하는 경우 올바른 배율 및 차원이 포함 된 보기를 제공 하는 57 "HoloLens 2D 앱에 대 한 XAML 디자인 편집기 설정이 있습니다.When working in Visual Studio, there is a XAML design editor setting for a 57" HoloLens 2D App which provides a view with the correct scale and dimensions.

혼합 현실 앱에 표시 되는 텍스트는 커야 합니다.

  • 사용자의 응시는 마우스입니다.Your gaze is your mouse. 사용자가 무언가를 살펴보면 터치 가리키기 이벤트로 작동 하므로 단순히 개체를 살펴보면 실수로 팝업 또는 기타 원치 않는 상호 작용을 트리거할 수 있습니다.When the user looks at something, it acts as a touch hover event, so simply looking at an object may trigger an inadvertent pop-up or other unwanted interaction. 앱이 혼합 현실에서 현재 실행 되 고 있는지 검색 하 고이 동작을 변경 해야 할 수 있습니다.You may need to detect if the app is currently running in Mixed Reality and change this behavior. 아래의 런타임 지원을 참조 하세요.See Runtime support, below.

  • 사용자가 동작 컨트롤러를 사용 하 여 요소 또는 요소를 gazes 터치 가리키기 이벤트가 발생 합니다.When a user gazes towards something or points with a motion controller, a touch hover event will occur. 이는 Pointerpoint터치이지만 IsInContactfalsepointerpoint 로 구성 됩니다.This consists of a PointerPoint where PointerType is Touch, but IsInContact is false. 특정 형식의 커밋이 발생 하는 경우 (예를 들어, clicker 장치를 누르고, 이동 컨트롤러 트리거를 누르거나, 음성 인식 헤드 "선택"), IsInContactTruepointerpoint 를 사용 하 여 터치 누름 이 발생 합니다.When some form of commit occurs (for example, gamepad A button is pressed, a clicker device is pressed, a motion controller trigger pressed, or voice recognition heads "Select"), a touch press occurs, with the PointerPoint having IsInContact become true. 이러한 입력 이벤트에 대 한 자세한 내용은 터치 조작 을 참조 하세요.See Touch interactions for more information on these input events.

  • 마우스로 가리킬 때와는 정확 하지 않습니다.Remember, gaze is not as accurate as mouse pointing. 마우스 대상 또는 단추가 작을수록 사용자에 게 문제가 발생할 수 있으므로 컨트롤의 크기를 적절 하 게 조정 합니다.Smaller mouse targets or buttons may cause frustration for your users, so resize controls accordingly. 터치를 위해 설계 된 경우 혼합 현실에서 작동 하지만 런타임에 일부 단추를 확대 하도록 결정할 수도 있습니다.If they are designed for touch, they will work in Mixed Reality, but you may decide to enlarge some buttons at runtime. Hololens 용 기존 유니버설 앱 업데이트를 참조 하세요.See Updating your existing universal app for Hololens.

  • HoloLens는 검정을 밝은 색으로 정의 합니다.The HoloLens defines the color black as the absence of light. 단지 렌더링 되지 않으므로 "실제 세계"를 통해 표시 될 수 있습니다.It's simply not rendered, allowing the "real world" so show through. 응용 프로그램에서 혼동을 일으키는 경우 검정색을 사용 하면 안 됩니다.Your application should not use black if this is would cause confusion. 혼합 현실 헤드셋에서 검은색은 검은색입니다.In a Mixed Reality headset, black is black.

  • HoloLens는 앱에서 색 테마를 지원 하지 않으며, 사용자를 위한 최상의 환경을 보장 하기 위해 기본적으로 blue로 설정 됩니다.The HoloLens does not support color themes in apps, and defaults to blue to ensure the best experience for users. 색을 선택 하는 방법에 대 한 자세한 내용은 혼합 현실 디자인에서 색 및 재질 사용에 대해 설명 하는 이 항목 을 참조 하세요.For more advice about selecting colors, you should consult this topic which discusses the use of color and material in Mixed Reality designs.

고려할 기타 사항Other points to consider

  • 바탕 화면 브리지가 기존 (Win32) 데스크톱 앱을 Windows 10 및 Microsoft Store로 가져오는 데 도움이 되지만,이 시점에서 HoloLens 또는 혼합 현실에서 실행 되는 앱을 만들 수는 없습니다.Although the Desktop Bridge can help bring existing (Win32) desktop apps to Windows 10 and the Microsoft Store, it cannot create apps that run on HoloLens or in Mixed Reality at this time.

런타임 지원Runtime support

앱이 런타임에 혼합 현실 장치에서 실행 되 고 있는지 확인할 수 있으며, 컨트롤의 크기를 조정할 수 있는 기회를 사용 하거나 다른 방법으로 헤드셋에서 사용할 앱을 최적화할 수 있습니다.It is possible for your app to determine if it is running on a Mixed Reality device at runtime, and use this as an opportunity to resize controls or in other ways optimize the app for use on a headset.

다음은 응용 프로그램이 혼합 된 현실 장치에서 사용 되는 경우에만 XAML TextBlock 컨트롤 내에서 텍스트의 크기를 조정 하는 짧은 코드 부분입니다.Here's a short piece of code that resizes the text inside a XAML TextBlock control only if the app is being used on a Mixed Reality device.


bool isViewingInMR = Windows.ApplicationModel.Preview.Holographic.HolographicApplicationPreview.IsCurrentViewPresentedOnHolographicDisplay();

            if (isViewingInMR)
            {
                // Running on headset, resize the XAML text
                textBlock.Text = "I'm running in Mixed Reality!";
                textBlock.FontSize = 32;
            }
            else
            {
                // Running on desktop
                textBlock.Text = "I'm running on the desktop.";
                textBlock.FontSize = 14;
            }