SaaS 제품 데모 비디오은(는) 무엇을 하나요?

Remotion으로 제품의 실제 화면과 브랜드를 활용하여 사운드트랙 비트에 맞춰진 짧은 제품 영상을 제작합니다. 이 워크플로우는 가로 데모, 세로 릴, B-롤 레이어가 있는 영상, 녹화할 UI가 없는 제품, 그리고 이미 존재하는 영상의 수정까지 모두 다룹니다.

제네릭한 모션 그래픽 릴은 만들기 쉽고 무시하기 쉽습니다. AI가 만든 영상은 이제 많은 제품 소유자들이 한눈에 알아봅니다. 이 스킬이 만드는 영상을 차별화하는 요소는 씬이 생성되기 전에 수집됩니다: 제품의 실제 에셋과 스크린샷, 사용자가 좋아하는 레퍼런스 영상에서 가져온 스타일, 사운드트랙에서 추출한 타이밍 그리드, 그리고 영상이 전달하는 하나의 시각적 주장입니다. 나머지는 이 기반 위에 세워지는 장인정신입니다.

올바른 브랜치에서 시작하기

새 영상. 인테이크, 스타일 분석, 스캐폴드, 비트, 브리프, 체크포인트, 빌드: 아래 워크플로우를 따르며, references/workflow.md에 근거가 설명되어 있습니다.
기존 영상. docs/video/notes.md(모든 '결정' 항목 먼저), 브리프 및 최신 핸드오프를 읽고, 승인된 렌더와 소스를 별도로 검사한 후, 무엇을 만지기 전에 요청을 분류하세요: 트윅은 스위치 뒤로 숨기고, 리스킨은 모든 타이밍과 움직임을 유지하며, 재빌드는 스토리보드 또는 테스트 베드가 필요합니다. references/iteration-playbook.md의 "요청을 먼저 분류하세요"를 참조하세요. 작은 수정을 위해 인테이크를 반복하거나 스타일을 다시 열지 마세요.
비평 또는 계획만. 렌더(references/self-check.md, references/taste-review.md)를 검토하고 순위가 매겨진 목록을 반환하며, 아무것도 빌드하지 마세요. 각 평가가 어떤 증거(스틸샷, 측정값, 재생)에 기반하는지 명시하세요. 재생은 직접 할 수 없습니다.
내레이션이 페이스를 결정합니다. 스캐폴드는 음악 기반입니다. 보이스오버에 맞춰진 영상은 이벤트를 수동으로 배치하며(BEAT_SYNCED = false를 타이밍 파일에 설정), 브리프에 컷이 음악과 정렬되지 않는다고 명시합니다. 시작 전에 이를 알리세요.

완료의 정의

하나의 마스터 컴포지션과 씬별 디버그 컴포지션이 있는 Remotion 프로젝트. 모든 후보 변경 사항은 스위치 뒤에 있으며, 기본값은 출시된 스타일입니다.
docs/video/brief.md: 입력, 스타일, 한 문장으로 된 시각적 주장, 씬별 스크립트, 가정.
beats.json과 각 씬이 프레임을 읽는 타이밍 파일. 하나의 비트 인덱스를 변경하면 영상 전체가 다시 흘러갑니다.
HD MP4(1920x1080 또는 1080x1920), 컬러 태그 지정, 썸네일 스틸샷, 소유자 승인 시 HD의 오디오를 포함한 4K 렌더.
사용자가 보기 전에 모든 씬을 스틸샷으로 확인하고, 단어 수를 세고, 측정된 내용과 아무도 보지 않았다는 사실을 소유자에게 알립니다.
docs/video/notes.md에 모든 웨이브와 결정 기록, 세션이 미완료 작업과 함께 종료될 때 핸드오프 파일.
선택적으로 마스터의 sfx prop 뒤에 4~8개의 사운드 이펙트를 이벤트에 맞춰 배치하고, 마스터와 함께 Master-NoSfx 렌더를 제공하여 사용자가 귀로 선택할 수 있도록 합니다.

워크플로우

