launch-film은(는) 무엇을 하나요?
SaaS 론칭 필름 — Remotion으로 실제 제품을 기반으로 제작하고 음악 바 그리드에 맞춰 컷편집합니다. Cursor/Notion 스타일 마감, UI는 항상 컴포넌트로 캡처(크롭된 스크린샷 없음), 콘택트 시트 QA.
개요
이 스킬은 SaaS 제품의 론칭을 위한 고품질 프로모션 비디오를 자동 생성합니다. 실제 제품 UI를 Remotion 컴포넌트로 가져와 동영상을 만들고, 음악의 비트에 맞춰 자연스럽게 편집됩니다.
주요 기능
- 실제 제품 기반: 스크린샷이 아닌 실제 UI 컴포넌트를 사용합니다.
- 음악 싱크: 오디오 트랙의 비트 그리드에 맞춰 컷이 전환됩니다.
- 콘택트 시트 QA: 모든 프레임을 시각적으로 검토할 수 있는 콘택트 시트를 생성합니다.
- Cursor/Notion 스타일: 미니멀하고 깔끔한 모던 UI 마감.
사용 방법
- 프로젝트 디렉토리를 설정합니다.
launch-film명령을 실행합니다.- Remotion 렌더링이 시작되고 최종 비디오가 생성됩니다.
필수 조건
- Node.js 18 이상
- Remotion 패키지 (
npm install remotion) - FFmpeg (로컬 렌더링 시 필요할 수 있음)
설치
npm install @nawneet77/launch-film
실행
npx launch-film --product ./my-saas-ui --music ./track.mp3 --output ./final-video.mp4
구성 옵션
| 옵션 | 설명 | 기본값 |
|---|---|---|
--product | 제품 UI 컴포넌트 디렉토리 경로 | "./components" |
--music | 배경 음악 파일 경로 | 없음 |
--output | 최종 비디오 출력 경로 | "./output/film.mp4" |
--style | 비주얼 스타일 (cursor, notion) | "cursor" |
--qa | 콘택트 시트 생성 여부 | true |
QA 워크플로우
콘택트 시트 QA는 모든 프레임을 썸네일 그리드로 보여줍니다. 이를 통해 각 프레임의 UI 정합성, 타이밍, 전환 효과를 확인할 수 있습니다.
예제
다음은 간단한 사용 예제입니다:
import { createFilm } from '@nawneet77/launch-film';
const film = await createFilm({
product: './components',
music: './background.mp3',
style: 'notion',
});
console.log('Film generated at:', film.output);
참고 자료
라이선스
MIT