🎯도구

Agentation 2.0 - UI를 클릭하면 AI가 바로 수정하는 도구

UI 요소를 클릭하고 피드백을 남기면, AI 코딩 에이전트가 바로 이해하고 수정할 수 있는 구조화된 데이터로 변환해주는 개발 도구

#AI코딩#개발도구#UI피드백#MCP

Agentation이란?

Agentation은 UI의 버그나 개선사항을 클릭만으로 표시하면, AI 코딩 에이전트가 바로 이해하고 수정할 수 있는 형식으로 변환해주는 개발 도구입니다.

1.우측 하단의 아이콘을 클릭해 활성화

2.UI 요소에 마우스를 올려 하이라이트 확인

3.클릭해서 주석(annotation) 추가

4.피드백을 작성하고 'Add' 클릭

5.복사 버튼으로 마크다운 형식 복사

6.Claude Code, Cursor 등 AI 도구에 붙여넣기

Agentation을 사용하면 AI 에이전트가 다음 정보를 받습니다:

▸

CSS 선택자: 코드베이스에서 grep으로 검색 가능

▸

React 컴포넌트 이름: 정확한 파일 위치 파악

▸

계산된 스타일: 현재 UI의 상태 이해

▸

사용자 피드백: 의도와 우선순위

기존에는 "사이드바의 파란 버튼"처럼 설명해야 했다면, 이제는 .sidebar > button.primary 같은 정확한 선택자를 제공합니다.

MCP 통합을 사용하면 복사-붙여넣기 없이 AI와 대화하듯 작업할 수 있습니다:

▸"내 주석 목록 보여줘"

▸"패딩 수정했어" (AI가 완료 표시)

▸"주석 3번 수정해줘"

▸"모든 주석 삭제"

✅ 구체적으로 작성: "버튼 텍스트 불명확" > "이거 고쳐"

✅ 한 번에 하나씩: 주석 하나당 이슈 하나

✅ 맥락 포함: 기대했던 것 vs 실제 보이는 것

✅ 텍스트 선택 활용: 오타나 내용 문제는 정확히 드래그

✅ 애니메이션 일시정지: 특정 프레임 주석 시 유용

개인 및 기업의 내부 사용은 무료입니다.

현재 데스크톱 전용으로 제공되며, agentation.dev에서 바로 사용해볼 수 있습니다. 실시간 에이전트 동기화 기능이 추가된 2.0 버전이 최신입니다.