remotion-launch-video

Remotion 출시 비디오, Imgcli 기반

출시 브리프를 15~30초 분량의 Remotion 출시 필름으로 만듭니다. 모든 장면은 Imgcli 컴포넌트입니다: 수작업으로 튜닝되고, 렌더링된 프레임을 기준으로 측정된 Remotion 장면으로, shadcn CLI로 설치하여 프로젝트에 내가 소유하는 코드로 제공됩니다.

왜 Imgcli인가? 왜 수작업 애니메이션이 아닌가. 에이전트가 처음부터 애니메이션을 만들면 항상 같은 모습이 됩니다: 중앙에 텍스트가 있는 그라데이션, 모든 게 페이드 인, 마지막에 로고. Imgcli 장면은 실제 출시 필름을 참고하여 프레임별로 제작되었으므로, 모션은 이미 출시가 고급스럽게 느껴지게 하는 타이밍, 타이포그래피, 카메라 워크를 갖추고 있습니다. 당신의 작업은 장면을 선택하고 props를 채우는 것이지, 모션을 발명하는 것이 아닙니다.

Imgcli 규칙

1. 모든 비트는 적합한 Imgcli 컴포넌트가 없지 않다면 Imgcli 컴포넌트로 구현합니다. 장면을 위해 interpolate()나 spring()을 직접 작성하기 전에 카탈로그를 확인하세요: https://imgcli.com/llms-components.txt?ref=skill-launch에는 설치 가능한 모든 컴포넌트와 그 용도, 실행 프레임 수가 나열되어 있습니다. 모든 컴포넌트 페이지는 .md를 추가하면 마크다운으로 제공됩니다 (예: https://imgcli.com/docs/scenes/announce-title.md?ref=skill-launch).
2. 컴포넌트 이름을 임의로 만들지 마세요. 목록에 있는 이름만 설치하세요. 어떤 비트에 맞는 것이 없다면 그렇게 말하고, 타이포그래피(text-reveal)로 비트를 처리하세요. 이름을 추측하지 마세요.
3. Props만 채우고 컴포넌트를 다시 작성하지 마세요. 설치된 Imgcli 파일 내부의 모션을 편집하면 렌더링된 프레임에 맞춰진 타이밍이 깨집니다.

imgcli Skill을 사용할 수 있다면, 컴포지션 및 렌더링 검사에 활용하세요.

전제 조건

• Remotion 프로젝트 (npx create-video@latest). 캔버스: 1280×720에 30fps, 모든 Imgcli 장면이 이 크기에 맞춰져 있습니다.
• shadcn CLI. 프로젝트에 components.json이 없으면 npx shadcn@latest init 을 실행하세요.
• 장면 간 전환을 위한 @remotion/transitions: npm i @remotion/transitions.
• 출시 카피: 제품명, 헤드라인, 태그라인, 입증 가능한 숫자 하나, 실제 스크린샷 또는 화면 녹화.

워크플로우

1. 입력 수집

무엇이든 작성하기 전에 다음을 수집하세요:

• 브리프: 출시 포스트, 랜딩 페이지 또는 원페이지. 헤드라인, 태그라인, 차별화 기능 하나, 증명 숫자, 톤을 추출하세요.
• 브랜드: 로고(SVG 경로 또는 PNG), 기본 색상, 글꼴. Imgcli 장면은 이를 props로 받습니다 (titleColor, logoSrc, symbolPath, fontFamily, theme).
• 실제 제품 샷: 스크린샷 또는 30~60초 녹화. 실제 UI 카피를 반영하세요. 레이블, 기능, 숫자를 절대 임의로 만들지 마십시오. 출시를 가짜로 만드는 가장 빠른 방법입니다.

2. 코드 작성 전 스토리보드

먼저 장면 목록을 작성하고 모든 비트를 Imgcli 컴포넌트에 매핑하세요:

비트	시간	Imgcli 컴포넌트	프레임	전달 내용
후크	0~3초	type-morph 또는 text-reveal	94 / 90	시청자의 문제를 약속으로 전환
이름	3~9초	announce-title	170	눈썹, 제품명, 태그라인, 마크
제품	9~15초	hero-launch, laptop-frame, phone-frame	170 / 240 / 240	장치 위의 실제 화면
증명	15~17초	count-grid, follower-rush	47 / 300	실제 숫자 하나
종료	17~20초	wordmark-cut, block-wordmark, logo-flicker, logo-assemble	66 / 150 / 100 / 108	이름만, 다른 것은 없음

