Vibe Annotations

주석마다 클릭한 요소의 정확한 DOM 선택자, 그 뒤의 React 혹은 Vue 컴포넌트, 소스 파일이 기록된다. 스크린샷 도구와 갈리는 지점이 여기다. 그쪽은 픽셀에서 에이전트가 대상을 추측할 수밖에 없다. 이쪽은 곧바로 움직일 수 있는 선택자를 넘기므로 수정이 처음부터 맞는 노드에 떨어진다.

코멘트를 넘어 Figma 스타일 편집 패널에서 크기, 간격, 색, 텍스트를 페이지 위에서 바로 바꾼다. 넘기기 전에 실시간 미리보기로 확인하므로 에이전트가 반영하는 건 이미 승인한 내용이다. 자잘한 시각 조정은 채팅에서 완전히 빠진다.

아무 컴포넌트의 변형을 에이전트에 요청하고, 그 자리에서 페이지 위에서 비교한다. 패널이 후보를 나란히 보여주고, 브라우저를 벗어나지 않고 승자를 고른다. 레이아웃을 두고 오가던 왕복이 한 번의 선택으로 수렴한다.

도구는 주석을 단 요소마다 스크린샷을 자동으로 찍고, 그 위에 직접 찍은 참고 이미지를 붙일 수 있다. 시각적 맥락이 적어 둔 메모와 함께 이동하므로, 설명보다 보여주는 편이 빠른 변경에서 힘을 발휘한다.

주석 묶음을 이미지가 삽입된 자족적인 .html 하나로, 혹은 텍스트만 필요하면 가벼운 .md로 내보낸다. 어느 쪽이든 보내는 건 파일 하나지, 스크린샷과 메모가 뒤섞인 폴더가 아니다.

서버는 read_annotations, watch_annotations, get_project_context 같은 도구를 연결된 에이전트에 노출한다. 설정은 Claude Code, Cursor, Windsurf, Codex, OpenClaw, VS Code 모두 명령 하나면 된다. 감시 모드는 새 주석을 롱폴링하므로, 내가 계속 일하는 동안 에이전트가 실시간으로 수정을 반영한다.