마이크로소프트의 새로운 개발 도구를 가장 먼저 써보고 싶다면, 직접 컴파일러를 꺼내 소스에서 빌드해야 할 때가 있다. 이번에 공개된 XAML 스튜디오(XAML Studio)의 오픈소스 버전이 바로 그런 경우다. .NET UI 디자인 툴인 이 프로젝트는 현재 .NET 재단(.NET Foundation)으로 이관되고 있다.
XAML 스튜디오는 .NET UI를 프로토타이핑하기 위한 도구다. 이 툴은 마이크로소프트의 사내 인큐베이션 프로그램인 가라지(Garage)에서 처음 개발됐으며, 초기에는 UWP(Universal Windows Platform) 애플리케이션을 제작하기 위한 용도로 만들어졌다. 그러나 출시 이후 UWP가 보다 범용적인 윈UI(WinUI)로 발전하면서, 특히 크로스 플랫폼 .NET 애플리케이션을 개발할 때 XAML 스튜디오의 활용도는 점차 낮아졌다.
이전 버전의 모습
초기 버전을 다운로드해 사용해본 개발자라면 기본적인 그리드 뷰와 코드 에디터가 함께 제공됐다는 점을 기억할 것이다. 코드를 수정하면 변경 사항이 즉시 그리드에 반영돼 새로운 애플리케이션 UI를 빠르게 설계할 수 있었다. 이러한 구조는 어도비 드림위버(Adobe Dreamweaver)와 유사한 실시간 인터랙션 환경을 XAML과 .NET에서도 구현할 수 있게 해 주는 강력한 방식이었다.
또한 컨트롤 라이브러리가 포함돼 있어 필요한 UI 요소를 드래그해 에디터에 추가한 뒤 모의 데이터(mock data)나 실시간 데이터와 연결해 테스트할 수 있었다. 이를 통해 사용자가 실제로 접근할 데이터를 기준으로 UI의 동작 방식을 즉시 확인할 수 있었다.
현재 공개된 최신 빌드는 2019년에 배포된 XAML 스튜디오 1.1 버전이다. 지난 6년간 .NET 환경은 크게 변화했으며, XAML 스튜디오 역시 새로운 윈UI 구성 요소를 필요로 하면서 내부적으로만 개발이 이어졌다. 하지만 윈도우 앱 SDK(Windows App SDK)에 핵심 컨트롤이 포함되면서 개발이 다시 공개 단계로 전환됐고, 첫 번째 XAML 스튜디오 2.0 버전이 깃허브에 등장했다.
XAML 스튜디오 2.0 빌드하기
새로운 릴리스를 사용하려면 최신 윈도우 개발 환경이 필요하다. 비주얼 스튜디오 2022(Visual Studio 2022)가 설치돼 있어야 하며, 윈도우 애플리케이션 빌드를 위한 구성과 최신 버전의 윈도우 SDK가 포함돼야 한다. 또한 비주얼 스튜디오에서 서명되지 않은 스토어 애플리케이션을 실행할 수 있도록, 윈도우 개발자 모드가 활성화돼 있어야 한다.
모든 사전 조건이 준비되면, 먼저 깃허브에서 XAML 스튜디오 리포지토리를 클론한 뒤 브랜치를 dev로 전환해야 한다. 기본(main) 브랜치에는 현재 마이크로소프트 스토어에 배포 중인 1.1 버전이 포함돼 있기 때문이다. 코드를 다운도르한 후에는 비주얼 스튜디오에서 솔루션 파일(.sln)을 열고, 시작 프로젝트가 XamlStudio로 설정돼 있는지 확인해야 한다. 솔루션은 XamlStudio를 주 프로젝트로 하며, 이외에 Microsoft.Toolkit.Future, XamlStudio.Toolkit, XamlStudio.Toolkit.UnitTests까지 총 4개의 프로젝트가 들어 있다.
이제 애플리케이션을 빌드하고 실행할 수 있다. 이 과정에서 몇 가지 추가 종속성을 다운로드해야 할 수도 있지만, 필요한 구성 요소가 모두 설치되면 애플리케이션이 정상적으로 실행된다. 필자는 먼저 디버그 모드로 빌드를 진행했으며, x64 환경에서 작업 중이었기 때문에 x64 바이너리를 빌드하고 로컬 시스템에서 디버깅이 가능하도록 설정했다. 솔루션은 ARM 아키텍처에서도 빌드가 가능하지만, 현재 일부 문제가 존재하며 개발팀은 이를 해결하기 위해 ARM 관련 전문 인력을 찾고 있다.
새로운 XAML 스튜디오 사용해보기
새로 공개된 버전은 외형상으로는 현재 배포 중인 1.1 버전과 크게 다르지 않다. 다만 최신 세대의 XAML 컨트롤과 컴포넌트를 지원하도록 많은 작업이 이뤄졌고, 최신 .NET 릴리스에 대한 지원도 추가됐다. 이런 변화는 애플리케이션의 툴박스 메뉴에서 확인할 수 있다. 이 메뉴에는 커뮤니티 툴킷(Community Toolkit)과 윈UI에서 제공하는 컨트롤이 포함돼 있다.
툴박스에는 다양한 컨트롤이 나열돼 있으며, 자주 사용하는 컨트롤을 즐겨찾기로 지정하거나 검색 기능을 활용해 필요한 항목을 빠르게 좁혀갈 수 있다. 개발은 현재도 진행 중이며, 개발팀은 이번 릴리스를 위한 로드맵도 함께 공개했다.
메뉴에 포함된 각 컨트롤에는 온라인 문서로 연결되는 링크가 제공돼 필요한 구문을 빠르게 확인할 수 있다. 이 기능은 특히 중요한데, 페이지에 컨트롤을 추가하더라도 기본적으로는 매개변수 없는 XAML 태그만 삽입되기 때문이다. 모나코(Monaco) 기반 에디터는 오류를 표시해 주지만, 자동 완성이나 구문 제안 기능은 제공하지 않는다. 따라서 다른 개발 도구와 병행해 사용하는 편이 좋다.
XAML 스튜디오는 완전한 비주얼 디자이너가 아니라는 점을 짚고 넘어갈 필요가 있다. 모든 작업은 코드 에디터에서 이뤄지며, JIT 컴파일러가 XAML을 즉시 렌더링하는 방식이다. 에디터와 레이아웃 간에 양방향 연동이 제공된다면 더 좋겠지만, 코드를 작성하는 동시에 XAML이 어떻게 표현되는지 확인할 수 있다는 점만으로도 충분히 유용하다. 또한 모의 데이터 소스나 실제 데이터에 연결돼 있다면, 최종 애플리케이션에서 사용할 데이터를 기준으로 UI가 어떻게 반응하고 표시되는지도 확인할 수 있다.
속성 탐색기를 이해하는 데는 다소 시간이 필요하다. 먼저 에디터 모드를 편집(Modify)으로 전환한 뒤, 살펴보고 싶은 XAML 요소를 선택해야 한다. 그러면 해당 요소와 관련된 속성이 탐색기에 표시되고, 현재 설정된 값과 함께 사용할 수 있는 다른 속성도 확인할 수 있다. 향후 이 탐색기를 통해 XAML 코드를 직접 수정할 수 있도록 할 계획이 있는 것으로 보이지만, 현재는 일부 속성만 변경할 수 있다. 그마저도 애플리케이션에서 예외가 발생해 비주얼 스튜디오 디버거에서 수동으로 단계를 따라가야 하는 경우가 있다. 새 속성을 추가해도 즉각적인 변화는 없지만, 탐색기에는 해당 속성이 유지된다.
이러한 한계에도 불구하고 인터랙티브한 XAML 디자이너의 기반을 제공하는 도구라는 점에서 긍정적인 요소는 충분하다. 블렌드(Blend)는 이미 전성기를 지난 도구인 만큼, 현대적인 개발 도구 체인에 맞게 설계된 새로운 도구는 충분히 지원할 가치가 있다.
dl-itworldkorea@foundryco.com
Simon Bisson editor@itworld.co.kr
저작권자 Foundry & ITWorld, 무단 전재 및 재배포 금지
이 기사의 카테고리는 언론사의 분류를 따릅니다.