ProofShot: AI 코딩 에이전트를 위한 브라우저 검증

ProofShot은 오픈소스이며 에이전트에 구애받지 않는 CLI 도구로, AI 코딩 에이전트가 브라우저 세션을 녹화하고, 스크린샷을 캡처하며, 오류를 수집하여 구축한 UI 기능을 검증할 수 있는 능력을 부여합니다. 이 도구는 에이전트가 코드를 작성하지만 브라우저에서 실제로 어떻게 보이는지 확인하거나 레이아웃 문제와 콘솔 오류를 감지할 수 없는 문제를 해결합니다.

작동 방식

이 도구는 시작, 테스트, 중지의 세 단계 워크플로우를 따릅니다. AI 에이전트는 agent-browser 명령어를 사용하여 브라우저를 조작하는 동안 ProofShot이 세션을 녹화합니다.

기본 사용법:

proofshot start --run "npm run dev" --port 3000
# 에이전트가 탐색, 클릭, 스크린샷 촬영을 수행함
proofshot stop

상세 워크플로우 예시:

# 1. 시작 — 브라우저 열기, 녹화 시작, 서버 로그 캡처
proofshot start --run "npm run dev" --port 3000 --description "로그인 폼 검증"

2. 테스트 — AI 에이전트가 브라우저를 조작함
agent-browser snapshot -i  # 상호작용 요소 확인
agent-browser open http://localhost:3000/login  # 탐색
agent-browser fill @e2 "[email protected]"  # 폼 채우기
agent-browser click @e5  # 제출 클릭
agent-browser screenshot ./proofshot-artifacts/step-login.png  # 증거 캡처
3. 중지 — 비디오 + 스크린샷 + 오류를 증거 아티팩트로 묶음
proofshot stop

주요 기능

• 셸 명령어를 실행할 수 있는 모든 AI 코딩 에이전트와 호환됨 (Claude Code, Cursor, Codex, Gemini CLI, Windsurf, GitHub Copilot 등)
• AI 에이전트가 사용 방법을 이해할 수 있도록 스킬로 패키징됨
• Vercel Labs의 agent-browser를 기반으로 구축됨 ("Playwright MCP보다 훨씬 우수하고 빠름"으로 설명됨)
• 테스트 프레임워크가 아님 — 합격/불합격을 결정하지 않고 증거만 제공함
• 비디오, 스크린샷, 로그가 포함된 독립형 HTML 파일을 생성함
• proofshot pr로 아티팩트를 GitHub PR에 인라인 댓글로 업로드할 수 있음

설치 및 설정

npm install -g proofshot
proofshot install

첫 번째 명령어는 CLI와 agent-browser(헤드리스 Chromium 포함)를 설치합니다. 두 번째 명령어는 사용자의 AI 코딩 도구를 감지하고 사용자 수준에서 ProofShot 스킬을 설치합니다 — 모든 프로젝트에서 자동으로 작동합니다.

출력 아티팩트

각 세션은 ./proofshot-artifacts/에 타임스탬프가 찍힌 폴더를 생성하며, 여기에는 다음이 포함됩니다:

• session.webm — 전체 세션의 비디오 녹화
• viewer.html — 스크러브 바, 타임라인, 콘솔/서버 로그 탭이 있는 독립형 인터랙티브 뷰어
• SUMMARY.md — 오류, 스크린샷, 비디오가 포함된 마크다운 보고서
• step-*.png — 주요 순간에 캡처된 스크린샷
• session-log.json — 타임스탬프와 요소 데이터가 포함된 작업 타임라인
• server.log — 개발 서버 stdout/stderr (--run 사용 시)
• console-output.log — 브라우저 콘솔 출력

사용 가능한 명령어

• proofshot install — AI 코딩 도구를 감지하고 ProofShot 스킬 설치
• proofshot start — 브라우저, 녹화, 오류 캡처로 검증 세션 시작
• proofshot stop — 녹화 중지, 오류 수집, 증거 아티팩트 생성
• proofshot exec — 패스스루 명령어

이 도구는 완전히 무료이며 오픈소스로, 벤더 종속성이나 클라우드 의존성이 없습니다. UI 기능을 구축하는 데 AI 에이전트를 사용하고 매번 수동으로 브라우저를 열지 않고 결과를 검증하려는 개발자를 위해 설계되었습니다.