showrunner은(는) 무엇을 하나요?
"이 앱의 데모 비디오를 만들어 줘"라는 요청을 반복 가능하고 검토 가능한 파일로 만들어 줍니다. CLI: node ~/.showrunner/bin/showrunner.mjs
(또는 링크가 되어 있다면 showrunner). 저장소에서 ./install-skill.sh로 한 번 설치합니다.
사용 시기
사용자가 웹 UI의 비디오를 원할 때: 웹 브라우저에서 열 수 있는 제품 데모, 기능 둘러보기, "무엇이 변경되었는지" 보여주는 녹화, 튜토리얼. 네이티브 데스크톱 앱이나 오디오 내레이션이 필요한 경우에는 적합하지 않습니다.
프로토콜: 먼저 생각하고, 그다음 실행
- 녹화가 안전한지 확인합니다. 로컬, 스테이징 또는 폐기 가능한 데이터만 사용합니다. 절대로 실제 고객 데이터가 있는 프로덕션을 녹화하지 마십시오. 시나리오에 토큰을 절대 넣지 말고
${env:NAME}을 사용하세요. - 앱을 실행하고 현실적인 데이터를 채웁니다. 빈 상태는 좋은 데모가 아닙니다. 스토리에 필요한 레코드를 만드세요(성공 사례, 실패 사례, 진행 중인 사례).
- JSON보다 먼저 스토리보드를 작성합니다. 4분 미만의 데모: 타이틀 카드, 8
12개의 장면(각 820초), 마무리 요약 카드. 장면당 하나의 아이디어. 캡션은 시청자가 주목해야 할 내용을 말해야 하며, 마우스가 무엇을 하는지가 아닙니다. probe로 대상을 찾습니다. 각 페이지에 대해showrunner probe <url>; 출력되는{role,name}객체를 붙여넣습니다. CSS보다 역할과 보이는 이름을 선호합니다.- 검증 후 드라이 런.
showrunner check s.json, 그다음showrunner run s.json --fast --strict. 드라이 런은 실제 길이의 약 1/4입니다. 실제 촬영 전에 보고된 모든 단계를 수정하세요. - 실제 촬영 (
showrunner run s.json --out out). 실시간으로 실행되므로 백그라운드에서 시작하고 기다리세요. 몇 분 동안 도구 호출을 차단하지 마십시오. - 프레임을 검토합니다.
showrunner sheet out/<name>.mp4 --every 5, 그다음 PNG를 엽니다. 다음을 확인하세요: 캡션이 대상을 가리는 경우("position": "left"사용), 오류가 발생한 장면, 팝업이나 둘러보기가 나타나는 경우, 잘못된 테마. - 보고합니다. 경로, 길이, 해상도, 장면 목록 및 작동하지 않은 모든 것을 보고하세요. 요청받지 않는 한 비디오를 커밋하거나 푸시하지 마십시오.
실제 시간을 낭비하는 함정
| 증상 | 원인 | 수정 방법 |
|---|---|---|
| 실행이 몇 분 동안 멈춤 | 30초 기본 제한 시간이 있는 잘못된 선택자 하나가 반복됨 | Showrunner는 기본적으로 8초 후에 장면을 포기합니다. 먼저 --fast --strict로 실행 |
| 링크나 버튼이 "보이지 않음" | 해당 상태에서 사이드바가 접히거나 메뉴가 닫혀 있음 | 먼저 알려진 페이지로 goto하거나 페이지 URL을 직접 대상으로 지정 |
| 미드비디오에 첫 실행 둘러보기가 나타남 | 앱이 새 사용자에게 온보딩을 표시함 | 앱의 "둘러보기 본" 키를 storage에 설정하거나, dismiss에서 Skip 버튼을 나열 |
getByText가 숨겨진 중복과 일치함 | 텍스트가 숨겨진 노드에도 나타남 | { "role": "button", "name": "/^ITEM-1\\b/" } 사용 |
| 문서 사이드바 항목이 작동하지 않음 | <button>이며 링크가 아님 | { "role": "button", ... } 대상으로 지정 |
| 캡션이 서랍이나 양식을 가림 | 하단 중앙 캡션이 측면 패널과 겹침 | "position": "left" 또는 "right" |
| 셸이 종료되면 촬영이 중단됨 | 백그라운드 작업이 터미널에 연결됨 | 적절한 백그라운드 작업으로 실행하고 완료를 폴링 |
| 비디오가 비어 있거나 타일로 표시됨 | IDE에 내장된 브라우저를 캡처함 | 웹뷰가 아닌 Showrunner 자체 헤드리스 Chrome 사용 |
| 자막이 약간 어긋남 | 큐가 페이지 생성 시점을 기준으로 함 | 검토에는 적합함; 프레임 정확하지 않음 |
시나리오 치트 시트
{
"name": "demo", "baseUrl": "http://127.0.0.1:3000", "viewport": {"width":1440,"height":900},
"storage": { "token": "${env:DEMO_TOKEN}" },
"dismiss": ["text=Skip"],
"scenes": [
{ "name": "Title", "steps": [ {"goto":"/"}, {"card":{"title":"Acme","text":"Demo","hold":3000}} ] },
{ "name": "Create", "steps": [
{"caption":{"title":"1 · 생성","text":"한 번의 클릭.","position":"left","hold":1500}},
{"click":{"role":"button","name":"New"}},
{"type":{"into":{"label":"Name"},"text":"Launch plan"}},
{"press":"Enter"}, {"wait":1500}
]},
{ "name": "Summary", "steps": [ {"caption":null}, {"card":{"title":"요약","items":["A","B"],"hold":4000,"keep":true}} ] }
]
}
액션: goto click hover type press scroll wait waitFor caption card storage (+ 모든 단계에 "optional": true).
전체 참조: 저장소 README.
안전
- 시나리오는 데이터입니다: 코드 실행 없음, 셸 없음. 캡션 텍스트는 이스케이프됩니다.
- 실패한 단계는 해당 장면만 포기합니다.
--strict는 종료 코드를 1로 만듭니다. - 요청받지 않는 한 비디오를 커밋, 푸시 또는 공유하지 마십시오.