Agentation

Agentation이란?

Agentation은 UI에서 요소에 직접 주석을 달 수 있는 시각적 피드백 도구로, 이를 AI 에이전트와 공유하면 코드베이스에서 정확한 대상을 식별할 수 있습니다. 핵심 목적은 “여기 가리키는 거” 피드백을 에이전트가 실행할 수 있는 구조화된 기계 작동 지시로 변환하는 것입니다.

프로젝트 파일에 접근할 수 있는 AI 코딩 도구와 특히 잘 작동하며, Agentation 출력에는 선택자, 파일 경로, 구조 정보가 포함되어 에이전트가 올바른 줄과 컴포넌트로 이동할 수 있게 합니다.

주요 기능

• 페이지 내 시각적 주석: 툴바를 활성화하고 요소를 클릭하거나 선택해 화면상의 특정 대상에 연결된 주석을 생성합니다.
• 에이전트용 요소 타겟팅: Agentation은 요소 경로, CSS 선택자, 파일 위치 세부 정보를 생성해 에이전트가 어떤 UI 요소를 의미하는지 추측하지 않게 합니다.
• 더 나은 수정のための 코드베이스 맥락: 에이전트가 코드베이스에 접근할 수 있을 때 (예: Claude Code나 Cursor 같은 도구를 통해), 선택자를 사용해 grep하거나 소스 파일 경로로 올바른 줄로 이동하고, React 컴포넌트 트리로 계층을 이해하며, 계산된 스타일로 요소의 현재 모양을 유추할 수 있습니다.
• 서식화된 마크다운 출력: 피드백을 추가한 후 클릭해 서식화된 마크다운을 복사하고 에이전트 입력에 붙여넣을 수 있습니다.
• MCP 통합 지원: MCP를 사용하면 복사-붙여넣기를 생략할 수 있으며, 에이전트가 이미 주석 맥락을 볼 수 있어 “내 피드백 처리해” 또는 “주석 3 수정해” 같은 지시로 프롬프트할 수 있습니다.
• 주석 생애 주기 제어: 에이전트는 기존 피드백을 쿼리할 수 있으며 (예: 모든 페이지의 주석 목록), 항목을 해제하거나 해결하는 등의 작업에 응답합니다 (예: “모든 주석 지우기”).

Agentation 사용 방법

1. 주석 툴바 활성화: Agentation 인터페이스 내에서 툴바를 사용할 수 있습니다 (데모 페이지에서 툴바가 활성화되어 있음).
2. 요소 식별을 위한 호버: 요소 위에 마우스를 올리면 이름이 강조 표시됩니다.
3. 주석 생성: 대상 요소를 클릭하거나 텍스트를 선택 (제공된 데모 요소 예시)해 새 주석을 만들고 피드백을 입력합니다.
4. 피드백 제출 및 공유: 주석을 추가한 후 서식화된 마크다운 출력을 복사해 에이전트에 붙여넣습니다.
5. MCP 선택 사용: MCP로 연결된 에이전트라면 수동 복사-붙여넣기를 피하고 특정 주석을 처리하거나 수정하도록 요청할 수 있습니다.

사용 사례

• 특정 UI 요소 버그 보고: “잘못된” 버튼 상태나 스타일링을 볼 때 요소를 호버해 식별하고, 예상과 실제를 주석으로 달아 선택자/경로 정보를 공유해 에이전트가 관련 코드를 찾게 합니다.
• 타이포그래피 및 간격 피드백: 패딩이나 크기 문제에 정확한 컴포넌트 영역을 주석하고, 에이전트가 대안을 결정하도록 요청 (예: “24px 또는 16px”)하며 피드백을 해결합니다.
• 텍스트/콘텐츠 수정: 라벨이나 복사본에 오타가 있으면 정확한 텍스트를 선택하고 간결한 피드백을 추가 (예: “버튼 텍스트 불명확” 또는 “콘텐츠는 X로 표시”)해 에이전트가 특정 UI 문자열을 타겟팅하게 합니다.
• 애니메이션 프레임별 피드백: 툴바로 애니메이션을 일시정지해 관심 프레임에서 특정 시각 상태를 주석하고, 일시정지 맥락에 연결된 피드백을 제공합니다.
• 팀 또는 다중 페이지 피드백 조정: 에이전트가 모든 페이지의 주석을 나열하고 하나씩 해결하며, 검토 완료 시 모든 것을 지웁니다.

자주 묻는 질문

Agentation은 에이전트가 앱의 올바른 부분을 찾는 데 어떻게 도움이 되나요?
Agentation의 출력에는 CSS 선택자, 소스 파일 경로, React 컴포넌트 계층, 계산된 스타일이 포함되어 에이전트가 grep으로 검색하고, 올바른 줄로 이동하며, 요소가 어디에 어떻게 맞는지 이해할 수 있습니다.

피드백을 에이전트에 복사-붙여넣기 해야 하나요?
항상 그런 건 아닙니다. 페이지에 따르면 MCP 통합 시 복사-붙여넣기를 생략할 수 있는데, 에이전트가 이미 주석 맥락을 볼 수 있기 때문입니다.

어떤 종류의 피드백을 주석에 작성해야 하나요?
페이지는 구체적으로 작성(예: 문제를 명확히 설명), 주석당 하나의 문제 처리, 예상과 실제를 비교한 맥락 포함을 권장합니다.

에이전트가 주석에 대해 질문하거나 응답할 수 있나요?
네. MCP 통합과 Annotation Format Schema를 사용하면 페이지에서 주석 나열, 명확화 요청, 요약으로 해결, 주석 삭제 등의 에이전트 상호작용을 설명합니다.

Agentation의 라이선스 모델은 무엇인가요?
Agentation은 개인 및 내부 사용 기업에게 무료입니다. 판매 제품에 Agentation을 재배포하려면 상용 라이선스를 위해 문의하라고 페이지에서 안내합니다.

대안

• 인터랙티브 UI 스크린샷/마크업 도구 (인간 검토 워크플로우 포함): UI를 캡처하고 마크업해 검토하는 도구는 피드백 공유를 지원할 수 있지만, 코드 인식 에이전트를 위한 구조화된 선택자/파일 경로를 생성하지 않습니다.
• 트래커의 텍스트 기반 이슈 템플릿 (예: 버그 티켓): 버그 트래커는 예상 vs. 실제 동작을 문서화하지만, 코드베이스의 특정 UI 요소 경로를 직접 가리키는 대신 설명에 의존합니다.
• 시각적 주석 없는 에이전트 지원 코드 탐색 도구: 리포지토리를 이해하는 코딩 어시스턴트는 피드백에 작동할 수 있지만, 주석 레이어가 없으면 대상을 간접적으로 설명해야 합니다 (예: 컴포넌트 이름을 수동으로 지정).