VS Code에서 아발로니아 맛보기

VS Code에서 아발로니아 UI(AvaloniaUI, "아발로니아 UI에 대한 고찰" 참조)를 응용을 빌드하고 실행하는 과정을 수행하려면 일단 닷넷 SDK와 아발로니아 프로젝트 템플릿을 준비해야 한다.

 

닷넷 SDK는 위의 그림처럼 명령창을 열어서 "dotnet --list-sdks"로 간단히 확인할 수 있으며("설치된 닷넷 SDK와 닷넷 런타임을 확인하기" 참조), 아발로니아 프로젝트 템플릿도 "dotnet new install Avalonia.Templates" 명령으로 간편하게 설치할 수 있다. 설치 결과를 보면 많이 사용하는 "Avalonia .NET App", "Avalonia .NET MVVM App" 템플릿 이외에도 여러 템플릿이 있음을 확인할 수 있다. 닷넷 SDK 버전은 "Avalonia for VSCode"가 9.0을 요구하고 있으므로 이를 설치한다.

 

VS Code를 열고 보기 > 확장 메뉴를 선택하거나 Ctrl+Shift+X 단축키를 사용하여 확장 탭을 연다. 주의할 점은 오래된 VS Code라면 업데이트를 확인하여 최신버전으로 교체하고 수행한다.

 

검색창에서 Avalonia로 검색하여 "Avalonia for VSCode"를 설치한다. 

 

다음으로 확인할 것은 C# 확장이 설치되어 있는지 확인한다. 이미 설치되었다면 넘어가도 된다. MS에서 제공하는 위의 세 가지 모두를 설치했다.

 

View > Command Palette 메뉴를 선택하거나 Ctrl+Shift+P 단축키로 명령 팔레트를 열고 ".NET: New Project"를 선택한다.

 

다양한 프로젝트 템플릿이 나오는데 "Avalonia MVVM App"을 선택한다.

 

프로젝트를 저장할 폴더를 선택한 다음

 

새로운 프로젝트의 이름을 입력하고 엔터로 다음으로 진행한다.

 

솔루션 형태 선택창에서 *sln으로 선택했다.

 

최종적으로 "Create project"를 클릭하면 선택한 템플릿으로 프로젝트를 생성한다.

 

지정한 폴더에 *. sln 파일과 템플릿 코드가 생성된 것을 확인할 수 있다.

 

프로젝트를 생성하면 위의 그림처럼 자동으로 생성한 폴더를 열기 하는데, 추후 VS Code 메뉴 File > Open Folder로 폴더를 열 수 있다. 생성한 폴더를 신뢰한다고 버튼을 누르면 본격적으로 코드 편집을 시작할 수 있다.

 

