demo-maker은(는) 무엇을 하나요?
🎬 웹사이트를 위한 오픈소스 제품 데모 비디오 메이커. YAML 설정과 Playwright를 사용하여 일관된 웹사이트 데모 비디오를 만드세요 — 수동 클릭이나 재녹화는 필요 없습니다.
버전 관리된 시나리오 설정을 일관된 제품 기능 비디오로 변환하세요 — 재설정, 재실행, 수동 재녹화 불필요.
왜 필요할까?
제품 UI는 계속 변경되므로 데모 비디오는 금방 구식이 됩니다. 수동으로 재녹화하거나 (또는 에이전트에게 "비디오를 만들어"라고 요청하는 것은) 느리고 비용이 많이 들며 여전히 사람의 확인이 필요합니다.
demo-maker를 사용하면 워크스루를 YAML로 버전 관리합니다: 단계를 편집하고, 재실행하고, 동일한 MP4를 얻습니다. 프래그먼트와 가져오기를 통해 흐름을 재사용할 수 있습니다; 사용자나 에이전트가 스크립트를 코드처럼 유지 관리할 수 있습니다.
부수 효과: 안정적인 로케이터를 작성하면 실제 UI 격차(누락된 레이블, 중복된 접근 가능 이름, 타겟팅하기 어려운 목록 행)가 드러나므로 데모를 구축하면서 접근성도 함께 개선하는 경우가 많습니다.
요구 사항
- Node.js 20+
- Playwright Chromium (
npx playwright install chromium) - ffmpeg가
PATH에 있어야 함 (MP4 재인코딩,cut_video스플라이스, 배경 오디오)
설치
npm @a1knowhow/demo-maker로 배포:
npm install -D @a1knowhow/demo-maker
npx playwright install chromium
또는 클론에서:
npm install
npx playwright install chromium
패키지는 TypeScript 소스를 제공하며 tsx를 통해 실행됩니다. 라이브러리 임포트(import … from "@a1knowhow/demo-maker")는 TypeScript 지원 툴체인(tsx, Vitest 또는 번들러)이 필요합니다. 런타임 기능에 대해서는 보안을 참조하세요.
빠른 시작
npx demo-maker run examples/smoke.yaml --headless --fast
단계별 가이드 (설치 → 첫 MP4 → 녹화 → 프래그먼트): 시작하기 · GitHub 문서
예제 워크스루
소개 투어: 이 리포지토리를 GitHub에서 열고 시작하기 → 액션 → 로케이터(가져오기, 타이틀 카드, 캡션, 페이싱)를 살펴보세요:
npx demo-maker run examples/demo1-introduction.yaml
더 풍부한 CI 워크스루 (작업 → 녹색 실행 → 테스트 작업):
npx demo-maker run examples/demo2-github-actions.yaml
(examples/demo1-introduction.yaml · examples/demo2-github-actions.yaml · examples/smoke.yaml (최소 확인용))
문서
사이트: https://a1knowhow.github.io/demo-maker/
| 주제 | 문서 사이트 | 소스 |
|---|---|---|
| 색인 | 문서 사이트 | docs/index.md |
| 시작하기 | 시작하기 | docs/getting-started.md |
| CLI | CLI | docs/cli.md |
| 액션 | 액션 | docs/actions.md |
| 로케이터 | 로케이터 | docs/locators.md |
| 비디오 및 페이싱 | 비디오 및 페이싱 | docs/video-and-pacing.md |
| 녹화 | 녹화 | docs/recording.md |
| UI 변경 후 수리 | 수리 | docs/repairing-scenarios.md |
타입 스키마: src/types.ts.
명령어
| 명령어 | 목적 |
|---|---|
demo-maker run <scenario.yaml> | 시나리오 실행 (선택적 비디오) |
demo-maker check <scenario.yaml> | run을 --fail-fast --fast로 실행 |
demo-maker record | 라이브로 액션을 YAML로 녹화 |
demo-maker import | DevTools / 리코더 JSON → YAML 변환 |
demo-maker export-chapters | 타임스탬프 JSON → YouTube 챕터 텍스트 출력 |
보안
취약점은 비공개로 신고해 주세요 — SECURITY.md를 참조하세요. 보안 버그에 대해 공개 이슈를 열지 마십시오.
라이선스
Apache License 2.0 — LICENSE를 참조하세요.
A1KnowHow 소개
demo-maker는 원래 A1KnowHow의 데모 비디오를 제작하기 위해 만들어졌습니다 — AI 워크플로, 문서 정리, 채팅, 검색, 그리고 스킬과 MCP 도구 통합을 갖춘 AI 에이전트.