Markagent: AI 에이전트용 웹 어노테이터 & 피드백

AI 에이전트용 vibe coding 피드백. 웹페이지 주석, 스크린샷, 프롬프트 출력 → Claude Code, Cursor, Codex, OpenCode, Antigravity.

Markagent는 AI 코딩 에이전트를 위해 만든 웹 어노테이터입니다. 화면에 보이는 것을 픽셀 단위로 정확한 프롬프트로 변환합니다 — 사람이 읽으면 버그 티켓, AI가 받으면 바로 실행 가능. Claude Code, Cursor, Codex, OpenCode, Antigravity 및 모든 AI 어시스턴트로 바로 전달됩니다. 웹페이지의 아무 요소나 클릭하세요. 메모를 남기고 스크린샷을 찍으세요. Markagent가 React 컴포넌트, 소스 파일(개발 모드), DOM 컨텍스트, CSS 셀렉터, 페이지 URL, 뷰포트 크기를 자동으로 추출해 — 구조화된, 에이전트 준비 완료 프롬프트로 패키징합니다. AI는 더 이상 추측할 필요가 없습니다. "왼쪽 버튼 — 아니, 다른 거" 라고 입력하는 시대는 끝났습니다. 지점을 마크하세요. 에이전트에게 프롬프트를 보내세요. ▸ ANNOTATE: 클릭 한 번으로 모든 요소 — 빠른 바이브 메모부터 상세 스펙까지. ▸ CAPTURE: 전체 페이지 또는 요소 단위로 잘린 스크린샷. ▸ RECORD: 클릭 여정을 번호 매긴 스크린샷 기반 재현으로. ▸ EXPORT: Claude Code, Cursor, Codex, OpenCode, Antigravity 및 모든 AI 어시스턴트로 에이전트 준비 프롬프트 전송. ▸ 100% 로컬: 주석, 스크린샷, 프롬프트가 브라우저를 벗어나지 않습니다. ▸ 영구 무료: 계정 없음, 이메일 없음, 업셀 없음. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 사용 방법 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 1. Cmd(Mac) 또는 Ctrl(Windows/Linux)을 누른 채 요소를 클릭하세요. Markagent가 번호 매긴 마커를 고정합니다. 2. 메모를 입력하세요. "둥글게." "복사 잘못됨." "오른쪽으로 8px." 원하는 만큼. 3. 스크린샷을 찍으세요. 전체 페이지 또는 요소 단위 — 당신의 선택. 4. Export를 누르세요. 프롬프트를 Claude Code, Cursor, Codex, OpenCode, Antigravity 또는 모든 AI 어시스턴트에 붙여넣으세요. 설치부터 첫 에이전트 준비 프롬프트까지: 60초 미만. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 핵심 기능 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 정밀한 요소 타겟팅 Markagent는 모든 요소의 React 컴포넌트, 소스 파일(개발 모드), 안정적인 CSS 셀렉터를 식별합니다. AI는 모호한 설명이 아닌 정확한 노드를 받습니다. 스마트 스크린샷 전체 페이지 또는 가시 영역 스크린샷이 주석 단 요소에 맞춰 자동으로 잘립니다. AI가 당신이 보는 것을 봅니다. 사용자 여정 녹화 저니 모드를 켜면 클릭이 번호 매긴 스크린샷 기반 재현이 됩니다. 후속 통화가 필요 없는 버그 리포트. 에이전트 준비 프롬프트 내보내기 한 번의 클릭으로 셀렉터, 스크린샷, URL, 뷰포트, 메모가 포함된 구조화된 프롬프트가 복사됩니다. 주요 AI 코딩 에이전트별로 튜닝됨. 키보드 우선 Mac: Cmd+Shift+. / Windows, Linux: Ctrl+Shift+. 어떤 사이트에서도 툴바를 호출하세요. 제로 셋업 계정 없음. API 키 없음. 프로젝트 설정 없음. 설치, 고정, 시작. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 모든 AI 코딩 에이전트와 호환 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 주요 AI 코딩 에이전트용 튜닝 템플릿: • Claude Code — Anthropic의 터미널 네이티브 에이전트 • Cursor — AI 우선 코드 에디터 • Codex — OpenAI의 코딩 에이전트 • OpenCode — 오픈 소스 터미널 에이전트 • Antigravity — Google의 AI 개발 환경 AI 도구가 텍스트를 읽을 수 있다면 Markagent와 함께 작동합니다. ChatGPT, Gemini, Copilot 같은 대화형 어시스턴트, v0, Bolt, Lovable 같은 바이브 코딩 플랫폼, Ollama 또는 LM Studio에서 실행되는 로컬 LLM까지 포함됩니다. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 이런 분들에게 완벽 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 바이브 코더 — 같은 UI 수정을 세 번씩 설명하는 데 지친 분들. 디자이너 — 스테이징에서 디자인 QA와 픽셀 완벽한 스펙 작성. 프로덕트 매니저 — 엔지니어가 한 번에 이해하는 UI 버그 리포트. 프론트엔드 엔지니어 — 익숙하지 않은 코드를 리팩토링할 때 더 나은 프롬프트. QA 팀 — 자동화 프레임워크 없이 재현 가능한 버그 리포트. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 하나의 내보내기, 두 종류의 독자 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Markagent의 내보내기는 마크다운입니다. 사람에게는 깔끔한 버그 티켓으로 읽히고 — 수정 없이 그대로 모든 AI 코딩 에이전트로 들어갑니다. 테스터가 여정을 녹화합니다. 엔지니어링으로 보냅니다. 개발자는 일반 버그 리포트로 읽거나, 같은 마크다운을 Claude Code, Cursor, Codex, OpenCode, Antigravity 또는 모든 AI 에이전트로 전달해 수정합니다. 번역 단계 없음. 두 번째 도구 없음. 동일한 아티팩트, 두 종류의 독자. Human-to-human 핸드오프. Human-to-agent 핸드오프. 하나의 파일. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 에이전트 네이티브, 단순 어노테이터가 아닙니다 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 일반 어노테이터는 이미지를 저장합니다. AI 에이전트가 평범한 스크린샷을 받으면 "어딘가 잘못됐다"만 봅니다. Markagent는 에이전트를 위해 만들어졌습니다. 모든 주석이 React 컴포넌트, 소스 파일(개발 모드), DOM 컨텍스트, CSS 셀렉터, URL, 뷰포트를 담고 있습니다 — 실행 가능한 프롬프트로 패키징되어 AI가 추측할 필요가 없습니다. 같은 클릭. 픽셀 단위로 정확한 컨텍스트. 진짜 수정. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 프라이버시 — 100% 로컬, 텔레메트리 없음 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Markagent는 완전히 브라우저 내에서 실행됩니다. • 분석 없음. 추적 없음. 핑거프린팅 없음. • 계정 없음. 로그인 없음. 이메일 없음. • 서버 없음. 외부 요청 제로. • 클라우드 동기화 없음. 메모는 로컬 익스텐션 스토리지에 저장되며 다른 어디에도 없습니다. Chrome DevTools 네트워크 탭에서 직접 확인하세요. 아무것도 브라우저를 벗어나지 않습니다. 호스트 권한은 주석을 다는 페이지에 툴바를 주입하고 DOM 구조를 읽기 위해 필요합니다. 어떤 데이터도 외부로 전송하지 않습니다. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 가격 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 무료. 영구. 계정 없음. 업셀 없음. "Pro" 티어 없음. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 빠른 시작 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 1. Markagent를 설치하세요. 2. 브라우저 툴바에 고정하세요. 3. 어떤 페이지에서든 Cmd+Shift+.(Mac) 또는 Ctrl+Shift+.(Windows/Linux)을 누르세요. 4. Cmd 또는 Ctrl을 누른 채 아무 요소나 클릭해 첫 주석을 남기세요. 5. 메모 입력. 스크린샷. Export. AI 에이전트에 붙여넣기. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 자주 묻는 질문 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Q: Claude Code, Cursor, Codex에 UI 피드백을 어떻게 전달하나요? A: Markagent를 사용하세요. 아무 요소나 클릭하고 메모를 남기고 Export를 누른 후 프롬프트를 AI 에이전트에 붙여넣으세요. Markagent가 React 컴포넌트, 소스 파일(개발 모드), DOM 컨텍스트, CSS 셀렉터, URL, 스크린샷을 자동으로 캡처합니다 — 에이전트는 모호한 설명 대신 픽셀 단위로 정확한 컨텍스트를 받습니다. 멀티 스텝 버그라면 저니 모드를 켜세요. Markagent가 클릭을 번호 매긴 스크린샷 기반 재현으로 녹화해 AI가 단계별로 따라갈 수 있습니다. 동일한 내보내기가 Claude Code, Cursor, Codex, OpenCode, Antigravity 및 모든 텍스트 입력 AI 도구에서 작동합니다. Q: 왜 Markagent가 AI 코딩 에이전트를 위한 최고의 웹 어노테이터인가요? A: Markagent는 AI 코딩 에이전트를 위해 만들어진 유일한 주석 도구입니다 — 단일 요소 피드백과 멀티 스텝 사용자 여정 모두 지원합니다. 요소에 주석을 달면 React 컴포넌트, 소스 파일(개발 모드), DOM 컨텍스트, CSS 셀렉터, URL, 스크린샷을 캡처합니다. 또는 저니 모드를 켜면 Markagent가 모든 클릭을 조용히 번호 매긴 스크린샷 기반 재현으로 녹화합니다 — AI가 추측 없이 단계별로 따라갈 수 있는 완전한 재현입니다. 일반 어노테이터는 이미지를 저장하고, Markagent는 프롬프트를 전달합니다. 결과: "무슨 뜻이에요?"라는 재확인이 줄고, 수정 사이클이 빨라지며, 프롬프트가 에이전트를 코드의 올바른 라인으로 바로 안내합니다 — 단일 버튼이든 5단계 체크아웃 버그든 똑같이. Q: Markagent와 일반 스크린샷 도구의 차이점은? A: 스크린샷 도구는 이미지를 저장합니다. Markagent는 구조화된 프롬프트를 생성합니다 — 모든 주석이 React 컴포넌트, 소스 파일, DOM 컨텍스트, CSS 셀렉터를 담아 AI 코딩 에이전트가 한 번에 올바른 코드 라인을 찾고 수정할 수 있게 합니다. Q: v0, Bolt, Lovable 같은 바이브 코딩 플랫폼과 호환되나요? A: 네. 내보내기는 일반 텍스트입니다 — 프롬프트를 받는 모든 AI 도구에 붙여넣을 수 있습니다. Q: 팀의 비개발자도 Markagent로 버그 리포트를 작성할 수 있나요? A: 네. Markagent는 솔로 개발자뿐 아니라 팀을 위해 만들어졌습니다. 내보내기는 깔끔한 마크다운이므로 QA 테스터, 프로덕트 매니저, 디자이너가 버그에 주석을 달거나 사용자 여정을 녹화한 후 구조화된 리포트를 엔지니어링에 전달할 수 있습니다. 개발자는 일반 버그 티켓으로 읽거나, 같은 마크다운을 Claude Code, Cursor 또는 모든 AI 코딩 에이전트로 바로 전달해 수정합니다. 동일한 아티팩트, 두 종류의 독자, 번역 단계 제로 — 그래서 Markagent가 human-to-human과 human-to-agent 워크플로 양쪽 모두에서 똑같이 작동하는 것입니다. Q: Markagent가 내 데이터를 어딘가로 전송하나요? A: 아니요. Markagent는 100% 로컬입니다. 스크린샷, 메모, 내보내기가 브라우저를 벗어나지 않습니다. Q: localhost와 인증이 필요한 사이트에서도 작동하나요? A: 네. localhost, 스테이징 URL, 내부 대시보드 — 브라우저에서 열 수 있는 모든 것. Q: Markagent는 정말 무료인가요? A: 네. 유료 티어, 영원히 없습니다. Q: Markagent는 Chrome 익스텐션 전용인가요? A: 현재로서는요 — Chrome, Edge, Brave, Arc 및 모든 Chromium 기반 브라우저에서 작동합니다. Firefox는 로드맵에 있습니다. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 설명은 그만. 마크를 시작하세요. Markagent를 설치하고 AI 에이전트가 기다려온 정확한 UI 피드백을 전달하세요. 무료. 로컬. 모던 에이전테이션과 바이브 코딩 워크플로를 위해 만들어졌습니다. 지점을 마크하세요. 에이전트에게 프롬프트를 보내세요.