Mastra 데모 스킬(Mastra Demo Skill)
다음을 결합하여 전문적인 제품 데모 비디오를 제작하세요:
- 브라우저 자동화를 통한 GIF 녹화(claude-in-chrome MCP 활용)
- ElevenLabs 음성 해설 생성
- Remotion 비디오 합성
명령어(Commands)
| 명령어 | 목적 |
|---|---|
/mastra-demo:init <이름> | 템플릿에서 새 데모 프로젝트 생성 |
/mastra-demo:script | DEMO_SCRIPT.md 생성 또는 검증 |
/mastra-demo:record | 브라우저 액션을 GIF로 녹화 |
/mastra-demo:audio | ElevenLabs를 통해 음성 해설 생성 |
/mastra-demo:compose | Remotion 합성 구성 |
/mastra-demo:render | 최종 비디오 내보내기 |
/mastra-demo:status | 진행 상황 및 다음 단계 표시 |
빠른 시작(Quick Start)
# 1. 새 데모 프로젝트 생성
/mastra-demo:init my-awesome-demo
# 2. DEMO_SCRIPT.md 편집(또는 인터랙티브하게 생성)
/mastra-demo:script
# 3. 각 세그먼트에 대한 브라우저 GIF 녹화
/mastra-demo:record
# 4. 음성 해설 생성
/mastra-demo:audio
# 5. 비디오 합성 구성
/mastra-demo:compose
# 6. 최종 비디오 렌더링
/mastra-demo:render
사전 요구사항(Prerequisites)
- claude-in-chrome MCP: GIF 녹화를 위한 브라우저 자동화 확장
- ElevenLabs API 키: 음성 해설 생성용
- Node.js 18+: Remotion용
- ffprobe: 오디오 길이 감지용(ffmpeg와 함께 제공)
프로젝트 구조(Project Structure)
이 스킬로 생성된 데모 프로젝트는 다음과 같은 구조를 가집니다:
my-demo/
├── .env # ELEVENLABS_API_KEY
├── .mastra-demo-state.json # 실행 상태
├── DEMO_SCRIPT.md # 세그먼트가 포함된 스크립트
├── package.json # Remotion 종속성
├── public/ # 에셋(GIF, 오디오)
│ ├── segment-01.gif
│ ├── segment-01.mp3
│ └── ...
├── out/ # 렌더링된 출력
│ └── demo.mp4
└── src/
├── Root.tsx
├── DemoVideo.tsx
└── scenes/
스크립트 형식(Script Format)
DEMO_SCRIPT.md가 데모를 정의합니다:
# 데모: 기능 이름
## 서사(Narrative)
먼저 전체 스토리를 연속적인 산문으로 작성하세요.
이렇게 하면 세그먼트 전체에서 자연스러운 흐름이 보장됩니다.
## 설정(Settings)
fps: 30
voice: Daniel
## 제목(Title)
text: "기능 이름"
subtitle: "태그라인"
duration: 5s
## 세그먼트(Segments)
### segment-01-intro
url: http://localhost:4111
voiceover: |
위의 서사와 자연스럽게 연결되는
오프닝 내레이션입니다.
actions:
- navigate: http://localhost:4111
- wait: 2s
- find: "로그인 버튼"
- click: found element
## 아웃트로(Outro)
heading: "시작하기"
command: "npx create-mastra@latest"
links:
- mastra.ai/docs
서사 흐름(Narrative Flow)
훌륭한 데모의 핵심은 서사 흐름입니다. 개별 GIF와 오디오 세그먼트를 녹화하더라도 음성 해설이 응집력 있는 이야기를 전달해야 합니다.
좋은 전환 예시:
- "이제 로그인했으니..."
- "여기가 흥미로워지는 부분입니다..."
- "Mastra Studio로 돌아오면 차이가 즉시 느껴집니다..."
나쁜 패턴:
- 맥락 없이 갑작스럽게 세그먼트 시작
- 글머리 기호 스타일의 나열식 내레이션
- 세그먼트 간 연결 부재
브라우저 액션(Browser Actions)
녹화에 사용 가능한 액션:
| 액션 | 형식 | 예시 |
|---|---|---|
| 탐색 | navigate: <url> | navigate: http://localhost:4111 |
| 대기 | wait: <시간> | wait: 2s |
| 찾기 | find: "<질의>" | find: "로그인 버튼" |
| 클릭 | click: <대상> | click: found element |
| 입력 | type: "<텍스트>" | type: "Hello world" |
| 스크롤 | scroll: <방향> | scroll: down |
음성 설정(Voice Settings)
전문 데모에 권장되는 ElevenLabs 설정:
- 음성: Daniel, Brian, George, 또는 Chris
- 모델: eleven_multilingual_v2
- 안정성: 0.5
- 유사도 향상: 0.75
참고 자료(References)
자세한 문서는 다음을 참조하세요:
references/script-format-reference.md- 전체 DEMO_SCRIPT.md 형식references/gif-recording-reference.md- 브라우저 자동화 패턴references/audio-generation-reference.md- ElevenLabs 통합
템플릿(Templates)
templates/ 디렉토리에는 Remotion 프로젝트 파일이 포함되어 있습니다:
- React 씬 컴포넌트(Title, DemoGif, Outro)
- 브라우저 프레임 컴포넌트
- 오디오 생성 스크립트
- 패키지 설정