Windows Mixed Reality용 2D UWP 앱 업데이트Updating 2D UWP apps for Windows Mixed Reality

Windows Mixed Reality를 사용 하면 사용자에 게 실제 및 디지털 세계에 있는 것 처럼 holograms 표시 됩니다.Windows Mixed Reality lets your users see holograms as if they're right around them in the physical and digital world. 핵심으로, 몰입 형 헤드셋 액세서리를 연결 하는 HoloLens와 데스크톱 Pc는 모두 Windows 10 장치입니다.At its core, both HoloLens and the Desktop PCs you attach immersive headset accessories to are Windows 10 devices. 저장소에서 2D 앱으로 거의 모든 유니버설 Windows 플랫폼 (UWP) 앱을 실행할 수 있습니다.You're able to run almost all Universal Windows Platform (UWP) apps in the Store as 2D apps.

혼합 현실 용 2D UWP 앱 만들기Creating a 2D UWP app for mixed reality

2D 앱을 혼합 현실 헤드셋으로 가져오는 첫 번째 단계는 사용자의 데스크톱 모니터에서 표준 2D 앱으로 앱을 실행 하는 것입니다.The first step to bringing a 2D app to mixed reality headsets is to get your app running as a standard 2D app on your desktop monitor.

새 2D UWP 앱 빌드Building a new 2D UWP app

혼합 현실 용 새 2D 앱을 빌드하려면 표준 UWP (2D 유니버설 Windows 플랫폼) 앱을 빌드합니다.To build a new 2D app for mixed reality, you build a standard 2D Universal Windows Platform (UWP) app. 해당 앱에 대 한 다른 앱 변경은 필요 하지 않으므로 혼합 현실에서 슬레이트로 실행 됩니다.No other app changes are required for that app to then run as a slate in mixed reality.

2D UWP 앱 빌드를 시작 하려면 첫 번째 앱 만들기 문서를 확인 하세요.To get started building a 2D UWP app, check out the Create your first app article.

기존 2D 스토어 앱을 UWP로 가져오기Bringing an existing 2D Store app to UWP

저장소에 2D Windows 앱이 이미 있는 경우 UWP (Windows 10 유니버설 Windows 플랫폼)를 대상으로 하는지 확인 합니다.If you already have a 2D Windows app in the Store, make sure it's targeting the Windows 10 Universal Windows Platform (UWP). 현재 스토어 앱에서 발생할 수 있는 모든 잠재적인 시작 지점은 다음과 같습니다.Here are all the potential starting points you may have with your Store app today:

시작 지점Starting Point AppX 매니페스트 플랫폼 대상AppX Manifest Platform Target 이 유니버설를 만드는 방법How to make this Universal?
Windows Phone(Silverlight)Windows Phone (Silverlight) Silverlight 응용 프로그램 매니페스트Silverlight App Manifest WinRT로 마이그레이션Migrate to WinRT
Windows Phone 8.1 범용Windows Phone 8.1 Universal 8.1 플랫폼 대상을 포함 하지 않는 AppX 매니페스트8.1 AppX Manifest that Doesn't Include Platform Target 앱을 유니버설 Windows 플랫폼로 마이그레이션Migrate your app to the Universal Windows Platform
Windows 스토어 8Windows Store 8 플랫폼 대상이 포함 되지 않은 8 개의 AppX 매니페스트8 AppX Manifest that Doesn't Include Platform Target 앱을 유니버설 Windows 플랫폼로 마이그레이션Migrate your app to the Universal Windows Platform
Windows 스토어 8.1 유니버설Windows Store 8.1 Universal 8.1 플랫폼 대상을 포함 하지 않는 AppX 매니페스트8.1 AppX Manifest that Doesn't Include Platform Target 앱을 유니버설 Windows 플랫폼로 마이그레이션Migrate your app to the Universal Windows Platform

현재 2D Unity 앱이 PC, Mac & Linux 독립 실행형 빌드 대상에서 Win32 앱으로 빌드된 경우 혼합 현실의 유니버설 Windows 플랫폼 빌드 대상으로 전환 합니다.If you have a 2D Unity app today built as a Win32 app on the PC, Mac & Linux Standalone build target, switch to the Universal Windows Platform build target for mixed reality.

