Agentation
Benji Taylor · 코딩
Agentation은 UI 주석을 AI 코딩 에이전트를 위한 구조화된 맥락으로 바꾸는 데스크톱 비주얼 피드백 도구다. 망가진 버튼을 말로 설명하는 대신, 그 버튼을 클릭하고 메모를 적은 뒤 CSS 선택자, 소스 파일 경로, 사용자의 의도, 그리고 해당 요소의 실제 React 컴포넌트 트리를 담은 markdown 블록을 복사한다. 그 블록을 Claude, Codex, Gemini, 혹은 코드를 읽을 수 있는 어떤 에이전트에 넘겨도, 어떤 요소를 가리키는지 정확히 안다.
Agentation 소개
Agentation이란
Agentation은 실행 중인 앱과 AI 코딩 어시스턴트 사이에 놓이는 에이전트 비의존적 피드백 계층이다. React 앱에 작은 툴바를 설치하고, 요소에 마우스를 올려 이름을 확인한 뒤, 아무 요소나 클릭해 코멘트를 붙인다. 그러면 도구가 모든 것을 markdown으로 정리하고, 그걸 에이전트와의 대화에 붙여넣는다.
해결하는 문제는 구체적이다. 에이전트에게 "사이드바의 파란 버튼이 이상해 보여"라고 말하면, 어떤 요소를 뜻하는지 추측해야 하고, 추측이 틀릴 때마다 왕복이 한 번씩 낭비된다. Agentation은 그 추측을 .sidebar > button.primary, 소스 파일, React 컴포넌트 트리라는 단단한 식별자로 대체한다. 에이전트는 색을 찾는 대신 코드를 grep한다. 추측이 없다.
가장 큰 걸림돌은 Agentation이 현재 데스크톱 전용이라는 점이다. 모바일 앱도, 스마트폰 워크플로도 없고, 작업 공간이 태블릿이라면 거기서 주석을 달 방법도 없다. 또한 React 프로젝트를 우선 대상으로 삼는다. 컴포넌트 트리와 선택자 출력이 그 구성을 전제로 하기 때문이다.
시작하기
npm install agentation(또는 선호하는 패키지 관리자)로 패키지를 설치하고 Agentation 컴포넌트를 앱에 추가한다.- 페이지 오른쪽 아래 아이콘에서 툴바를 연다.
- 요소에 마우스를 올려 이름을 확인하고, 요소를 클릭해 주석 팝업을 연다.
- 피드백을 쓰고 의도와 우선순위를 고른 뒤 Add를 클릭한다.
- 정리된 markdown을 복사해 AI 코딩 에이전트에 붙여넣는다.
제품 정보
Agentation의 요금, 지원 플랫폼, 성능을 한눈에 확인해 보세요.
추천 대상
이 도구가 가장 잘 맞는 사용자, 작업, 상황입니다.
사용자
- AI 코딩 에이전트를 쓰는 프런트엔드 개발자. 프로젝트가 데스크톱 브라우저에서 돌아간다면, 출력이 메모를 실제 선택자와 파일 경로에 대응시킨다.
- 라이브 빌드에 피드백을 주는 프로덕트 디자이너. 설명하는 대신 정확한 요소를 가리킨다. 다만 먼저 앱에 툴바를 설치해야 한다.
- 내부 QA를 하는 소규모 엔지니어링 팀. 로컬 Node.js 프로세스를 돌려도 괜찮다면, MCP 서버를 통해 주석을 해결하고 확인한다.
작업
- UI 주석 워크플로에서 스타일 버그를 보고한다. 요소를 주석하고 기대한 모습과 실제 모습을 적는다.
- 오타를 표시한다. 에이전트가 올바른 문자열을 고칠 수 있도록 정확한 텍스트를 선택한다.
- 애니메이션을 검토한다. 먼저 프레임을 멈춘 뒤 주석한다.
- 디자인 결정의 명확화를 에이전트에 요청한다. 주석에 붙은 채로 남는 후속 질문을 보낸다.
활용 상황
- 두 번째 창에 Claude Code나 Codex를 열어 두고 React 앱을 반복 개선한다.
- 파일은 알지만 줄은 모르는 자기 프로젝트를 디버깅한다.
- 새 기능 브랜치가 QA에 도달하기 전에 개발자 피드백 도구로 시험한다. 디자인과 엔지니어링 메모가 에이전트가 이미 이해하는 같은 구조화 포맷으로 들어간다.
- 피드백이 사람의 티켓이 아니라 에이전트에 닿아야 하는 디자인 리뷰를 진행한다.
주요 기능
요소를 인식하는 주석
요소를 클릭하면 Agentation은 그것이 실제로 무엇인지 포착한다. CSS 선택자, 소스 파일 경로, React 컴포넌트 계층, 계산된 스타일이다. 사용자가 쓴 메모는 그 기술적 맥락과 함께 따라간다. 결과는 에이전트가 설명을 해석하는 대신 곧바로 행동할 수 있는 피드백이다. 클릭 한 번이 많은 일을 한다.
어떤 에이전트에도 통하는 markdown 출력
도구는 정리된 markdown 블록을 복사한다. Claude, Codex, Gemini, Grok, 또는 코드에 접근할 수 있는 어떤 에이전트와도 작동한다. 설계상 에이전트 비의존적이라 특정 어시스턴트에 묶이지 않는다. 대화에 붙여넣으면 된다. 에이전트는 선택자를 grep하거나 소스 줄로 곧장 건너뛸 수 있다.
양방향 피드백을 위한 MCP 통합
agentation-mcp 서버를 설치하면 에이전트는 주석을 읽기만 하지 않는다. 대기 중인 피드백을 나열하고, 명확화 질문을 던지고, 문제를 해결됨으로 표시할 수 있다. 후속 메시지와 해결 상태는 원래 주석에 붙어 있어, 긴 왕복이 채팅 기록에 흩어지지 않고 읽히게 유지된다. 리뷰가 열 개를 넘어갈 때 이 점이 중요해진다.
주석의 의도와 우선순위
메모마다 의도와 우선순위 필드가 있어, 에이전트는 일일이 설명하지 않아도 차단 요소와 있으면 좋은 요소를 구분한다. 주석 하나에 문제 하나를 쓰니, 뒤섞인 불평이 빽빽한 문단을 풀어내는 대신 항목별로 처리하기 쉽다.
애니메이션 일시 정지
툴바에서 애니메이션을 멈추고 특정 프레임에 주석을 달 수 있다. 작은 기능이지만 "미끄러지는 부분, 그런데 꼭 시작 지점은 아닌 곳"을 글로 설명하고 싶은 사람은 없다. 시간을 크게 아낀다.
웹훅과 외부 전달
서버 웹훅은 주석을 외부 서비스로 밀어내고, 네트워크 실패, 타임아웃, HTTP 429나 5xx 응답에서 재시도한다. 재시도마다 같은 전달 ID를 유지하므로 수신 측은 중복을 제거할 수 있다. 전달은 최선 노력 방식이고 서버 재시작은 견디지 못한다. 의존하기 전에 알아 둘 만하다.
장단점
장점
- 모호한 설명을 구체적 선택자와 파일 경로로 대체해, 어떤 요소를 뜻하는지 에이전트에 알리는 데 쓰던 왕복을 줄인다.
- 단일 어시스턴트에 묶지 않고 Claude, Codex, Gemini, Grok에서 작동한다.
- 개인 및 사내 사용은 무료라 시험해 볼 페이월이 없다.
- MCP 지원으로 에이전트가 메모를 받는 데 그치지 않고 질문하고 문제를 닫을 수 있다.
단점
- 데스크톱 전용이라 스마트폰이나 태블릿에서 주석을 달 수 없다.
- React 우선 컴포넌트 트리 출력은 React 코드베이스를 전제해 다른 프런트엔드 스택에서는 제약이 된다.
- MCP 워크플로는 로컬 Node.js 실행을 요구해, 툴바만 원하는 팀에는 설정 부담이 늘어난다.
- 사내 프로젝트 밖의 상업적 사용에는 유료 라이선스가 필요하니, 판매하는 제품에 넣기 전에 확인해야 한다.
자주 묻는 질문
실행 중인 웹 앱에서 UI 요소에 주석을 달고, 그 메모를 AI 코딩 에이전트를 위한 구조화 markdown으로 바꾼다. 출력에는 요소의 선택자, 소스 파일 경로, 사용자의 피드백이 담겨, 에이전트가 코드에서 정확한 위치를 찾는다.
관련 콘텐츠
Agentation와 관련된 도구, 스킬, 아티클을 살펴보세요.
Agentation 대안
Forefront
Forefront · 코딩Forefront는 오픈소스 AI로 무언가를 만드는 웹 플랫폼이다. 대표적인 오픈소스 언어 모델을 자신의 데이터로 미세 조정하고, 성능을 평가하고, API로 실행하거나 내보내 직접 호스팅할 수 있다. 폐쇄형 플랫폼의 편의를 원하면서도 모델과 데이터의 소유권은 놓지 않으려는 개발자가 대상이다.
Startkit
StartKit.AI · 코딩Startkit은 AI SaaS와 AI 래퍼 제품을 만들기 위한 보일러플레이트다. 지루한 부분을 미리 연결해 둔 AI 스타트업 보일러플레이트라고 생각하면 된다. 인증, Stripe와 Lemon Squeezy 결제, 사용량 제한, 트랜잭션 이메일, 그리고 OpenAI, Anthropic, Groq, Llama와 통신하는 AI API 스타터 키트가 포함된다. 저장소를 복제하고 가격을 정한 뒤 사용자가 실제로 돈을 내는 부분에 착수하면 된다. React와 Tailwind 위의 Next.js로 만들어졌기 때문에 보일러플레이트 코드의 상당 부분이 이미 익숙하게 느껴진다.
Testim
Tricentis · 코딩Testim은 웹, 모바일, Salesforce 애플리케이션 전반에 걸쳐 엔드투엔드 테스트를 만들고 실행하는 AI 기반 테스트 자동화 플랫폼이다. 머신러닝에 기대어 인터페이스가 바뀌어도 테스트를 안정적으로 유지하므로, 팀은 깨진 셀렉터를 고치는 데 쓰는 시간을 줄인다. 오늘부터 쓸 수 있는 자동화 테스트 도구치고 나쁘지 않다. 브라우저에서 동작을 녹화해 테스트를 만들고, 더 세밀한 제어가 필요하면 JavaScript를 더한다. 바쁜 QA 팀에게 탄탄한 선택이다.