Agentation: AI 코딩 에이전트를 위한 시각적 피드백 도구

AI 코딩 에이전트와 함께 일할 때 가장 큰 문제 중 하나는 “그 버튼 좀 수정해줘”라고 말해도 에이전트가 어떤 버튼인지 정확히 알지 못한다는 것이다. 클래스명, 파일 경로, 정확한 위치를 설명하려다 보면, 차라리 직접 수정하는 게 빠르겠다는 생각이 든다.

Agentation은 이 문제를 해결한다. 화면에서 요소를 클릭하고 피드백을 적으면, 에이전트가 이해할 수 있는 구조화된 마크다운으로 변환해준다.

핵심 아이디어: 포인팅으로 소통하기

Agentation의 워크플로우는 놀라울 정도로 단순하다:

1. 화면의 문제가 있는 요소를 클릭한다
2. 피드백을 작성한다 (예: “패딩 더 필요함”, “이 색상 너무 밝음”)
3. 생성된 마크다운을 복사해서 Claude Code나 Cursor에 붙여넣는다
4. 에이전트가 정확한 위치를 찾아 수정한다

이 과정이 반복될수록 에이전트는 내 의도를 더 정확히 파악하게 된다.

주요 기능

텍스트 선택

가장 간단한 케이스다. 오타를 발견하면 텍스트를 선택하고 수정 내용을 적는다. 선택된 문자열이 출력에 포함되어 에이전트가 정확히 무엇을 찾아야 하는지 알 수 있다.

요소 클릭

버튼, 카드, 이미지 등 모든 요소를 클릭해서 주석을 달 수 있다. Agentation이 클릭된 요소의 컨텍스트(클래스명, DOM 위치, 바운딩 박스)를 자동으로 수집한다.

멀티 셀렉트

여러 요소를 동시에 선택해서 같은 피드백을 줄 수 있다. 예를 들어 모든 네비게이션 링크에 동일한 hover 효과를 적용하고 싶을 때 유용하다.

영역 선택

빈 공간도 선택할 수 있다. 레이아웃 피드백을 줄 때 “이 간격이 너무 좁음” 같은 걸 시각적으로 표현할 수 있다.

애니메이션 일시정지

CSS 애니메이션이 가장 까다롭다. 0.5초 동안만 존재하는 상태를 수정하려면? 애니메이션을 멈추고 정확히 그 순간을 클릭하면 된다.

출력 포맷의 정밀함

Agentation이 생성하는 마크다운에는 단순한 피드백 텍스트뿐 아니라 다음 정보가 포함된다:

• CSS 셀렉터: 에이전트가 코드베이스를 grep할 수 있는 정확한 선택자
• React 컴포넌트명: 올바른 파일을 찾기 위한 힌트
• 계산된 스타일: 현재 appearance를 이해하기 위한 정보
• DOM 경로: 요소의 위치를 식별하는 정보

“사이드바의 파란 버튼”이라고 모호하게 설명하는 대신, .sidebar > button.primary 같은 정확한 선택자를 제공한다.

컨텍스트 캘리브레이션

문제에 따라 필요한 컨텍스트 양이 다르다. 오타 수정은 텍스트 위치만 있으면 되지만, 애니메이션이 어색한 이유를 디버깅하려면 계산된 스타일, 바운딩 박스, 전체 DOM 경로가 필요할 수 있다.

Agentation은 4가지 출력 모드를 제공한다:

설치와 사용

설치는 간단하다. React 프로젝트에 하나의 컴포넌트만 추가하면 된다:

npm install agentation

import { Agentation } from "agentation";

export default function Layout({ children }) {
  return (
    <>
      {children}
      {process.env.NODE_ENV === "development" && <Agentation />}
    </>
  );
}

개발 환경에서만 활성화되도록 설정하면, 프로덕션에는 영향이 없다.

MCP 통합: 더 나아가서

MCP(Model Context Protocol)를 사용하면 복사-붙여넣기조차 필요 없다. 에이전트가 실시간으로 피드백을 볼 수 있다:

• “내 피드백 뭐 있어?” — 모든 annotation 조회
• “이거 24px로 해야 할까 16px로 해야 할까?” — 에이전트가 질문
• “패딩 수정했어” — 에이전트가 해결 완료 알림

피드백이 일방통신이 아니라 대화가 된다.

Agentation이 만들어진 방식

흥미롭게도 Agentation 문서 사이트의 모든 애니메이션 데모가 Agentation + Claude Code로 만들어졌다. 저자는 이렇게 설명한다:

“원하는 걸 설명하고, Claude가 만든 걸 확인하고, 수정이 필요한 부분을 클릭해서 피드백을 붙여넣는 과정을 반복했다. Agentation이 Agentation을 만드는 데 도움을 준 셈이다.”

하나의 데모당 수십 번의 반복. 전체 문서 사이트에 걸쳐 수백 번의 iteration. 이 도구가 실제로 얼마나 유용한지 증명하는 셈이다.

마치며: Best-shotting

사람들은 “원샷”에 대해 이야기한다. 에이전트가 첫 번째 시도에서 완벽하게 만드는 것. Agentation은 그보다 더 현실적인 접근을 제안한다:

“에이전트가 최선을 다할 수 있도록 필요한 것을 주는 것. 때로는 한 번에 끝난다. 보통은 몇 번 필요하다. 중요한 건 각 시도가 의미 있게 만드는 것.”

2,600+ GitHub 스타를 기록한 이 프로젝트는 이미 많은 개발자의 워크플로우를 바꾸고 있다. AI 에이전트와 함께 일하는 방식이 점점 더 정교해지는 지금, Agentation은 그 과정을 훨씬 매끄럽게 만들어준다.

🔗 관련 정보

• 공식 사이트: https://agentation.dev
• GitHub: https://github.com/benjitaylor/agentation
• npm: npm install agentation
• 저자 블로그: https://benji.org/agentation