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이 매력적임을 강조하면서 마무리 하겠습니다.