WinUI 3 앱을 통해 여러 플랫폼을 대상으로 지정하는 방법

Hello World WinUI 3 스타터 앱을 만든 후에는 단일 코드베이스로 더 많은 사용자에게 도달하는 방법이 궁금할 수 있습니다. 이 방법에서는 Uno 플랫폼으로 기존 애플리케이션의 범위를 확장하여 네이티브 모바일, 웹, 데스크톱에서 비즈니스 논리와 UI 계층을 재사용할 수 있게 합니다.

필수 조건

• Visual Studio 2022 17.4 이상
• 개발 컴퓨터 설정(WinUI 시작 참조)
• ASP.NET 및 웹 개발 워크로드(WebAssembly 개발용)
• .NET 다중 플랫폼 앱 UI 개발이 설치되었습니다(iOS, Android, Mac Catalyst 개발용).
• .NET 데스크톱 개발 설치됨(Gtk, Wpf 및 Linux Framebuffer 개발용)

환경 마무리

1. 명령줄 프롬프트, Windows 터미널(설치된 경우)을 열거나 시작 메뉴에서 명령 프롬프트 또는 Windows Powershell을 엽니다.

2. uno-check 도구를 설치하거나 업데이트합니다.

   • 다음 명령을 사용합니다.

     dotnet tool install -g uno.check
     

   • 이전에 이전 버전을 이미 설치한 경우 도구를 업데이트하려면 다음을 수행합니다.

     dotnet tool update -g uno.check
     

3. 다음 명령을 사용하여 도구를 실행합니다.

   uno-check
   

4. 도구에 표시된 지침을 따릅니다. 시스템을 수정해야 하기 때문에 높은 권한을 요청하는 메시지가 나타날 수 있습니다.

Uno 플랫폼 솔루션 템플릿 설치

Visual Studio를 시작한 다음 Continue without code를 클릭합니다. 메뉴 모음에서 Extensions ->Manage Extensions를 클릭합니다.

확장 프로그램 관리자에서 온라인 노드를 확장하고 Uno, 을(를) 검색하여 Uno Platform 확장 프로그램을 설치하거나 Visual Studio 마켓플레이스에서 다운로드한 다음 Visual Studio를 다시 시작합니다.

애플리케이션 만들기

이제 다중 플랫폼 애플리케이션을 만들 준비가 되었으므로 새로운 Uno Platform 애플리케이션을 만들 것입니다. 이전 자습서의 Hello World WinUI 3 프로젝트에서 다중 플랫폼 프로젝트로 XAML 코드를 복사합니다. 이는 Uno 플랫폼을 통해 기존 코드베이스를 재사용할 수 있기 때문에 가능합니다. 각 플랫폼에서 제공하는 OS API에 의존하는 기능의 경우 시간이 지남에 따라 쉽게 작동하도록 할 수 있습니다. 이 방식은 다른 플랫폼으로 포팅하려는 기존 애플리케이션이 있는 경우 특히 유용합니다.

머지않아 이 방식의 이점을 활용할 수 있게 될 것입니다. 익숙한 XAML 특성과 이미 보유하고 있는 코드베이스를 사용하여 더 많은 플랫폼을 대상으로 할 수 있기 때문입니다.

Visual Studio를 열고 File>New>Project를 통해 새 프로젝트를 만듭니다.

Uno를 검색하고 Uno 플랫폼 앱 프로젝트 템플릿을 선택합니다.

프로젝트 이름, 솔루션 이름 및 디렉터리를 지정합니다. 이 예시에서 Hello World MultiPlatform 프로젝트는 Hello World MultiPlatform 솔루션에 속하며 C:\Projects에 저장됩니다.

Visual Studio의 시작 페이지에서 Uno 플랫폼 앱 형식을 사용하여 새로운 C# 솔루션을 만듭니다. 이전 자습서의 코드와 충돌하지 않도록 이 솔루션에 "Hello World Uno"라는 다른 이름을 지정합니다.

이제 Hello World 애플리케이션을 다중 플랫폼으로 가져갈 기본 템플릿을 선택합니다. Uno 플랫폼 앱 템플릿에는 빈 솔루션이나 Uno.Material 및 Uno.Toolkit 라이브러리에 대한 참조가 포함된 기본 구성을 빠르게 시작할 수 있는 두 가지 사전 설정 옵션이 함께 제공됩니다. 기본 구성에는 종속성 주입, 구성, 탐색 및 로깅에 사용되는 Uno.Extensions도 포함되어 있으며, MVVM 대신 MVUX를 사용하므로 실제 애플리케이션을 빠르게 빌드하는 데 훌륭한 출발점이 됩니다.

