코딩 에이전트가 코드를 수정하는 것만으로는 충분하지 않습니다. 리뷰어가 확인하고 싶은 것은 결국 하나입니다. “이 기능이 실제 브라우저에서 제대로 동작하는가?”
shot-scraper video는 그 확인 과정을 말이나 캡처 이미지가 아니라, 재현 가능한 브라우저 루틴과 영상으로 남기기 위한 도구입니다.
shot-scraper가 하던 일
shot-scraper는 웹사이트 스크린샷 생성을 자동화하는 CLI 도구입니다.1 명령줄에서 단일 URL의 스크린샷을 만들 수 있고, YAML 파일에 여러 작업을 정의한 뒤 shot-scraper multi로 일괄 생성할 수도 있습니다.1
YAML 설정에는 URL, 출력 파일명, 너비, 품질 같은 항목을 담을 수 있습니다.1 특정 CSS 선택자를 지정해 페이지 일부만 캡처하는 것도 가능합니다.1 즉, 원래의 강점은 “브라우저에서 보이는 결과를 자동으로 기록한다”는 데 있었습니다.
shot-scraper video가 더하는 것
1.10 릴리스에서 추가된 shot-scraper video는 이 흐름을 스크린샷에서 영상으로 확장합니다.2 이 명령은 storyboard.yml 파일을 입력으로 받아 웹 애플리케이션의 정해진 루틴을 실행하고, Playwright를 사용해 그 과정을 녹화합니다.2
예를 들면 다음과 같은 방식으로 실행할 수 있습니다.2
shot-scraper video datasette-bulk-insert-storyboard.yml --auth datasette-demo-auth.json --mp4중요한 점은 단순히 “화면을 녹화한다”가 아닙니다. 루틴을 파일로 정의한다는 점입니다. 한 번 만든 스토리보드는 다시 실행할 수 있고, 같은 기능 데모를 반복해서 생성할 수 있습니다. 데모가 손작업 결과물이 아니라 재현 가능한 산출물이 되는 셈입니다.
에이전트 작업에 특히 잘 맞는 이유
코딩 에이전트가 기능을 구현했다면, 다음 문제는 검증입니다. 사람이 매번 브라우저를 열어 클릭하고 입력하며 확인할 수도 있지만, 그 과정은 반복하기 어렵고 리뷰 기록으로 남기기도 애매합니다.
shot-scraper video를 쓰면 에이전트가 만든 기능을 실제 브라우저 루틴으로 실행하고, 그 결과를 영상으로 확인할 수 있습니다. 리뷰어는 코드 diff만 보는 대신 “이 기능이 어떤 흐름으로 동작하는지”를 빠르게 볼 수 있습니다.
특히 웹 애플리케이션에서는 작은 UI 변화나 입력 흐름이 중요합니다. 이런 경우 영상은 정적인 스크린샷보다 더 많은 맥락을 제공합니다. 버튼을 누른 뒤 어떤 화면으로 이동하는지, 입력 후 결과가 어떻게 바뀌는지, 전체 루틴이 끊기지 않고 이어지는지를 한 번에 확인할 수 있기 때문입니다.
도입할 때 생각할 점
이미 문서용 스크린샷을 자동 갱신하고 있다면 shot-scraper video는 자연스러운 확장입니다. shot-scraper 설치 예시는 uv add --group docs shot-scraper와 uv run shot-scraper install 흐름을 사용하며, shot-scraper install은 필요한 브라우저를 설치하는 단계로 설명됩니다.1
GitHub Actions에 통합해 주기적으로 스크린샷을 생성하는 방식도 가능하다고 소개되어 있습니다.1 다만 자동 생성된 이미지 파일을 저장소에 계속 커밋하면 변경 이력이 읽기 어려워질 수 있다는 주의가 있습니다.1 영상도 같은 문제가 생길 수 있으므로, 저장소에 직접 넣을지, 릴리스 산출물이나 별도 저장소에 둘지, 얼마나 오래 보관할지를 먼저 정하는 편이 좋습니다.
결론: 코드 리뷰에 필요한 것은 실행 증거다
shot-scraper video의 가치는 “예쁜 데모 영상 만들기”에 그치지 않습니다. 핵심은 웹 기능의 동작을 재현 가능한 시나리오로 정의하고, 실제 브라우저 실행 결과를 영상으로 남기는 것입니다.
코딩 에이전트가 더 많은 코드를 작성할수록 리뷰어에게 필요한 것은 더 긴 설명이 아니라 더 명확한 작동 증거입니다. shot-scraper video는 그 증거를 만드는 실용적인 방법 중 하나입니다.
참고
2Have your agent record video demos of its work with shot-scraper video
이 노트는 보도·비평·교육·연구 목적으로 작성되었습니다. 저작권 문의가 있으시면 에서 알려주세요.