Claude Code 사용자라면 반드시 설치해야 할 두 가지 도구 - Agentation과 Readout

Claude Code로 프론트엔드 작업을 할 때마다 두 가지가 답답했습니다. 에이전트에게 “어디를 고쳐”를 정확히 전달하는 것. 그리고 세션이 끝난 뒤 에이전트가 뭘 했는지 파악하는 것.

이 두 문제를 해결하는 도구를 한 사람이 만들었습니다.

Agentation: UI 요소를 말로 설명하는 시대는 끝났습니다

“사이드바에 있는 파란 버튼 좀 고쳐줘”라고 에이전트에게 말하던 시절은 지났습니다.

Agentation은 화면에서 고치고 싶은 요소를 클릭하면 CSS 선택자와 위치 정보를 자동으로 추출하는 시각 피드백 도구입니다. “사이드바에 있는 파란 버튼”이라고 설명할 필요 없이 .sidebar > button.primary를 에이전트에게 바로 넘기면 됩니다.

차이는 즉각적입니다. 프롬프트 한 번에 수정이 안 맞아서 3~4번 반복하던 작업이 대부분 한 번에 끝납니다.

핵심 기능

• 설치 한 줄이면 끝. npm i agentation 후 React 18+ 프로젝트에 컴포넌트 하나만 추가하면 됩니다.
• 출력 모드 4단계. Compact(선택자+메모)부터 Forensic(계산된 스타일 전부)까지 상황에 맞게 선택할 수 있습니다.
• MCP 서버 연동 Agent Sync. MCP 서버를 연결하면 에이전트가 시각 피드백을 실시간으로 읽습니다.
• 애니메이션 디버깅. CSS 애니메이션을 중간 프레임에서 일시 정지한 뒤 중간 상태에 대한 피드백이 가능합니다. 타이밍 곡선, 키프레임 위치까지 잡을 수 있습니다.
• 텍스트·영역 선택. 텍스트를 선택하거나 빈 영역을 드래그해서 여백과 레이아웃에 대한 피드백도 줄 수 있습니다.

npm 다운로드 17만 돌파, X 트윗 하나로 조회수 67만. 이 정도 수치는 실제 문제를 해결하는 도구라는 뜻입니다.

Readout: Claude Code 세션을 영상처럼 되감아 보기

Readout은 Claude Code 개발 환경과 설정 상태를 한 화면에 보여주는 macOS 네이티브 앱입니다.

가장 인상 깊은 기능은 세션 리플레이입니다. 과거 세션을 골라서 타임라인을 쭉 훑을 수 있습니다. 프롬프트, 도구 호출, 파일 변경이 시간 순으로 나오고, 편집된 파일이 실시간으로 깜빡이며 표시됩니다.

에이전트 시스템을 설계하거나, 긴 자율 실행이 끝난 뒤 어떤 일이 있었는지 감사하려면 세션 로그 분석은 필수입니다. 이만큼 직관적으로 보여주는 도구는 아직 못 봤습니다.

주요 특징

• 무료 다운로드. readout.org에서 바로 받을 수 있습니다. 계정 필요 없이 로컬에서만 동작합니다.
• 재생 속도 조절. 속도를 바꾸거나 이벤트 단위로 수동 이동할 수 있습니다.
• Codex 지원. Claude Code와 Codex 세션 모두 지원합니다.

프론트엔드 병목은 모델 성능이 아니라 피드백 전달 정확도입니다

통념을 뒤집는 이야기입니다. AI 코딩 도구의 성능을 탓하기 전에, 내가 전달하는 피드백의 품질부터 점검해야 합니다.

Storybook으로 컴포넌트를 격리하고, Agentation으로 시각 피드백을 캡처해서, Claude Code에 넘기세요. 이 루프만 갖추면 대부분의 UI 수정을 에이전트 혼자 처리할 수 있습니다.

Agentation 문서 사이트 자체가 이 워크플로우로 만들어졌습니다. 애니메이션 타이밍 조정부터 커서 움직임 개선까지 전부 시각 피드백 루프를 반복한 결과물입니다.

같은 만든이, 같은 출발점

두 도구 모두 Coinbase Base 디자인 헤드인 Benji Taylor가 만들었습니다. 개발이 본업이 아닌 사람이 AI로 코딩하면서 느낀 불편함을 직접 도구로 만든 겁니다.

“이걸 왜 말로 설명해야 하지?”가 Agentation이 됐고, “세션 기록을 한눈에 못 보나?”가 Readout이 됐습니다. 사용자 관점에서 출발한 도구가 오히려 실무 개발자 워크플로우에 더 잘 맞는 경우가 늘고 있습니다.

Benji는 Family 지갑을 창업한 뒤 Aave 인수를 거쳐 현재 Coinbase Base에서 디자인을 이끌고 있습니다.

핵심 메시지

AI 코딩 도구를 잘 쓰는 것만으로는 부족합니다. 도구가 부족하면 직접 만드는 사람이 결국 앞서갑니다.