Markdown 파일로 AI 작업을 자동화할 수 있습니다. 제가 시각적 도구를 만든 이유는 바로 이것입니다.
Source: Dev.to
If you use Claude Code, you can already:
- create an agent file,
- write some instructions in Markdown, and
- run a multi‑step workflow from your terminal.
It works. It’s simple. And for a lot of developers, that’s enough.
왜 나는 드래그‑앤‑드롭 캔버스로 같은 일을 하는 데스크톱 앱을 만드는 데 몇 달을 보냈을까?
Because I watched my teammates stare at a wall of terminal output with no idea:
- 어느 단계가 방금 실패했는지,
- 어느 단계가 이미 완료됐는지, 혹은
- 전체 비용이 얼마인지.
I realized that the people who benefit most from AI automation are often the ones 가장 불편함을 느끼는 setting it up.
마크다운 방식은 작동합니다… 하지만 그렇지 않을 때도 있습니다
Markdown 파일에서 에이전트를 실행하는 방법은 다음과 같습니다:
claude --agent agents/my-workflow.md간단합니다. 깔끔합니다. 그리고…
- 8단계 중 4단계가 실패 → 처음부터 다시 시작합니다.
- 청구서가 도착하기 전까지 해당 실행 비용이 얼마인지 전혀 모릅니다.
- 팀원이 “이 워크플로우가 뭐 하는 거야?” 라고 물으면 → 마크다운 파일을 가리킵니다.
- 계속 진행되기 전에 5단계에서 인간 검토를 위해 일시 중지하고 싶다면 → 행운을 빕니다.
- 3, 4, 5단계를 병렬로 실행하고 싶다면 → 이제 Bash 스크립트를 작성하게 됩니다.
터미널에 익숙하다면 이 중 어느 것도 치명적인 문제는 아니지만, 많은 사람들에게는 그렇습니다.
Source: …
AgentFlow가 추가하는 기능
AgentFlow는 Claude Code 위에 놓이는 무료 데스크톱 앱입니다. 에이전트 파일이나 CLI를 대체하는 것이 아니라, 마크다운 파일만으로는 얻을 수 없는 시각적 레이어를 제공합니다.
1. 진행 상황을 바로 확인할 수 있음
각 단계는 캔버스 위의 블록으로 표시됩니다. 워크플로가 실행될 때 블록이 실시간으로 색이 바뀝니다:
- 파란색 – 실행 중
- 초록색 – 완료
- 빨간색 – 실패
- 회색 – 대기 중
터미널 출력을 읽어야 어디까지 진행됐는지 알 필요가 없습니다. 캔버스만 보면 됩니다.
이미지: 단계 상태를 보여주는 AgentFlow 캔버스
2. 처음부터 다시 시작하지 않아도 복구 가능
8단계 중 5단계가 실패하면 Resume from failure(실패 지점부터 재개)를 클릭합니다. AgentFlow는 이미 성공한 단계들을 건너뛰고 실패 지점부터 이어서 실행합니다. 마크다운 에이전트라면 전체를 다시 실행해야 합니다.
3. 비용을 정확히 파악할 수 있음
각 실행마다 토큰 사용량과 달러 비용을 단계별로 추적합니다. 대시보드에는 다음이 표시됩니다:
- 총 지출액,
- 가장 비용이 많이 드는 워크플로,
- 가장 비용이 많이 드는 단계.
예산 한도를 설정하면 API 크레딧이 소진되기 전에 자동으로 실행이 중지됩니다.
이미지: 비용 추적 대시보드
4. 인간 검토를 위해 일시 정지 가능
두 단계 사이에 Approval Gate(승인 게이트)를 삽입합니다. 워크플로가 일시 정지되고, 사용자가 지금까지 진행된 내용을 검토한 후에야 계속됩니다. 마크다운 파일로 이를 구현하려면 정말 어려운 작업이 됩니다.
5. 병렬 실행 가능
캔버스에 Parallel(병렬) 블록을 끌어다 놓고 그 안에 단계들을 넣습니다. 단계들이 동시에 실행됩니다—Bash 스크립트도, 백그라운드 프로세스도, wait 명령도 필요 없습니다.
6. 팀원이 코드를 읽지 않아도 이해 가능
워크플로를 팀원과 공유하면, 그들은 AgentFlow를 열어 캔버스를 보고 즉시 워크플로가 무엇을 하는지 파악할 수 있습니다—마크다운을 읽거나 Bash 스크립트를 해석할 필요가 없습니다.
실제로 이건 누구를 위한 것인가?
모두가 이것을 필요로 하는 것은 아닙니다. 이미 에이전트 파일을 작성하고 CLI에서 실행하는 데 익숙하며 비용 추적이나 실패 복구에 신경 쓰지 않아도 된다면, 별도로 사용할 필요가 없습니다.
AgentFlow는 다음과 같은 사람들을 위한 것입니다:
| Audience | Why It Helps |
|---|---|
| AI 자동화에 처음인 사람 | 시각적 캔버스는 Markdown 구문과 CLI 플래그를 배우는 것보다 훨씬 쉬운 시작점입니다. |
| 가시성을 원하는 사람 | 캔버스에서 워크플로우가 단계별로 실행되는 모습을 보는 것이 터미널 텍스트를 스크롤하는 것보다 낫습니다. |
| 비기술적인 팀원과 함께 일하는 팀 | 제품 매니저가 캔버스를 보면 워크플로우를 즉시 파악할 수 있습니다. 이는 순수 Markdown 파일로는 불가능합니다. |
| 실패한 실행에 지친 사람 | 7단계에서 실패해 10단계 워크플로우를 처음부터 다시 시작하는 것은 고통스럽습니다. “실패 지점부터 재시작” 기능이 이를 해결해 줍니다. |
실제 예시: Bug Report → Fix
| 단계 | 유형 | 설명 |
|---|---|---|
| 1 | AI Task | “이 버그 보고서를 읽고 근본 원인을 파악하세요.” |
| 2 | AI Task | “버그에 대한 수정을 작성하세요.” |
| 3 | Shell | npm test |
| 4 | Approval Gate | 커밋하기 전에 수정을 검토합니다. |
| 5 | Git | 커밋하고 푸시합니다. |
저는 이 캔버스를 30 seconds 정도 걸려 그렸고, 수십 번 실행해 보았습니다. 테스트가 3단계에서 실패하면 Resume을 클릭해 그 지점부터 다시 시도하게 됩니다. 이렇게 하면 버그 보고서를 다시 읽고 수정을 다시 작성할 필요가 없습니다.
물론 이 내용을 Markdown 파일로 작성할 수도 있겠지만, 그 경우 승인 게이트, 비용 추적, 그리고 테스트 실패 시 3단계부터 재개할 수 있는 기능을 잃게 됩니다.
Source: …
시작하기
사전 요구 사항
- Claude Code 문서를 설치하고 인증합니다.
- AgentFlow는 Claude Code를 엔진으로 사용합니다.
앱 설치
최신 릴리스에서 사전 구축된 설치 프로그램을 다운로드하세요:
- Linux / macOS / Windows – (link to installer)
또는 소스에서 빌드합니다:
git clone https://github.com/jadessoriano/agent-flow.git
cd agent-flow
npm install
npm run tauri dev60초 안에 첫 워크플로우 만들기
- AgentFlow를 열고 프로젝트 폴더를 선택합니다.
- + New를 클릭합니다.
- 캔버스에 AI Task 블록을 끌어다 놓고,
Write unit tests for the login function을 입력합니다. - Shell 블록을 끌어다 놓고 필요한 명령을 입력합니다(예:
npm test). - 블록을 연결하고, 원하는 Approval Gates 또는 Parallel 블록을 추가한 뒤 Run을 클릭합니다.
이제 워크플로우가 시각화되고, 재개 가능하며, 비용이 추적되고, 협업 준비가 완료되었습니다. 즐기세요!
빠른 시작 예시
npm test- 화살표로 연결
- Run을 클릭
이제 끝—두 단계만으로 자동화되고, 실시간 상태와 비용 추적이 가능합니다.
기술 스택 (관심 있으시면)
- 데스크톱: Tauri v2 (Rust)
- 프론트엔드: React 19, TypeScript, Tailwind CSS
- 캔버스: React Flow
- 상태: Zustand
- 데이터베이스: SQLite
- 비동기: Tokio
크로스‑플랫폼. 가볍다. Electron이 아님.
오픈 소스 – 누락된 부분을 알려 주세요
AgentFlow는 MIT 라이선스를 가지고 있으며 활발히 유지 관리됩니다. 사용해 보시고 혼란스럽거나, 깨졌거나, 누락된 부분을 발견하시면 이슈를 열어 주세요 – 저는 모든 이슈를 읽습니다.