[Draft] WinUI 3 소개

개요

WinUI 라이브러리는 Windows 데스크톱 및 UWP 애플리케이션에서 사용할 수 있는 네이티브 UX(사용자 환경) 프레임워크 입니다. WinUI는 Microsoft의 Fluent Design System을 UI(사용자 인터페이스)에 사용하여 최신의 Windows 10 및 Windows 11의 UI 환경을 제공합니다.

WinUI 2

WinUI 2는 UWP 애플리케이션에서 사용할 수 있으며 XAML Islands를 이용해 신규 또는 기존 데스크톱 애플리케이션과 통합할 수 있습니다. WinUI 2 라이브러리는 Windows 10 SDK와 밀접하게 연결되어 있으며, UWP 앱용 공식 네이티브 Windows UI 컨트롤 및 기타 UI 요소를 제공합니다.

Windows 10 이전 버전과의 하위 호환성을 유지하므로 사용자가 최신 OS가 아니라도 WinUI 2 컨트롤이 작동합니다.

출처: docs.microsoft.com

WinUI 3

WinUI 3는 Windows 10 SDK에서 완전히 분리된 네이티브 Windows 10 UI 플랫폼입니다. WinUI 3은 광범위한 Windows 10 OS 버전에서 모든 데스크톱 앱이 일관된 방식으로 동작하도록 하는 통합 API 및 도구 세트를 제공합니다. Windows 앱 SDK(구 Project Reunion)의 구성 요소이며, 최신 Windows 앱 SDK 정보를 확인하고 Windows 앱 SDK를 설치해서 사용할 수 있습니다.

WinUI 3는 모든 Windows 앱에서 사용할 수 있습니다. 네이티브 UWP 또는 Win32 앱에서 UI 계층으로 사용하거나, XAML Islands를 사용하여 데스크톱 앱을 점진적으로 현대화 할 수 있습니다.

WinUI 3은 WinUI 2와 다르게 모든 XAML 기능을 WinUI의 일부로 제공합니다.

출처: docs.microsoft.com

WinUI 3과 WinUI 2 비교

WinUI 2와 WinUI 3 모두 Fluent Design 시스템 원칙 및 프로세스를 기반으로 사용자 인터페이스 및 환경을 제공하지만 WinUI 2는 UWP 어플리케이션만을 기본적으로 지원하며 Windows 10 SDK에 종속되어 있는 라이브러리인데 반해 WinUI 3는 UWP 어플리케이션 및 Win32 앱의 지원을 목표로 하고 있으며 Windows 10 SDK와 분리되어 지원 OS에 원활하게 대응할 수 있도록 설계되었습니다.

주요 차이점

구분	WinUI 3	WinUI 2
Windows 10 SDK 종속성	UI 스택 및 컨트롤 라이브러리가 Windows 10 SDK과 완전히 분리	UX 스택 및 컨트롤 라이브러리가 Windows 10 SDK와 긴밀하게 결합
Windows 데스크톱/Win32 앱 빌드	빌드할 수 있음	빌드할 수 없음
패키지 제공	Windows 앱 SDK를 Visual Studio 확장(VSIX) 형태로 설치하여 제공	일부는 운영체제 자체에서 제공, 일부는 추가 라이브러리 제공, 핵심 XAML 프레임워크 및 입력, 컴포지션 레이어 등의 UI 스택의 중요 부분은 OS에서 기본 제공
.NET 5 지원유무	데스크톱 앱용 C# 및 .NET 5 지원	C# 및 .NET 네이티브 앱만 지원
WebView2 지원유무	지원	미지원
최소 OS	Windows 10 버젼 1809	Windows 10 1703

Windows 앱 SDK

WinUI 3는 Windows 앱 SDK의 구성요소입니다. WinUI 3을 이용하려면 반드시 Windows 앱 SDK를 이용해야 하는데요, 간략히 Windows 앱 SDK에 대해서 알아봅시다.

Windows 앱 SDK는 다양한 Windows 버젼의 플랫폼 기능에 접근하기 위해 Windows 10 SDK에 종속되지 않고 사용할 수 있도록 구성된 라이브러리, 프레임워크, 구성 요소 및 도구 집합입니다. 이런 구성을 통해 Windows 앱 SDK는 최신 API 사용 기술과 함께 Win32 애플리케이션의 기능을 결합하므로 최소사양을 준수하는 한 사용자의 모든곳에서 앱이 동작하는 것을 보장합니다. Windows 앱 SDK의 기능은 새로운 API, 수렴된 API 및 API 하위 집합의 세 가지 주요 범주로 제공됩니다.

새로운 API

새로운 API의 경우 가능하면 Windows 앱 SDK 제품군의 일부로 새로운 windows 기능이 제공됩니다. 이 새로운 API는 애플리케이션에 투명합니다. 새로운 기능은 배포 유형과 상관없이 사용할 수 있는 공통 인터페이스를 공유합니다.