아래Holographic 장치 제품군을 사용 하 여 HoloLens로 특별히 앱을 제한할 수 있는 방법에 대해 설명 합니다.We'll talk about ways that you can restrict your app specifically to HoloLens using the Windows.Holographic device family below.

Windows Mixed Reality 몰입 형 헤드셋에서 2D 앱 실행Run your 2D app in a Windows Mixed Reality immersive headset

데스크톱 컴퓨터에 2D 앱을 배포 하 고 모니터에서 사용해 본 적이 있다면 몰입 형 데스크톱 헤드셋에서 사용해 볼 준비가 된 것입니다.If you've deployed your 2D app to a desktop machine and tried it out on your monitor, you're ready to try it out on an immersive desktop headset!

혼합 현실 헤드셋 내의 시작 메뉴로 이동 하 여 해당 위치에서 앱을 시작 하면 됩니다.Just go to the Start menu within the mixed reality headset and launch the app from there. Desktop shell과 holographic shell은 모두 동일한 UWP 앱 집합을 공유 하므로 Visual Studio에서 배포한 앱은 이미 있어야 합니다.The desktop shell and the holographic shell both share the same set of UWP apps, and so the app should already be present once you've deployed from Visual Studio.

몰입 형 헤드셋 및 HoloLens를 모두 대상으로 지정Targeting both immersive headsets and HoloLens

축하합니다!Congratulations! 이제 앱이 UWP (Windows 10 유니버설 Windows 플랫폼)를 사용 하 고 있습니다.Your app is now using the Windows 10 Universal Windows Platform (UWP).

이제 앱이 데스크톱, 모바일, Xbox, Windows Mixed Reality 모던 헤드셋, HoloLens 및 향후 Windows 장치와 같은 오늘날의 Windows 장치에서 실행 될 수 있습니다.Your app is now capable of running on today's Windows devices like Desktop, Mobile, Xbox, Windows Mixed Reality immersive headsets, HoloLens, and future Windows devices. 그러나 실제로 이러한 모든 장치를 대상으로 하려면 앱이 Windows를 대상으로 하는지 확인 해야 합니다.However, to actually target all of those devices, you will need to ensure your app is targeting the Windows. 유니버설 장치 제품군.Universal device family.

장치 패밀리를 Windows로 변경Change your device family to Windows.Universal

이제 Windows 10 UWP 앱을 HoloLens에서 실행할 수 있도록 AppX 매니페스트로 이동 하겠습니다.Now let's jump into your AppX manifest to ensure your Windows 10 UWP app can run on HoloLens:

  • Visual Studio 를 사용 하 여 앱의 솔루션 파일을 열고 앱 패키지 매니페스트로 이동 합니다.Open your app's solution file with Visual Studio and navigate to the app package manifest
  • 솔루션의 appxmanifest.xml 파일을 마우스 오른쪽 단추로 클릭 하 고 코드 보기 로 이동 합니다 .Right-click the Package.appxmanifest file in your Solution and go to View Code
    솔루션 탐색기의 appxmanifest.xmlpackage.appxmanifest in Solution Explorer
  • 대상 플랫폼이 Windows 인지 확인 합니다.Ensure your Target Platform is Windows. 종속성 섹션의 UniversalUniversal in the dependencies section
    <Dependencies>
      <TargetDeviceFamily Name="Windows.Universal" MinVersion="10.0.10240.0" MaxVersionTested="10.0.10586.0" />
    </Dependencies>
    
  • Save!Save!

개발 환경에 Visual Studio를 사용 하지 않는 경우 사용자가 선택한 텍스트 편집기에서 AppXManifest.xml 를 열어 Windows Universal targetdevicefamily 를 대상으로 하는지 확인할 수 있습니다.If you don't use Visual Studio for your development environment, you can open AppXManifest.xml in the text editor of your choice to ensure you're targeting the Windows.Universal TargetDeviceFamily.

HoloLens 에뮬레이터에서 실행Run in the HoloLens Emulator