Terminal > New Terminal 메뉴를 선택하거나 Ctrl+Shift+` 단축키로(숫자 1 좌측 특수문자) 새 터미널을 연다.

 

화면 하단에 PowerShell 기반의 터미널 창이 나오는데 이때 *.sln이 있는 프로젝트 폴더 위치를 확인하고 위의 그림과 같이 "dotnet build" 명령으로 빌드를 수행한다.

 

빌드 결과는 위의 그림과 같다.

 

│  Avalonia.Base.dll
│  Avalonia.Controls.ColorPicker.dll
│  Avalonia.Controls.dll
│  Avalonia.DesignerSupport.dll
│  Avalonia.Desktop.dll
│  Avalonia.Diagnostics.dll
│  Avalonia.Dialogs.dll
│  Avalonia.dll
│  Avalonia.Fonts.Inter.dll
│  Avalonia.FreeDesktop.dll
│  Avalonia.Markup.dll
│  Avalonia.Markup.Xaml.dll
│  Avalonia.Metal.dll
│  Avalonia.MicroCom.dll
│  Avalonia.Native.dll
│  Avalonia.OpenGL.dll
│  Avalonia.Remote.Protocol.dll
│  Avalonia.Skia.dll
│  Avalonia.Themes.Fluent.dll
│  Avalonia.Themes.Simple.dll
│  Avalonia.Vulkan.dll
│  Avalonia.Win32.Automation.dll
│  Avalonia.Win32.dll
│  Avalonia.X11.dll
│  AvaloniaMVVM1.deps.json
│  AvaloniaMVVM1.dll
│  AvaloniaMVVM1.exe
│  AvaloniaMVVM1.pdb
│  AvaloniaMVVM1.runtimeconfig.json
│  CommunityToolkit.Mvvm.dll
│  HarfBuzzSharp.dll
│  MicroCom.Runtime.dll
│  SkiaSharp.dll
│  Tmds.DBus.Protocol.dll
└─runtimes
    ├─linux-arm
    │  └─native
    │          libHarfBuzzSharp.so
    │          libSkiaSharp.so
    ├─linux-arm64
    │  └─native
    │          libHarfBuzzSharp.so
    │          libSkiaSharp.so
    ├─linux-loongarch64
    │  └─native
    │          libHarfBuzzSharp.so
    ├─linux-musl-arm
    │  └─native
    │          libHarfBuzzSharp.so
    ├─linux-musl-arm64
    │  └─native
    │          libHarfBuzzSharp.so
    ├─linux-musl-loongarch64
    │  └─native
    │          libHarfBuzzSharp.so
    ├─linux-musl-riscv64
    │  └─native
    │          libHarfBuzzSharp.so
    ├─linux-musl-x64
    │  └─native
    │          libHarfBuzzSharp.so
    │          libSkiaSharp.so
    ├─linux-riscv64
    │  └─native
    │          libHarfBuzzSharp.so
    ├─linux-x64
    │  └─native
    │          libHarfBuzzSharp.so
    │          libSkiaSharp.so
    ├─linux-x86
    │  └─native
    │          libHarfBuzzSharp.so
    ├─osx
    │  └─native
    │          libAvaloniaNative.dylib
    │          libHarfBuzzSharp.dylib
    │          libSkiaSharp.dylib
    ├─win-arm64
    │  └─native
    │          av_libglesv2.dll
    │          libHarfBuzzSharp.dll
    │          libSkiaSharp.dll
    ├─win-x64
    │  └─native
    │          av_libglesv2.dll
    │          libHarfBuzzSharp.dll
    │          libSkiaSharp.dll
    └─win-x86
        └─native
                av_libglesv2.dll
                libHarfBuzzSharp.dll
                libSkiaSharp.dll

빌드 이후 bin 폴더를 보면 응용과 직접적으로 연관된 AvaloniaMVVM1.dll, AvaloniaMVVM1.exe 뿐만 아니라 아발로니아의 다양한 패키지와 기타 라이브러리를 플랫폼별로 확인할 수 있다.

 

일단 빌드한 프로그램을 실행하면 위의 그림과 같다.

 

VS Code의 아발로니아 확장을 통해서 얻을 수 있는 유익 중의 하나는 위의 그림처럼 *. axaml 파일에 대한 미리 보기가 가능하다는 것이다. 현재 시점에서 비주얼스튜디오의 WPF 응용 개발에서 사용하는 것과 같은 디자이너를 사용할 수는 없지만 일단 빌드가 된 상태에서는 *. axaml를 수정하면 미리 보기에서 뷰(View)에 대한 변경을 바로 확인할 수 있다. 디자이너는 개발 중이고 2025년 4분기 현재로 곧 발표 예정이라는데 일단 유료라고 한다. 그리고, 뷰에 대한 수정은 미리 보기에서 확인할 수 있지만 뷰모델이나 모델에 대한 변경은 프로젝트를 다시 빌드해야 한다.

 

VS Code의 아발로니아 확장을 통해서 얻을 수 있는 또 다른 유익은 위의 그림과 같은 자동 완성 기능이다. 위의 그림은 수평 정렬 항목 값이 입력되지 않은 상태에서 Ctrl+Enter 키를 눌러서 제공받은 화면이다.

 

*. axaml를 선택했는데도 미리 보기가 나오지 않으면 빌드했는지 확인하고 위의 그림처럼 편집창 우측 상단의 [Show preview] 아이콘을 클릭한다.