개발자 생산성은 끝나지 않는 대화 주제다. 코드를 더 쉽게 제공하는 데 그치지 않고 더 안정적이고 탄력적으로 만들려면 어떻게 해야 할까? 그 고민의 결과로 AI 기반 페어 프로그래밍부터 저수준 리팩터링 서비스에 이르기까지 개발자 툴에서 일종의 르네상스가 일어나고 있으며, 나아가 컴파일러나 디버거를 실행하기도 전에 구문과 오류를 보여주는 방법도 개선되고 있다.

컴파일러와 언어가 발전하면서 많은 새로운 툴이 등장했다. 닷넷의 로슬린(Roslyn) 컴파일러는 코드를 작성할 때 줄 단위로 코드가 무슨 일을 하는지 검사할 수 있게 해준다. 또한 개발자는 디버깅 중에 코드를 편집할 수 있어 컨텍스트를 전환하지 않고도 수정 사항을 평가하거나 새로운 접근 방식을 시도할 수 있다. 편집기와 디버깅 툴을 동시에 사용하는 더 효율적인 방법을 통해 코드를 작성하는 동안 라이브 애플리케이션에서 코드를 볼 수 있다.

비즈니스 로직을 다루기에는 좋은 방법이지만 XAML과 같은 컨트롤 기반 레이아웃 툴과는 잘 맞지 않는다. 이 경우 코드와 레이아웃 간의 상호작용을 다루는데, 둘 다 동일한 IDE에서 서로 다른 툴세트를 사용한다. 레이아웃이 미리 렌더링되면 기본 핫 리로드(hot-reload)툴을 사용해 즉석에서 디자인을 변경할 수 없다.

이 문제는 디자이너와 개발자의 협업에 장애물이 된다. 실행 중인 애플리케이션을 두 분야가 동시에 업데이트하고 사용자 경험과 그 경험을 구동하는 백엔드 코드에 미치는 영향을 확인할 수 있는 하나의 페어 프로그래밍 관계는 없다. 글꼴 크기 변경과 같은 작은 변경이든 완전히 새로운 뷰 추가와 같은 큰 변경이든, 변경이 필요할 때마다 개발자에서 디자이너로, 다시 디자이너에서 개발자로 코드가 전달돼야 한다. 개발 속도가 느려지고 양쪽 모두 작업을 멈췄다가 다시 시작해야 하므로 흐름이 끊어지고 컨텍스트가 전환된다.

디자인에 적용하는 라이브 개발

웹 초창기, 드림위버(Dreamweaver)를 비롯한 여러 툴이 라이브 페이지 디자인을 개척하면서 레이아웃을 편집하는 도중에 페이지가 사용자에게 어떻게 보이는지 확인할 수 있게 됐다. 지금의 애플리케이션 개발 환경은 비주얼 스튜디오의 익스프레션 블렌드 XAML(Expression Blend XAML) 디자이너와 같은 툴을 통해 이러한 기능을 일부 제공하지만 디자이너와 개발자가 사용하는 툴 사이에는 여전히 간극이 존재한다.

디자이너와 개발자가 같은 화면에서 코딩과 디자인을 동시에 하고 실행 중인 라이브 애플리케이션을 변경할 수 있도록 하려면 어떻게 해야 할까? 별도의 디자인 타임 툴을 사용한 방법에는 라이브 데이터를 사용하지 않는다는 한 가지 큰 결점이 있다. 실행 중인 애플리케이션에 무엇이 포함되어야 하는지 디자이너가 감이라도 잡을 수 있게 하려면 개발자가 플레이스홀더 데이터 집합을 추출하고 목(mock) API를 빌드해야 하는 경우가 많다.

우노 스튜디오의 핫 디자인

크로스 플랫폼 우노 닷넷 툴 개발팀은 최근 이 문제를 해결할 가능성이 있는 솔루션으로 우노 스튜디오에 포함돼 제공되는 새로운 핫 디자인 툴을 발표했다. 이 툴은 코드를 중심으로 하는 마이크로소프트의 닷넷 동적 개발 툴과 비슷한 환경을 XAML UI 개발로 가져온다. 디자이너와 개발자는 코드를 업데이트하기 위해 긴 개발/디자인 사이클을 거칠 필요 없이 협업하면서 코드를 디버깅하고 테스트하는 동안 XAML 레이아웃을 빠르게 편집할 수 있다.

새로운 핫 디자인 툴은 실행 중인 애플리케이션에 새 XAML 코드를 주입해서 애플리케이션 내에서 디자인 툴을 열고 뷰에서 컨트롤의 매개변수와 속성을 변경할 수 있게 해준다. 코드에서 나올 필요도 없다. 스택 깊은 곳에 있으면서 현재 페이지의 디자인을 편집할 수 있다.

핫 디자인은 우노 스튜디오 라이브러리의 일부이므로 툴이 활성화된 상태에서 코드를 디버깅할 때 애플리케이션 제목 표시줄에 표시되는 작은 오버레이 아이콘을 클릭해서 핫 디자인 뷰를 열 수 있다. 애플리케이션 창을 대체하는 이 뷰는 컨트롤 트리를 탐색하거나 애플리케이션 캔버스에서 편집하기 위한 컨트롤을 선택할 수 있는 툴을 제공한다. 핫 디자인 창이 활성화되면 애플리케이션이 일시 중지되므로(디버거 중단점 사용과 비슷함) 라이브 UI와 경합할 필요가 없다.

