shot-scraper video는 오늘 출시된 shot-scraper 1.10에 새로 추가된 명령어다. storyboard.yml 파일에 웹 애플리케이션 실행 시나리오를 정의하면, Playwright를 통해 해당 시나리오를 자동으로 녹화해 준다. 코딩 에이전트가 자신의 작업 결과를 직접 데모로 남겨야 한다는 주제는 이전에도 다룬 적 있는데, 이번 기능은 그것을 실현하기 위한 최신 시도다.
아래는 shot-scraper video로 제작한 예시 영상이다. 현재 개발 중인 기능으로, Datasette에서 CSV, TSV, JSON 데이터를 붙여넣어 새 테이블을 생성하는 기능을 시연한다:
이 영상은 다음 명령어를 실행해 만들었다:
shot-scraper video datasette-bulk-insert-storyboard.yml \
--auth datasette-demo-auth.json --mp4(--auth JSON 파일에는 쿠키가 포함되어 있는데, 쿠키에 대한 자세한 내용은 문서에서 확인할 수 있다.)
datasette-bulk-insert-storyboard.yml 파일의 내용은 다음과 같다:
output: /tmp/datasette-bulk-insert-demo.webm
server:
- uv
- --directory
- /Users/simon/Dropbox/dev/datasette
- run
- datasette
- -p
- 6419
- --root
- --secret
- "1"
- /tmp/demo.db
url: http://127.0.0.1:6419/demo/tasks
viewport:
width: 1280
height: 720
cursor: true
wait_for: 'button[data-table-action="insert-row"]'
javascript: |
(() => {
let clipboardText = "";
Object.defineProperty(navigator, "clipboard", {
configurable: true,
get: () => ({
writeText: async (text) => {
clipboardText = String(text);
},
readText: async () => clipboardText,
}),
});
})();
scenes:
- name: Bulk insert existing table rows
do:
- pause: 0.8
- click: 'button[data-table-action="insert-row"]'
- wait_for: "#row-edit-dialog[open]"
- pause: 0.5
- click: ".row-edit-bulk-insert"
- wait_for: ".row-edit-bulk-textarea"
- pause: 0.5
- click: ".row-edit-copy-template"
- wait_for: "text=Copied"
- pause: 0.8
- fill:
into: ".row-edit-bulk-textarea"
text: |
title,owner,status,priority,notes
Prepare release video,Ana,doing,1,Recorded with shot-scraper
Check pasted CSV import,Ben,review,3,Previewed before inserting
Share the branch demo,Chen,queued,2,Bulk insert creates three rows
- pause: 0.8
- click: ".row-edit-save"
- wait_for: "text=Previewing 3 rows."
- pause: 1.2
- click: ".row-edit-save"
- wait_for: "text=3 rows inserted."
- pause: 1.0
- click: ".row-edit-cancel"
- wait_for: "text=Prepare release video"
- pause: 1.0
- name: Create a table from pasted CSV
open: http://127.0.0.1:6419/demo
wait_for: 'details.actions-menu-links summary'
do:
- pause: 0.8
- click: 'details.actions-menu-links summary'
- click: 'button[data-database-action="create-table"]'
- wait_for: "#table-create-dialog[open]"
- pause: 0.5
- fill:
into: ".table-create-table-name"
text: "launch_metrics"
- click: ".table-create-from-data"
- wait_for: ".table-create-data-textarea"
- pause: 0.5
- fill:
into: ".table-create-data-textarea"
text: |
metric_id,name,score,recorded_on
m001,Activation rate,87.5,2026-06-29
m002,Retention check,72.25,2026-06-30
m003,CSV import health,95,2026-07-01
- pause: 0.8
- click: ".table-create-save"
- wait_for: "text=Previewing 3 rows."
- pause: 1.2
- click: ".table-create-save"
- wait_for_url: "**/demo/launch_metrics"
- wait_for: "text=Activation rate"
- pause: 1.2video 명령어 문서에는 더 간단한 예시가 있지만, 이 글에서는 좀 더 풍부한 사례를 소개하고자 했다.
이 데모 YAML 스토리보드는 Codex Desktop에서 실행한 GPT-5.5 xhigh가 전적으로 작성했다. 다음은 해당 브랜치의 ~/dev/datasette 체크아웃 내에서 사용한 프롬프트다:
Review the changes on this branch.
cd to ~/dev/shot-scraper and run the command "uv run shot-scraper video --help"
Now use that new video command to record a video demo of the new features from this branch, including running a "uv run datasette -p 6419 --root --secret 1 /tmp/demo.db" development server so you can record the video against a demo DB that you first create.
이제 기능이 정식 출시됐으니, 프롬프트를 "run uvx shot-scraper video --help"로 바꿔도 동일한 결과를 얻을 수 있다.
명령어의 --help 출력이 코딩 에이전트가 활용하기에 충분한 정보를 담도록 설계하는 이 패턴이 마음에 든다. 마치 SKILL.md 파일을 도구 안에 직접 내장한 것처럼 동작한다. showboat와 rodney에도 동일한 패턴을 적용했다.
shot-scraper video는 실험적인 프로토타입으로 시작했다. shot-scraper는 Playwright 위에 구축되어 있으며, 원하는 데모를 만들기 위해 Playwright가 브라우저 세션을 충분히 제어하면서 영상을 녹화할 수 있어야 했다.
몇 년 전 처음 시도했을 때는, Playwright가 생성한 영상에 테스트 실패 디버깅에는 유용하지만 제품 데모에는 불필요한 UI 요소들이 포함되어 있었다.
얼마 후 그 문제는 수정됐지만, 여전히 사소한 걸림돌이 남아 있었다. 특히 녹화 메커니즘이 브라우저에서 첫 번째 URL을 불러오기 전에 시작되면서 영상 앞부분에 흰 프레임이 몇 장 끼어드는 문제가 있었다.
Playwright 1.59에서는 영상 녹화를 훨씬 세밀하게 제어할 수 있는 새로운 스크린캐스트 메커니즘이 추가됐다. 필요한 기능에 거의 근접했지만, 출력 영상의 너비가 800px로 고정되는 문제가 있었다.
해당 문제를 수정한 머지된 PR을 발견했지만, 아직 릴리스에는 포함되지 않은 상태였다. 그러다 어제 playwright-python 1.61.0에 포함되어 출시됐고, 드디어 기능 구현을 마무리할 수 있었다!
코드 전체는 Codex Desktop에서 GPT-5.5 xhigh가 작성했다. 문서화도 함께 맡겼는데, 이것이 설계를 검토하는 데 매우 유용한 틀이 되었다. 기능을 다듬는 과정의 상당 부분이 그 문서를 검토하면서 중복되거나 일관성이 없거나 혼란스러운 부분을 찾아내고, 더 나은 설계를 요청하거나 직접 지시하는 방식으로 이루어졌다.
YAML 형식 자체는 대부분 코딩 에이전트가 정의했다. 설계를 검토하기 쉽게 만들기 위한 목적도 있어, Pydantic을 사용해 형식을 정의하고 검증하도록 했다.
이 기능은 코딩 에이전트의 도움 없었다면 거의 손도 못 댔을 것이다. 이슈는 2024년 2월에 등록했지만, 다른 프로젝트들 사이에서 시간을 내기가 좀처럼 쉽지 않았다.
현재 이 블로그의 장문 글만 보고 계십니다. 모든 포스트를 받아보려면 /atom/everything/을 구독하거나, 다른 구독 옵션을 확인해 보세요.
