ProofShot: AI 코딩 에이전트에게 눈을 주다 — 브라우저 녹화, 스크린샷, 에러 수집을 한 번에

AI 코딩 에이전트가 UI 기능을 만들었다고 칩시다. 그런데…

제대로 보이는지 어떻게 확인할까요?
콘솔 에러가 없는지 어떻게 알까요?
서버 로그에 예외가 없는지 어떻게 검증할까요?

에이전트는 코드를 작성할 수 있지만, 결과가 “제대로” 보이는지는 스스로 확인할 수 없습니다. 브라우저를 직접 보고 클릭해보고 에러를 확인하는 건 여전히 인간의 몫이었습니다.

ProofShot은 이 문제를 해결합니다. AI 코딩 에이전트에게 “눈”을 주는 오픈소스 CLI입니다. 브라우저 세션을 녹화하고, 스크린샷을 캡처하고, 에러를 수집해서, 모든 걸 번들로 묶어 인간이 검증할 수 있게 해줍니다.

왜 필요할까?

문제 1: 에이전트는 눈이 없다

Claude Code나 Cursor가 UI를 만들어도, 결과가 어떻게 보이는지 스스로 확인할 수 없습니다. “버튼이 제자리에 있나요?”, “폰트가 깨지지 않았나요?”, “애니메이션이 부드럽게 작동하나요?” — 이건 직접 봐야 알 수 있습니다.

문제 2: 에러가 숨어 있다

코드는 돌아가지만 콘솔에 에러가 떠 있을 수 있습니다. 서버 로그에 예외가 쌓여 있을 수 있습니다. 이걸 일일이 확인하는 건 번거롭습니다.

문제 3: PR에서 검증이 어렵다

“이 기능이 제대로 동작한다”는 걸 PR에서 어떻게 보여줄까요? 스크린샷 몇 장? 영상 링크? 에러 로그? 매번 따로 첨부하기 귀찮습니다.

ProofShot이 하는 일

1. 브라우저 세션 녹화

에이전트가 브라우저를 조작하는 동안 모든 걸 녹화합니다. 나중에 비디오로 되감기하면서 확인할 수 있습니다.

2. 스크린샷 캡처

주요 순간마다 스크린샷을 찍습니다. “로그인 폼 제출 후”, “대시보드 로드 후” 등 필요한 시점에 캡처합니다.

3. 에러 수집

10개 이상의 언어에서 에러 패턴을 자동으로 감지합니다:

JavaScript/Node.js
Python
Ruby/Rails
Go
Java/Kotlin
Rust
PHP
C#/.NET
Elixir/Phoenix
그리고 더…

4. 아티팩트 번들

모든 걸 하나의 폴더에 모읍니다:

session.webm — 비디오 녹화
viewer.html — 인터랙티브 뷰어 (스크럽 바, 타임라인, 로그 탭)
SUMMARY.md — 마크다운 리포트
step-*.png — 스크린샷들
console-output.log — 브라우저 콘솔
server.log — 개발 서버 로그

3단계 워크플로우

1. Start — 브라우저 열기, 녹화 시작

proofshot start --run "npm run dev" --port 3000 --description "로그인 폼 검증"

이 명령어는:

개발 서버를 시작 (npm run dev)
헤드리스 크로미움 브라우저를 엽니다
녹화를 시작합니다
서버 로그를 캡처합니다

2. Test — 에이전트가 브라우저 조작

agent-browser snapshot -i                    # 인터랙티브 요소 보기
agent-browser open http://localhost:3000/login  # 페이지 이동
agent-browser fill @e2 "test@example.com"   # 폼 채우기
agent-browser click @e5                      # 제출 버튼 클릭
agent-browser screenshot ./proofshot-artifacts/step-login.png  # 스크린샷

에이전트가 실제로 브라우저를 조작합니다. 모든 액션이 타임스탬프와 함께 로깅됩니다.

3. Stop — 번들 생성

proofshot stop

