안녕하세요. 이재웅입니다!
제가 소개할 내용은 Avalonia Web 환경 구축에 대한 간단한 팁입니다.
https://docs.avaloniaui.net/tutorials/running-in-the-browser
위 링크를 통해 기본적인 실행 방법을 살펴볼 수 있습니다.
그리고 소개에 앞서 Silverlight 이후로 별도의 플러그인 없이 동작하는 Xaml 기반의 웹 환경에 대해 알아보고자 합니다.
- OpenSilver
- Uno Platform
- Avalonia
OpenSilver는 목적의 큰 비중을 Silverlight Migration에 두고 있기 때문에 완성도가 아주 높지만 Uno/Avalonia와 같은 크로스플랫폼 개념의 확장성에 중점을 두고 있지 않고 있으며, Uno Platform은 일찍이 wasm을 주요 크로스플랫폼 지원 항목에 포함 시켜 계속 발전 시켜오고 있습니다. 그리고 Avalonia도 현재 크로스플랫폼 항목에 wasm이 포함되어 웹을 만들 수 있게 되었습니다.
1. 프로젝트 생성
(비주얼 스튜디오 기준) 확장을 통해 Avalonia를 설치하면 아래와 같은 프로젝트 템플릿을 사용할 수 있습니다.
또는 터미널 명령어를 통해 생성할 수도 있습니다.
dotnet workload install
dotnet new -i avalonia.templates
그리고 Avalonia 크로스 플랫폼을 통해 프로젝트를 생성하면 아래와 같은 솔루션 구성이 만들어진 것을 확인할 수 있습니다.
2. 실행
wsam 프로젝트인 .Web 프로젝트를 시작프로젝트로 설정하고 실행하면 WebAssembly 방식의 웹이 동작하게 됩니다.
3. 문제 해결
사실 Desktop 앱을 실행할 때에는 별 문제 없이 실행되지만 wasm 프로젝트를 실행하면 wasm-tools 관련 문제가 발생할 수 있습니다. 이 때 다음과 같이 해결할 수 있습니다.
dotnet workload uninstall wasm-tools
dotnet workload install
// 기존 프로젝트는 삭제하고,
// 새로운 프로젝트 다시 생성
일반적으로 dotnet nworkload install 명령어를 통해 문제를 해결할 수 있다고 하는데, 저의 경우 uninstall 과정까지 진행해서 해결했습니다.
4. 샘플 테스트
메인 화면에 기본 컨트롤을 추가해보도록 하겠습니다.
MainView.xaml
<StackPanel>
<TextBlock Text="{Binding Greeting}"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
<StackPanel>
<Button Content="DotnetDev"/>
<CheckBox Content="Hello"/>
<RadioButton Content="Welcome"/>
<Slider Value="50"/>
</StackPanel>
</StackPanel>
잘 동작하는 것을 확인 할 수 있습니다.
그리고 이 소스코드는 GitHub로도 공유하였으니 필요하신 분은 참고해주시기를 바랍니다.
읽어주셔서 감사합니다.