이제 UWP 앱이 "Windows 유니버설"를 대상으로 하기 때문에 앱을 빌드하고 HoloLens 에뮬레이터에서 실행 하겠습니다.Now that your UWP app targets "Windows.Universal", let's build your app and run it in the HoloLens Emulator.

  • HoloLens 에뮬레이터를 설치했는지 확인 합니다.Make sure you're installed the HoloLens Emulator.

  • Visual Studio에서 앱에 대 한 x86 빌드 구성을 선택 합니다.In Visual Studio, select the x86 build configuration for your app

    Visual Studio의 x86 빌드 구성

  • 배포 대상 드롭다운 메뉴에서 HoloLens 에뮬레이터 를 선택합니다.Select HoloLens Emulator in the deployment target drop-down menu

    배포 대상 목록의 HoloLens 에뮬레이터

  • 디버그 > 디버깅 시작 을 선택 하 여 앱을 배포 하 고 디버깅을 시작 합니다.Select Debug > Start Debugging to deploy your app and start debugging.

  • 에뮬레이터가 시작 되 고 앱이 실행 됩니다.The emulator will start and run your app.

  • 키보드, 마우스 및 Xbox 컨트롤러를 사용 하 여 응용 프로그램을 시작할 수 있습니다.With a keyboard, mouse, and an Xbox controller, place your app in the world to launch it.

    UWP 샘플로 로드 된 HoloLens 에뮬레이터

다음 단계Next steps

이 시점에서 다음 두 가지 중 하나가 발생할 수 있습니다.At this point, one of two things can happen:

  1. 앱은 에뮬레이터에 배치 된 후 시작을 표시 하 고 실행을 시작 합니다.Your app will show its splash and start running after it's placed in the Emulator! 놀랍습니다.Awesome!
  2. 또는 2D 홀로그램에 대 한 로딩 애니메이션이 표시 되 면 로드는 중지 되 고 앱이 시작 화면에 표시 됩니다.Or after you see a loading animation for a 2D hologram, loading will stop and you'll just see your app at its splash screen. 즉, 오류가 발생 하 여 혼합 현실에서 앱을 개발 하는 방법을 이해 하는 데 더 많은 조사가 필요 합니다.This means that something went wrong and it will take more investigation to understand how to bring your app to life in Mixed Reality.

UWP에서 시작 하 여 UWP 앱을 중지 하는 가능한 문제에 대 한 루트에 가져오려면를 디버깅 해야 합니다.You'll need to debug to get to the root of possible issues that are stopping your UWP app from starting on HoloLens.

디버거에서 UWP 앱 실행Running your UWP app in the debugger

이러한 단계는 Visual Studio 디버거를 사용 하 여 UWP 앱을 디버깅 하는 과정을 안내 합니다.These steps will walk you through debugging your UWP app using the Visual Studio debugger.

  • 아직 수행 하지 않은 경우 Visual Studio에서 솔루션을 엽니다.If you haven't already done so, open your solution in Visual Studio. 대상을 HoloLens 에뮬레이터 로 변경 하 고 빌드 구성을 x 86 으로 변경 합니다.Change the target to the HoloLens Emulator and the build configuration to x86.
  • 디버그 > 디버깅 시작 을 선택 하 여 앱을 배포 하 고 디버깅을 시작 합니다.Select Debug > Start Debugging to deploy your app and start debugging.
  • 마우스, 키보드 또는 Xbox 컨트롤러를 사용 하 여 응용 프로그램을 전 세계에 두십시오.Place the app in the world with your mouse, keyboard, or Xbox controller.
  • 이제 Visual Studio가 앱 코드에서 중단 됩니다.Visual Studio should now break somewhere in your app code.
    • 처리 되지 않은 오류로 인해 앱이 즉시 중단 되거나 중단 되지 않는 경우 앱의 핵심 기능에 대 한 테스트 통과를 통해 모든 것이 실행 중이 고 작동 하는지 확인 합니다.If your app doesn't immediately crash or break into the debugger because of an unhandled error, then go through a test pass of the core features of your app to make sure everything is running and functional. 아래 그림과 같은 오류가 표시 될 수 있습니다 (처리 중인 내부 예외).You may see errors like pictured below (internal exceptions that are being handled). 앱 환경에 영향을 주는 내부 오류가 발생 하지 않도록 하려면 자동화 된 테스트 및 단위 테스트를 실행 하 여 모든 항목이 예상 대로 작동 하는지 확인 합니다.To ensure you don't miss internal errors that impact the experience of your app, run through your automated tests and unit tests to make sure everything behaves as expected.