수렴된 API

Windows 앱 SDK는 이미 플랫폼의 Win32와 UWP/AppContainer 기능 간의 격차를 해소하는 API 표면을 제공합니다. 이를 통해 더 많은 Windows 버전에서 앱을 실행할 수 있게 됩니다.

하위 집합 API 제품군

Windows Kit API 파티션과 마찬가지로 Windows 앱 SDK는 모든 버전의 Windows에서 작동하는 Windows 플랫폼 API의 하위 집합을 정의합니다. 코드가 이 하위 집합을 대상으로 하고 Windows 앱 SDK 새로운 기능과 수렴 기능을 사용하는 경우 추가 작업 없이 Windows가 작동하는 모든 곳에서 동작을 보장합니다.

하위 집합 API 제품군은 다음과 같습니다.

윈도윙, 입력, 메시징, GDI 및 GUI 하위 시스템 기능
파일 시스템 및 스토리지 액세스
네트워킹
인쇄
프로세스, 스레딩, 메모리 관리, 기본 애플리케이션 서비스
DirectX, D3D, DirectML

Microsoft는 Windows 앱 SDK를 이용해서 앞으로 제공하는 API를 정제하고 통일하고 추가해나갈 것으로 보입니다. Windows 앱 SDK는 아직 정식 릴리즈되지 않았으므로 추후 진행상황을 지켜보기로 합시다.

체험

Microsoft Store에서 WinUI 3 Controls Gallery를 통해 WinUI 3의 각종 컨트롤들을 체험할 수 있습니다. Github 소스코드를 통해 갤러리를 직접 컴파일 해볼 수 있습니다.

환경구성

WinUI 3은 현태 Windows 앱 SDK 0.8.1이 최신 안정화 버젼이며 다음과 같은 시스템 요구 사항을 준수해야 합니다.

시스템 요구사항

Windows 10 버젼 1089(빌드 17763) 이상
Visual Studio 2019 버젼 16.9 이상
- 유니버셜 Windows 플랫폼 개발
- .NET 데스크톱 개발
- C++를 사용한 데스크톱 개발
Windows SDK 버전 2004(빌드 19041) 이상 (Visual Studio 2019와 함께 설치됨)

※ Windows 앱 SDK 0.8은 Visual Studio 2019 미리보기 16.11 이상에서 원활하게 지원됩니다. 또한 Visual Studio 2022 미리보기에서는 Windows 앱 SDK VSIX가 설치되지 않습니다.

환경구성

먼저 Windows 앱 SDK를 Visual Studio 2019 미리보기에서 확장 관리를 통해 설치합니다.

확장 관리에서 제공하는 Windows 앱 SDK는 아직 이름이 Project Reunion이므로 이 패키지를 설치하도록 합니다.

Visual Studio를 종료해야 VSIX가 설치가 되고 설치가 완료되면 Visual Studio를 재시작합니다.

정상적으로 설치가 완료하면 다음과 같이 새 프로젝트 만들기에서 플랫폼을 Proejct Reunion으로 했을 때 템플릿 프로젝트가 표시되어야 합니다.

`Hello World` 프로젝트

