/demo — 자동 데모 비디오 파이프라인
웹 애플리케이션의 내레이션이 포함된 데모 비디오를 제작합니다. 탐색, 녹화, 내레이션, 렌더링 전체 흐름이 단일 명령으로 처리됩니다.
인자
$ARGUMENTS에서 파싱:
- 첫 번째 위치 인자: 데모할 URL (필수)
--login <credentials>:email:password형식의 로그인 자격 증명. 제공되면 녹화 전에 로그인합니다.--brief <"보여줄 내용">: 데모가 다룰 내용을 자연어로 설명. 매우 짧아도 됩니다 — "대시보드 보여주고 프로젝트 생성" 정도면 충분합니다. 생략하면 자유롭게 탐색합니다.--name <name>: 출력 이름 (기본값: URL 호스트명에서 파생)--duration <seconds>: 대상 비디오 길이 (기본값: 60)--voice <voice>: TTS 음성 (기본값:en-US-GuyNeural)--preset <draft|production>: 품질 프리셋 (기본값:draft)
인자는 URL 뒤에 자연어로도 전달할 수 있습니다. 다음은 모두 동일합니다:
/demo https://app.com --login [email protected]:pass123 --brief "결제 페이지 보여주고 결제 방법 추가"
/demo https://app.com — [email protected] / pass123로 로그인, 결제 보여주고 결제 방법 추가
/demo https://app.com login: [email protected] pass123. 결제 페이지 보여줘.
파싱 가능한 만큼 처리합니다. 사용자가 평문 영어로 자격 증명과 지침을 제공하면 그대로 사용합니다.
파이프라인
1단계: 앱 정찰
녹화 전에 작업할 내용을 이해합니다:
new_page또는navigate_page를 통해 URL 열기- 자격 증명이 제공된 경우 (
--login), 로그인 양식을 찾아 먼저 로그인합니다./login,/sign-in, "Sign In" 링크 등 일반적인 패턴을 찾습니다. 이메일/비밀번호 필드에fill을 사용한 후 제출을 클릭합니다. 계속 진행하기 전에 대시보드/홈 페이지가 로드될 때까지 기다립니다. - 스크린샷과 스냅샷을 찍어 앱 이해하기
- 브랜드 캡처: 앱의 로고와 강조/브랜드 색상을 식별합니다.
- 로고 이미지를 출력 디렉토리(2단계에서 확인)에
logo.png(또는 .svg/.webp)로 다운로드합니다. 정찰 중에는 임시 위치에 저장한 후 고유 이름이 확인되면 최종 출력 디렉토리로 이동합니다.evaluate_script를 사용하여 로고<img>src URL을 찾은 후 Bashcurl또는wget으로 저장합니다. 파이프라인이 자동으로 감지하여 인트로 카드에 사용합니다. - 앱의 기본 버튼/브랜드 색상에서 강조 색상을 선택하여
narration.json의accentColor(rgba 형식)로 사용합니다.
- 로고 이미지를 출력 디렉토리(2단계에서 확인)에
- 브리프가 제공된 경우 (
--brief), 이를 탐색 가이드로 사용합니다. 브리프는 사용자가 중요하게 생각하는 내용을 알려줍니다 — 해당 기능을 우선시합니다. 브리프가 없으면 자유롭게 탐색합니다. - 주요 기능, 내비게이션, 흥미로운 흐름 식별
~duration초 내레이션에 맞춰 앱을 보여줄 3-6개의 데모 세그먼트 계획
매력적인 데모를 만드는 방법:
- 브리프가 있으면 따르세요 — 사용자가 보여주고 싶어하는 것을 알고 있습니다
- 가장 시각적으로 인상적이거나 독특한 기능으로 시작하세요
- 깊이보다는 폭을 보여주세요 (다른 섹션 탐색, 한 양식에 집착하지 마세요)
- 모든 것을 종합하는 내용으로 마무리하세요 (대시보드, 설정, 결과)
- 녹화에서 로그인 화면, 로딩 스피너, 오류 상태는 건너뛰고
screencast_start전에 설정에서 처리하세요
2단계: 녹화
출력 디렉토리 설정 후 녹화 시작:
출력 디렉토리: screencast-output/<name>/
녹화 파일: screencast-output/<name>/recording.mp4
- 고유한 출력 디렉토리 선택. 디렉토리를 생성하기 전에
screencast-output/<name>/이 이미 존재하는지 확인합니다. 존재하면 증가하는 접미사를 추가합니다:<name>-v2,<name>-v3등. 사용 가능한 첫 번째 이름을 사용하세요. 예:# 확인 후 다음 사용 가능한 이름 찾기 NAME="trafficstores" DIR="screencast-output/$NAME" if [ -d "$DIR" ]; then V=2; while [ -d "screencast-output/${NAME}-v${V}" ]; do V=$((V+1)); done NAME="${NAME}-v${V}" DIR="screencast-output/$NAME" fi mkdir -p "$DIR"<name>(필요시 접미사 포함)을 사용합니다. - 출력 디렉토리 생성
screencast_start호출, 경로는screencast-output/<name>/recording.mp4- 앱과 자연스럽게 상호작용 — 계획한 기능을 클릭하며 진행
- 각 중요한 화면에서 잠시 멈춤 (1-2초) 시청자가 읽을 수 있도록
- 버튼 클릭, 실제 데이터로 양식 작성, 섹션 간 이동
- MCP 포크가 커서 애니메이션과 자동 세그먼트화를 자동으로 처리
- 완료되면
screencast_stop호출
녹화 팁:
- 서두르지 마세요 — 파이프라인이 지루한 부분을 자동으로 빠르게 처리합니다
- 시각적으로 흥미로운 화면에서 멈추세요 (파이프라인이 내레이션 속도에 맞춰 느리게 처리합니다)
- 교차 출처 iframe 내에서 스크롤하지 말고 직접 이동하세요
- 로딩에 오래 걸리면 자동 세그먼터가 대기 시간을 잘라냅니다
3단계: 내레이션 작성
방금 녹화한 내용을 바탕으로 screencast-output/<name>/narration.json을 작성합니다. 방금 수행한 작업을 정확히 알고 있기 때문입니다.
{
"introTagline": "짧고 강력한 헤드라인",
"introSubtitle": "제품 또는 회사 이름",
"outroHeading": "행동 유도 질문",
"outroUrl": "website.com",
"outroCtaText": "시작하기",
"accentColor": "rgba(59, 130, 246, 1)",
"captionStyle": "pop",
"voice": "en-US-AndrewNeural",
"introLogoSrc": "screencast-output/<name>/logo.png",
"segments": [
{
"text": "이 세그먼트의 내레이션. 사람이 발표하는 것처럼 대화체로 작성하세요.",
"sceneIndex": 0,
"sceneLabel": "기능 이름"
}
],
"fullText": "모든 세그먼트 텍스트를 공백으로 연결."
}
내레이션 가이드라인:
- 문서를 읽는 듯한 말투가 아닌, 옆에서 설명하는 듯한 대화체로 작성하세요
- 현재 시제 사용: "여기서 볼 수 있듯이..." ("여기서 보았듯이" 아님)
- 시청자가 주목해야 할 특정 UI 요소를 언급하세요
- 전체 내레이션을
--duration목표 시간에 맞추세요 - 각 세그먼트는 5-20초 분량(~15-50단어)이 적절합니다
accentColor는 앱의 브랜드 색상과 일치해야 합니다 (본 내용에서 선택)- 각 세그먼트의
sceneLabel은 비디오 하단에 애니메이션으로 표시됩니다 — 짧게 유지하세요 (최대 2-3단어): "회원가입", "AI 빌더", "라이브 웹사이트" introLogoSrc를 1단계에서 다운로드한 로고 파일로 설정하세요 — 인트로 카드에서 스프링 애니메이션과 함께 표시됩니다captionStyle을 앱 분위기에 맞게 설정하세요:"pop"(통통 튀는, 장난기 있는),"clean"(프로스트 유리, 우아한),"bold"(크고 강력한),"minimal"(미묘한),"karaoke"(배경 없음),"outline"(글로우 그림자)- 앱 톤에 맞는
voice를 선택하세요:en-US-AndrewNeural— 따뜻하고 자신감 있는 (좋은 기본값)en-US-BrianNeural— 친근하고 캐주얼한 (스타트업, 친근한 앱)en-US-ChristopherNeural— 신뢰할 수 있고 권위 있는 (엔터프라이즈, 핀테크)en-US-AriaNeural— 긍정적이고 자신감 있는 (마케팅, 소비자 앱)en-US-EmmaNeural— 명랑하고 명확한 (전자상거래, 소셜)en-US-AvaNeural— 표현력 있고 다정한 (건강, 웰니스, 커뮤니티)en-US-JennyNeural— 친근하고 배려심 있는 (교육, 지원)en-US-EricNeural— 합리적인 (분석, 데이터 도구)en-US-GuyNeural— 열정적인 (창의적 도구, 미디어)en-GB-RyanNeural/en-GB-SoniaNeural— 영국식 (국제적, 고급스러운)
3.5단계: 사용자 정의 비디오 구성 설계
이 특정 비디오를 위한 사용자 정의 Remotion 구성을 작성합니다. screencast-output/<name>/composition.tsx로 저장합니다. 파이프라인이 기본 MarketingDemo 템플릿 대신 이를 사용합니다.
먼저 Remotion 스킬을 로드하세요: demo-render/.agents/skills/remotion-best-practices/rules/의 규칙을 읽으세요 — 특히 animations.md, timing.md, text-animations.md, transitions.md, sequencing.md.
구성은 다음을 충족해야 합니다:
VideoComposition(React 컴포넌트)과calculateMarketingDemoDuration(기간 함수) 내보내기MarketingDemoProps타입 내보내기 (./MarketingDemo에서 다시 내보내기)- MarketingDemo와 동일한 props 받기 — 파이프라인이 동일한 JSON을 전달합니다
사용 가능한 빌딩 블록 (./components/에서 가져오기):
DeviceMockup— 브라우저 크롬 내 화면 녹화 (videoSrc,accentColor,displayUrl,zoomRegions,layout)IntroCard/OutroCard— 기본 인트로/아웃트로 템플릿 (tagline,subtitle,accentColor,logoSrc)WordHighlightCaptions— 단어별 자막 (wordTimings,style,accentColor)LowerThird— 장면 레이블 오버레이 (label,accentColor,leftOffset)ProgressBar— 진행 표시기 (accentColor)AudioWaveform— 오디오 반응 시각화 (variant,accentColor,samples)FeatureCallout— 주석 콜아웃 (label,side,y,accentColor)ChapterCard— 장 구분 카드 (chapterNumber,title,accentColor)Presenter— 립싱크가 있는 2D 캐릭터 (mouthCues,side)AvatarPip— 아바타 PIP (화면 속 화면)SceneBreak— 장면 경계의 짧은 시각적 전환
구성 파일 내에서 사용자 정의 컴포넌트를 인라인으로 작성할 수도 있습니다.
비디오별 설계 결정 사항:
- 인트로 스타일: 사용자 정의 인트로를 작성하거나 IntroCard를 사용하세요. 앱의 성격에 맞추세요 — 자연스러운/유기적, 기술적/깔끔한, 따뜻한/초대하는, 대담한/강력한.
- 아웃트로 스타일: 사용자 정의 아웃트로를 작성하거나 OutroCard를 사용하세요. 동일한 성격 매칭.
- 포함할 오버레이: 모든 비디오에 모든 오버레이가 필요하지는 않습니다. 깔끔한 SaaS 데모에서는 AudioWaveform을 건너뛰세요. 짧은 비디오에서는 ProgressBar를 건너뛰세요. 세그먼트가 명확하면 LowerThird를 건너뛰세요.
- 오버레이 위치: LowerThird가 항상 왼쪽 상단일 필요는 없습니다. 자막이 항상 하단 중앙일 필요는 없습니다. 녹화에서 중요한 UI 요소와 겹치지 않는 위치를 선택하세요.
- 애니메이션 다양성: 항상 동일한 스프링 인 효과를 사용하지 마세요. 페이드, 슬라이드, 와이프, 타자기, 스태거를 혼합하세요. Remotion 스킬에서 패턴을 보여줍니다.
- 인트로 → 콘텐츠 → 아웃트로 전환: 페이드, 슬라이드, 와이프, 또는 라이트 릭. 상황에 맞게 선택하세요.
composition.tsx 템플릿 리터럴 예시:
import React from "react";
import { AbsoluteFill, Audio, Sequence, interpolate, staticFile } from "remotion";
import { TransitionSeries, linearTiming } from "@remotion/transitions";
import { fade } from "@remotion/transitions/fade";
// 빌딩 블록 가져오기
import { DeviceMockup } from "./components/DeviceMockup";
import { WordHighlightCaptions } from "./components/WordHighlightCaptions";
import { ProgressBar } from "./components/ProgressBar";
// 사용자 정의 인트로/아웃트로 가져오기 (인라인 또는 별도 컴포넌트로 작성)
// 타입 가져오기
import type { MarketingDemoProps } from "./MarketingDemo";
export type { MarketingDemoProps };
export function calculateMarketingDemoDuration(props: MarketingDemoProps) {
return props.introDurationFrames + props.videoDurationFrames + props.outroDurationFrames - 20;
}
// 사용자 정의 인트로 컴포넌트 (인라인)
const MyIntro: React.FC<{...}> = (...) => { ... };
export const VideoComposition: React.FC<MarketingDemoProps> = (props) => {
// 여기에 고유한 구성 레이아웃
};
준수해야 할 Remotion 규칙:
- 모든 애니메이션은
useCurrentFrame()으로 구동 — CSS 전환 사용 금지