시스템 예외를 보여 주는 UWP 샘플로 로드 된 HoloLens 에뮬레이터

UI 업데이트Update your UI

이제 UWP 앱이 모던 헤드셋 및 HoloLens에서 2D 홀로그램로 실행 되므로 멋진 모습을 확인할 수 있습니다.Now that your UWP app is running on immersive headsets and HoloLens as a 2D hologram, next we'll make sure it looks beautiful. 다음과 같은 몇 가지 사항을 고려해야 합니다.Here are some things to consider:

  • Windows Mixed Reality는 고정 해상도로 모든 2D 앱을 실행 하 고 853x480 유효 픽셀에 해당 하는 DPI를 실행 합니다.Windows Mixed Reality will run all 2D apps at a fixed resolution and DPI that equates to 853x480 effective pixels. 설계가이 규모에서 구체화 되어야 하는 경우 아래 디자인 지침을 검토 하 여 HoloLens 및 몰입 형 헤드셋의 경험을 향상 시키는 것이 좋습니다.Consider if your design needs refinement at this scale and review the design guidance below to improve your experience on HoloLens and immersive headsets.
  • Windows Mixed Reality는 2d 라이브 타일을 지원 하지 않습니다 .Windows Mixed Reality doesn't support 2D live tiles. 핵심 기능에서 라이브 타일에 대 한 정보를 표시 하는 경우 해당 정보를 다시 앱으로 이동 하거나 3d 앱 다운로드를 탐색 하는 것이 좋습니다.If your core functionality is showing information on a live tile, consider moving that information back into your app or explore 3D app launchers.

2D 앱 보기 해상도 및 배율 인수2D app view resolution and scale factor

반응 형 디자인에서

Windows 10은 모든 시각적 디자인을 실제 화면 픽셀에서 유효 픽셀로 이동 합니다.Windows 10 moves all visual design from real screen pixels to effective pixels. 즉, 개발자는 효율적인 픽셀에 대 한 Windows 10 인적 인터페이스 지침에 따라 UI를 디자인 하 고, Windows 크기 조정을 사용 하면 장치, 해상도, DPI 등의 유용성을 위한 적절 한 픽셀을 적절 한 크기로 유지할 수 있습니다.That means, developers design their UI following the Windows 10 Human Interface Guidelines for effective pixels, and Windows scaling ensures those effective pixels are the right size for usability across devices, resolutions, DPI, and so on. 자세한 내용은 MSDN의이 유용한 내용과이 빌드 프레젠테이션 을 참조 하십시오.See this great read on MSDN and this BUILD presentation for more information.

다양 한 거리에서 전 세계에 앱을 제공 하는 고유한 기능을 사용 하는 경우에도 대화형/제스처를 사용 하 여 최상의 가독성을 얻을 수 있도록 TV와 유사한 거리를 표시 하는 것이 좋습니다.Even with the unique ability to place apps in your world at a range of distances, TV-like viewing distances are recommended to produce the best readability and interaction with gaze/gesture. 이로 인해 Mixed Reality 홈의 가상 슬레이트는 다음 위치에 플랫 UWP 보기를 표시 합니다.Because of that, a virtual slate in the Mixed Reality Home will display your flat UWP view at:

1280x720, 150% DPI (853x480 유효 픽셀)1280x720, 150%DPI (853x480 effective pixels)

이 해상도에는 다음과 같은 여러 가지 이점이 있습니다.This resolution has several advantages:

  • 이 유효 픽셀 레이아웃은 태블릿 또는 소형 데스크톱과 동일한 정보 밀도를 가집니다.This effective pixel layout will have about the same information density as a tablet or small desktop.
  • Xbox One에서 실행 되는 UWP 앱의 고정 DPI 및 유효 픽셀과 일치 하므로 장치 간에 원활한 환경을 사용할 수 있습니다.It matches the fixed DPI and effective pixels for UWP apps running on Xbox One, enabling seamless experiences across devices.
  • 이 크기는 전 세계의 앱에 대 한 운영 거리 범위에서 크기를 조정할 때 적절 하 게 보입니다.This size looks good when scaled across our range of operating distances for apps in the world.

