Mermaid 텍스트를 Excalidraw로 변환하고 webM 영상으로 만들면, 프로세스 흐름도를 동영상으로 공유할 수 있다. 하루면 파이프라인이 완성된다.
Excalidraw 로 생각 정리를 자주 하는편인데, 유튜브에서 위의 영상이 추천이 되어서 "나중에 보기"에 추가했었다.
봐야지, 봐야지 하면서 미루다가 이번 주말에 보게 되었는데, "아 외국 시키들은 왜 이렇게 똑똑하지?" 혼자 생각하면서, 맞춤 프로젝트를 간단히 수행하고 완료했다.
자동 번역 자막으로 공부한 것이라....
정확하지는 않지만 영상을 요약하면 "Excalidraw 정리 → 애니메이션으로 변환 → (필요시) 유튜브 업로드하는 자동화하는 워크플로우를 설명하고 있는 것 같다.
영상을 다 보지도 않고, 다음과 같이 진행해보고 싶다는 생각이 들었다.
Ok, mermaid 파일 또는 텍스트 요청으로 webm 파일을 만들어보자
mermaid는 텍스트 기반으로 다양한 다이어그램을 생성할 수 있도록 도와주는 툴인데, 마크다운에도 적용 가능한다. webm 은 구글이 발표한 인터넷 영상 스트리밍에 최적화된 규격라는데, 이 동영상을 통해서 알게된 개념이다.
기획을 할 때 프로세스를 도식화할 때가 있는데, 기존에는 mermaid 를 활용하거나, 최근에는 Obsidian 의 excalidraw extension을 설치해서 obsidian 에 정리하고 있다.
Excalidraw가 깔끔하고 집중이 잘 되는 것 같아서 사용하고 있고, 내가 생각한 내용을 흐름으로 보여주기 위해서 ChatGPT, Gemini 에 "이런 흐름을 mermaid 흐름도로 작성해줘" 라고 하면 도식화해서 초안을 잡은 후 재작업을 하기도 한다.
이런 업무 플로우다 보니, "어라, (효과는 별로 없겠지만) 영상으로 제공할 수 있으면 좋지 않을까?" 라는 생각이 들었다.
우선 인풋/아웃풋의 순서를 정리해보면 다음과 같았다.
내가 AI 에 요청해서 mermaid 로 다이어그램 결과를 응답으로 받는다. (텍스트)
또는 응답을 수정해서 저장한다 (파일)
Mermaid 응답 (텍스트 또는 파일) 정보를 받으면 excalidraw 형식으로 변환한다. (json)
Excalidraw 파일을 webM 결과물로 변환한다.
구현 순서는 거꾸로 진행해다. 왜냐면 참고 Github 레포지토리가 있었고, 그걸 수정하는 것이 빠를 것 같았다. 우선 Antigravity 로 해줘~~ 신공으로 진행해서 3번을 하고, 테스트 mermaid 파일을 excalidraw 형식으로 변환해서 전체 플로우가 돌아가는지 점검했다. 마지막으로, AI API 를 활용해서 텍스트 요청으로도 전체 프로세스가 수행되도록 진행했다.
이 과정이 하루만에 수행이 되긴했지만...많은 어려움이 있었는데, 우선 화살표가 잘 그려지지 않았다. 아마 각 도형 간의 위치와 화살표의 위치 등을 고려해야 할 것이 많아 보였다. (Antigravity, Cursor, Codex 등 다 힘들어 함)
여튼 시작을 했고 성급하게 마무리를 지었지만...하하
많이 어렵다. 바이브 코딩 자체가 처음이라면 바이브코딩 시작하기 전에 알아두면 좋은 개념을 먼저 보는 것도 좋고, 완성된 결과물을 웹으로 배포하고 싶다면 포트폴리오 웹 페이지 만들기도 참고하자.
레퍼런스
https://github.com/excalidraw/mermaid-to-excalidraw?tab=readme-ov-file
GitHub - excalidraw/mermaid-to-excalidraw: Generate Excalidraw diagrams from Mermaid
https://github.com/dai-shi/excalidraw-animate/blob/main/vite.config.ts
excalidraw-animate/vite.config.ts at main · dai-shi/excalidraw-animate
불러오는 중...