Remotion 제품 데모 비디오
Remotion을 사용하여 Apple 키노트 스타일의 프로덕션 품질 제품 데모 비디오를 제작합니다.
빠른 시작
프로젝트: ~/Projects/tails-video/
템플릿: src/templates/GlassPhoneDemo.tsx
cd ~/Projects/tails-video
npx remotion render src/index.ts GlassPhoneDemo out/demo.mp4 \
--codec=h264 --crf=18
--props로 콘텐츠 커스터마이징:
npx remotion render src/index.ts GlassPhoneDemo out/custom.mp4 \
--props='{"scenes":[{"type":"hero","durationInSeconds":3}],"brand":{"name":"YourBrand"}}'
템플릿: GlassPhoneDemo
스키마 (Zod)
{
scenes: Array<{
type: 'hero' | 'voice' | 'typing' | 'cards' | 'detail' | 'dropdown' | 'endCard',
title?: string,
subtitle?: string,
text?: string, // typing 장면
cards?: Array<{ name, category, detail?, emoji? }>, // cards 장면
items?: Array<{ name, price? }>, // detail 장면
options?: Array<{ label, sublabel?, icon? }>, // dropdown 장면
durationInSeconds: number // 기본값 3
}>,
accentColor: string, // 기본값 '#3B82F6'
bgStyle: 'light' | 'warm' | 'cool',
deviceAngle: number, // 기본값 8 (Y축 회전 각도)
brand?: { name: string, tagline?: string }
}
장면 유형
| 유형 | 시각적 요소 | 주요 속성 |
|---|---|---|
| hero | "탭하여 입력" 문구 + 액션 버튼이 있는 폰 | — |
| voice | 마이크 아이콘 + 연속 리플 링 | — |
| typing | 커서가 있는 문자 단위 텍스트 | text |
| cards | 계단식 카드 목록 (레스토랑 스타일) | cards[], title |
| detail | 필터 알약 + 가격이 있는 아이템 그리드 | items[], title, subtitle |
| dropdown | 글래스모픽 옵션 선택기 | options[], text |
| endCard | 폰 페이드 아웃, 브랜드 중앙에 등장 | — (최상위 brand 사용) |
권장 장면 흐름
일반적인 데모 흐름: hero → voice → typing → results → detail → typing → dropdown → endCard
지속 시간 가이드: hero 3초, voice 2초, typing 명령당 3초, cards/detail 4초, dropdown 3초, endCard 2초
비주얼 스타일 규칙
전체 스타일 가이드는 references/apple-aesthetic.md를 읽어보세요.
핵심 규칙:
- 배경: 방사형 그라데이션, 스페큘러 하이라이트, 그림자가 있는 부드러운 3D 구체
- 폰: 메탈 베젤 그라데이션, Dynamic Island, 측면 버튼, 홈 인디케이터, 유리 반사 오버레이, 그림자가 있는 iPhone 스타일
- 색상: 모노크롬 흰색/회색 + 단일 설정 가능한 악센트 색상
- 모션: 모든 항목은
useCurrentFrame()+spring({damping: 200})을 통해 구현. CSS 애니메이션 없음
애니메이션 패턴
스프링 설정, 타이밍 공식, 이징 패턴은 references/animation-patterns.md를 읽어보세요.
핵심 패턴:
- 입장:
spring({ frame: sceneFrame, fps, config: { damping: 200 } })→ opacity + translateY - 지연: 각 항목을
i * 6프레임만큼 지연 - 부유:
Math.sin(globalFrame / 45) * 12로 부드러운 드리프트 - 타이핑:
Math.floor((sceneFrame - delay) * 0.55)개의 문자가 공개됨 - 리플: 모듈로 연속:
(frame + ring * offset) % cycleDuration - 크로스페이드: 장면을
-transitionFrames에서0으로 페이드 인,dur - transitionFrames에서dur로 페이드 아웃으로 겹치기
개선 백로그
현재 상태: 좋음, 완벽하지는 않음. 알려진 격차:
- Three.js 배경 구체 — CSS 방사형 그레디언트 구체는 약 7/10에 그침. 실제
@remotion/three와 적절한 조명 = 9/10 - 실제 이미지 — 색상이 있는 플레이스홀더 블록 →
<Img>컴포넌트를 통한 Unsplash/Pexels 음식 사진 - 가변 타이핑 속도 — 일반적인 단어는 빠르게, 공백에서는 약간의 일시 정지
- 화면 글로우 — 폰 화면 가장자리에서 나오는 미세한 주변광
- 상수 우선 패턴 — 모든 매직 넘버를 파일 상단의 명명된 상수로 추출 (Remotion 공식 권장)
새 템플릿 만들기
새 제품 데모 템플릿을 만들 때:
- 참조 비디오를 프레임별로 분석 (1초 간격으로 추출)
- 비주얼 컴포넌트 식별: 배경, 기기, 콘텐츠, 전환
- Zod 스키마 정의 장면 유형 및 구성 가능한 속성 포함
- 컴포넌트를 상향식으로 구축: 배경 → 기기 프레임 → 장면 → 전환
- 각 단계에서 테스트 — 전체 비디오 전에 개별 프레임 렌더링
- 비전 모델로 QA — 프레임 추출, 품질 평가, 반복
Remotion 규칙을 엄격히 따르세요: skills/remotion-best-practices/ 규칙 파일 읽기