Visual Studio 2022에 Uno 플랫폼 개발 환경 구성

Uno 플랫폼은 Pixel-Perfect을 지향하는 .NET 멀티 플랫폼 용 UI 오픈소스 플랫폼입니다.

Pixel-Perfect란 앱이 구동하는 장치와 상관없이 동일한 형태의 UI를 제공한다는 뜻으로 일장 일단은 있겠지만 이를 통해서 앱을 개발하면 어느 장치이던 동작화면을 기대하는 모습으로 만들 수 있어 장점입니다.

개발환경

• Visual Studio 2022 (최신의 기능을 확인하기 위해서는 Preview)

환경구성

Uno 플랫폼 개발 환경을 구성하는 것은 무엇보다 쉽습니다. Uno는 uno.check라는 도구를 통해 개발 환경을 구성할 수 있도록 하는데 다음처럼 관리자 권한을 통해 설치할 수 있습니다.

최신 워크로드 확인 및 설치

dotnet tool install -g uno.check

만약 이미 설치되어 있다면 최신 버젼으로 업데이트 하기 위한 명령 다음과 같습니다.

dotnet tool update -g uno.check

uno.check가 설치가 되었으면 다음의 명령으로 개발 환경을 구성할 수 있습니다.

uno-check

그런데 Visual Studio 2022 미리보기 환경일 경우 진행이 실패할 수 있는데 그런 경우 다음처럼 --dev 옵션을 줘서 설치를 진행 할 수 있습니다.

uno-check --dev

솔루션 템플릿 설치

확장 > 확장관리 메뉴에서 온라인을 선택한 후 Uno Platform Solution Templates를 검색해 설치합니다.

이제 새 프로젝트 만들기에서 Uno 관련 프로젝트를 확인할 수 있습니다.

템플릿을 이용해 Uno 앱 컴파일 및 실행

새 프로젝트 만들기에서 Multi-Platform App (Uno Platform|net6)`을 선택해 프로젝트가 만들어졌고 만약 추가 구성 요소를 설치해야 한다면 솔루션 탐색기 상단에 다음과 같은 화면을 볼 수 있는데요,

설치 링크를 통해 추가 구성요소를 설치할 수 있습니다.

설치가 완료되면 템플릿 프로젝트를 컴파일 할 수 있게 됩니다.

• Windows SDK 관련 오류가 발생한다면 Appxx.UWP 프로젝트의 속성에서 애플리케이션/대상 지정의 대상 버전 및 최소 버전을 Windows 10, version 1903으로 변경해보세요.
• 컴파일 시 x64관련 오류가 발생한다면 활성 솔루션 플랫폼을 x64로 변경해보세요.

솔루션 탐색기를 보면 Mobile 및 Gtk, Wpf 그리고 UWP와 Wasm 프로젝트를 확인할 수 있는데 각각을 시작 프로젝트로 설정하고 Uno 프로젝트를 시작할 수 있습니다.

저는 Wasm(웹어셈블리) 프로젝트의 동작이 궁금한데요, Wasm 프로젝트를 시작 프로젝트로 설정한 후 실행해보겠습니다.

다음처럼 인증서 관련 다이얼로그 창이 뜨는데 예를 선택해 설치를 하면, 웹브라우저에서 동작하는 Uno 앱을 확인할 수 있습니다.

동작하는 모습을 좀 더 확인하고 싶은데요, 버튼을 누르면 카운트 되게 간단히 코딩 한 후 확인해보겠습니다.

화면에 대한 XAML은 Appxx.Shared 프로젝트의 MainPage.xaml입니다. 이것을 다음 처럼 수정 합니다.

...
    <StackPanel
        HorizontalAlignment="Center"
        VerticalAlignment="Center"
        Orientation="Vertical">
        <TextBlock
            Margin="20"
            FontSize="30"
            Text="{x:Bind Greeting, Mode=OneWay}" />
        <Button x:Name="counterButton" Click="counterButtonClick">Count</Button>
    </StackPanel>
...

다음으로 MainPage.xaml.cs을 다음처럼 수정합니다.

    public sealed partial class MainPage : Page, INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;

        public string Greeting => $"Hello Uno! : {Count}";

        private int _count;

        public int Count
        {
            get => _count;
            set
            {
                _count++;

                OnPropertyChanged(nameof(Count));
                OnPropertyChanged(nameof(Greeting));
            }
        }

        private void OnPropertyChanged(string propertyName)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }

        private void counterButtonClick(object sender, RoutedEventArgs e)
        {
            Count++;
        }

        public MainPage()
        {
            this.InitializeComponent();
            //this.DataContext = this;
        }
    }

이제 실행해봅시다. 버튼을 눌렀을 때 카운트가 잘 올라가는 것을 확인할 수 있습니다!

정리

Uno 플랫폼을 안지 상당히 오래 되었는데요 앱을 처음 시작할 때의 시작 시간과 동작 속도가 느려서 아쉬웠었습니다. 그런데 오래간만에 확인을 해보니 시작 시간도 쓸 수 있을 만큼 빨라졌고 동작 속도도 빠름을 확인할 수 있었습니다.

Visual Studio 개발환경에서 아직은 XAML 편집기와 완전히 통합이 안된 모습과 소스 생성기의 결과가 편집기에 반영이 늦게 되는 등의 문제는 아직 있지만 곧 개선될 것으로 보이고 Uno 플랫폼의 지향점인 Pixel-Perfect이 매력적임을 강조하면서 마무리 하겠습니다.