2D 앱 뷰 인터페이스 디자인 모범 사례2D app view interface design best practices

시겠습니까Do:

  • 스타일, 글꼴 크기 및 단추 크기에 대 한 Windows 10 휴먼 인터페이스 지침 (gg) 을 따릅니다.Follow the Windows 10 Human Interface Guidelines (HIG) for styles, font sizes and button sizes. HoloLens는 앱이 호환 되는 앱 패턴, 읽을 수 있는 텍스트 크기 및 적절 한 적중 대상 크기 조정 작업을 수행 하도록 합니다.HoloLens will do the work to ensure your app will have compatible app patterns, readable text sizes, and appropriate hit target sizing.
  • UI가 반응 형 디자인 에 대 한 모범 사례를 준수 하는지 확인 하 여 HoloLens의 고유한 해상도 및 DPI를 가장 효과적으로 확인 합니다.Ensure your UI follows best practices for responsive design to look best at HoloLens's unique resolution and DPI.
  • Windows의 "light" 색 테마 권장 사항을 사용 합니다.Use the "light" color theme recommendations from Windows.

안 함:Don't:

  • 혼합 현실에서는 사용자가 헤드셋에서 친숙 한 경험을 사용할 수 있도록 UI를 너무 크게 변경 합니다.Change your UI too drastically when in mixed reality, to ensure users have a familiar experience in and out of the headset.

앱 모델 이해Understand the app model

혼합 현실 용 앱 모델 은 많은 앱이 함께 살고 있는 혼합 현실 홈을 사용 하도록 설계 되었습니다.The app model for mixed reality is designed to use the Mixed Reality Home, where many apps live together. 이는 여러 개의 2D 앱을 한 번에 실행 하는 데스크톱에 해당 하는 혼합 현실 이라고 생각 하면 됩니다.Think of this as the mixed reality equivalent of the desktop, where you run many 2D apps at once. 앱의 수명 주기, 타일 및 앱의 다른 주요 기능에 영향을 미칩니다.This has implications on app life cycle, Tiles, and other key features of your app.

앱 바 및 뒤로 단추App bar and back button

2D 보기는 해당 콘텐츠 위의 앱 표시줄로 데코 레이트 됩니다.2D views are decorated with an app bar above their content. 앱 바에는 앱 별 개인 설정의 두 지점이 있습니다.The app bar has two points of app-specific personalization:

제목: 응용 프로그램 인스턴스와 연결 된 타일의 displayname 을 표시 합니다.Title: displays the displayname of the Tile associated with the app instance

뒤로 단추: 누를 때 요청 된 이벤트를 발생 시킵니다.Back Button: raises the BackRequested event when pressed. 뒤로 단추 표시 유형은 Systemnavigationmanager. AppViewBackButtonVisibility 에 의해 제어 됩니다.Back Button visibility is controlled by SystemNavigationManager.AppViewBackButtonVisibility.

2D 앱 보기의 앱 바 UIApp bar UI in 2D app view
2D 앱 보기의 앱 바 UIApp bar UI in 2D app view

2D 앱 디자인 테스트Test your 2D app's design

앱을 테스트 하 여 텍스트를 읽을 수 있고, 단추가 가능, 전체 앱이 올바른지 확인 하는 것이 중요 합니다.It's important to test your app to make sure the text is readable, the buttons are targetable, and the overall app looks correct. 해상도가 1280x720%로 설정 된 데스크톱 헤드셋, HoloLens, 에뮬레이터 또는 터치 장치를 테스트할 수 있습니다 @150 .You can test on a desktop headset, a HoloLens, an emulator, or a touch device with resolution set to 1280x720 @150%.

새 입력 가능성New input possibilities

HoloLens는 고급 깊이 센서를 사용 하 여 전 세계를 보고 사용자를 확인 합니다.HoloLens uses advanced depth sensors to see the world and see users. 이를 통해 블 룸공중 탭과 같은 고급 손 제스처를 사용할 수 있습니다.This enables advanced hand gestures like bloom and air-tap. 또한 강력한 마이크는 음성 환경을사용할 수 있습니다.Powerful microphones also enable voice experiences.