비디오, 스크린샷, 에러 리포트를 모아서 ./proofshot-artifacts/에 저장합니다.

인터랙티브 뷰어

생성된 viewer.html을 열면:

비디오 플레이어 — 스크럽 바로 원하는 시점으로 이동
액션 마커 — 클릭, 입력 등 액션이 발생한 시점 표시
타임라인 — 단계별로 나누어진 진행 상황
콘솔 로그 탭 — 에러 하이라이팅, 비디오와 싱크된 타임스탬프
서버 로그 탭 — 백엔드 에러 확인

GitHub PR 통합

proofshot pr

현재 브랜치에서 녹화된 세션을 찾아서:

스크린샷과 비디오를 GitHub에 업로드
PR에 인라인 댓글로 검증 결과 게시
.webm → .mp4 변환 (ffmpeg 있으면)

“이 기능이 제대로 동작합니다”를 PR에서 바로 보여줄 수 있습니다.

지원 에이전트

에이전트	설치 위치
Claude Code	`~/.claude/skills/proofshot/SKILL.md`
Cursor	`~/.cursor/rules/proofshot.mdc`
Codex (OpenAI)	`~/.codex/skills/proofshot/SKILL.md`
Gemini CLI	`~/.gemini/GEMINI.md`
Windsurf	`~/.codeium/windsurf/memories/global_rules.md`

사용자 레벨 설치 — 프로젝트마다 설정할 필요 없습니다. 한 번 설치하면 모든 프로젝트에서 자동으로 작동합니다.

설치

npm install -g proofshot
proofshot install

첫 번째 명령은 CLI와 agent-browser (헤드리스 크로미움 포함)를 설치합니다. 두 번째 명령은 시스템에 있는 AI 코딩 도구를 감지해서 스킬을 설치합니다.

옵션

proofshot install --only claude    # 특정 도구만
proofshot install --skip cursor    # 특정 도구 제외
proofshot install --force          # 기존 설치 덮어쓰기

실제 사용 시나리오

1. 로그인 폼 검증

# 사용자: "로그인 폼을 proofshot으로 검증해줘"
# 에이전트:
proofshot start --run "npm run dev" --port 3000
agent-browser open http://localhost:3000/login
agent-browser fill @email "test@example.com"
agent-browser fill @password "password123"
agent-browser click @submit
agent-browser screenshot ./proofshot-artifacts/step-after-login.png
proofshot stop

결과: 로그인 과정의 비디오 + 스크린샷 + 콘솔/서버 에러 리포트

2. PR 검증 댓글

# 기능 구현 완료 후
proofshot start --url http://localhost:3000/new-feature
# ... 테스트 ...
proofshot stop
proofshot pr

PR에 이런 댓글이 자동으로 달립니다:

✅ Verification Complete

📹 Video: [watch session]

📸 Screenshots: 3 captured

⚠️ Errors: 0 console, 0 server

3. 비주얼 리그레션

proofshot diff --baseline ./previous-artifacts

이전 스크린샷과 비교해서 변경 사항을 감지합니다.

마치며: “에이전트가 만든 걸 내가 검증한다”

AI 코딩 에이전트가 점점 더 많은 코드를 작성합니다. 하지만 “제대로 작동하는가?”라는 질문은 여전히 인간이 해야 합니다.

ProofShot은 이 검증 과정을 자동화합니다:

녹화 — 에이전트가 무슨 짓을 했는지 비디오로 확인
캡처 — 주요 순간의 스크린샷
수집 — 콘솔/서버 에러 자동 감지
번들 — 모든 걸 한 곳에 모아서 인간이 쉽게 검토

“에이전트가 만든 걸 믿을 수 있을까?” — 이 질문에 ProofShot이 답을 줍니다.

🔗 관련 정보

GitHub: https://github.com/AmElmo/proofshot
NPM: https://www.npmjs.com/package/proofshot
agent-browser: https://github.com/vercel-labs/agent-browser
라이선스: MIT