ProofShot
ProofShot**은 자율형 AI 코딩 에이전트가 로컬 브라우저 환경에서 수행하는 프론트엔드 및 사용자 인터페이스 개발 작업을 시각적으로 기록하고 실시간으로 진단하여 인간 개발자가 결과물을 쉽게 검토할 수 있도록 돕는 오픈소스 CLI 기반의 검증 워크플로 관리 도구입니다. 2026년 3월 12일 개발자 AmElmo가 이끄는 프로젝트 팀에 의해 처음 공개된 이 도구는 자율적으로 코드를 수정하고 브라우저를 조종하는 AI 에이전트들이 자신이 빌드한 결과물이 디자인 가이드에 맞는지 혹은 실제 의도대로 렌더링되는지 판단할 수 없는 시각적
ProofShot은 자율형 AI 코딩 에이전트가 로컬 브라우저 환경에서 수행하는 프론트엔드 및 사용자 인터페이스 개발 작업을 시각적으로 기록하고 실시간으로 진단하여 인간 개발자가 결과물을 쉽게 검토할 수 있도록 돕는 오픈소스 CLI 기반의 검증 워크플로 관리 도구입니다. 2026년 3월 12일 개발자 AmElmo가 이끄는 프로젝트 팀에 의해 처음 공개된 이 도구는 자율적으로 코드를 수정하고 브라우저를 조종하는 AI 에이전트들이 자신이 빌드한 결과물이 디자인 가이드에 맞는지 혹은 실제 의도대로 렌더링되는지 판단할 수 없는 시각적 맹인 한계를 극복하기 위해 설계되었습니다. 기술적으로는 Vercel에서 제공하는 agent-browser 라이브러리를 내장하고 있으며 이를 통해 headless Chromium (헤드리스 크로미움) 세션을 안전하게 통제하면서 비디오 스트림을 실시간 캡처하는 동시에 콘솔과 서버의 다양한 백엔드/프론트엔드 런타임 로그를 통합 수집하는 구조를 갖추고 있습니다. 마치 차량에 탑재된 블랙박스가 주행 상황 전체를 기록하고 급제동이나 충돌 같은 특정 이벤트 시점의 센서 데이터를 연동하여 저장하듯이 ProofShot은 에이전트가 실행하는 모든 클릭, 키 입력, 화면 이동 동작을 녹화 비디오 프레임과 매칭하여 하나의 패키지된 보고서로 빌드합니다. 기존의 AI 에이전트 보조 도구들은 단순히 브라우저를 조종하는 플레이라이트나 크롬 개발자 도구 프로토콜을 사용하여 DOM 구조를 텍스트로 조회하거나 스크린샷 한 장을 캡처하는 수준에 그쳐 에이전트가 전체 인터랙션을 올바르게 완료했는지 확인하는 데 심각한 제약이 있었습니다. 더욱이 에이전트의 작업 결과물을 개발자가 직접 눈으로 재현하며 로컬 서버를 켜고 모든 단계를 클릭해보아야 하므로 자율 코딩 에이전트의 생산성을 인간이 검증하는 과정에서 병목 현상이 발생했습니다. ProofShot은 이러한 단순 브라우저 제어 도구들과 달리 에이전트가 수행한 전체 탐색 경로를 타임라인으로 구성하고 각 단계별로 캡처된 screenshots (스크린샷)과 밀리초 단위로 동기화된 interaction log (상호작용 로그)를 완벽하게 정렬하여 단일 HTML 뷰어로 제공함으로써 차별화된 가치를 창출합니다. 개발자는 복잡한 로컬 디버깅 환경을 구성할 필요 없이 HTML 리포트를 여는 것만으로 에이전트의 동작 과정을 10초 만에 시각적으로 확인하고 승인 여부를 결정할 수 있습니다. 일반적인 웹 애플리케이션 개발 워크플로에서 개발자가 AI 에이전트에게 복잡한 SaaS 대시보드 및 실시간 그래프가 포함된 차트 페이지 구현을 요청할 경우 에이전트는 즉시 로컬 서버를 구동하고 proofshot start 명령어를 통해 검증 세션을 시작합니다. 에이전트는 agent-browser를 호출하여 로그인 폼을 채우고 대시보드로 진입하여 데이터 갱신 버튼을 클릭하는 일련의 시나리오를 수행하며 이때 발생한 모든 네트워크 요청 에러와 콘솔 예외 로그는 CLI에 내장된 error pattern matching (에러 패턴 매칭) 기능을 통해 자동으로 감지되어 기록됩니다. 작업이 종료되면 proofshot stop 명령어와 함께 세션이 안전하게 종료되며 생성된 HTML 증적 결과물은 GitHub Pull Request (풀 리퀘스트) 생성 시 proofshot pr 명령을 통해 해당 PR에 비디오와 스크린샷 요약이 달린 코멘트로 자동 업로드됩니다. 이를 통해 리뷰어는 복잡한 프론트엔드 빌드나 DB 마이그레이션 없이도 에이전트가 수정한 코드가 실제로 완벽하게 작동하는지 동영상으로 확인하고 병합할 수 있으며 이 자율적인 루프를 통해 개발 주기 전체의 오류 비용을 획기적으로 낮출 수 있습니다.
💻 필요한 컴퓨터 사양
0 (CPU 전용, 별도 외장 GPU 하드웨어 요구사항 없음)
패키지 설치용 50MB 이내, 브라우저 세션 비디오 및 스크린샷 저장을 위해 500MB 이상의 여유 공간 권장
⚡ 설치법
### 4-1. Quick Start
```bash
npm install -g proofshot && proofshot install
```
### 4-2. 상세 설치
```bash
# ProofShot 패키지 전역 설치
npm install -g proofshot
# AI 코딩 도구 감지 및 로컬 에이전트 스킬 설치 (Claude, Cursor 등 연동)
proofshot install
# (선택 사항) 특정 에이전트 도구에만 명시적으로 스킬 설치할 경우
proofshot install --only claude
```📝 업데이트 노트
아직 업데이트 노트가 없습니다.
🧪 관련 생명의 코드
관련된 생명의 코드 글이 아직 없습니다.