shot-scraper video는 오늘 출시된 shot-scraper 1.10에 새로 추가된 명령어로, 웹 애플리케이션을 대상으로 실행할 루틴을 정의한 storyboard.yml 파일을 입력받아 Playwright로 그 과정을 영상으로 기록한다. 코딩 에이전트가 작업 결과를 데모로 만들어 보여주는 것의 중요성에 대해서는 이전에 쓴 적이 있다. 이번 기능은 에이전트가 그렇게 할 수 있도록 하려는 가장 최근의 시도다.

다음은 shot-scraper video로 만든 예시 영상으로, 붙여 넣은 CSV, TSV 또는 JSON 데이터로 Datasette에서 새 테이블을 만들 수 있게 하는 아직 개발 중인 기능을 시연한다:

이 영상은 다음 명령어를 실행해 만들었다:

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.2

video 명령어 문서에는 더 간단한 예제도 있지만, 이 글에서는 좀 더 포괄적인 예제를 준비했다.

이 데모용 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 and rodney에서도 같은 패턴을 사용했다.

어떻게 만들었는지

shot-scraper video는 실험적인 프로토타입으로 시작했다. shot-scraper는 Playwright를 기반으로 만들어졌는데, 원하는 데모를 만들려면 Playwright가 브라우저 세션을 충분히 제어하면서 영상으로 기록할 수 있어야 했다.

몇 년 전 처음 시도했을 때는 Playwright가 생성한 영상에 테스트 실패를 디버깅할 때는 유용하지만 제품 데모에는 불필요한 추가 크롬(chrome)이 포함되어 있었다.

그 문제는 한참 전에 수정됐지만, 여전히 사소한 장애물들이 남아 있었다. 특히 브라우저가 첫 URL을 로드하기 전에 녹화 메커니즘이 작동하면서 영상 시작 부분에 흰 프레임이 몇 개 생기는 문제가 있었다.

Playwright 1.59에서는 영상 녹화에 대해 훨씬 더 세밀한 제어를 제공하는 새로운 screencast 메커니즘이 추가됐다. 거의 내가 필요로 하던 기능이었지만, 결과 영상의 너비가 800px로 고정되어 있었다.

이를 수정한 PR이 이미 머지된 것을 찾았지만 아직 릴리스에는 포함되지 않은 상태였다. 그러다 어제 playwright-python 1.61.0에 포함되어 출시되면서 마침내 막혔던 부분이 풀려 기능을 완성할 수 있었다!

코드 자체는 전부 Codex Desktop의 GPT-5.5 xhigh가 작성했다. 문서도 직접 작성하게 했는데, 덕분에 설계를 검토할 수 있는 매우 유용한 틀을 얻을 수 있었다. 기능에 대한 반복 작업의 상당 부분은 그 문서를 검토하면서 중복되거나 일관되지 않거나 헷갈리는 부분을 찾아내고 더 나은 설계를 요청(하거나 직접 지시)하는 과정에서 이루어졌다.

YAML 형식 자체도 대부분 코딩 에이전트가 정의했다. 설계를 더 쉽게 검토할 수 있도록 Pydantic을 사용해 형식을 정의하고 검증하도록 했다.

이 기능은 코딩 에이전트의 도움이 없었다면 거의 확실히 시도하지 않았을 종류의 기능이다. 2024년 2월에 최초 이슈를 등록했지만, 다른 프로젝트들 사이에서 이를 해결할 시간을 내기가 어려웠다.