바이브 코딩으로 만든 앱을 시각적으로 설명해 다시 이해하게 해주는 도구를 만들었습니다
I built a tool that visually explains your vibe-coded app so you understand it again
핵심 요약
바이브 코딩으로 복잡해진 앱의 흐름을 시각적 지도로 그려내어 코드 이해를 돕는 도구 'Sketchy'를 소개합니다.
- 시각적 흐름도 — 저장 버튼부터 데이터베이스까지의 과정을 대화형 지도로 시각화함
- 효율적 토큰 사용 — Claude의 아티팩트보다 적은 토큰을 사용해 비용을 절감함
- 안정적인 레이아웃 — 레이아웃 엔진을 통해 노드 위치를 고정하고 깔끔한 도표를 생성함
- 확장성 지원 — Excalidraw 내보내기 및 코드 노드 직접 편집 기능을 제공함
기능은 잘 돌아가. 근데 일주일 뒤에 수정하려고 다시 열어보면, '저장' 버튼 누른 뒤에 대체 무슨 일이 벌어지는 건지 도통 감이 안 잡히지.
그럴 때 쓰라고 내가 Sketchy를 만들었어. 코딩 어시스턴트한테 **“저장 버튼부터 데이터베이스까지 흐름을 추적해서, 어디서 에러 날 수 있는지 알려줘.”**라고 물어봐. 그럼 Sketchy가 그 흐름을 인터랙티브 맵으로 싹 그려주거든. 연결된 노드를 클릭하면 바로 소스 파일이 열리니까 코드가 실제로 어떻게 돌아가는지 바로 확인 가능해.
Claude랑 연동해서 쓸 수 있고, npm으로 Cursor에서도 돌릴 수 있어. 캔버스에 직접 손으로 그릴 수도 있고, Excalidraw로 내보내서 계속 수정하는 것도 가능해.
이 그림 그리는 데 비용이 얼마나 드는지 궁금해서, Claude Code에 똑같은 질문 6개를 던지고 출력 형식을 3가지로 바꿔서 테스트해 봤어. 형식당 2번씩 돌려서 평균 낸 결과는 이거야:
| Output | Cost |
|---|---|
| Plain text | $0.61 |
| Sketchy with JSON | $0.75 |
| Sketchy with compact format | $0.58 |
첫 번째 컴팩트한 답변은 $0.05가 나왔고, 일반 텍스트는 $0.04였어. 6번째 질문쯤 가니까 전체적으로 컴팩트 세션이 5% 정도 더 저렴하더라고. 모델은 그냥 장면에 대한 짧은 설명만 보내고, 레이아웃이랑 렌더링은 Sketchy가 알아서 처리하니까 그 단계에서는 모델 토큰이 전혀 안 들어. 이건 빈 프로젝트에서 돌린 거라 이 수치가 출력 형식에 대한 하나의 기준점이라고 보면 돼. 벤치마크 세부 정보