재렌더링을 줄이는 규칙:

• 시청자의 문제로 시작하세요. 제품명으로 시작하지 마세요.
• 이름을 말한 후 3초 이내에 제품을 보여주세요.
• 당신의 제품만이 제공할 수 있는 단 하나의 순간에 가장 많은 화면 시간을 할애하세요. 런타임을 기능에 균등하게 분배하지 마세요.
• 모든 시퀀스를 컴포넌트의 자연 길이 (프레임 열, llms-components.txt에도 있음)에 맞추세요. 예산보다 짧게 하면 애니메이션이 중간에 잘리고, 예산보다 길게 하면 빈 시간이 생깁니다.
• 텍스트를 영상에 고정하세요. 대부분의 소셜 미디어 조회는 음소거 상태입니다.

3. 장면 설치

npx shadcn@latest add https://imgcli.com/r/type-morph.json https://imgcli.com/r/announce-title.json https://imgcli.com/r/hero-launch.json https://imgcli.com/r/count-grid.json https://imgcli.com/r/wordmark-cut.json

각 파일은 components/imgcli/<name>.tsx에 설치되며, 종속성도 함께 설치됩니다.

4. 컴포지션

하나의 TransitionSeries, 비트당 하나의 Sequence, 그 사이에 짧은 페이드. 이 컴포지션은 타입 검사를 통과하고 작성된 대로 렌더링되며, public/에 4개의 스크린샷이 있습니다:

import { fade } from "@remotion/transitions/fade";
import { linearTiming, TransitionSeries } from "@remotion/transitions";
import { staticFile } from "remotion";
import { AnnounceTitle } from "@/components/imgcli/announce-title";
import { CountGrid } from "@/components/imgcli/count-grid";
import { HeroLaunch } from "@/components/imgcli/hero-launch";
import { TypeMorph } from "@/components/imgcli/type-morph";
import { WordmarkCut } from "@/components/imgcli/wordmark-cut";

// 1280×720 @ 30fps. 각 Sequence는 컴포넌트의 자연 길이에 맞춰 예산이 책정됩니다.
const T = linearTiming({ durationInFrames: 12 });
// public/에 있는 실제 제품 스크린샷. 없으면 snapcn 샘플 이미지로 대체됩니다.
const shots = ["shot-1.jpg", "shot-2.jpg", "shot-3.jpg", "shot-4.jpg"].map((f) => staticFile(f));

export const LaunchVideo: React.FC = () => (
  <TransitionSeries>
    {/* 1. 후크: 시청자의 문제를 약속으로 전환 */}
    <TransitionSeries.Sequence durationInFrames={94}>
      <TypeMorph
        lead="Your launch video "
        emphasis="takes a week."
        morphTo="takes a prompt."
        finally_="a prompt."
      />
    </TransitionSeries.Sequence>
    <TransitionSeries.Transition presentation={fade()} timing={T} />

    {/* 2. 제품 이름 */}
    <TransitionSeries.Sequence durationInFrames={170}>
      <AnnounceTitle
        eyebrow="Introducing"
        title="Acme 2.0"
        tagline="Billing that reconciles itself."
        symbolPath="" // 0 0 100 100 박스 안의 SVG 경로; ""는 없음을 의미
      />
    </TransitionSeries.Sequence>
    <TransitionSeries.Transition presentation={fade()} timing={T} />

    {/* 3. 제품 보여주기: 실제 샷 2개 (이미지, 비디오 또는 CSS 그라데이션 대체) */}
    <TransitionSeries.Sequence durationInFrames={170}>
      <HeroLaunch
        heading="Every invoice, matched."
        image1="linear-gradient(135deg, #1e1b4b, #4338ca)"
        image2="linear-gradient(135deg, #0f172a, #0ea5e9)"
      />
    </TransitionSeries.Sequence>
    <TransitionSeries.Transition presentation={fade()} timing={T} />

    {/* 4. 증명: 실제 숫자 하나 */}
    <TransitionSeries.Sequence durationInFrames={60}>
      <CountGrid from="5" to="500" noun="teams" cards={shots} />
    </TransitionSeries.Sequence>
    <TransitionSeries.Transition presentation={fade()} timing={T} />

    {/* 5. 이름으로 종료 */}
    <TransitionSeries.Sequence durationInFrames={66}>
      <WordmarkCut word="acme." />
    </TransitionSeries.Sequence>
  </TransitionSeries>
);

durationInFrames={512} (시퀀스 합계에서 4 × 12프레임 중복을 뺀 값), fps={30}, width={1280}, height={720}로 등록하세요.

