웹 기능을 고쳤다는 설명만으로는 충분하지 않을 때가 많습니다. 리뷰어가 보고 싶은 것은 “무엇이 바뀌었는가”보다 “실제로 어떻게 동작하는가”입니다. Simon Willison이 2026년 6월 30일 공개한 shot-scraper 1.10은 이 지점을 겨냥합니다. 핵심 변화는 새 명령어 shot-scraper video입니다.1
기존의 스크린샷이 특정 순간을 캡처했다면, 이번 기능은 웹 애플리케이션을 조작하는 과정을 영상으로 남깁니다. 특히 AI 코딩 에이전트나 자동화된 개발 흐름에서 “작업 결과를 사람이 빠르게 검토할 수 있는 형태”로 만드는 데 유용합니다.
데모를 파일로 정의한다
shot-scraper video는 storyboard.yml 파일을 입력으로 받습니다.1 이 파일은 녹화할 데모의 실행 절차와 환경을 담는 역할을 합니다.
스토리보드 YAML에는 시작 URL을 지정하는 url, 브라우저 화면 크기를 정하는 viewport, 데모용 서버 실행 명령을 담는 server, 결과 파일 경로를 지정하는 output 항목을 포함할 수 있습니다.1
이 구조의 장점은 데모가 개인의 수동 조작에 의존하지 않는다는 점입니다. 누군가 브라우저를 열어 클릭하고 설명하는 방식이 아니라, 어떤 환경에서 어떤 화면을 녹화할지 파일로 고정합니다. 따라서 같은 데모를 다시 실행하거나, 코드 변경 뒤 동일한 흐름을 반복 확인하기가 쉬워집니다.
Playwright로 실행하고 영상으로 남긴다
shot-scraper video는 Playwright를 사용해 스토리보드에 정의된 루틴을 실행하고 그 과정을 녹화합니다.1 Playwright는 브라우저 자동화에 쓰이는 도구인데, 여기서는 테스트 통과 여부를 확인하는 데 그치지 않고 동작 과정을 보여주는 산출물을 만드는 데 쓰입니다.
실무에서 중요한 옵션도 포함돼 있습니다. --mp4 옵션을 사용하면 MP4 출력을 만들 수 있고, --auth JSON 파일을 통해 인증 쿠키를 사용할 수 있습니다.1 즉, 공개 페이지뿐 아니라 로그인 이후 접근 가능한 화면도 데모 녹화 대상으로 삼을 수 있습니다.
왜 AI 에이전트 워크플로에 잘 맞는가
이 기능의 가치는 단순히 “화면을 녹화한다”가 아닙니다. 더 중요한 점은 데모를 자동화 가능한 작업 단위로 바꾼다는 것입니다.
AI 코딩 에이전트가 웹 기능을 수정했다면, 결과를 설명하는 텍스트나 정적인 스크린샷만으로는 부족할 수 있습니다. 버튼을 클릭했을 때 상태가 바뀌는지, 입력 후 화면이 어떻게 전환되는지, 관리 화면의 흐름이 의도대로 이어지는지는 영상이 훨씬 잘 보여줍니다.
storyboard.yml로 흐름을 정의하고 shot-scraper video로 녹화하면, 에이전트가 남긴 결과물을 사람이 더 빠르게 검토할 수 있습니다. 이는 프론트엔드 변경, 관리자 도구, 내부 웹 앱처럼 “과정”이 중요한 작업에서 특히 실용적입니다.
shot-scraper 1.10에서 봐야 할 변화
shot-scraper 1.10의 핵심은 스크린샷 도구가 영상 데모 생성 쪽으로 확장됐다는 점입니다. 판단 기준도 “얼마나 예쁘게 캡처하는가”보다 “웹 동작을 얼마나 재현 가능하게 설명하고 기록할 수 있는가”에 가깝습니다.
반복해서 확인해야 하는 웹 기능이 있거나, AI 에이전트가 만든 변경 사항을 빠르게 검토해야 한다면 shot-scraper video는 작은 자동화 파일 하나로 실행 가능한 데모를 남기는 실용적인 방법이 될 수 있습니다.
1Have your agent record video demos of its work with shot-scraper video
이 노트는 보도·비평·교육·연구 목적으로 작성되었습니다. 저작권 문의가 있으시면 에서 알려주세요.