블로그 작가가 Excalidraw 프레임 naming convention과 VSCode 익스텐션 커스텀으로 다이어그램 내보내기 절차를 9 clicks에서 naming만으로 전환했다

Context

블로그 글 작성 시 Excalidraw 다이어그램 수정과 텍스트 정제 과정이 반복되면서 graphics-text dependency 문제가 발생했다. 기존 수동 내보내기는 프레임 선택부터 light/dark mode별 export까지 9 clicks에 45초가 소요되었다. GitHub Action 기반 첫 번째 자동화는 ARM Mac에서 Docker 이미지를 실행할 수 없는 환경 제약으로 로컬 preview가 불가능했다.

Technical Solution

• Excalidraw 다이어그램 요소를 frame으로 감싸고 export_ 접두사로 naming convention을 정의했다
• Excalidraw VSCode extension을 fork하여 파일 변경 감지 시 자동으로 SVG를 생성하는 기능을 추가했다
• frame naming에서 이미지 이름을 추출하여 ${name}.light.exp.svg와 ${name}.dark.exp.svg 파일 쌍을 생성하도록 했다
• excalirender 라이브러리를 활용하여 dark mode SVG export 시 --dark 플래그를 전달했다
• GitHub Action에서 jq 명령어로 .excalidraw JSON 파일 내 type이 frame인 elements만 필터링했다

Impact

다이어그램 내보내기 소요 시간이 45초에서 frame naming 1회로 감소했다.

Key Takeaway

반복적인 수동 작업을 자동화할 때 개발자 본인만의 workflow에 맞춘 custom tool이 범용 솔루션보다 더 높은 실용성을 제공한다.