셋업. 도구를 확인하고 누락된 사항을 기록합니다. references/setup.md
인테이크. 질문지를 한 메시지로 보내고 답변을 기록합니다. 기억에 의존하지 말고 오늘의 사이트를 캡처합니다. references/asset-intake.md, references/product-ui-from-site.md
스타일 및 주장. 2~3개의 레퍼런스 비디오를 전환 동사, 페이싱, 시그니처 무브로 분석합니다. 영상이 주장하는 한 문장과 하나의 시그니처 무브를 작성합니다. references/reference-video-vibe.md, references/creative-direction.md
스캐폴드. assets/scaffold/를 프로젝트에 복사하고 설치합니다. references/project-scaffold.md
비트. 사운드트랙에서 scripts/detect-beats.py를 실행하여 beats.json을 스캐폴드의 플레이스홀더 위에 작성하고, 신뢰도 판정에 따라 조치합니다. references/beat-sync.md
브리프 및 첫 번째 씬. docs/video/brief.md를 작성하고, 씬 1과 제품을 보여주는 첫 번째 씬을 빌드한 후 스틸샷으로 확인하고 아래 체크포인트에서 멈춥니다.
전체 빌드. 나머지 씬과 마스터를 빌드하고, 각각을 스틸샷으로 확인하고 단어 수를 세고 집중도 테스트를 수행합니다. 그런 다음 사운드 레이어(영상에 포함되는 경우)를 추가합니다: references/sound-effects.md, 첫 번째 수정 웨이브 전에 모든 큐가 멈춘 프레임에 위치하도록 합니다.
수정 웨이브 및 출시. 사용자의 노트를 배치로 수집하고, 스위치 뒤에서 수정하며, 마스터 플래그로 렌더링하고 내보냅니다. 사용자가 재고를 원하는 씬은 음악과 함께 2~4개의 방향을 테스트 베드로 제공하고, 나란히 전체 크기로 보여준 후 사용자가 선택합니다. 스토리를 재구축하는 웨이브는 먼저 스토리보드(모든 온스크린 문자열과 프레임당 한 줄)를 만들고, 코드 작성 전에 승인을 받습니다. 긴 세션은 핸드오프 파일로 종료합니다. references/iteration-playbook.md, references/render-export.md, assets/prompt-templates/handoff.md

하나의 체크포인트

전체 빌드 전에 정확히 한 번 사용자의 승인을 위해 멈춥니다: 오프닝 씬과 첫 번째 제품 씬이 렌더링되고, 씬 사이의 컷과 음악이 준비되며, 브리프가 작성되었을 때입니다. 이 클립을 브리프의 스크립트와 함께 보여주고 세 가지를 질문합니다: 스타일이 맞는지, 단어가 맞는지, 음악과 잘 어울리는지.

클립에는 두 종류의 씬이 모두 필요합니다. 타이포그래피 중심의 오프닝은 스타일을 보여줍니다. 제품 씬은 화면에 얼마나 많은 정보가 있고 이벤트가 비트 위에 어떻게 위치하는지 보여주며, 사용자가 전체 빌드 후에 처음 보면 거절하는 부분입니다. 사용자가 나중에 검토할 경우, 비디오와 스크립트를 함께 보여주는 작은 로컬 HTML 페이지를 만듭니다. assets/prompt-templates/checkpoint.html이 시작점입니다.

하나의 멈춤을 여기에 배치한 이유: 사람들은 문서보다 렌더를 훨씬 잘 판단하며, 지금 잡힌 잘못된 스타일이나 리듬은 두 씬의 재작업으로 끝나지만 전체 영상을 다시 만들 필요는 없습니다. 체크포인트 이전의 모든 것은 되돌릴 수 있으므로 문서에 대한 승인을 받지 않고 진행하세요. 인테이크 질문을 한 메시지로 보내고, 사용자가 선호도가 없으면 합리적인 선택을 하며, 각 선택을 브리프의 가정 목록에 기록하여 거부하기 쉽게 만듭니다. 체크포인트 이후에는 전체 영상을 빌드한 후에 다시 노트를 요청하세요. 승인된 느낌 내부의 트윅은 두 번째 체크포인트가 필요 없습니다. 느낌의 변경은 필요합니다.

