VBA 사용자 폼을 VSCode에서 UI 편집 가능하게 만든 xlflow 업데이트 소개

저는 Excel VBA를 AI 에이전트로 완전히 자율 개발하기 위한 개발 도구 체인 xlflow와, LSP 등을 이용한 입력 보완 기능을 제공하는 VSCode 확장 기능을 개발하고 있습니다.

이번에는 사용자 폼을 VSCode 상에서 UI 편집 가능하게 하는 대규모 업데이트를 출시했기 때문에 기사를 쓰게 되었습니다.

xlflow에 대한 개요는 아래 Zenn 아티클에서 소개했습니다!

코딩 에이전트로 프로그램을 작성하는 것이 당연한 현대

Excel VBA에서도 소스 코드를 Git으로 관리하는 것은 그리 드문 일이 아닙니다.
표준 모듈이나 클래스 모듈이라면, .bas / .cls로 파일에 저장하면 VS Code에서 편집할 수 있고, Git으로도 차이점을 확인할 수 있습니다.

반면에 오랫동안 다루기 어려웠던 것이 있었습니다.

사용자 폼(UserForm) 입니다.

사용자 폼은 코드만이라면 텍스트로 취급할 수 있지만, 폼의 레이아웃이나 컨트롤 배치는 VBE 내부의 Designer 정보로 유지됩니다.

따라서 다음과 같은 문제가 남아 있었습니다:

• Git에서 차이점 확인이 어려움 (읽기 힘듦)
• AI가 편집하기 어려움
• Excel / VBE에 의존함
• 폼 편집만은 사람이 VBE에서 직접 해야 함

이번 xlflow의 최신 릴리스로 이 부분을 상당히 해소할 수 있게 되었습니다.

사용자 폼을 Git 친화적인 YAML 형식으로 취급하고, 그 YAML을 VS Code 상의 GUI Designer로부터 편집하며, 나아가 pure-Go를 이용해 .xlsm 파일로 다시 변환할 수 있게 되었습니다.

이 기사에서는 이 메커니즘에 대해 소개합니다.

VBA 코드는 예를 들어 다음과 같이 일반 텍스트로 관리할 수 있습니다.

Private Sub CommandButton1_Click()
MsgBox "Hello"
End Sub

이는 Git과 매우 궁합이 좋습니다.
차이점도 그대로 읽을 수 있습니다.

- MsgBox "Hello"
+ MsgBox "Hello, xlflow"

AI에게도 그대로 전달할 수 있습니다.

반면 사용자 폼의 Designer 정보는 그렇게 간단하지 않습니다.
예를 들어,

• CommandButton의 위치
• TextBox의 크기
• Label의 Caption
• Frame과의 부모-자식 관계
• Font 등등...

단순한 VBA 코드만으로는 표현되지 않습니다.

이 때문에 소스 코드를 전부 VS Code로 옮겨도,

사용자 폼의 모양만은 VBE를 열고 사람이 고쳐야 하는 경향이 있었습니다.

AI 에이전트에게 VBA 개발을 맡길 경우에도, 여기가 상당히 큰 벽이 됩니다.

xlflow에서는 사용자 폼의 Designer 정보를 구조화하여 YAML 형식으로 관리합니다.
예를 들어 간단한 사용자 폼은 다음과 같습니다.

schemaVersion: 1
kind: xlflow.userform
basis: designer
...

이것은 일반 텍스트 파일입니다.
Git으로 그대로 차이점 관리가 가능합니다.

예를 들어 버튼을 조금 오른쪽으로 옮겼다면,

- id: submit
name: SubmitButton
type: CommandButton
...

처럼 차이점이 발생합니다.
VBE 상에서 폼을 편집했을 때와 달리, '무엇이 바뀌었는지'가 사람에게도 AI에게도 알려집니다.

사용자 폼 전체를 YAML로 손으로 작성하고 싶다고는 해도, 아무래도 그것은 번거롭습니다.

그래서 xlflow 최신 버전(v0.36.0)에서 VS Code 확장 측에 GUI Designer 기능을 구현했습니다.
현재는 VS Code 상에서 사용자 폼 정의의 yaml 파일을 열면,

위와 같은 화면처럼 일반적인 폼 디자이너와 비슷한 조작이 가능합니다.

예를 들어,

• 컨트롤을 드래그하여 이동
• 크기 조정(Resize)
• 새로운 TextBox나 Button 추가
• Frame으로 이동
• MultiPage / Page 편집
• 복사 / 붙여넣기
• Z-order 변경
• Tab order 변경
• Font 변경
• 색상 변경
• 이미지 설정

등 기본적인 편집 조작을 대체로 구현했습니다.

하지만 중요한 것은, GUI Designer 자체가 고유한 형식을 가지고 있지 않다는 점입니다.

GUI로 조작한 결과는 최종적으로 모두 YAML 형식의 FormSpec에 반영됩니다.

반대로 YAML을 직접 편집하면 Designer 측에도 반영됩니다.

YAML이나 JSON 형식은 아시다시피 AI에게 매우 이해하기 쉬운 구조화 정보입니다.

이를 통해 사용자 폼의 UI를 AI가 완전히 인지할 수 있게 되어, AI에 의한 편집이 가능해집니다.

예를 들어 다음과 같이

"폼에서 흔히 사용하는 신청 입력 폼을 만들어줘"라고 요청하면, AI 에이전트가 yaml로 UI를 작성하고 올바르게 GUI에 반영되었습니다.

그 후, 사람이 GUI Designer에서 열어 디자인을 수동으로 미세 조정할 수 있습니다.

그리고 그 변경 또한 Git 차이점(diff)으로 남습니다.

즉,

AI가 큰 틀을 만들고
↓
사람이 GUI로 조정하며
...

하는 흐름이 성립합니다.

GUI Designer에서 코드로 연결되는 경로도 추가했습니다.

예를 들어 텍스트 상자를 더블클릭하면,

Private Sub NameInput_Change()
End Sub

처럼 본래의 것과 비슷한 느낌으로 코드의 초안이 생성되어, 프로그램을 작성해 나갈 수 있습니다.

이는 VBE(Visual Basic Editor)의 조작감에 가깝습니다.

이벤트 목록도 선택할 수 있습니다.

VBE의 CreateEventProc에서 실제 선언을 확인하면서 이벤트 카탈로그를 만들고 있기 때문에, UserForm / Control별 이벤트 차이점도 고려했습니다.

Excel VBA를 AI에게 전적으로 맡기고 싶어 개발을 시작한 xlflow는 계속해서 진화하고 있습니다.

xlflow를 사용하고 있는 일부 사용자들로부터 실제로 감사하다는 목소리도 듣고 있어, 저 역시 현대 VBA 개발에서의 데파크트 스탠다드 툴(de facto standard tool)을 목표로 하고 있으니, 궁금하신 분들은 꼭 사용해 보시고 피드백을 주시면 감사하겠습니다!

괜찮으시다면 GitHub 스타(Star)도 주시면 개발에 큰 힘이 됩니다🌟

그럼 또 만나요👋