SaaS 제품 데모 비디오

비트에 맞춰진 SaaS 제품 영상을 Remotion으로 제작하는 종단 간 워크플로우입니다. 무성 영화, 비트에 맞춘 가로형 데모, 세로형 릴, 콜라주 B-roll 레이어가 포함된 영화를 다룹니다.

이 스킬은 에셋, 분위기, 비트 세 가지에 대해 확고한 의견을 제시합니다. 이 중 하나라도 건너뛰면 다른 모든 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를 실행하지 마십시오(화살표 키 프롬프트에서 차단됨).
Super Powers 플러그인 (강력 권장, 필수 아님). 이 플러그인을 사용할 수 있는 경우, 이 스킬은 superpowers:using-superpowers, superpowers:brainstorming(시각적 도우미 포함), superpowers:writing-plans, superpowers:subagent-driven-development를 조율합니다. 이 플러그인은 레이아웃 결정, 공식 계획 문서, 그리고 구현자 + 검토자 서브에이전트 루프를 위한 브라우저 내 HTML 목업을 제공합니다.

Super Powers가 설치되지 않은 경우, 스킬은 여전히 작동합니다. 워크플로우가 더 대화식으로 변하고 약간 느려집니다. 브레인스토밍은 인라인 대화가 됩니다(브라우저 도우미 없음). 계획은 채팅에 직접 작성됩니다. 장면은 파견된 서브에이전트를 통하지 않고 인라인으로 구현됩니다. 세 가지 핵심 요소(에셋 / 분위기 / 비트)와 B-roll, 개략적 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만 있는 경우 확대 시 픽셀화를 방지하기 위해 원래 크기를 캡처합니다.
브랜드 헥스 색상(기본 강조색 + 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를 사용할 수 없을 때 이 방법을 사용합니다.

연출 동사 어휘(밀어내기, 휘핑 팬, V-컷 당기기, 잉크 마스크, 매치 컷 줌)는 가장 중요한 출력으로, 구축할 구체적인 모션 기본 요소를 제공합니다.

핵심 요소 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-roll 통합 - 영화가 실사 또는 콜라주 레이어를 사용하는 경우

사용자에게 스톡 푸티지, 콜라주 클립 또는 배경 레이어로 사용하려는 비디오가 있는 경우 references/b-roll-integration.md와 BRollLayer 템플릿을 사용하십시오. B-roll은 완전 불투명 배경 또는 낮은 불투명도 텍스처가 될 수 있습니다. 기본 요소는 트림, 페이드, 블렌드 모드 및 FPS 정확한 타이밍을 처리합니다.

(이 스킬의 이전 버전은 실사 작업을 Premiere/DaVinci로 보내는 것을 권장했습니다. B-roll이 모션 그래픽 아래의 레이어로 사용될 때는 잘못된 것입니다. 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 - YouTube 비디오 분석을 위한 두 가지 경로, 연출 동사 어휘, 자동화 vs 수동 워크플로우
beat-sync.md - 비트 감지 파이프라인, 타이밍 상수 객체, 내부 이벤트 정렬, 타이핑 예산 검사
b-roll-integration.md - B-roll 레이어 통합, BRollLayer 템플릿, 트리밍 및 페이드
schematic-ui-fidelity.md - 실제 UI가 없을 때 개략적 UI 생성, 세 가지 참조 패턴
click-positioning.md - 세 가지 클릭 위치 지정 접근 방식, 디버그 오버레이
writing-style.md - 기본 스타일 가이드, AI 흔적 사전 렌더링 검사
project-scaffold.md - 최소 package.json/tsconfig.json/remotion.config.ts, 컴포지션 ID 규칙
vertical-port.md - 세로형 비디오 처리, 병렬 16:9 및 9:16 출력
render-export.md - 마스터 렌더링 설정, CRF 값, 이미지 형식
iteration-playbook.md - 웨이브 기반 반복, 내부 이벤트 정렬 타이밍

SaaS 제품 데모 비디오（Remotion）