benlaval23/제품-런칭-비디오

제품-런칭-비디오은(는) 무엇을 하나요?

실행 중인 앱을 헤드리스로 구동하여 캡처한 실제 제품 영상 위에 Remotion 타임라인을 입혀 런칭/마케팅 영화를 제작합니다. 제품 데모 비디오, 런칭 필름, 히어로 비디오, 랜딩 페이지 비디오, 마케팅 비디오, 앱 화면 녹화 등을 요청받았을 때 사용하세요. 캡처 파이프라인, 편집 규칙, 조용히 깨진 영상을 만드는 함정을 다룹니다.

캡처 파이프라인

1. 헤드리스 앱 구동 – npx remotion render를 실행하기 전에 캡처하려는 앱을 헤드리스 모드로 시작하세요.
2. 영상 녹화 – ffmpeg를 사용하여 전체 화면 또는 특정 영역을 녹화합니다.
3. 프레임 추출 – 녹화된 비디오에서 주요 프레임을 이미지로 추출합니다.
4. Remotion 조립 – 추출된 이미지를 Remotion 시퀀스에 배치하고 전환 효과를 추가합니다.

편집 규칙

• 각 장면은 3~5초를 넘지 않아야 합니다.
• 전환은 fade 또는 slide를 기본으로 사용합니다.
• 모든 텍스트 오버레이는 제품 브랜드 가이드라인을 따라야 합니다.
• 오디오 트랙은 필요 시 선택적으로 추가합니다.

함정 및 주의사항

• 깨진 프레임 방지 – ffmpeg 인코딩 시 -vsync vfr 플래그를 반드시 사용하세요.
• 타이밍 오류 – Remotion useCurrentFrame() 훅이 예상한 프레임 수와 일치하는지 확인하세요.
• 해상도 문제 – 1920x1080 이상의 해상도로 캡처해야 선명한 결과물을 얻을 수 있습니다.

설정 예시

# remotion.config.ts
export const config = {
  fps: 30,
  width: 1920,
  height: 1080,
  durationInFrames: 150,
  codec: 'h264',
};

캡처 명령어

# 앱을 헤드리스로 실행
npx remotion still src/index.tsx output.png

# 전체 화면 녹화
ffmpeg -f x11grab -video_size 1920x1080 -i :0.0 -t 10 output.mp4

# 프레임 추출
ffmpeg -i output.mp4 -vf fps=1 frames/frame_%03d.png

지원 플랫폼

• Cursor (AI 에이전트)
• Claude Code
• 기타 Remotion 호환 환경

참고

더 자세한 내용은 Remotion 공식 문서를 참조하세요.