SaaS 제품 데모 비디오
Remotion에서 박자에 맞춰진 SaaS 제품 영화를 제작하기 위한 종단간 워크플로우입니다. 무음 영화, 박자에 맞춘 가로 데모, 세로 릴, 콜라주 B-롤 레이어가 포함된 영화를 다룹니다.
이 스킬은 에셋, 분위기, 박자라는 세 가지 측면에 대해 확고한 의견을 제시합니다. 이 중 하나라도 건너뛰면 다른 모든 SaaS 데모와 비슷해 보이는 일반적인 Canva 스타일의 모션 그래픽 릴이 만들어집니다. 이러한 규율이 차별화를 만듭니다.
이는 강력한 권장사항이지 절대적인 규칙은 아닙니다. 대부분의 제작은 이를 따르지만, 의도적으로 예외를 두는 경우도 있습니다(예: 음성 해설 위주의 영화에서 박자 동기화가 음성 해설과 충돌하는 경우). 규칙을 어길 때는 의식적으로 판단하세요.
사전 준비 사항
시작하기 전에 다음 사항이 준비되었는지 확인하세요. 첫 번째는 필수이며, 나머지는 강력히 권장되지만 대체 방안이 문서화되어 있습니다.
-
Remotion 설치 (필수).
@remotion/cli4.0.x +@remotion/google-fonts+ React 19. 정확한 최소package.json/tsconfig.json/remotion.config.ts는references/project-scaffold.md를 참조하세요. 기존 git 저장소 내에서npx create-video를 실행하지 마세요 (화살표 키 프롬프트에서 차단됩니다). -
Super Powers 플러그인 (강력 권장, 필수는 아님). 이 플러그인을 사용할 수 있는 경우, 이 스킬은
superpowers:using-superpowers,superpowers:brainstorming(시각적 도우미 포함),superpowers:writing-plans,superpowers:subagent-driven-development를 조율합니다. 브라우저에서 HTML 목업을 제공하여 레이아웃 결정을 돕고, 공식 계획 문서를 만들며, 구현자와 리뷰어 서브 에이전트 루프를 제공합니다.Super Powers가 설치되지 않은 경우에도 스킬은 작동하지만, 워크플로우가 더 대화식으로 진행되고 속도가 다소 느려집니다. 브레인스토밍은 인라인 대화로 진행되고(브라우저 도우미 없음), 계획은 채팅에서 직접 작성되며, 씬은 파견된 서브 에이전트 대신 인라인으로 구현됩니다. 세 가지 기둥(에셋/분위기/박자)과 B-롤, 개략적 UI, 클릭 위치 지정, 작성 스타일,
scripts/의 스크립트는 모두 동일하게 작동합니다. 플러그인이 없다고 작업을 거절하지 말고 적응하여 진행하세요. -
Python 3 + librosa 사용 가능. 박자 감지는
scripts/detect-beats.py를 실행하며, 이는librosa를 가져옵니다. 설치되어 있지 않으면pip install --break-system-packages librosa numpy soundfile을 실행하고 사용자에게 알리세요. 조용히 실행하지 마세요. -
참조 비디오 분석 (기둥 2): 이 스킬은 우선순위 순서대로 세 가지 경로를 지원합니다. 사용 가능한 가장 높은 우선순위의 경로를 사용하세요. 전체 감지 로직은
references/reference-video-vibe.md를 참조하세요.- PATH에
geminiCLI (공식 Google CLI 또는gemini-yt와 같은 커뮤니티 래퍼). 프롬프트와 YouTube URL을 인수로 실행합니다. - env 또는
.env에GEMINI_API_KEY설정.scripts/analyze-reference-video.sh의 스킬 컬 래퍼를 사용하세요. - 위 항목이 모두 없는 경우 - 수동 Google AI Studio 복사-붙여넣기로 대체합니다. 불편하지만 항상 작동하며 품질은 비슷합니다.
- PATH에
새 세션에서는 첫 번째 작업으로 references/prereq-check.md를 실행하세요.
세 가지 기둥
이는 영향력이 큰 활동입니다. 하나를 건너뛰어 "시간을 절약"하면 거의 항상 이후 단계에서 더 많은 시간이 소요됩니다.
기둥 1 - 에셋 수집 온보딩
다른 모든 작업보다 먼저 assets/prompt-templates/asset-intake-questionnaire.md의 구조화된 질문지를 실행하세요. 다음을 요청합니다:
- 종횡비 (16:9 가로, 9:16 세로, 또는 두 가지 모두 병렬 - 두 가지 모두의 경우
references/vertical-port.md참조) - 지속 시간(초) (20-45초 권장)
- 로고 - SVG 선호. PNG만 있는 경우, 확대 시 픽셀화를 방지하기 위해 원본 크기를 캡처하세요.
- 브랜드 헥스 색상 (기본 포인트 색상 + 3-6개의 보조 파스텔 색상)
- 폰트 스택 (모든 폰트는 Google Fonts에 있어야 함)
- 카피 / 스크립트 - 생성하는 것보다 사용자가 제공한 초안을 선호합니다. 스크립트가 없는 경우
references/script-development.md를 참조하세요. - 음성 해설 (선택 사항)
- 사운드트랙 파일 - 박자 동기화에 필요합니다. 사용자가 없는 경우, 로열티 프리 스톡에서 선택하세요.
전체 수집 흐름, 부분 에셋 최소 세트, 복사 시 파일명 규칙, 에셋 업스케일링 픽셀화 확인은 references/asset-intake.md를 참조하세요.
기둥 2 - 참조 비디오 분위기 워크플로우
씬을 작성하기 전에, 사용자에게 원하는 분위기의 YouTube 참조 비디오 2-3개를 요청하세요. 그런 다음 각각에 대한 디렉터 분석을 생성합니다.
두 가지 경로가 지원됩니다 (references/reference-video-vibe.md 참조):
- 자동화 (가능할 때 선호) - 사용자가
GEMINI_API_KEY를 설정한 경우, 각 비디오에 대해scripts/analyze-reference-video.sh <youtube-url> <slug>를 실행합니다. curl을 통해 Gemini Pro Preview를 사용합니다. 비디오당 약 30초 소요. 결과는references/gemini-<slug>.md에 저장됩니다. - 수동 (항상 작동) -
aistudio.google.com을 열고scripts/reference-video-prompt.md의 프롬프트와 YouTube URL을 붙여넣고 결과를 파일에 복사합니다. 불편하지만 동등하게 사용 가능한 결과를 제공합니다. API를 사용할 수 없을 때 이 방법을 사용하세요.
연출 동사 어휘 (push-through, whip-pan, V-cut pull-back, ink-mask, match-cut zoom)는 가장 중요한 결과물입니다. 이는 구축할 구체적인 모션 기본 요소를 제공합니다.
기둥 3 - 사운드트랙 박자 동기화
씬 경계는 스네어(수사적 "드럼 히트" 느낌)에 위치해야 합니다. 씬 내부 이벤트(클릭, 카드 배치, 카운터 시작)는 씬 내에서 킥 또는 스네어에 위치해야 합니다.
파이프라인:
scripts/detect-beats.py <soundtrack.mp3> --fps 30 --out beats.json실행. BPM, 첫 번째 킥 프레임, 스네어 타임스탬프 + 프레임을 출력합니다.- 단일 타이밍 상수 객체로 통합합니다 (
assets/code-templates/theme-v2.ts참조). 모든 씬<Sequence from={...} durationInFrames={...}>은 이 객체에서 값을 가져옵니다. - 6단계(씬 구축) 후, beats.json과 씬 내 이벤트 목록을 대상으로
scripts/align-internal-events.py를 실행하여 ±6프레임 범위 내에서 가장 가까운 박자로 이동시킵니다. 이는 초기 렌더링 다음으로 영향력이 큰 반복입니다. 시청자는 박자에서 벗어난 내부 이벤트를 "가끔 리듬이 맞지 않음"으로 느끼지만 그 이유를 정확히 지적하지는 못합니다. isSnare(n)/isKick(n)헬퍼를 사용하여 개발 모드에서 확인합니다.- TypedText/TypedChars에 대해
scripts/check-typing-budget.py를 실행하여 씬 지속 시간 내에 맞는지 확인합니다. 배송 전에 화면 밖에서 타자되는 것을 차단합니다.
전체 수학, 헬퍼, 내부 이벤트 정렬, 타이핑 예산 확인은 references/beat-sync.md를 참조하세요.
인접 기능 - 기본 기능으로 충분하지 않을 때
이는 표준 "모든 것이 모션 그래픽, 스크린샷만 녹화" SaaS 데모를 넘어서는 상황을 다룹니다. 사용자의 상황에 필요할 때 관련 참조 자료를 읽으세요.
스크립트 개발 - 사용자에게 스크립트가 없는 경우
대부분의 사용자는 완성된 화면별 스크립트가 아닌 막연한 제품 아이디어를 가지고 옵니다. references/script-development.md는 4막 개요 + 확정된 화면별 개요 + 확정된 카피 참조 페이지를 생성하는 구조화된 대화 흐름을 안내하며, 이는 스펙 문서에 바로 입력할 수 있습니다.
B-롤 통합 - 영화에 실사 또는 콜라주 레이어가 포함된 경우
사용자에게 스톡 푸티지, 콜라주 클립 또는 배경 레이어로 사용하려는 비디오가 있는 경우 references/b-roll-integration.md와 BRollLayer 템플릿을 사용하세요. B-롤은 완전 불투명 배경 또는 낮은 불투명도 텍스처가 될 수 있습니다. 프리미티브는 트림, 페이드, 블렌드 모드 및 FPS 보정 타이밍을 처리합니다.
(이전 버전의 이 스킬은 실사 작업을 Premiere/DaVinci로 보낼 것을 권장했습니다. B-롤이 모션 그래픽 아래 레이어로 사용되는 경우에는 이는 잘못된 것입니다. Remotion이 이를 잘 처리하며 하나의 도구에서 제작을 유지하는 것이 생산성 향상입니다.)
개략적 UI 충실도 - 제품에 녹화할 실제 UI가 없는 경우
제품이 Chrome 확장 프로그램, API 또는 초기 단계여서 스크린샷을 찍을 실제 제품 UI가 없는 경우, references/schematic-ui-fidelity.md는 실제 플랫폼(LinkedIn, Gmail, Slack)을 침해하지 않으면서도 정교해 보이는 개략적 UI를 설계하는 방법을 다룹니다. 세 가지 참조 패턴: 프로필 카드, 이메일 작성기, API 패널 - 코드 템플릿은 assets/code-templates/Schematic*.tsx에 있습니다.
클릭 위치 지정 - #1 반복 비용 발생 지점
커서 클릭이 버튼에서 벗어나는 것은 제작 전반에서 가장 흔한 사용자 불만 사항입니다. references/click-positioning.md는 세 가지 접근 방식(refs, 계산된 위치 상수, 디버그 오버레이)을 다룹니다. 미리 하나를 선택하세요. 잘못 선택하면 씬당 여러 번의 전체 재렌더링 사이클이 발생할 수 있습니다.
작성 스타일 - 사용자용 카피에 AI 흔적을 남기지 않음
Em-대시, 곡선 따옴표 및 특정 문구 패턴은 "AI 생성"임을 드러냅니다. references/writing-style.md는 사전 렌더링 grep 검사를 포함하는 기본 스타일 가이드로, 이를 잡아냅니다. 사용자에게 자체 브랜드 음성 가이드가 있는 경우 해당 가이드를 우선시합니다.
이상적인 순서
전체 종단간 흐름. 주석이 포함된 버전과 근거는 references/ideal-sequence.md를 참조하세요.
- 입력을 먼저 수집하고, 코드는 마지막에 작성합니다. 에셋 수집 질문지를 실행합니다.
- 사용자에게 스크립트가 없으면 스크립트를 개발합니다. -
references/script-development.md. - 참조 비디오 분석을 생성합니다. -
scripts/analyze-reference-video.sh를 통한 자동화 또는 AI Studio를 통한 수동. - 박자를 감지하고 타이밍 상수 객체를 작성합니다.
scripts/detect-beats.py→theme-v2.ts. 모든 씬 시작은 박자에서 파생됩니다. - 수동으로 Remotion을 스캐폴딩합니다. 최소
package.json/tsconfig.json/remotion.config.ts. git 저장소 내에서npx create-video를 절대 실행하지 마세요. - 각 씬에 대한 디버그 구성을 Root.tsx에 등록합니다. 필수적인 속도 향상. 5초 씬 하나를 스크러빙하는 것이 전체 마스터보다 30배 빠릅니다.
- 모든 폰트를
Root.tsx최상위 레벨에서subsets: ["latin"]과 함께 로드합니다. - 구성 ID에 하이픈을 사용합니다. (
v2-Scene06, 절대v2_Scene06사용 금지). - 스타일/레이아웃 결정을 위해 시각적 도우미와 함께
superpowers:brainstorming을 호출합니다. HTML 목업이 산문보다 항상 낫습니다. - 스펙 문서를 작성합니다.
docs/superpowers/specs/YYYY-MM-DD-<name>-design.md. 필요한 경우 개략적 UI 충실도 섹션을 포함합니다. - 스펙을 자체 검토한 후 사용자의 승인을 받습니다. 승인 전까지 코드를 작성하지 않습니다.
superpowers:writing-plans를 호출합니다. 파견 전에 계획 템플릿 위생 검사를 수행합니다 (references/project-scaffold.md참조).- 먼저 애니메이션 프리미티브를 구축합니다. (필요에 따라 TypedText, MaskReveal, PopIn, Cursor, ZoomPunch, FloatingElements, BRollLayer, Counter, IceCrack). 그런 다음 개략적 UI 카드, 씬, 마스터 순서로 구축합니다.
superpowers:subagent-driven-development를 호출합니다. 한 번에 서브 에이전트 배치를 3-4개 파일로 제한합니다. 더 큰 배치는 작업 중간에 컨텍스트가 부족할 수 있습니다.references/iteration-playbook.md참조.- 씬 1만 스팟 렌더링합니다. 스타일을 설정합니다. 나머지 작업 전에 사용자 승인을 받습니다.
- 웨이브로 반복합니다. 각 웨이브를 5-8개 수정으로 제한합니다. 기준 렌더링 후 내부 이벤트 정렬 패스를 한 번 실행합니다. 이 한 번의 패스가 리듬을 눈에 띄게 개선합니다.
- 게시 품질로 마스터 렌더링합니다.
--crf=14 --image-format=png(HD) 또는--crf=15 --image-format=png --scale=2(4K).references/render-export.md참조. - 0.5배 속도로 비트 맵과 비교하여 스팟 체크합니다.
참조 자료 색인
references/ 디렉토리에 자세한 내용이 있습니다. 현재 단계에 필요한 것만 로드하세요.
ideal-sequence.md- 주석과 근거가 포함된 전체 흐름prereq-check.md- 시작 전 확인 사항asset-intake.md- 전체 수집 흐름, 부분 에셋 대체, 에셋 업스케일링 확인, 파일명 규칙script-development.md- 사용자에게 스크립트가 없을 때의 화면별 방법론reference-video-vibe.md- Gemini 분석 프로토콜 (API / CLI / AI Studio 경로)beat-sync.md- 비트 그리드 수학, 씬 경계 규칙, 내부 이벤트 정렬, 타이핑 예산 확인project-scaffold.md- 최소 Remotion 설정, 커밋 체크리스트, 계획 템플릿 위생, .gitignore 필수 사항animation-patterns.md- TypedText, MaskReveal, PopIn, ZoomPunch, FloatingElements 및 확장b-roll-integration.md-BRollLayer패턴, 불투명도/블렌드 처리, 렌더링 성능schematic-ui-fidelity.md- 정교해 보이는 가짜 UI 설계click-positioning.md- 커서 클릭이 올바른 대상을 향하도록 하는 세 가지 접근 방식writing-style.md- 화면 카피에서 피해야 할 em-대시 및 기타 AI 흔적cursor-math.md- 핫스팟 오프셋, 키포인트, 축소 비율 변환iteration-playbook.md- 웨이브 구조, 배치 리뷰, 서브 에이전트 배치, Studio 핫 리로드 재시작render-export.md- HD/4K 렌더링 명령어, CRF 근거gotchas.md- 컴포지션 ID 밑줄, 폰트 경고, 이탤릭 로딩, MaskReveal 배율 트랩vertical-port.md- 9:16 릴 포팅 규율
에셋
assets/prompt-templates/- 에셋 수집, 스펙 문서, 비트 시트용 템플릿assets/code-templates/- 검증된 컴포넌트 (테마 상수, 이징, Cursor, MaskReveal, TypedText, PopIn, ZoomPunch, FloatingElements, BRollLayer, Counter, IceCrack, SchematicProfileCard, SchematicEmailComposer, SchematicApiPanel, Act2Master, Act2MasterVertical)
스크립트
scripts/detect-beats.py- librosa 기반 비트 추적. 대상 FPS에서 BPM, 첫 번째 킥, 스네어/킥 프레임을 출력합니다.scripts/analyze-reference-video.sh+scripts/reference-video-prompt.md- YouTube 연출 분석을 위한 Gemini Pro 래퍼.scripts/align-internal-events.py- ±공차 프레임 내에서 씬 내 이벤트를 비트 정렬합니다.scripts/check-typing-budget.py- 렌더링 전에 TypedText/TypedChars가 씬 지속 시간에 맞는지 확인합니다.
이 스킬을 사용하지 말아야 할 경우
- 기존 Remotion 프로젝트의 심층 반복. 사용자가 영화에 20개 이상의 커밋이 있고 웨이브 N+1 조정을 요청하는 경우, 인테이크를 다시 실행하지 마세요.
references/iteration-playbook.md와references/beat-sync.md를 로드하고 진행하세요. - SaaS 데모가 아닌 경우. 이벤트 요약, 추모 몽타주, 튜토리얼 스크린캐스트 - 비트 동기화 + 제품 UI 카드 패턴이 적절하게 적용되지 않습니다.
- 주제가 다큐멘터리 또는 인터뷰 영상인 경우. 이 스킬은 B-롤을 모션 그래픽 아래 레이어로 처리합니다. 실사가 영화의 주제인 경우(인터뷰, 언박싱, 둘러보기) Premiere, DaVinci, 또는 [truncated]와 같은 비선형 편집기를 사용하세요.