SaaS 제품 데모 비디오

Remotion에서 비트 동기화된 SaaS 제품 영상을 제작하기 위한 엔드투엔드 워크플로우입니다. 무성 영화, 비트 고정 수평형 데모, 수직형 릴, 그리고 콜라주 B-롤 레이어가 포함된 영화를 다룹니다.

이 스킬은 애셋(assets), 바이브(vibe), 비트(beats) 세 가지에 대해 확고한 의견을 제시합니다. 하나라도 건너뛰면 다른 모든 SaaS 데모와 다를 바 없는 평범한 Canva 스타일 모션 그래픽 릴이 만들어집니다. 이 규율이 차별화를 만듭니다.

다음은 강력한 권장사항이지 강제 규칙은 아닙니다. 대부분의 제작이 이를 따르지만, 일부는 의도적으로 어기기도 합니다(예: 비트 동기화가 음성 해설과 충돌하는 음성 중심 영화). 규칙을 어길 때는 그 이유를 분명히 인지해야 합니다.

사전 준비 사항

시작하기 전에 다음이 준비되었는지 확인하세요. 첫 번째는 필수이고, 나머지는 강력히 권장되며 대체 방법이 문서화되어 있습니다.

Remotion 설치 (필수). @remotion/cli 4.0.x + @remotion/google-fonts + React 19. 정확한 최소 package.json / tsconfig.json / remotion.config.ts는 references/project-scaffold.md를 참조하세요. 기존 git 저장소 안에서는 절대 npx create-video를 실행하지 마세요(화살표 키 프롬프트에서 멈춥니다).
슈퍼 파워 플러그인 (강력 권장, 필수 아님). 사용 가능한 경우, 이 스킬은 superpowers:using-superpowers, superpowers:brainstorming (시각적 동반자 포함), superpowers:writing-plans, superpowers:subagent-driven-development를 조정합니다. 브라우저에서 레이아웃 결정을 위한 HTML 목업, 공식 계획 문서, 그리고 구현자 + 리뷰어 서브에이전트 루프를 제공합니다.

슈퍼 파워가 설치되지 않은 경우, 스킬은 여전히 작동하지만 워크플로우가 더 대화형이 되고 약간 느려집니다. 브레인스토밍은 인라인 대화(브라우저 동반자 없음)가 되고, 계획은 채팅에 직접 작성되며, 장면은 파견된 서브에이전트가 아닌 인라인으로 구현됩니다. 세 가지 핵심 요소(애셋/바이브/비트)와 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를 참조하세요.
1. PATH에 gemini CLI (공식 Google CLI 또는 gemini-yt 같은 커뮤니티 래퍼). 프롬프트 + YouTube URL을 인수로 실행합니다.
2. 환경 변수 또는 .env에 GEMINI_API_KEY 설정. scripts/analyze-reference-video.sh에 있는 스킬의 curl 래퍼를 사용합니다.
3. 위 중 해당하는 것이 없음 - 수동 Google AI Studio 복사-붙여넣기로 대체. 불편하지만 항상 작동하며 품질은 비슷합니다.

새 세션을 시작할 때 가장 먼저 references/prereq-check.md를 실행하세요.

세 가지 핵심 요소

이것들은 효율성이 높은 활동입니다. "시간을 절약"하기 위해 하나를 건너뛰면 거의 항상 이후 단계에서 더 많은 시간이 소요됩니다.

핵심 1 - 애셋 인테이크 온보딩

무엇보다 먼저 assets/prompt-templates/asset-intake-questionnaire.md의 구조화된 질문지를 실행하세요. 다음을 요청합니다:

화면 비율 (16:9 수평형, 9:16 수직형, 또는 둘 다 병렬 - 둘 다인 경우 references/vertical-port.md 참조)
길이(초) (20-45초 권장)
로고 - SVG 선호. PNG만 있는 경우 확대 시 픽셀화를 방지하기 위해 원본 크기를 캡처하세요.
브랜드 16진수 색상 (주요 악센트 + 3-6개의 지원 파스텔 톤)
폰트 스택 (모두 Google Fonts에 있어야 함)
카피 / 스크립트 - 생성하는 것보다 사용자가 제공한 초안을 선호합니다. 스크립트가 없는 경우 references/script-development.md를 참조하세요.
음성 해설 (선택 사항)
사운드트랙 파일 - 비트 동기화에 필요합니다. 사용자가 없으면 로열티 프리 스톡에서 선택하세요.

전체 인테이크 흐름, 부분 애셋 최소 세트, 복사 시 명명 규칙, 애셋 업스케일링 픽셀화 검사는 references/asset-intake.md를 참조하세요.

핵심 2 - 레퍼런스 비디오 바이브 워크플로우

장면을 작성하기 전에 사용자에게 2-3개의 YouTube 레퍼런스 비디오를 요청하여 원하는 분위기를 파악하세요. 그런 다음 각 비디오에 대한 감독의 분석을 작성하세요.

두 가지 경로 지원 (자세한 내용은 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 기반 비트 추적. BPM, 첫 번째 킥, 대상 fps에서의 스네어/킥 프레임을 출력합니다.
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와 같은 비선형 편집기를 사용하거나 스킬 사용을 자제하세요.

제품 데모 영상 2단계: 20–45초 비트 싱크 SaaS 편집