작업을 단순하게 유지하려면 공백 사전 설정을 선택합니다. 그런 다음 만들기 단추를 클릭합니다. 프로젝트가 만들어지고 해당 종속성이 복원될 때까지 기다립니다.

편집기 상단의 배너에 프로젝트를 다시 로드하라는 메시지가 표시되면 프로젝트 다시 로드: 를 클릭합니다.

앱 빌드 중...

이제 멀티 플랫폼 WinUI 애플리케이션의 기능적 출발점을 생성했으므로 이전 자습서에서 설명한 Hello World WinUI 3 프로젝트에서 표시를 여기에 복사할 수 있습니다.

솔루션 탐색기에 다음과 같은 기본 파일 구조가 표시됩니다.

Visual Studio에서 WinUI 3 프로젝트가 열려 있는지 확인한 후 WinUI 3 프로젝트의 MainWindow.xaml에서 하위 XAML 요소를 Uno Platform 프로젝트의 MainPage.xaml 파일로 복사합니다. MainPage 뷰 XAML은 다음과 같습니다.

<Page x:Class="HelloWorld.MainPage"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:local="using:HelloWorld"
   xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
   xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
   mc:Ignorable="d"
   Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

      <!-- Below is the code you copied from MainWindow: -->
      <StackPanel Orientation="Horizontal"
                  HorizontalAlignment="Center"
                  VerticalAlignment="Center">
          <TextBlock x:Name="myText" 
                     Text="Hello world!"
                     Foreground="Red"/>
      </StackPanel>
</Page>

HelloWorld.Windows 대상을 시작합니다. 이 WinUI 앱은 이전 자습서와 동일합니다.

이제 지원되는 모든 플랫폼에서 앱을 빌드하고 실행할 수 있습니다. 이렇게 하려면 디버그 도구 모음 드롭다운을 사용하여 배포할 대상 플랫폼을 선택하면 됩니다.

• WebAssembly(Wasm) 헤드를 실행하려면 다음을 수행합니다.

  • HelloWorld.Wasm 프로젝트를 마우스 오른쪽 단추로 클릭하고 시작 프로젝트로 설정을 선택합니다.
  • HelloWorld.Wasm 단추를 눌러 앱을 배포합니다.
  • 원하는 경우 HelloWorld.Server 프로젝트를 대안으로 사용할 수 있습니다.

• iOS를 디버깅하려면 다음을 수행합니다.

  • HelloWorld.Mobile 프로젝트를 마우스 오른쪽 단추로 클릭하고 시작 프로젝트로 설정을 선택합니다.

  • 디버그 도구 모음 드롭다운에서 활성 iOS 디바이스 또는 시뮬레이터를 선택합니다. 이 기능이 작동하려면 Mac과 페어링되어 있어야 합니다.

    

• Mac Catalyst를 디버깅하려면 다음을 수행합니다.

  • HelloWorld.Mobile 프로젝트를 마우스 오른쪽 단추로 클릭하고 시작 프로젝트로 설정을 선택합니다.
  • 디버그 도구 모음 드롭다운에서 원격 macOS 디바이스를 선택합니다. 이 기능이 작동하려면 하나와 페어링되어야 합니다.

• Android 플랫폼을 디버깅하려면 다음을 수행합니다.

  • HelloWorld.Mobile 프로젝트를 마우스 오른쪽 단추로 클릭하고 시작 프로젝트로 설정을 선택합니다.
  • 디버그 도구 모음 드롭다운에서 활성 Android 디바이스 또는 에뮬레이터를 선택합니다.
    • "디바이스" 하위 메뉴에서 활성 디바이스를 선택합니다.

• Skia GTK를 사용하여 Linux에서 디버깅하려면 다음을 수행합니다.

  • HelloWorld.Skia.Gtk 프로젝트를 마우스 오른쪽 단추로 클릭하고 시작 프로젝트로 설정을 선택합니다.
  • HelloWorld.Skia.Gtk 단추를 눌러 앱을 배포합니다.

이제 다중 플랫폼 애플리케이션 빌드를 시작할 준비가 되었습니다!

참고 항목

• Uno 플랫폼 설명서
• Uno 확장 기능