우노에서 헤드업 디스플레이(Heads-Up Display)로 지칭되는 이 기능은 창부터 개별 텍스트 항목까지 전체 컨트롤 계층에 액세스할 수 있게 해준다. 디버그 환경 내에서 실행할 때만 활성화되므로 빌드 프로세스에 의해 제거되고, 따라서 코드가 컴파일 및 전달될 때 활성화되지 않을까 걱정할 필요가 없다.

핫 디자인 툴에서 작업한 변경 사항은 애플리케이션 XAML에 반영된다. 또한 블렌드나 비주얼 스튜디오에서 XAML을 편집하는 경우 빌드 중인 애플리케이션의 컨텍스트에서 핫 디자인 프로세스를 통해 모든 변경 내용을 표시할 수 있다. 디자이너와 개발자가 각자 선호하는 툴에서 작업하는 양방향 프로세스를 구현한다는 개념이다. ‘개발자가 있는 곳으로 간다’는 마이크로소프트의 철학과 잘 맞는다.

또한 핫 로드(Hot Load) 툴을 사용해서 기반 C# 코드를 변경하고 새 데이터 소스를 그리드 컨트롤에 연결하고 새 필드와 컨트롤에 맞게 디자인이 수정되는 중에 데이터 바인딩을 처리할 수 있다. 예를 들어 쇼핑 애플리케이션에 갤러리를 추가하거나 고객 지원 플랫폼에 새롭고 다채로운 입력과 출력을 추가할 수도 있다. 내장된 우노 WinUI 3 컨트롤에 국한되지 않으므로 자체 맞춤형 컨트롤도 사용할 수 있다.

핫 디자인 시작하기

우노는 최근 무료 계정 사용자를 포함한 모든 등록 사용자에게 핫 디자인 툴의 프리뷰를 제공했다. 비주얼 스튜디오 윈도우 데스크톱 애플리케이션을 통해 사용해보기로 했다.

시작하기 위한 사전 요건이 많지만, 간단한 명령줄 툴로 미충족된 요구사항을 확인한 다음 필요에 따라 설치할 수 있다. 이에 따라 필자는 개발용 PC에서 마이크로소프트 JDK와 구글 안드로이드 개발자 툴의 최신 버전이 설치됐는지 확인하고 올바른 버전의 비주얼 스튜디오가 있고 워크로드가 적절히 구성됐는지 확인했다.

uno-check 툴은 닷넷 명령줄을 통해 설치되며, 설치된 후에는 동일한 터미널에서 실행할 수 있다. 모든 준비를 완료하려면 몇 번의 재부팅이 필요할 수 있다. uno-check에서 자동화할 수 없는 요구사항이 하나 있었는데, 안드로이드 디바이스 에뮬레이터 설치였다. 이 작업은 비주얼 스튜디오 내부에서 수행해야 한다. 비주얼 스튜디오가 공식 안드로이드 디바이스 관리자를 실행하면 로컬 가상머신(필자의 경우 x64 코드를 실행하는 픽셀 8 프로)을 빠르게 설정할 수 있다.

모든 요건을 갖추면 비주얼 스튜디오 마켓플레이스에서 우노 플랫폼 툴을 설치할 수 있다. 설치에 약간의 시간이 걸리며 IDE를 재시작해야 한다. 설치가 완료되면 우노 확장 프로그램이 애플리케이션 템플릿과 핫 리로드/핫 디자인 플러그인을 추가해서 사용할 수 있도록 한다. 첫 코드는 우노 웹 사이트에서 빌드할 수 있다.

비주얼 스튜디오에서 우노 계정에 로그인하지 않았다면 이 시점에 로그인하라는 메시지가 표시된다. 로그인하면 무료 사용자와 유료 사용자 모두 핵심 우노 스튜디오 서비스에 액세스할 수 있으며, 유료 사용자에게는 플랫폼의 피그마(Figma) 통합이 제공된다.

툴이 설치되고 우노 템플릿에서 작업을 시작하면 코드를 추가할 수 있다. 필자가 빌드한 기본적인 2뷰 애플리케이션은 한 뷰에 입력 상자가 있고 다른 뷰에는 입력을 표시하는 텍스트 영역이 있다. 대상 환경을 데스크톱으로 설정하고 비주얼 스튜디오 디버거를 실행해서 핫 디자인을 시작하고, 우노 툴바의 아이콘을 클릭해 핫 디자인 뷰로 전환하고 편집을 시작했다.

비주얼 스튜디오(그 외에 VS 코드, 기타 닷넷 개발 툴)에 이 툴을 두는 것은 개발자/디자이너 루프의 속도를 높이기 위한 좋은 방법이다. 데스크톱, 모바일, 웹어셈블리 지원을 통해 코드와 XAML 편집 툴에서 모두 개선된 협업과 통합을 활용하여 빠르게 코드를 다듬을 수 있다.

애플리케이션 개발 마감 기한이 갈수록 짧아지는 상황에서 이와 같은 툴은 필수적이다. 디자이너와 개발자에게 컨텍스트 전환을 강요해서는 안 된다. 이들이 작업 흐름을 유지해야 오류와 버그가 발생할 위험이 낮아진다. 우노는 크로스 플랫폼 디자인 컨트롤 모음으로 잘 알려져 있지만 팀은 우노를 사용해 애플리케이션을 개발하고 빌드하는 과정에서 많은 것을 배웠고, 이제 나머지 사용자에게도 그 경험을 전수하고 있다.
dl-itworldkorea@foundryco.com