스마트 폼디(SmartFormDe)와 vscode 연동

증권사 모바일앱 개발에 많이 사용되고 있는  스마트폼디(Smart Form Designer)와 vscode를 연동했던 내용을 소개합니다.

스마트폼디(이하 폼디)는 요즘의  에디터들에 비하면 많은 부분에서  불편합니다.
MS오피스의 vba 에디터에 근접하거나 그 보다는 조금 더 낮은 정도의 수준이 아닐까 생각됩니다.

화면 개발 시
레이아웃 에디터, 스크립트 에디터, 디버깅
이렇게 3가지 정도가 가장 불편한 점이었습니다.

약 3개월 정도의 개발기간 동안에 화면 개발이 아닌 위의 문제점들을 개선하기 위해 시간을 할애할 수는 없기  때문에  2~3일 정도의 짧은 기간 내에 무언가를 개선할 수 있을지 고민했습니다.

그리고 나온 결론은 "폼디의 스크립트 에디터를 vscode로 대체할 수 있다면  생산성을 높일 수 있을 것 같다. " 였습니다.

그래서 2주 정도 하루에 짧게는 몇 분에서 길게는 한 시간 정도를 투자해 연동 툴을 만들었습니다.

그리고 결과는 실제 개발 시 자잘한 문제가 있기는 하지만 이전보다 꽤나 편해졌다입니다.

vscode의 자동완성, 오류 검사, 함수, 인자 힌트 툴팁, 검색 등의 많은 기능들을 그대로 사용할 수 있었기에  스크립트 편집에서는 전보다 생산성이 대폭 높아졌습니다.

연동 툴이 동작하는 방식은 다음과 같습니다.

1. 폼디에서 특정화면을 열면 화면파일상에서 스크립트 소스만 추출해서 별도의 파일을 만든다.

2. 추출된 파일을 vscode에서 열고
수정한다.

3. 수정한 파일을 저장하면 스크립트를  폼디 스크립트 편집기 화면에 반영한다.

위에 보시는 것처럼 화면 파일상의 스크립트 소스만 따로 읽어서 vscode에서 작업하고 다시 작업한 내용을 폼디에 적용하는 것이 다입니다.

이러한 과정들은 자동화(UIA), vscode extension 및 json설정파일들을 이용했습니다.

자동화는 폼디의 창들이 열리고 닫히는 이벤트를 감지할 때,  vscode에서 수정된 내용을 폼디 에디터 창에 적용시킬 때, 폼디와 vscode 간의 포커스를 제어할 때 등의 상황에 사용되었습니다.
vscode에서는 언어 extension과 파일 저장 이벤트를 핸들링할 수 있는 extension을 설치하고 기타 단축키, 연동 툴 통신 등을 위한 json 설정하고
폼디 컨트롤들의 자동완성 및 힌트 툴팁에 필요한 데이터 파일을 만들었습니다.

지정된 개발 툴을 사용해야 하고 해당 툴의 편집 기능이 불편한 경우 위와 같이 자동화와 vscode의 extension들을 활용한다면 생산성을 높이는데에 도움이 되는 것 같습니다.