Flowbar 런칭 비디오
flowbar-launch-video/ 디렉토리에 있는 Remotion 프로젝트로, 소셜 미디어 및 웹사이트 임베드를 위한 약 28초 길이의 제품 런칭 비디오를 제작합니다.
빠른 명령어
cd flowbar-launch-video
# 브라우저에서 미리보기
npm run studio # http://localhost:3000 열기
# 고품질 렌더링 (소셜 미디어용)
npx remotion render FlowbarLaunchVideo out/flowbar-launch-hq.mp4 --codec h264 --crf 18
# 웹 압축 (스트리밍용 faststart)
ffmpeg -i out/flowbar-launch-hq.mp4 -c:v libx264 -crf 28 -preset slow -c:a aac -b:a 128k -movflags +faststart out/flowbar-launch-web.mp4 -y
아키텍처
flowbar-launch-video/
├── public/ # 정적 자산 (비디오, 오디오)
│ ├── nature-loop.mp4 # 앰비언트 배경 (전역 루프)
│ ├── the-reveal.mp4 # 히어로 샷: 데스크톱 → Fn → Flowbar 등장 (5.9초)
│ ├── product-tour.mp4 # 단일 연속 화면 녹화 (15.6초)
│ └── audio.mp3 # 배경 음악
├── src/
│ ├── Root.tsx # 컴포지션 정의 (fps, 지속 시간, 해상도)
│ ├── FlowbarLaunchVideo.tsx # 메인 컴포지션 — 배경, 오디오, 장면, 그레인 레이어
│ ├── theme.ts # 색상 (웹사이트 일치), 스프링 프리셋
│ ├── fonts.ts # Instrument Serif + DM Sans (Google Fonts)
│ ├── scenes/
│ │ ├── ProblemScene.tsx # 1막: 텍스트 전용 고통 카드 두 개
│ │ ├── RevealScene.tsx # 2막: "Meet Flowbar" 오버레이가 있는 히어로 샷
│ │ ├── FeatureTourScene.tsx# 3막: 연속 제품 데모 + 전환 라벨
│ │ └── ClosingScene.tsx # 4막: 로고, 태그라인, URL
│ ├── components/
│ │ ├── AmbientBackground.tsx # 자연 루프 + 그라데이션 오버레이 + FilmGrain
│ │ └── AnimatedText.tsx # WordReveal, MaskReveal, ScaleReveal
│ └── transitions/
│ └── scaleBlur.tsx # 커스텀 전환: scale + blur (페이드 아님!)
└── out/ # 렌더링 결과물
비디오 구조 및 타이밍
지속 시간은 Root.tsx에서 계산됩니다: (5 + 6 + 16 + 5) * 30fps - 45 (전환) - 60 (트림) = 855프레임 ≈ 28.5초
| 막 | 장면 | 지속 시간 | 내용 |
|---|---|---|---|
| 1 | ProblemScene | 5초 | 자연 배경 위에 텍스트 카드 두 개. 단어별로 나타남. |
| 2 | RevealScene | 6초 | the-reveal.mp4 + 하단 "Meet Flowbar." + 태그라인 |
| 3 | FeatureTourScene | 16초 | product-tour.mp4 연속 재생 + 상단 5개 라벨 |
| 4 | ClosingScene | 5초 | 로고 + 워드마크 + 설명 + URL |
막 사이의 전환은 scaleBlur()와 springTiming({ damping: 18, stiffness: 120 })을 사용합니다.
디자인 시스템
색상 (theme.ts에서 가져오며, flowbar.tushar.ai와 일치)
- 배경:
#0c0f0d - 텍스트:
#ede9df - 음영:
#9a9488 - 강조:
#c99b6d/#ddb88a
스프링 프리셋 (theme.ts에서 가져옴)
SPRINGS.smooth—{ damping: 200 }— 텍스트 리빌, 미묘한 등장SPRINGS.snappy—{ damping: 20, stiffness: 200 }— UI 요소SPRINGS.heavy—{ damping: 15, stiffness: 80, mass: 2 }— 히어로 순간, 로고SPRINGS.bouncy—{ damping: 12 }— 장난스러운 악센트
텍스트 컴포넌트 (AnimatedText.tsx에서 가져옴)
WordReveal— 단어별로 클립-패스 마스크로 지연되어 나타남. 임팩트 있는 줄에 사용.MaskReveal— 한 줄 클립-패스 리빌. 라벨, 설명에 사용.ScaleReveal— scale + blur에서 선명하게. 히어로 텍스트("Meet Flowbar.")에 사용.
레이어 (아래에서 위로)
THEME.bg단색AmbientBackground— nature-loop.mp4 + 그라데이션 오버레이 (어둡게 속성: 0-1)- 장면 콘텐츠 (TransitionSeries)
FilmGrain— 불투명도 0.035, 프레임마다 이동
주요 학습 사항 및 주의점
모션 디자인
- 페이드 금지.
scaleBlur전환이나 스프링 기반 등장을 사용하세요. 페이드는 파워포인트처럼 보입니다. - 스프링은 실제 물리가 필요합니다.
{ damping: 200 }은 심하게 오버댐핑되어 있습니다 (스프링 효과 없음). 프리셋을 사용하세요. - 텍스트: 마스크 리빌 > 페이드+슬라이드.
clipPath: inset()와translateY를 함께 사용하면 opacity+translate보다 10배 더 좋아 보입니다. - 퇴장은 빨라야 합니다. 등장은 스프링 물리(12-18프레임), 퇴장은 빠른 선형(5-8프레임)을 사용하세요.
- 시리즈의 마지막 라벨: 퇴장 페이드 생략.
isLast플래그를 전달하여 장면이 끝날 때까지 최종 라벨을 유지하세요.
비디오 처리
objectFit: "contain"("cover" 아님)을 사용하여 메뉴바를 포함한 전체 녹화를 표시하세요. 배경은THEME.bg로 채웁니다.- 이 Remotion 버전에서는
pauseWhenBuffering을 사용할 수 없습니다. 사용하지 마세요. - 장면 지속 시간은 비디오 지속 시간보다 길어야 합니다. 그렇지 않으면 비디오가 잘립니다.
ffprobe -v error -show_entries format=duration -of csv=p=0 file.mp4로 확인하세요. - 비디오가 장면보다 짧으면 마지막 프레임이 정지됩니다. 이것이 의도된 동작입니다.
배경
- 자연 루프는 모든 장면 뒤에서 전역적으로 실행됩니다 (FlowbarLaunchVideo.tsx에서, 장면별 아님).
- 장면은 투명합니다. 배경 위에 오버레이됩니다.
- 클로징 장면은 텍스트 가독성을 위해 배경을 뒤로 밀기 위해 자체
rgba(12,15,13,0.7)어둡게 레이어를 추가합니다. - 문제 장면은
rgba(12,15,13,0.35)어둡게를 추가합니다.
오디오
- 파일:
public/audio.mp3.staticFile("audio.mp3")를 통해 참조합니다. - 볼륨: 1초에 걸쳐 페이드 인 (0→0.5), 마지막 2초에 걸쳐 페이드 아웃 (0.5→0).
- Gemini 또는 Suno로 생성하세요. 프롬프트: 따뜻한 미니멀 일렉트로닉, 부드러운 아날로그 패드, 88bpm, 약 35-40초, 보컬 없음.
렌더링
- 고품질:
--crf 18→ 약 14MB (소셜 미디어) - 웹:
ffmpeg -crf 28 -preset slow -movflags +faststart로 재인코딩 → 약 3MB (웹사이트 임베드, 즉시 스트리밍) - 항상 고품질로 먼저 렌더링한 후 압축하세요. 두 번 렌더링하지 마세요.
새 장면 추가 방법
src/scenes/NewScene.tsx생성 —AbsoluteFill을 사용하는 React 컴포넌트 내보내기- 배경을 투명하게 유지 (전역 자연 배경이 보임)
- 텍스트 가독성이 필요한 경우 어둡게 오버레이 추가:
<AbsoluteFill style={{ backgroundColor: "rgba(12,15,13,0.X)" }} /> - 텍스트에는
WordReveal/MaskReveal/ScaleReveal을, 애니메이션에는SPRINGS.*를 사용 FlowbarLaunchVideo.tsx에scaleBlur()전환이 있는TransitionSeries.Sequence로 추가FlowbarLaunchVideo.tsx와Root.tsx모두에서 지속 시간 계산 업데이트
클립 재녹화 방법
- Screen Studio를 사용하여: 최소 패딩, 자동 줌 120%, 부드러운 커서, 다크 모드, 1920x1080 30fps로 설정
- Flowbar 창만 녹화 (데스크톱 배경 제외 — 자연 루프가 있음)
- 고품질 MP4로 내보내고
public/에 저장 - 지속 시간 확인:
ffprobe -v error -show_entries format=duration -of csv=p=0 public/clip.mp4 - 해당 장면의
durationInFrames를 일치하도록 업데이트 (가장 가까운 초 × fps로 반올림) Root.tsx지속 시간 계산 업데이트
기능 둘러보기 라벨 변경 방법
FeatureTourScene.tsx의 LABELS 배열을 편집하세요:
const LABELS = [
{ text: "마크다운으로 작성하세요. 파일은 그대로 유지됩니다.", startSec: 0 },
{ text: "모든 노트의 할 일. 한 곳에서 체크하세요.", startSec: 3.5 },
// ...
];
startSec은 기능 둘러보기 장면 시작을 기준으로 합니다 (전체 비디오 기준 아님). product-tour.mp4에서 발생하는 동작과 일치하도록 시간을 맞추세요.