런치 비디오 — 리퀴드 글래스 제품 쇼케이스은(는) 무엇을 하나요?
리퀴드 글래스 미학(다크 보이드, 3D 플로팅 패널, 파티클 효과, 스프링 애니메이션, 자신감 있는 템포)을 사용하여 시네마틱 제품 출시 비디오를 제작합니다.
복합 스킬
| 스킬 | 역할 |
|---|---|
/remotion-best-practices | 구성 구조, spring(), <Sequence>, 렌더 파이프라인 |
/content-creation | AI 에셋 생성 (Imagen 4.0, Veo 3.1) |
/arcan-glass | BroomVA 브랜드 토큰 (AI Blue, 다크 퍼스트 팔레트) |
/google-veo | 시네마틱 B-roll 생성 프롬프트 |
/blog-post | 배포 파이프라인 (X, LinkedIn, Instagram 게시) |
리퀴드 글래스 미학
핵심 시각 원칙
- 다크 보이드 배경 — 순수 블랙(#000000) 또는 거의 블랙(#0A0A0A). 베이스에 그라데이션 없음. 콘텐츠가 어둠 속에 떠 있습니다.
- 3D 원근 패널 — 스크린샷과 UI 렌더를
perspective(1200px)로 8-15° 기울임. 절대 평평하지 않음. 항상 떠 있음. - 유리 재질 — 패널은 서리 처리된 가장자리, 은은한 반사, 모서리가 둥글고 글로우, 반투명 테두리를 가집니다.
- 파티클 필드 — 작은 떠다니는 파티클(2-4px, 낮은 불투명도, 느린 드리프트)이 공간을 채웁니다. 깊이와 생동감을 만듭니다.
- 스프링 모션 — 모든 진입/퇴장은 Remotion
spring()을 사용합니다. CSS 전환 금지. 선형 금지. 유기적이고 자신감 있습니다. - 자신감 있는 템포 — 장면당 최소 3-5초. 빠른 컷 없음. 각 비주얼이 숨 쉴 시간을 줍니다.
- 미니멀 타이포그래피 — 산세리프(Inter, SF Pro 또는 시스템), 흰색, 중앙 정렬. 타이틀 카드당 최대 8단어.
색상 팔레트
| 토큰 | 값 | 용도 |
|---|---|---|
void | #000000 | 배경 |
panel-bg | rgba(20, 20, 25, 0.85) | 유리 패널 채움 |
panel-border | rgba(255, 255, 255, 0.08) | 유리 가장자리 |
panel-glow | rgba(59, 130, 246, 0.15) | 가장자리 글로우 (AI Blue) |
text-primary | #FFFFFF | 제목 텍스트 |
text-secondary | rgba(255, 255, 255, 0.6) | 부제목, URL |
accent | #3B82F6 | AI Blue 하이라이트 |
success | #22C55E | 체크 표시, 긍정 상태 |
particle | rgba(255, 255, 255, 0.15) | 배경 파티클 |
3D 패널 CSS (Remotion)
const panelStyle: React.CSSProperties = {
perspective: '1200px',
transform: `rotateY(-8deg) rotateX(5deg)`,
borderRadius: 16,
border: '1px solid rgba(255, 255, 255, 0.08)',
boxShadow: `
0 25px 50px rgba(0, 0, 0, 0.6),
0 0 30px rgba(59, 130, 246, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.05)
`,
background: 'rgba(20, 20, 25, 0.85)',
backdropFilter: 'blur(20px)',
overflow: 'hidden',
};
스프링 구성
import { spring, useCurrentFrame, useVideoConfig } from 'remotion';
// 표준 진입
const entrance = spring({
frame,
fps,
config: { damping: 15, stiffness: 80, mass: 0.8 },
});
// 미세 드리프트 (떠 있는 패널용)
const drift = spring({
frame: frame - delay,
fps,
config: { damping: 200, stiffness: 10, mass: 2 },
durationInFrames: 120,
});
장면 유형
1. 타이틀 카드
지속 시간: 3-4초 내용: 제품명 또는 태그라인, 중앙 정렬, 검정 바탕에 흰색 애니메이션: 미세 스케일 스프링(0.95 → 1.0)으로 페이드 인 예시: "Build your ideas with Gemini"
2. 프롬프트/입력 장면
지속 시간: 4-6초
내용: 채팅 입력 또는 터미널 프롬프트, 각진 3D 패널
애니메이션: 패널이 아래에서 스프링으로 올라오고, 텍스트는 타자기 효과
기법: 3D CSS 변환이 적용된 <Img> 스크린샷, 프레임 기반 문자열 슬라이스로 타자기 효과
3. 분할 패널 장면
지속 시간: 4-5초
내용: 두 개의 UI 패널이 나란히 배치 (예: 프롬프트 + 코드 출력)
애니메이션: 패널이 반대쪽에서 스프링으로 들어오고, 패널 사이에 파티클
기법: 반대 rotateY 변환을 가진 두 개의 <Img> 컴포넌트
4. 제품 데모 장면
지속 시간: 5-8초
내용: 떠 있는 유리 패널 형태의 전체 제품 UI
애니메이션: 느린 드리프트 회전(미세 rotateY 진동), 시네마틱 줌
기법: 애니메이션 scale과 rotateY가 적용된 <Img> 또는 <OffthreadVideo>
5. 디테일 줌 장면
지속 시간: 3-4초
내용: 특정 UI 요소 또는 기능으로 확대
애니메이션: 전체 보기에서 잘린 디테일로 스프링 스케일
기법: 패널 이미지에 애니메이션 scale + translate
6. CTA / 브랜드 카드
지속 시간: 3-4초 내용: 로고 + URL 또는 설치 명령어 애니메이션: 페이드 인, 유지, 페이드 아웃 기법: 중앙 정렬 텍스트, 브랜드 아이콘, 미세한 글로우
7. AI 시네마틱 프레임 (Imagen 4.0)
지속 시간: 3-5초
내용: 유리 패널 안에 AI가 생성한 히어로 렌더 또는 컨셉 아트
애니메이션: 스프링 진입, 느린 드리프트 회전, 미세 줌
기법: Imagen 4.0으로 생성, public/에 배치, 3D 변환과 함께 <Img src={staticFile('render.png')} />를 GlassPanel 내에서 사용
사용 시기: 추상적 개념, 아키텍처 다이어그램, 분위기 비주얼 등 스크린샷보다 AI 생성 이미지가 더 나은 모든 경우
<GlassPanel rotateY={-10} rotateX={6} delay={5}>
<Img src={staticFile('imagen-hero-render.png')} style={{ width: '100%' }} />
</GlassPanel>
8. AI 비디오 B-roll (Veo 3.1)
지속 시간: 4-8초
내용: 전환 또는 분위기 조성을 위한 시네마틱 AI 생성 비디오 클립
애니메이션: 유리 패널 뒤나 안에서 재생되며, 선택적으로 오버레이 텍스트
기법: Veo 3.1로 생성, ffmpeg -movflags +faststart로 전처리, Remotion에서 <OffthreadVideo> 사용
// 전체 화면 시네마틱 B-roll (장면 사이)
<OffthreadVideo
src={staticFile('veo-broll-corridor.mp4')}
style={{ width: '100%', height: '100%', objectFit: 'cover' }}
/>
// 유리 패널 내부 B-roll
<GlassPanel rotateY={-5} rotateX={3}>
<OffthreadVideo
src={staticFile('veo-product-demo.mp4')}
style={{ width: '100%', borderRadius: 12 }}
/>
</GlassPanel>
Veo 3.1 B-roll 프롬프트 패턴:
[카메라 움직임], [주제/환경], [동작/모션], [조명 + 분위기].
어두운 배경, [강조 색상] 글로우. 시네마틱, 프로페셔널. [화면 비율].
사용 시기: 장면 그룹 간 전환, 분위기 있는 인트로/아웃트로, 정적 스크린샷보다 모션이 가치를 더하는 시네마틱 제품 데모.
전처리 (<OffthreadVideo> + parseMedia()에 필요):
ffmpeg -i veo-clip.mp4 -c:v libx264 -crf 18 -movflags +faststart -r 30 processed.mp4
하이브리드 구성 패턴
가장 세련된 비디오는 세 가지 에셋 유형을 모두 결합합니다:
타이틀 카드 (텍스트)
→ 유리 패널 내 Imagen 프레임 (컨셉 아트)
→ Veo B-roll 전환 (시네마틱 4초)
→ 유리 패널 내 스크린샷 (제품 데모)
→ Remotion 애니메이션 데이터 (파이프라인 노드, 파일 트리)
→ Veo B-roll 아웃트로 (분위기)
→ CTA 카드 (텍스트)
규칙: Remotion이 타이밍, 전환, 텍스트를 제어합니다. AI 에셋은 시각적 풍부함을 제공합니다. AI가 템포를 제어하도록 절대 두지 마세요 — 그것은 Remotion의 역할입니다.
제작 파이프라인
1. 스토리보드 → 유형(1-8), 지속 시간, 콘텐츠로 장면 정의
2. 에셋 → 모든 시각적 에셋 생성/캡처
a. 스크린샷 — agent-browser 또는 수동 캡처를 통한 제품 UI
b. Imagen 4.0 — 히어로 렌더, 컨셉 아트, 추상 비주얼
→ ai.models.generateImages({ model: 'imagen-4.0-fast-generate-001', prompt: '...' })
→ public/ 디렉토리에 저장
c. Veo 3.1 — 시네마틱 B-roll 클립 (각 4-8초)
→ ai.models.generateVideos({ model: 'veo-3.1-fast-generate-preview', prompt: '...' })
→ 전처리: ffmpeg -i clip.mp4 -c:v libx264 -movflags +faststart -r 30 processed.mp4
→ public/ 디렉토리에 저장
3. 구성 → Remotion 구성 빌드
- 미리 로딩을 위한 premountFor와 함께 <Sequence>
- 이미지에는 <Img> + staticFile() (<img> 절대 금지)
- Veo 클립에는 <OffthreadVideo> + staticFile() (<video> 절대 금지)
- 3D 변환 및 진입을 위한 GlassPanel + spring()
- 배경 레이어용 ParticleField
- 텍스트 오버레이용 Subtitle 컴포넌트
4. 렌더 → npx remotion render src/Root.tsx CompositionId out/video.mp4
5. 후처리 → 별도 오디오 추가
- ffmpeg -i video.mp4 -i audio.mp3 -c:v copy -c:a aac final.mp4
6. 검토 → /creative-review가 출력을 스타일 브리프에 대해 점수화 (목표: ≥75)
7. 배포 → /blog-post 게시 파이프라인을 통해 플랫폼에 푸시
Remotion 프로젝트 구조
launch-video/
├── src/
│ ├── Root.tsx # registerRoot
│ ├── Composition.tsx # <Sequence> 장면이 있는 메인 구성
│ ├── scenes/
│ │ ├── TitleCard.tsx # 장면 유형 1
│ │ ├── PromptScene.tsx # 장면 유형 2
│ │ ├── SplitPanel.tsx # 장면 유형 3
│ │ ├── ProductDemo.tsx # 장면 유형 4
│ │ ├── DetailZoom.tsx # 장면 유형 5
│ │ └── CTACard.tsx # 장면 유형 6
│ ├── components/
│ │ ├── GlassPanel.tsx # 유리 재질의 3D 원근 패널
│ │ ├── ParticleField.tsx # 배경 파티클 시스템
│ │ ├── TypewriterText.tsx # 프레임 기반 타자기 애니메이션
│ │ └── SpringFade.tsx # 재사용 가능한 스프링 페이드 래퍼
│ └── styles/
│ └── tokens.ts # 리퀴드 글래스 색상/간격 토큰
├── public/ # staticFile() 에셋 (스크린샷, 렌더)
├── package.json
└── remotion.config.ts
파티클 필드 컴포넌트 (참조)
const ParticleField: React.FC<{ count?: number }> = ({ count = 40 }) => {
const frame = useCurrentFrame();
const particles = useMemo(() =>
Array.from({ length: count }, (_, i) => ({
x: (i * 37 + 13) % 100,
y: (i * 53 + 7) % 100,
size: 2 + (i % 3),
speed: 0.1 + (i % 5) * 0.05,
opacity: 0.05 + (i % 4) * 0.04,
})), [count]);
return (
<AbsoluteFill>
{particles.map((p, i) => (
<div key={i} style={{
position: 'absolute',
left: `${p.x}%`,
top: `${(p.y + frame * p.speed) % 110}%`,
width: p.size,
height: p.size,
borderRadius: '50%',
background: `rgba(255, 255, 255, ${p.opacity})`,
}} />
))}
</AbsoluteFill>
);
};
GlassPanel 컴포넌트 (참조)
const GlassPanel: React.FC<{
children: React.ReactNode;
rotateY?: number;
rotateX?: number;
scale?: number;
}> = ({ children, rotateY = -8, rotateX = 5, scale = 1 }) => (
<div style={{
transform: `perspective(1200px) rotateY(${rotateY}deg) rotateX(${rotateX}deg) scale(${scale})`,
borderRadius: 16,
border: '1px solid rgba(255, 255, 255, 0.08)',
boxShadow: '0 25px 50px rgba(0,0,0,0.6), 0 0 30px rgba(59,130,246,0.1), inset 0 1px 0 rgba(255,255,255,0.05)',
background: 'rgba(20, 20, 25, 0.85)',
overflow: 'hidden',
transition: 'none',
}}>
{children}
</div>
);
품질 체크리스트
- 배경이 순수 블랙 또는 거의 블랙 (그라데이션 없음)
- 모든 패널이 3D 원근 변환 사용 (절대 평평한 스크린샷 금지)
- 모든 진입에 스프링 애니메이션 사용 (CSS 전환 금지)
- 배경에 파티클 필드 존재
- 각 장면 최소 3-5초 유지 (빠른 컷 금지)
- 타이포그래피: 산세리프, 흰색, 중앙 정렬, 타이틀 카드당 ≤8단어
- 유리 재질: 테두리 글로우, 그림자, 둥근 모서리, 반투명
- 오디오 존재 (앰비언트 일렉트로닉 또는 내레이션)
- 총 지속 시간 20-45초
- 최종 렌더에
-movflags +faststart적용