아무도 대답할 사람이 없는 경우(무인 실행), 주어진 자료에서 인테이크를 수행하고, 모든 가정을 브리프에 나열한 후에도 체크포인트에서 멈춥니다. 승인되지 않은 스타일로 전체 영상을 빌드하는 것은 이 멈춤이 방지하려는 비용이 많이 드는 실수입니다. 유일한 예외는 핸드오프 브리프에 체크포인트를 렌더링하고 계속 진행하라는 명시적인 지시가 있는 경우입니다: 그런 다음 렌더링하고 사용자에게 열어준 후 계속 빌드하세요. 대답할 사람 없이 멈춘 세션은 아무것도 전달하지 않습니다.

템플릿 스타일은 적입니다

소유자들은 한 단어로 이름을 붙입니다("클로드스러운", "캔바", "싸구려"). 이는 기본값 집합입니다: 크림색 캔버스에 세리프 폰트, 글로우와 블롭, 헤드라인에 하나의 이탤릭 또는 컬러 단어, 눈썹 라벨, 허브 앤 스포크 다이어그램, 클립아트 글리프, 사이트에 실제 있는데 가짜 대시보드, 씬마다 하나의 트릭, 모든 비트에 튀어오르는 무언가, 페이드 인되어 앉아 있는 텍스트. 모든 헥스가 브랜드 파일에서 나와도 영상은 여전히 그중 하나로 읽힙니다. 전체 목록, 출시된 영상에서 각 항목을 대체한 것, 그리고 하나의 시그니처 무브 규칙은 references/creative-direction.md의 "템플릿으로 읽히는 것"에 있습니다. 첫 번째 씬 전에 읽고 "더 프리미엄" 패스를 하기 전에 다시 읽으세요.

영상이 그 목록을 모두 통과해도 여전히 깔끔한 슬라이드 데크로 읽힐 수 있습니다: 동일한 헤드라인이 슬래브 위에 있고, 공유된 세계가 없으며, 톤 아크가 없고, 모든 것에 악센트가 있습니다. 두 번의 폴리시 패스가 연속으로 "더 나아졌지만, 아직 아님"을 이끌어낼 때, 모션을 만지는 것을 멈추고 스틸샷에 대한 블라인드 아트 디렉션 비평을 실행하세요(references/iteration-playbook.md의 "폴리시 패스가 정체될 때"). 이전 영상에서 답은 하나의 공유된 3D 세계, 스토리를 전달하는 톤, 컴포지션으로서의 타이포그래피, 그리고 프레임당 하나의 악센트였습니다(references/creative-direction.md, references/3d-world.md).

컷 프레임은 그림을 담습니다

모든 컷은 백비트에 떨어지며, 그 프레임은 구성되어야 합니다: 첫 번째 행이 있는 카드, 바, 또는 헤드라인이지, 다음 비트에 걸쳐 채워질 빈 사각형이 아니어야 합니다. 하나의 구성된 요소면 충분합니다: 컷에 카드가 있으면, 옆의 헤드라인은 비트에 올라갈 수 있습니다. 초고와 씬 에이전트는 컷 후 첫 번째 비트에 첫 번째 행을 배치하며, 영상은 연속으로 여섯 개의 씬을 빈 흰색으로 열게 됩니다. 규칙, 카운터와 칩 필드를 위한 프리롤 트릭, 그리고 씬을 연결하는 카메라 무브는 references/animation-patterns.md에 있습니다.

모션은 컷을 통해 이어지고, 텍스트는 한 방향으로 움직입니다

영상을 전체적으로 좋아했던 소유자들의 두 가지 노트: "덜 덜컹거림"과 "텍스트 모션이 지루함". 첫 번째는 모든 컷의 양쪽에서 움직임이 완전히 멈추는 전환과 처음 0.5초에 전체 움직임을 끝내는 카메라 홀드에서 비롯되었습니다. 수정은 컷으로 가속되는 종료, 속도를 유지한 채로 나오는 시작, 그리고 균일하게 드리프트하는 홀드입니다. 두 번째는 페이드 인되어 앉아 있는 헤드라인에서 비롯되었습니다. 수정은 모든 디스플레이 텍스트에 대해 하나의 움직임을 사용하고, 레퍼런스에서 선택하여 모든 씬에서 사용하며, 비트에 들어오고 카메라가 떠나는 방식으로 떠나는 것입니다. 씬마다 새로운 트릭이 아닙니다. assets/components/Stage.tsx는 첫 번째를 구현하고, Title.tsx는 하나의 텍스트 움직임을 구현하며, references/animation-patterns.md에는 로그 공간에서 큰 푸시의 키와 하나의 오브젝트가 컷을 통해 전달되는 방법을 포함한 숫자가 있습니다.

