[FE]Annotation?!
Agentation이란?
Agentation은 UI 화면 위에서 남긴 피드백을 AI 코딩 에이전트가 이해할 수 있는 구조화된 정보로 바꿔주는 도구다.
기존에는 QA나 디자인 피드백을 줄 때 보통 아래와 같이 할것이다.
- 문제가 있는 화면을 캡처한다.
- 노션, 지라, 슬랙 등에 이미지를 첨부한다.
- “여기 버튼 이상해요”, “간격이 좁아요”, “텍스트가 어색해요”처럼 설명을 덧붙인다.
- 개발자는 다시 해당 화면에 들어가서 문제 요소를 찾는다.
- 관련 컴포넌트와 스타일 파일을 찾아 수정한다.
문제는 이런 설명이 개발자나 AI 입장에서는 꽤 모호합니다.
”어느 버튼인지” ,”어느 컴포넌트인지”, “어느 파일을 고쳐야 하는지”를 다시 찾아야 합니다.
또한 AI 코딩 에이전트에게 전달하기가 어렵습니다. 컴포넌트가 많거나 스타일 구조가 복잡한 프로젝트에선느 엉뚱한 파일을 수정할 수도 있습니다.
Agentation은 이 과정을 줄여줍니다.
화면에서 직접 요소를 클릭하고 메모를 남기면, 해당 요소의 CSS selector, 소스 파일 경로, React 컴포넌트 트리, 현재 적용된 스타일, 작성한 피드백 등을 함께 정리해서 AI가 이해할 수 있는 형태로 만들어줍니다.
즉, Agentation은 사람의 UI 피드백을 AI 코딩 에이전트가 바로 처리할 수 있는 작업 지시서로 바꿔주는 도구 라고 볼 수 있습니다.
Agentation 주요 기능 정리
Agentation은 단순히 화면에 메모를 남기는 도구가 아니라, QA 피드백을 AI 에이전트가 처리할 수 있는 구조화된 정보로 바꿔주는 기능들을 제공한다.
1. Annotation Modes
Agentation은 여러 방식으로 피드백을 남길 수 있다.
| 모드 | 설명 | 사용 예시 |
|---|---|---|
| Text | 텍스트를 직접 선택해서 피드백 | 오탈자, 문구 수정, 카피 변경 |
| Elements | 특정 UI 요소 클릭 | 버튼, 카드, input, 모달 수정 |
| Multi-Select | 여러 요소를 함께 선택 | 버튼 그룹 정렬, 카드 목록 간격 |
| Area | 화면의 특정 영역 선택 | 섹션 전체 여백, 레이아웃 문제 |
| Animation | 움직이는 상태를 멈추고 피드백 | 로딩, hover, 전환 애니메이션 |
예를 들어 문장 안에 simpl 같은 오탈자가 있다면 텍스트만 선택해서 “Fix typo”라고 남길 수 있다. 이 경우 Agentation output에는 사용자가 선택한 실제 문구가 포함된다. 그래서 AI가 어떤 텍스트를 고쳐야 하는지 정확히 알 수 있다.
2. Toolbar Controls
Agentation의 툴바에는 QA할 때 필요한 기능들이 모여 있다.
| 기능 | 설명 |
|---|---|
| Pause | 애니메이션을 멈춰 특정 상태를 피드백 |
| Visibility | annotation marker 표시/숨김 |
| Copy | AI 에이전트용 Markdown 복사 |
| Clear | 모든 annotation 삭제 |
| Send Annotations | 설정된 webhook으로 annotation 전송 |
| Layout Mode | 컴포넌트 배치/페이지 섹션 재배치 |
| Settings | 출력 상세도, 마커 색상, 동작 설정 |
Agentation의 툴바는 QA 피드백 작성, 정리, 전달까지의 흐름을 한곳에서 처리하는 컨트롤 패널이다.
3. Marker Types
Annotation을 남기면 화면에 번호가 붙은 marker가 생긴다.
Agentation은 annotation 방식에 따라 marker 스타일을 다르게 보여준다.
| 타입 | 의미 |
|---|---|
| 일반 marker | 단일 요소 또는 텍스트 선택 |
| 초록색 marker | multi-select 또는 area annotation |
이렇게 marker가 남기 때문에 QA 담당자, 디자이너, 개발자가 화면을 보면서 “1번 피드백”, “2번 피드백”처럼 이야기하기 쉽다.
4. Smart Identification
Agentation은 선택한 요소를 코드 검색에 유리한 방식으로 자동 식별한다.
예를 들어 버튼이나 링크는 단순한 DOM 구조만 보는 게 아니라, 버튼 안의 텍스트를 기준으로 이름을 붙일 수 있다.
button.submit-btn
a.benji.org
avatarFollow
이게 중요한 이유는 AI 에이전트가 코드베이스에서 grep이나 검색을 통해 해당 요소를 찾기 쉬워지기 때문이다.
기존에 사용자가 “프로필 화면 오른쪽 위에 있는 Follow 버튼 고쳐줘.”라고 했다면, Agentation은 더 구체적으로 ”@benjitaylor 프로필 화면의 Follow 버튼 요소” 또는 selector, component tree, text content까지 함께 제공한다.
5. Computed Styles
Agentation은 선택한 요소의 computed CSS styles도 확인할 수 있다.
computed style은 브라우저가 최종적으로 계산해서 적용한 실제 CSS 값이다.
예를 들어 이런 정보를 볼 수 있다
color
background-color
font-size
font-weight
padding
margin
border-radius
line-height이 기능은 디자인 QA에서 특히 유용하다.
예를 들어 디자이너가 “이 버튼의 padding이 디자인 시안보다 좁습니다.”
Agentation output에 현재 computed style이 포함되면 AI는 현재 값과 수정해야 할 방향을 더 잘 파악할 수 있다.
즉, 단순히 “여백이 이상하다”가 아니라
현재 padding: 8px 12px
기대값: 12px 16px같은 식으로 더 자세하게 전달할 수 있다.
6. React Component Detection
Agentation은 React 컴포넌트 계층 구조도 감지할 수 있다.
예를 들어 어떤 버튼에 hover했을 때 다음처럼 보일 수 있다.
<App> <Header> <NavLink>이 기능이 중요한 이유는 React 프로젝트에서는 실제 DOM보다 어떤 컴포넌트에서 렌더링됐는지가 더 중요할 때가 많기 때문이다.
예를 들어 화면에는 그냥 <button>으로 보이지만, 실제 코드는 다음 컴포넌트일 수 있다.
<PrimaryButton />
<SubmitAction />
<ProjectCreateButton />Agentation이 컴포넌트 트리를 알려주면 AI나 개발자가 관련 파일을 훨씬 빠르게 찾을 수 있다.
설정에서 React detection을 켜고 끌 수 있고, 출력 상세도에 따라 React 정보 노출 수준도 달라진다.
| 출력 모드 | React 정보 수준 |
|---|---|
| Compact | React 정보 없음 |
| Standard | 사용자 컴포넌트 중심, 프레임워크 내부 숨김 |
| Detailed | CSS class와 연관된 컴포넌트 중심 |
| Forensic | 프레임워크 내부까지 포함한 전체 컴포넌트 |
7. Layout Mode
L 키를 누르면 layout mode로 들어갈 수 있고, 이 모드에서는 단순히 문제를 지적하는 것을 넘어서 페이지 레이아웃을 시각적으로 제안할 수 있다.
가능한 작업은 다음과 같다.
| 기능 | 설명 |
|---|---|
| Place components | 팔레트에서 컴포넌트를 드래그해서 새 요소 배치 |
| Rearrange sections | 기존 섹션을 잡고 다른 위치로 이동 |
| Wireframe new page | 기존 화면을 흐리게 만들고 새 레이아웃 스케치 |
| Agent sync | 배치 변경 내용이 MCP를 통해 에이전트에게 전달 |
중요한 점은 이 배치가 픽셀 단위의 정확한 스펙이 아니라 공간적 힌트라는 점이다.
즉 Agentation이 “여기에 카드 하나 정확히 x=120px, y=300px로 넣어라”라고 명령하는 게 아니라,
이 영역에 이런 타입의 컴포넌트를 배치하고 싶다.
라는 의도를 AI에게 전달하는 방식이다.
AI 에이전트는 이 힌트를 바탕으로 실제 코드와 CSS 구조에 맞게 구현한다.
8. keyboard Shorcuts
단축키 제공해준다
9. Agent Sync
Agentation은 MCP와 AFS를 통해 AI 에이전트와 양방향으로 동기화될 수 있다.
일반적인 흐름은 사용자가 annotation을 만들고 AI에게 붙여넣는 방식이다.
하지만 Agent Sync를 사용하면 AI가 직접 annotation을 조회하고 관리할 수 있다.
사용자 : 내 annotation에 뭐있음?
AI: 총 12개의 annotation이 있고, 그중 7개는 /dashboard 페이지에 있습니다. 대부분 spacing과 alignment 관련 피드백입니다. 수정할까요?
Annotion을 처리하면
AI : 3번 annotation의 padding 문제를 수정했습니다.
애매하면
AI : 이 간격은 16px로 맞출까요, 24px로 맞출까요?
QA 피드백이 AI와의 작업 대화도 가능하답니다
10. Settings
Agentation 설정에서 워크플로우에 맞게 여러 옵션 조정 가능하답니다!
