Claude Code와 Codex 사용자를 위한 필수 도구 2가지
AI 코딩 도구를 사용하면서 겪는 두 가지 핵심적인 문제점을 해결하는 도구가 등장했습니다. 바로 "어디를 수정할지 정확하게 전달하는 것"과 "AI 에이전트가 작업한 내용을 추적하는 것"입니다. Coinbase Base의 디자인 헤드인 Benji Taylor가 개발한 Agentation과 Readout이 바로 그 해결책입니다.
1. Agentation: 시각적 피드백으로 정확한 수정 지시하기 🎯
Claude Code로 프론트엔드 작업을 할 때 가장 답답한 순간이 있죠. "저기 파란 버튼 좀 고쳐줘"라고 말해도 AI가 엉뚱한 곳을 수정하거나, 몇 번이고 다시 설명해야 하는 경우가 많습니다. Agentation은 바로 이 문제를 해결하는 시각 피드백 도구입니다.
"사이드바에 있는 파란 버튼"이라고 설명할 필요 없이 .sidebar > button.primary 를 에이전트에게 바로 넘기는 거예요.
화면에서 고치고 싶은 요소를 클릭하기만 하면 CSS 선택자와 위치 정보를 자동으로 추출해줍니다. 프롬프트를 3~4번 반복하던 작업이 대부분 한 번에 끝나는 경험을 할 수 있어요. 이미 npm 다운로드가 17만을 돌파했고, X(트위터)에서 67만 조회수를 기록할 정도로 빠르게 확산되고 있습니다.
주요 기능:
- 간편한 설치:
npm i agentation으로 설치하고, React 18+ 프로젝트에 컴포넌트 하나만 추가하면 끝 - 4단계 출력 모드: Compact(선택자+메모)부터 Forensic(계산된 스타일 전부)까지 원하는 수준으로 선택 가능
- MCP 서버 연동: Agent Sync를 통해 에이전트가 실시간 피드백을 읽을 수 있음
- 애니메이션 분석: CSS 애니메이션 중간 상태를 Pause 버튼으로 프레임 고정 후 피드백 가능
- 영역 선택 지원: 텍스트 선택과 영역 드래그로 빈 공간 레이아웃 피드백까지 가능
2. 피드백 품질이 AI 성능을 결정한다 💡
흥미로운 점은, AI 코딩 도구의 성능 문제가 사실은 모델의 한계가 아니라 피드백 전달 정확도에서 비롯된다는 통념을 뒤집는 발견입니다.
"프론트엔드 병목은 모델 성능이 아니라 피드백 전달 정확도입니다"
Storybook으로 컴포넌트를 격리하고 Agentation으로 시각 피드백을 찍어서 Claude Code에 넘기면, 거의 대부분의 UI 수정을 에이전트 혼자서 완료할 수 있습니다. 실제로 Agentation 문서 사이트 자체가 이 루프로 만들어졌다고 해요. 애니메이션 타이밍부터 커서 움직임까지 전부 이 방식으로 반복한 결과물이라는 점이 인상적입니다.
3. Readout: AI 에이전트의 작업을 영상처럼 되감아보기 📹
두 번째 도구인 Readout은 Claude Code 개발 세션을 추적하고 분석할 수 있는 macOS 네이티브 앱입니다. AI 에이전트가 무엇을 했는지, 어떤 파일을 수정했는지, 어떤 도구를 호출했는지 한눈에 파악할 수 있죠.
가장 인상적인 기능은 세션 리플레이입니다. 과거 세션을 선택해서 타임라인을 쭉 훑을 수 있어요. 프롬프트와 도구 호출, 파일 변경이 시간 순으로 나타나고, 편집된 파일이 실시간으로 깜빡이며 표시됩니다.
"에이전트 시스템을 설계하는 입장에서 세션 로그 분석은 필수인데 이만큼 직관적으로 보여주는 도구는 아직 못 봤습니다."
주요 특징:
- 무료 다운로드: readout.org에서 다운로드 가능하며, 계정 필요 없이 로컬에서만 동작
- 세션 리플레이: 과거 작업을 영상처럼 되감아볼 수 있음
- 재생 제어: 재생 속도 조절과 수동 스텝 이동 지원
- 다중 플랫폼: Claude Code뿐만 아니라 Codex 지원도 구현 완료
4. 개발자가 아닌 디자이너가 만든 개발자 도구 🎨
두 도구 모두 Coinbase Base의 디자인 헤드인 Benji Taylor가 만들었습니다. 개발이 본업이 아닌 사람이 AI로 코딩하면서 느낀 불편함을 직접 도구로 만들어버린 거예요.
"이걸 왜 말로 설명해야 하지?"라는 의문이 Agentation이 됐고, "세션 기록을 한눈에 못 보나?"라는 고민이 Readout이 됐습니다. 사용자 관점에서 출발한 도구가 오히려 실무 개발자 워크플로우에 더 잘 맞는 경우가 늘고 있다는 점이 흥미롭습니다.
Benji Taylor의 배경:
- Family 지갑 창업 후 Aave 인수를 거쳐 현재 Coinbase Base 디자인 헤드
- X(트위터) 팔로워 3.4만
- 개발자 도구 커뮤니티에서 빠르게 존재감 확보 중
마치며
AI 코딩 시대에는 도구를 잘 쓰는 것만으로는 부족합니다. 도구가 부족하면 직접 만드는 사람이 결국 앞서갑니다. Agentation과 Readout은 AI 코딩 워크플로우의 두 가지 핵심 병목을 정확히 짚어낸 실용적인 솔루션입니다. Claude Code나 Codex를 사용하고 있다면, 지금 바로 시도해볼 가치가 충분한 도구들입니다. 🚀