데모에서 프로모 릴로: Screen Studio 스타일 웹앱 데모

webapp-screencast

당신이 촬영 시나리오를 스크립팅하면, webapp-screencast가 녹화하고 편집합니다. 출력: OUT/<name>.mp4 (1920×1080, 60fps) 및 포스터 .jpg 파일. 모든 것은 당신이 작성하는 파일(scenario.py, plan.py)과 하나의 CLI로 이루어집니다. 항상 --json 플래그를 서브커맨드 앞에 붙여 CLI를 호출하세요: 표준 출력은 하나의 JSON 객체입니다(ok, error, 경로, 지속 시간, 경고). 진행 상황은 stderr로 출력됩니다. 종료 코드 0은 성공, 1은 단계 실패, 2는 잘못된 입력입니다.

API 및 계획 키: reference.md. scenario.py / plan.py를 작성하기 전에 반드시 읽으십시오.

0. 설정 (머신당 한 번)

webapp-screencast --json doctor

webapp-screencast가 없으면: pip install git+https://github.com/dr-osmanovich/webapp-screencast.git (프로젝트의 venv가 있으면 그것을 사용하세요), 그런 다음 python -m playwright install chromium. doctor는 각 실패한 검사와 그 수정 방법을 나열합니다. 렌더링을 위해 Node 22+와 ffmpeg가 필요합니다.

1. 앱 이해하기 (녹화 전)

• 앱이 로컬에서 어떻게 실행되는지(README, package.json 스크립트, Makefile, docker-compose)와 URL을 찾으세요. 일반 정적 폴더는 webapp-screencast 자체로 서빙할 수 있습니다(make --serve DIR).
• 저장소에서 데모/시드 데이터 및 테스트 계정을 찾으세요(fixtures, seed 스크립트, .env.example). 절대 프로덕션, 실제 고객 또는 환자 데이터, 또는 실제 자격 증명을 녹화하지 마십시오. 안전한 데모 데이터가 없으면 중단하고 사용자에게 문의하세요.
• 상태 재설정 방법(seed/reset 스크립트, localStorage 지우기)을 찾으세요. 모든 테이크는 깨끗한 상태에서 시작합니다.
• 가치를 보여주는 35개의 비트(훅 → 액션 → 결과 → 세부 사항 하나 → 끝)를 선택하세요. 1530초 분량의 푸티지.
• 실제 구성 요소를 읽어 안정적인 선택자(id, data-testid, roles)를 얻으세요. 추측하지 마십시오.

2. 스캐폴드 및 스크립트

webapp-screencast --json init video/ --base-url http://127.0.0.1:3000 --title "제품명"

video/scenario.py 작성: CONFIG, 선택적 login(page, cfg) 및 prepare(page, cfg), 그리고 run(take, page). 재촬영을 줄이는 규칙:

• 모든 비트에서 take.mark("name"); 카메라나 콜아웃이 프레임해야 하는 모든 것에 대해 take.box("name", selector) (또는 click(..., name=))를 사용하세요. 항상 hook을 먼저 표시하고 end를 마지막에 표시하세요.
• 액션 후 page.wait_for_selector(...)로 앱을 기다린 다음 take.hold(0.3–0.8).
• take.type(...) 전에 포인터를 텍스트에서 멀리 옮기세요; cps 25~35로 입력하세요.
• prepare()에서 토스트, 쿠키 배너, 개발자 오버레이를 숨기고; 사이드 패널을 닫으세요.
• 네이티브 title= 툴팁은 헤드리스에서 렌더링되지 않습니다 — 대신 계획 callout을 사용하세요.

3. 녹화 및 검사

webapp-screencast --json record video/scenario.py --out video/out/footage [--base-url URL]
webapp-screencast --json inspect video/out/footage

peak_fps가 바쁜 비트에서 ≥ 50인지 확인하고(macOS에서는 더 낮을 수 있음 → GPU 플래그 문제, reference 참조), 계획한 모든 마크가 있는지 확인하세요. 실패한 선택자는 stderr에 Playwright 오류를 발생시킵니다: 시나리오를 수정하고 다시 녹화하세요 — 푸티지는 저렴합니다(≈ 테이크 길이 + 10초).

4. 계획, 구성, 확인

video/plan.py를 inspect가 출력한 마크와 박스를 사용하여 작성하세요(절대 하드코딩된 초 사용 금지): 액션을 따라가는 카메라 세그먼트(비트에서 줌 1.4–1.7, 장면 사이에서 1.0으로 돌아가기), 비트당 하나의 짧은 자막(단어당 ≥ 0.3초, 겹침 없음), 인트로/아웃트로 카드.

webapp-screencast --json compose video/plan.py --footage video/out/footage --out video/out/composition
webapp-screencast --json snapshot video/out/composition --at 1,5,9,14 --out video/out/stills

모든 warnings 항목을 수정하세요. 스틸을 확인하세요(PNG / 접촉 시트 읽기): 텍스트가 읽을 수 있는지, 카메라가 액션에 있는지, 아무것도 잘리지 않았는지, 자막이 설명하는 대상을 덮지 않는지 확인하세요. compose + snapshot만으로 plan.py를 반복하세요 — 다시 녹화할 필요가 없습니다.

5. 렌더링 및 전달

렌더링은 M1에서 20초당 약 4~5분이 소요됩니다 — 로그 파일과 함께 백그라운드에서 실행하세요.

webapp-screencast --json render video/out/composition --out video/out/video.mp4
webapp-screencast --json poster video/out/video.mp4 --at 9.0

JSON이 fps: 60과 예상 지속 시간을 보여주는지 확인하세요. mp4 및 포스터 경로를 전달하세요. .gitignore에 out/ 디렉토리를 추가하고; scenario.py + plan.py를 커밋하여 UI 변경 후 비디오를 다시 제작할 수 있도록 하세요.

시나리오와 계획이 이미 좋을 때 원샷: webapp-screencast --json make video/scenario.py video/plan.py --out video/out --base-url URL --poster-at 9 (--serve DIR 정적 사이트용, --skip-render 검사 후 중단).

/brag (또는 다른 런치 비디오 스킬)과 함께 사용

Brag이 스토리를 결정하고; webapp-screencast는 실제 푸티지를 제공합니다.

1. Brag의 자체 계획을 실행합니다: 컨셉, 톤, 비트, 제목, 카피. 스크린샷 장면을 만들기 전에 중단합니다.
2. Brag의 비트를 scenario.py 마크(비트당 하나의 마크)로 변환하고 녹화합니다.
3. Brag의 대사를 plan.py에 넣습니다: 훅 → intro.title, 비트 캡션 → subtitles, 마무리 문구 / CTA → outro; Brag의 톤을 look에 매핑합니다(세련됨 → graphite/ocean, 장난기 → sunset/violet, 악센트 = 앱의 CSS에서 가져온 브랜드 색상).
4. 위와 같이 구성, 스냅샷, 렌더링하여 Brag의 출력 폴더에 넣고; Brag이 공유 카피를 작성하도록 합니다. 현재는 가로 16:9만 지원합니다; Brag이 세로를 요청하면 그렇게 말하고 가로로 렌더링합니다.