새 프로젝트 만들기에서 `App (WinUI 3 in Desktop)을 선택합니다.

다음처럼 WinUI 3의 마법사 창을 통해 다양한 프로젝트 유형 및 세부 설정을 변경할 수 있습니다.

Design pattern 및 페이지를 설정할 수 있습니다. 현재 Design pattern은 MVVM Toolkit만 지원하지만 차후 사용자의 요구에 따라 다양한 디자인 패턴이 추가될 것 같습니다. 페이지의 경우 다양한 목적을 위한 페이지 구성을 선택할 수 있습니다.

현재 Windows 앱 SDK 0.8.1의 패키징 방법은 MSIX만 지원합니다. 로드맵에 의해 버젼 1.0에서는 비패키징도 지원할 것으로 보입니다.

WinUI 3 마법사에 의해 프로젝트가 생성되면 다음의 프로젝트가 생성됩니다.

컴파일하여 실행하면 정상적으로 잘 실행되고요,

WinUI 3 마법사에 의해 생성된 메뉴 및 설정페이지, 웹뷰 페이지도 정상적으로 잘 동작함을 확인할 수 있습니다.

Win2D 적용

WinUI 3에서 흥미롭게 살펴볼 수 있는 내용은 바로 Win2D의 지원입니다. Win2D는 2D 렌더링을 GPU 가속을 통해 제공하는 Windows 런타임 API입니다. Win2D를 통해 Direct2D를 데스크톱 어플리케이션에 쉽게 통합할 수 있습니다. Win2D를 이용하려면 NuGet에서 Microsoft.Graphics.Win2D 패키지를 별도로 설치해 사용할 수 있습니다.

설치후 MainPage.xaml을 다음처럼 수정합니다.

<Page
    x:Class="App6.Views.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:canvas="using:Microsoft.Graphics.Canvas.UI.Xaml"
    mc:Ignorable="d"
    Style="{StaticResource PageStyle}">

    <Grid x:Name="ContentArea" Margin="{StaticResource MediumLeftRightMargin}">
        <Grid.RowDefinitions>
            <RowDefinition Height="48" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <TextBlock
            Grid.Row="0"
            x:Uid="Main_Title"
            Style="{StaticResource PageTitleStyle}" />
        <Grid
            Grid.Row="1" 
            Background="{ThemeResource SystemControlPageBackgroundChromeLowBrush}">

            <canvas:CanvasControl Draw="CanvasControl_Draw" ClearColor="CornflowerBlue" />
        </Grid>
    </Grid>
</Page>

MainPage.xaml.cs에 CanvasControl_Draw 메소드를 다음처럼 추가합니다.

        private void CanvasControl_Draw(Microsoft.Graphics.Canvas.UI.Xaml.CanvasControl sender, Microsoft.Graphics.Canvas.UI.Xaml.CanvasDrawEventArgs args)
        {
            args.DrawingSession.DrawEllipse(155, 115, 80, 30, Colors.Black, 3);
            args.DrawingSession.DrawText("Hello, world!", 100, 100, Colors.Yellow);
        }

이후 컴파일하여 실행하면 다음과 같이 Win2D의 동작 결과를 확인할 수 있습니다.

로드맵

WinUI 3는 올해 4분기를 목표로 개발이 진행되고 있는 Windows 앱 SDK의 기능중의 하나입니다. 다음의 Windows 앱 SDK 로드맵 및 WinUI 로드맵을 통해 살펴볼 수 있습니다.

출처: github.com/microsoft/microsoft-ui-xaml

초기 로드맵에서는 XAML Islands가 버젼 1.0에 포함되어 있었지만, 최근의 로드맵에서는 향후 업데이트로 옮겨졌음을 알 수 있습니다. 이것의 의미는 올해 4분기에 릴리즈되는 Windows 앱 SDK에서는 WPF 및 Windows Forms등에서는 WinUI 3의 컨트롤들을 사용하지 못하는 것으로 보입니다. 하지만 버젼 1.0이 되면 WinUI 3에서 비패키지를 지원하게 되므로 MSIX로 패키징 하지 않는 시나리오에서도 WinUI 3을 사용할 수 있게 됩니다. 이외에 다음의 2021년도 중점사항을 살펴볼 수 있습니다.

일관되고 현대적인 상호작용 및 UX 디자인
- WinUI 3 - Win32 및 UWP용 Windows 10 기본 UI 플랫폼
- WebView2 - 새로운 Edge(Chromium) 엔진을 사용하여 Windows 앱에 웹 컨텐츠 포함
- React Native Windows - 이제 WinUI를 대상으로 함
- 모던 윈도잉
기기 하드웨어에 최적화
- 터치, 잉크, 디스플레이 개선
- ARM64 지원
- 입력
뛰어난 시스템 성능과 배터리 수명
- 앱 수명 주기 관리 및 전력 사용을 위한 더 나은 옵션
- DirectWrite 텍스트 렌더링 플랫폼
- 로컬 푸쉬 알림
- 백그라운드 작업
간편한 앱 검색 및 관리
- 향상된 앱 피키징
- 프레임워크 패키지 배포
- 모든 앱 유형에 대한 자동 업데이트
플랫폼 통합 및 배포
- OS에서 Windows 플랫폼 분리
- 지원되는 모든 Windows 버전에서 기능이 작동하는지 확인
Github로 엔지니어링 이동

정리

WinUI 2는 UWP 만의 프레임워크였다면 WinUI 3은 Windows 데스크톱을 개발하기 위한 통합 프레임워크 입니다.
WinUI 3은 이미 예제소스를 확인할 수 있고 컴파일 할 수 있고 실행할 수 있는 단계입니다.
아쉽지만 Windows 앱 SDK 버젼 1.0에서 XAML Islands가 빠지면서 WPF 및 Windows Forms에서 WinUI 3를 사용할 수 없습니다. (차후 업데이트에서 지원 예정)
UWP가 아닌 WinUI 3 Apps 프로젝트로 WinUI 3를 개발할 수 있습니다.
.NET 5 C# 9 및 .NET 6 C# 10으로 개발할 수 있습니다.
배포 시나리오에 따라 MSIX 배포 및 다른 방식의 배포 방식을 선택할 수 있습니다. (현재는 MSIX 배포만 지원)
WinUI 3를 사용할 수 있는 OS 최소사양은 Windows 10 버젼 1809 입니다.
WinUI 템플릿 프로젝트에서 다양항 레이아웃의 템플릿을 제공합니다.
Win2D를 WinUI 3에서 사용할 수 있습니다.

디모이 블로그

디모이 블로그

WinUI 3 소개

목차

개요

WinUI 2

WinUI 3