데스크톱 헤드셋을 사용 하면 사용자가 동작 컨트롤러를 사용 하 여 앱을 가리키고 조치를 취할 수 있습니다.With Desktop headsets, users can use motion controllers to point at apps and take action. 또한 사용자는 게임 패드를 사용 하 여 개체를 해당 응시로 대상으로 지정할 수 있습니다.They can also use a gamepad, targeting objects with their gaze.

Windows는 UWP 앱에 대해 이러한 복잡성을 모두 처리 하 고, 응시, 제스처, 음성 및 동작 컨트롤러 입력을 입력 메커니즘을 추상화 하는 포인터 이벤트 로 변환 합니다.Windows takes care of all of this complexity for UWP apps, translating your gaze, gestures, voice, and motion controller input to pointer events that abstract away the input mechanism. 예를 들어 사용자가 손 모양으로 마우스를 이동 하거나 이동 컨트롤러에서 Select 트리거를 끌어올 수 있지만, 2D 응용 프로그램은 입력의 출처를 알 필요가 없습니다. 즉, 터치 스크린에서와 같이 2D touch press만 표시 됩니다.For example, a user may have done an air-tap with their hand or pulled the Select trigger on a motion controller, but 2D applications don't need to know where the input came from - they just see a 2D touch press, as if on a touchscreen.

UWP 앱을 HoloLens로 가져올 때 입력에 대해 알고 있어야 하는 개략적인 개념/시나리오는 다음과 같습니다.Here are the high-level concepts/scenarios you should understand for input when bringing your UWP app to HoloLens:

  • 응시 는 호버 이벤트로 바뀌고,이 이벤트는 예기치 않게 메뉴, flyouts 또는 기타 사용자 인터페이스 요소를 앱 주위에 gazing 하 여 팝업 할 수 있습니다.Gaze turns into hover events, which can unexpectedly trigger menus, flyouts or other user interface elements to pop up just by gazing around your app.
  • 응시는 마우스 입력 만큼 정확 하지 않습니다.Gaze isn't as precise as mouse input. 터치 편한 모바일 응용 프로그램과 마찬가지로 HoloLens에 적절 한 크기의 적중 대상을 사용 합니다.Use appropriately sized hit targets for HoloLens, similar to touch-friendly mobile applications. 앱의 가장자리 근처에 있는 작은 요소는 특히 상호 작용 하기가 어렵습니다.Small elements near the edges of the app are especially hard to interact with.
  • 사용자는 스크롤에서 끌어서 두 손가락 이동으로 이동 하도록 입력 모드를 전환 해야 합니다.Users must switch input modes to go from scrolling to dragging to two finger panning. 터치 입력 용으로 설계 된 앱의 경우 두 손가락 이동 후에 주요 기능이 잠기지 않도록 합니다.If your app was designed for touch input, consider ensuring that no major functionality is locked behind two finger panning. 그럴 경우 두 손가락 이동을 시작할 수 있는 단추와 같은 대체 입력 메커니즘을 고려해 야 합니다.If so, consider having alternative input mechanisms like buttons that can start two finger panning. 예를 들어 맵 앱은 두 손가락 패닝으로 확대할 수 있지만 한 번 클릭으로 동일한 확대/축소 상호 작용을 시뮬레이트하는 더하기, 빼기 및 회전 단추가 있습니다.For example, the Maps app can zoom with two finger panning but has a plus, minus, and rotate button to simulate the same zoom interactions with single clicks.

음성 입력 은 혼합 현실 환경의 중요 한 부분입니다.Voice input is a critical part of the mixed reality experience. 헤드셋을 사용할 때 Windows 10 Cortana를 켜는 모든 음성 Api를 사용 하도록 설정 했습니다.We've enabled all of the speech APIs that are in Windows 10 powering Cortana when using a headset.

유니버설 앱 게시 및 유지 관리Publish and Maintain your Universal app

앱이 실행 되 고 있으면 앱을 패키지 하 여 Microsoft Store에 제출합니다.Once your app is up and running, package your app to submit it to the Microsoft Store.

참고 항목See also