쉬운 설명
AI에게 코딩을 맡기면 중간 과정은 잘 보이지 않고, 까만 화면에 로그만 주르륵 지나가다가 결과만 뚝 떨어질 때가 많죠. Agent Flow는 AI가 머릿속으로 어떤 순서로 일했는지를 마치 지도처럼 그림으로 보여주는 도구입니다. 어떤 도구를 언제 썼는지, 어디서 생각이 갈라졌는지, 어디서 시간이 오래 걸렸는지를 노드(동그라미나 상자 모양의 점)로 표시해 줘서 눈으로 쉽게 확인할 수 있답니다.
요약
Claude Code나 Codex 같은 코딩 에이전트에게 일을 맡기면 대개 텍스트 로그만 쭉 올라오고 결과물만 남습니다. 일이 잘 끝나면 괜찮지만, 문제가 생겼을 때는 어디서부터 꼬였는지 수백 줄의 로그를 거슬러 올라가며 찾아야 해서 참 번거롭죠. Agent Flow는 이런 답답함을 풀기 위해 나온 시각화 도구예요. 에이전트가 일하는 동안 도구 호출이나 분기, 결과 반환 같은 흐름을 실시간 노드 그래프로 시원하게 펼쳐서 보여줍니다. 각 노드를 누르면 세부 내용까지 살펴볼 수 있어서, 에이전트의 생각을 텍스트 대신 그림으로 편하게 따라갈 수 있습니다.
이 도구는 AI 에이전트로 게임을 만드는 플랫폼인 CraftMyGame을 만들던 Simon Patole이라는 개발자가 만들었어요. 에이전트 디버깅이 너무 힘들어서 직접 만들어 쓰다가 공개한 것이라고 합니다. VS Code 확장 프로그램으로도 나와 있고, npx 명령어 한 줄이나 로컬 개발 서버로도 쉽게 띄울 수 있어서 써보기도 편해요. Claude Code와 Codex 세션을 동시에 모니터링하면서 나란히 보여주고, 각각 어떤 런타임인지 태그까지 붙여주니 두 도구를 함께 쓰는 분들에게는 특히 유용할 것 같습니다.
활용 포인트
실제로 쓸 수 있는 상황을 예로 들어볼게요. Claude Code에 대규모 리팩토링 작업을 맡겼는데 엉뚱한 결과가 나왔을 때, 복잡한 로그를 처음부터 다 읽지 않아도 됩니다. Agent Flow 화면의 노드 그래프를 보면서 '어느 단계에서 잘못된 도구를 불렀는지'를 한눈에 짚어낼 수 있거든요.
VS Code 확장으로 설치하면 패널을 처음 열 때 Claude Code 훅(특정 시점에 자동으로 실행되게 돕는 연결 장치)이 알아서 설정되기 때문에 따로 복잡한 세팅을 할 필요도 없습니다. 터미널에서 npx agent-flow-app을 실행한 뒤 브라우저로 localhost:3000을 열고, 다른 터미널에서 Claude Code 세션을 시작하기만 해도 실시간으로 이벤트가 들어오는 것을 볼 수 있죠.
개발자라면 에이전트가 토큰과 시간을 어디서 많이 쓰는지 파악해서 프롬프트나 지시 사항을 다듬는 데 활용할 수 있습니다. 팀 단위로 에이전트를 쓴다면 세션별 흐름을 비교하면서 어떤 세션이 왜 빠르고 느린지 원인을 찾는 데도 유용해요. 게다가 JSONL 형식의 이벤트 로그 파일을 직접 불러와서 마치 녹화본을 다시 돌려보듯 분석할 수도 있으니, 문제가 생긴 세션을 기록해 두었다가 팀원들과 함께 리뷰해보는 것도 좋은 방법입니다.
주의 사항
현재 Agent Flow는 Claude Code와 Codex 두 가지 런타임만 지원하고 있어서, 다른 에이전트 프레임워크를 쓰고 계신다면 바로 적용하기는 어렵습니다.
그리고 npx로 배포된 바이너리 버전에는 기본적으로 익명 사용 통계(텔레메트리) 기능이 켜져 있어요. 세션 수나 작업 시간, 이벤트 수, OS 정보 같은 단순 집계 데이터만 전송되고, 프롬프트 내용이나 파일 경로, 개인정보는 수집하지 않는다고 명시되어 있긴 합니다. 그래도 이 기능이 꺼려진다면 옵트아웃(기능 끄기) 설정을 해두시는 게 좋습니다. pnpm으로 직접 개발 서버를 돌리거나 VS Code 확장을 쓸 때는 이런 텔레메트리가 아예 전송되지 않는다고 하니 참고해 주세요. 아직 초기 오픈소스 프로젝트인 만큼 세부 기능이나 설정 방법은 앞으로 바뀔 수 있다는 점도 알아두시면 좋습니다.
자체 검증
디스커스 글, VS Code 마켓플레이스, GitHub 저장소 등 원문 세 자료를 교차 확인한 결과 핵심 내용은 모두 일치합니다. Agent Flow가 Claude Code와 Codex의 실행 흐름을 실시간 노드 그래프로 시각화한다는 점, 제작자가 CraftMyGame을 만들던 Simon Patole이라는 점, VS Code 확장·npx·pnpm 개발 서버의 세 가지 방식으로 실행할 수 있다는 점, 텔레메트리는 npx 배포판에만 기본 활성화되고 프롬프트나 파일 경로는 수집하지 않는다는 점 모두 원문에서 사실로 확인되었습니다. 다만 구체적인 실제 사용 후기나 성능 지표, 정확한 출시 날짜 등은 원문에 언급되어 있지 않아 본문에도 따로 담지 않았습니다.
태그
#AI #ClaudeCode #Codex #개발도구 #에이전트 #시각화 #디버깅 #VSCode
원문
https://discuss.pytorch.kr/t/agent-flow-claude-code-codex/11767
https://marketplace.visualstudio.com/items?itemName=simon-p.agent-flow
https://github.com/patoles/agent-flow