Avalonia는 크로스플랫폼 UI 프레임워크입니다. 기본적으로 윈도우, 맥OS 및 리눅스를 지원하며 라즈베리파이에도 동작하는 앱도 만들 수 있습니다. 웹어셈블리로도 배포할 수 있으며 아직은 미리보기 단계이지만 iOS 및 안드로이드에서 실행되는 앱도 개발할 수 있습니다.
환경구성
- Windows 11 (OS 빌드번호 22000 이상)
- Visual Studio 2022 (Preview)
- 확장/확장 관리 → Avalonia for Visual Studio 2022 설치
- Ubuntu WSL2 설치
프로젝트 시작
새 프로젝트 만들기에서 Avalonia MVVM Application을 선택합니다. 프로젝트가 생성되면 실행 창에 Welcome to Avalonia!를 출력하는 간단한 프로젝트가 생성되지만 기본적으로 MVVM 구조로 생성됩니다.
MVVM의 요소를 좀 더 확인하기 위해 다음처럼 소스코드를 확장 합니다.
버튼 클릭시 숫자 증가
메인 윈도우는 Views/MainWindow.axaml 입니다. 이곳에 버튼을 추가합니다.
...
<StackPanel Orientation="Vertical" VerticalAlignment="Center" HorizontalAlignment="Center">
<TextBlock Text="{Binding Greeting}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Button Command="{Binding CountCommand}">Click!</Button>
</StackPanel>
...
이제 CountCommand를 구현해야 합니다. ViewModels/MainWindowViewModel.cs에 아래처럼 코드를 추가합니다.
...
public string Greeting => $"Welcome to Avalonia! : {Count}";
private int _count;
public int Count
{
get => _count;
set
{
this.RaiseAndSetIfChanged(ref _count, value);
this.RaisePropertyChanged(nameof(Greeting));
}
}
public ICommand CountCommand { get; }
public MainWindowViewModel()
{
CountCommand = ReactiveCommand.Create(() =>
{
Count++;
});
}
...
CountCommand에 의해서 Count가 1씩 증가하며 Count의 값이 변경될 때 Count 및 Greeting의 값이 변경되었음을 알리는 코드입니다.
실행해봅시다.
이제 버튼을 눌렀을 때 카운트 값이 올라가는 것을 확인할 수 있습니다.
WSL에서 앱 실행
윈도우 11 OS빌드번호 22000 이상이라면 WSLg를 실행할 수 있는 환경이며 Visual Studio 2022에서 정말 쉽게 Avalonia 앱을 실행할 수 있습니다.
Visual Studio 상단의 선택을 WSL로 변경해 줍니다.
그리고 실행하면 다음처럼 WSL의 리눅스에서 Avalonia 앱이 잘 실행되는 것을 볼 수 있습니다.
정리
Avalonia는 WPF 프로그래머라면 쉽게 익숙해질 수 있습니다. Avalonia가 WPF를 계승했다고 말할 정도니까요. 그리고 WSL를 이용해 리눅스 환경에서도 디버그를 쉽게 할 수 있어서 크로스플랫폼 개발환경이 편리해졌다고 말할 수 있겠습니다.