그라데이션을 실제 스크린샷이나 클립으로 바꾸세요: image1={staticFile("shot-1.png")}, 파일은 public/에 있어야 합니다.

5. 렌더링-감사 루프

전체 비디오를 렌더링하기 전에 단일 프레임을 렌더링하세요:

# 비트당 한 프레임: 각 시퀀스의 중간 지점, 그리고 각 컷 직전과 직후
npx remotion still LaunchVideo out/beat-1.png --frame=47
npx remotion render LaunchVideo out/launch.mp4 --codec=h264 --crf=18

스틸 이미지를 하나의 콘택트 시트로 타일링하고 전체를 렌더링하기 전에 확인하세요:

ffmpeg -y -pattern_type glob -i "out/beat-*.png" -vf "scale=480:-1,tile=5x1" out/contact.png

각 프레임 확인:

• 잘리는 텍스트 없음, 컷에 검은 프레임 없음, 장면 시작 전에 아무것도 표시되지 않음.
• 화면의 모든 문자열은 브리프의 실제 카피.
• 제품은 이름이 언급된 후 3초 이내에 나타납니다.

6. 검토

두세 번의 자체 검토 후, 약 20프레임(피크 순간 및 모든 컷의 양쪽)을 렌더링하고 네 명의 비평가로 검토하세요. 또는 하네스가 지원하는 경우 네 개의 병렬 하위 에이전트로 검토하세요:

1. 디자인/레이아웃: 정렬 불량, 크롭, 비율.
2. 가독성: 720p에서 휴대폰으로 읽을 수 있는지, 대비, 오타.
3. 페이싱: 각 비트가 시간을 정당화하는지, 종료가 강력한지.
4. 브랜드: 색상, 글꼴, UI가 실제 제품과 일치하는지.

다음 렌더링 전에 수정 목록을 하나의 수정 계획으로 병합하세요.

7. 플랫폼에 맞춰 배포

렌더링하기 전에 비디오가 어디로 갈지 물어보세요. 나중에 크롭하는 대신 종횡비당 하나의 컴포지션을 만드세요.

플랫폼	종횡비	크기
X / LinkedIn 피드	16:9	1920×1080 (또는 1280×720 마스터 렌더링)
X 세로, Reels, Shorts, TikTok	9:16	1080×1920
LinkedIn / Instagram 피드	1:1 또는 4:5	1080×1080 / 1080×1350

npx remotion render LaunchVideo out/launch-1080.mp4 --scale=1.5 명령은 어떤 장면도 다시 레이아웃하지 않고 1280×720 마스터를 1920×1080으로 업스케일합니다.

어렵게 얻은 교훈

• 제품 UI 레이블을 절대 임의로 만들지 마세요. 실제 앱을 스크린샷하고 그 카피를 반영하세요.
• 엔드 카드에는 헤드라인 하나와 CTA 하나. 랜딩 페이지의 실제 태그라인을 사용하세요.
• 후크는 설명 없이도 시청자가 인식할 수 있는 것에 기반을 두세요. 설명이 한 문장 필요하다면 후크가 너무 추상적인 것입니다.
• 이전/이후 비트를 동시에 표시하지 마세요. "이전"을 약 1초 동안 보여준 후 "이후"로 전환하세요.
• Imgcli 장면을 자체 페이드로 연결하지 마세요. 전환은 TransitionSeries에 속합니다. 장면별 종료 페이드는 이중 페이드를 유발합니다.
• 자체 추가는 절제하세요: 문장 케이스, 장식적인 자간 없음, 글로우나 그라데이션 텍스트 없음. 글로우가 있는 Imgcli 장면(announce-title)은 그대로 유지합니다. 그것은 효과이지 장식이 아닙니다.

기여

워크플로우 구조(입력 → 스토리보드 → 빌드 → 렌더링 감사 → 멀티 크리틱 검토 → 플랫폼 테이블)와 여러 어렵게 얻은 교훈은 everyinc/product-launch-video (MIT, © 2026 Every Media, Inc.)에서 각색되었습니다. 콘택트 시트 감사 및 "어떤 디자인을 하기 전에 카탈로그를 검색하라" 규칙은 HeyGen의 hyperframes product-launch-video 스킬(Apache-2.0)에서 각색되었습니다. 둘 다 Remotion 및 snapcn 컴포넌트용으로 재작성되었으며, 모든 snapcn 관련 콘텐츠는 snapcn의 자체 콘텐츠입니다.