한 번에 하나의 변경 영역: 0.5초 이내에, 씬의 주요 이벤트가 도착하는 동안 먼 구석에서 아무것도 움직이지 않습니다. 보조 요소는 이미 눈이 있는 곳이나 컷에 배치합니다(references/motion-language.md).

아이디어를 보여주고, 화면을 보여주지 마세요

제품 영상은 둘러보기가 아닙니다. 각 제품 씬은 하나의 아이디어를 전달하며, 그 카드는 그 아이디어를 전달하는 데 필요한 것만 보여줍니다: 이름, 상태, 문구. 소유자들이 만족했던 영상의 예산: 실행 시간의 초당 약 4단어, 제품 카드에 15~30단어, 헤드라인은 12단어 미만이며 한 줄입니다. 그 두 배의 컷은 "텍스트가 너무 많음"을 이끌어냈습니다. 제품의 실제 표현은 유지하는 몇 단어의 출처일 뿐이며, 모두 유지해야 하는 이유가 아닙니다. 사용자가 요청하지 않는 한 가격, 크레딧 및 플랜 이름은 제외하세요. scripts/check-copy.mjs가 개수를 세고, references/writing-style.md에는 규칙과 징후가 있습니다.

자신의 렌더를 확인하세요

사용자가 씬을 보기 전에, 중요한 프레임의 스틸샷을 렌더링하고 확인하세요: 각 클릭 프레임, 가장 긴 텍스트 줄이 완전히 화면에 표시되는 프레임, 각 컷 직전의 프레임, 전체 컷 프레임. 커서 팁이 대상에 있는지, 텍스트가 줄바꿈되거나 잘리지 않는지, 아무것도 안전 영역을 벗어나지 않는지, 단어가 브리프와 정확히 일치하는지 확인하세요. 마스터 렌더 후: 접촉 시트, 컷 스트립, 영상의 판단된 무브가 계획대로 통과했는지에 대한 저크 보고서, 그리고 집중도 테스트. references/self-check.md에는 프레임 목록과 명령어가 있습니다.

이것이 중요한 이유는 이런 영상의 일반적인 실패(대상을 놓치는 커서, 줄바꿈되는 헤드라인, 그리드에서 벗어난 카드, 오래된 타이밍 덤프)가 모두 타입체크를 통과하고 오류 없이 렌더링되기 때문입니다. 이는 그림이나 숫자에서만 볼 수 있습니다.

스틸샷은 모션을 보여주지 않습니다. 영상이 부드럽게 느껴지고 음악과 잘 어울리는지는 오직 보는 사람만이 말할 수 있으므로, 확인되었다고 보고하지 마세요; 측정된 내용과 아무도 보지 않았다고 말하세요.

세 가지 입력

에셋. 종횡비, 지속 시간, 로고, 브랜드 컬러, 폰트, 스크립트, 사운드트랙. assets/prompt-templates/asset-intake-questionnaire.md의 질문지로 사전에 수집합니다. 강한 모션과 플레이스홀더 브랜드가 있는 영상은 템플릿으로 읽히며, 늦게 도착하는 모든 에셋은 재렌더링을 강제합니다. 제품의 실제 UI는 오늘의 사이트에서 캡처하고 DOM에서 측정하며, 기억에서 그리지 않습니다(references/product-ui-from-site.md). 하나의 가짜 대시보드가 전체 버전을 망친 사례가 있습니다. 사용자에게 스크립트가 없으면 references/script-development.md에서 함께 개발합니다.

스타일. 사용자가 좋아하는 2~3개의 레퍼런스 비디오를 각각 디렉터의 분석으로 전환합니다: 샷 목록, 전환 동사(푸시-스루, 휩-팬, 매치-컷 줌, 마스크 와이프), 페이싱, 타이포그래피, 시그니처 무브. 전환 동사가 가장 중요한 부분입니다. 이는 씬 목록을 페이드가 있는 슬라이드 데크 대신 카메라 계획으로 바꾸기 때문입니다. 사용자가 이전에 좋아했던 영상은 모든 레퍼런스보다 우선합니다: 먼저 컷 포인트와 입장 타이밍을 로드하세요. Gemini를 사용할 수 있으면 사용하고, 그렇지 않으면 프레임을 샘플링하여 직접 읽으세요. 두 경로 모두 references/reference-video-vibe.md에 있습니다.

비트. scripts/detect-beats.py가 사운드트랙을 읽고 beats.json을 작성합니다: 템포, 각 비트의 프레임, 어떤 비트가 백비트인지, 트랙이 상승하는 위치. 씬 컷은 비트에, 기본적으로 백비트에 위치하며, 이는 컷이 드럼 히트처럼 느껴지게 만듭니다. 비싸 보였던 세 개의 레퍼런스 영상은 분당 10~13개의 컷을 사용했고, 3.5초 미만의 샷은 없었으며, 모든 씬에 카메라 무브가 있었습니다. 클릭과 입장도 비트에 시작하지만, 모든 비트에 있는 것은 아닙니다: 대부분의 씬에서 대부분의 비트는 아무것도 담지 않습니다. 타이밍 파일은 모든 프레임을 beats.json에서 파생하므로, 씬은 비트 번호로 배치되며 수동으로 입력된 프레임을 사용하지 않습니다. 스크립트는 신뢰도 판정으로 끝납니다: good이면 빌드하고, check이면 사용자가 귀로 확인하도록 하고, poor이면 트랙이 비트 컷 영상에 적합하지 않으므로 트랙을 변경하거나 비트 싱크되지 않을 것이라고 사용자에게 알리세요.

대부분의 영상은 세 가지를 모두 따릅니다. 일부는 의도적으로 하나를 깨며, 선택일 때는 괜찮습니다: 예를 들어 보이스오버에 맞춰진 영상은 비트에도 맞출 수 없습니다.

소유자와 작업하기

그들은 보고 승인합니다. HD 렌더를 열어주고(open out/...mp4), 마지막 승인된 컷과 나란히 비교하고, 변경된 사항과 시간을 몇 줄의 평문으로 보여주세요. 4K는 승인 후에 옵니다. 선택하도록 요청하는 항목의 전체 크기 스틸샷; 두 명의 소유자는 전체 크기에서 선택을 바꿨습니다.
추천하고, 던지지 마세요. 애매한 "어떻게 생각하세요?" 대신 명확한 선택을 제시하세요: "씬 3의 카드는 이 데이터 또는 이 데이터를 보여줄 수 있습니다. 하나는 실시간 사용량을 강조하고, 다른 하나는 총계를 강조합니다. 추천: 사용량, 이 영상이 속도에 관한 이야기이기 때문입니다." 소유자는 기본적으로 추천을 따릅니다. 가장 강력한 전달 도구는 예시와 숫자입니다.
변경 사항을 분류하세요. 중립적인 '좋아요/싫어요' 대신 사용자에게 결정의 종류를 말하게 하세요: '느낌' 변경은 새로운 방향의 브리프가 필요하고, '트윅'은 동일한 방향 내에 있습니다. 승인된 스타일에 포함되는 트윅은 질문할 필요가 없지만, 모든 변경이 트윅인 것은 아닙니다. references/iteration-playbook.md에 분류를 위한 언어가 있습니다.
세션 종료 시 핸드오프. assets/prompt-templates/handoff.md를 복사하여 docs/video/handoff-{date}.md에 쓰고, 빌드 요약, 다음 빌더를 위한 미해결 결정, 대기 중인 모든 렌더를 포함하세요. '다 계속해'는 완료된 세션입니까? 아니면 렌더를 기다리는 세션입니까? 핸드오프가 스스로 말하게 하세요.

도구

npx remotion studio로 스튜디오를 엽니다.
npx remotion render src/index.ts Master out/output.mp4로 마스터를 렌더링합니다.
scripts/detect-beats.py path/to/track.mp3로 비트를 감지합니다.
scripts/check-copy.mjs로 단어 수를 확인합니다.
scripts/contact-sheet.mjs로 접촉 시트를 생성합니다.
scripts/jerk-report.mjs로 저크 보고서를 생성합니다.
scripts/cut-strips.mjs로 컷 스트립을 생성합니다.

모든 스크립트는 --help를 지원합니다.

SaaS 제품 데모 비디오