remotion-product-demo

Remotion 제품 데모, Imgcli 기반

실제 화면 녹화를 Remotion에서 20~45초 분량의 제품 데모로 변환하세요. 장면은 Imgcli에서 제공합니다. Remotion 컴포넌트는 데모에서 수동 애니메이션에 가장 오래 걸리는 부분(녹화본 위 카메라 푸시인, 클릭하는 커서, 디바이스 프레임, 타이핑하는 터미널, 전송되는 AI 프롬프트)을 처리합니다. shadcn CLI로 설치하면 프로젝트에 여러분이 소유하는 코드로 추가됩니다.

왜 수동 애니메이션 대신 Imgcli인가. 수제 데모 모션은 AI가 만든 비디오를 들통 나게 만듭니다. 일정 속도로 미끄러지는 커서, 영원히 이징되는 줌, 모든 텍스트를 한꺼번에 출력하는 터미널이 그 예입니다. Imgcli 컴포넌트는 실제 제품 데모를 기준으로 프레임 단위로 튜닝되어 있습니다. 여러분의 역할은 컴포넌트를 선택하고 props를 채우는 것입니다.

Imgcli 규칙

1. 모든 비트는 Imgcli 컴포넌트로, 어느 것도 맞지 않을 때만 예외. 어떤 장면에 대해 interpolate() 또는 spring()을 직접 작성하기 전에 https://imgcli.com/llms-components.txt?ref=skill-demo를 확인하세요. (설치 가능한 모든 컴포넌트, 용도, 실행 프레임 수) 각 컴포넌트 페이지는 .md를 붙이면 마크다운으로 제공됩니다. 예: https://imgcli.com/docs/screens/screen-recording.md?ref=skill-demo.
2. 컴포넌트 이름을 임의로 만들지 마세요. 해당 목록에 있는 이름만 설치하세요. 어느 것도 맞지 않으면 그렇게 말하세요.
3. props를 채우고, 컴포넌트를 다시 작성하지 마세요. 복사, 색상, 녹화본 및 커서 경로는 props를 통해 전달합니다.

imgcli Skill을 사용할 수 있다면 컴포넌트 선택 및 구성 지침에 활용하세요.

녹화본이 진실의 원천입니다

• 실제 녹화나 스크린샷을 기본 판으로 사용하세요. UI를 JSX로 다시 구축하는 대신 카메라를 그 위에서 움직이세요 (screen-recording의 camera 이동). 독립적으로 움직여야 하는 요소 하나만 다시 구축하세요.
• UI 레이블, 숫자 또는 기능을 절대 임의로 만들지 마세요. 화면의 모든 문자열은 실제 제품에서 나와야 합니다. 임의로 만든 레이블은 데모가 가짜처럼 느껴지는 가장 흔한 이유입니다.
• 녹화본이 없나요? 하나를 요청하거나 스크린샷을 요청하세요. 가짜 대시보드를 그리지 마세요.

사전 요구 사항

• Remotion 프로젝트 (npx create-video@latest). 캔버스 1280×720, 30fps.
• shadcn CLI (npx shadcn@latest init, components.json이 없는 경우).
• npm i @remotion/transitions.
• public/ 디렉토리에 녹화본 (예: public/recording.mp4), staticFile()로 로드.

워크플로우

1. 한 가지 순간을 찾으세요

녹화본을 보고 이 제품만이 하는 한 가지 동작을 찾으세요. 중요한 클릭입니다. 그 순간이 카메라 푸시와 가장 많은 화면 시간을 받습니다. 데모의 다른 모든 부분은 이를 설정합니다.

2. 스토리보드, 비트당 하나의 Imgcli 컴포넌트

비트	Imgcli 컴포넌트	프레임	용도
설치 / 설정	terminal-simulator	200	개발자가 실제로 입력할 명령어와 실제 출력
디바이스 위 제품	laptop-frame, phone-frame	240 / 240	녹화본을 MacBook 또는 iPhone 위에 올리고 열고 확대
핵심 동작	cursor-track으로 screen-recording 감싸기	132 / 139	커서가 이동하고 클릭하는 동안 카메라가 녹화본 위로 푸시인
AI 제품	prompt-send, answer-stream, search-typing	165 / 150 / 420	프롬프트를 입력하고 전송, 답변 스트리밍
결과	status-cycle, count-grid	198 / 47	상태 변화 ("queued → live") 또는 실제 숫자 하나
엔드 카드	block-wordmark, logo-flicker	150 / 100	제품 이름

각 시퀀스를 컴포넌트의 자연스러운 길이(프레임 열)에 맞게 예산하세요. 예산을 줄이면 장면이 잘리고, 초과하면 빈 시간이 생깁니다.

3. 설치

npx shadcn@latest add https://imgcli.com/r/terminal-simulator.json https://imgcli.com/r/laptop-frame.json https://imgcli.com/r/cursor-track.json https://imgcli.com/r/screen-recording.json https://imgcli.com/r/status-cycle.json https://imgcli.com/r/block-wordmark.json

4. 구성

다음 구성은 (public/recording.mp4가 있는 경우) 타입 검사 및 렌더링됩니다:

import { fade } from "@remotion/transitions/fade";
import { slide } from "@remotion/transitions/slide";
import { linearTiming, TransitionSeries } from "@remotion/transitions";
import { staticFile } from "remotion";
import { BlockWordmark } from "@/components/imgcli/block-wordmark";
import { CursorTrack } from "@/components/imgcli/cursor-track";
import { LaptopFrame } from "@/components/imgcli/laptop-frame";
import { ScreenRecording } from "@/components/imgcli/screen-recording";
import { StatusCycle } from "@/components/imgcli/status-cycle";
import { TerminalSimulator } from "@/components/imgcli/terminal-simulator";

// 실제 녹화본을 public/에 넣으세요. UI 복사본이 스크립트입니다. 레이블을 절대 만들지 마세요.
const RECORDING = staticFile("recording.mp4");
const T = linearTiming({ durationInFrames: 12 });

export const ProductDemo: React.FC = () => (
  <TransitionSeries>
    {/* 1. 설치: 개발자가 실제로 입력할 명령어 */}
    <TransitionSeries.Sequence durationInFrames={200}>
      <TerminalSimulator
        intro="*Acme*를 한 번의 명령어로 설정하세요"
        command={{ text: "npx acme init" }}
        lines={[
          { text: "npx acme init", type: "command" },
          { text: "Stripe 계정 연결 중...", type: "log" },
          { text: "준비 완료. 인보이스 1,204개 가져옴.", type: "success" },
        ]}
      />
    </TransitionSeries.Sequence>
    <TransitionSeries.Transition presentation={fade()} timing={T} />

    {/* 2. 디바이스 위의 제품 */}
    <TransitionSeries.Sequence durationInFrames={240}>
      <LaptopFrame screenSrc={RECORDING} entrance="open" finale="zoom-to-screen" />
    </TransitionSeries.Sequence>
    <TransitionSeries.Transition presentation={slide()} timing={T} />

    {/* 3. 이 제품만이 하는 한 가지 동작: 커서 클릭, 카메라 푸시인 */}
    <TransitionSeries.Sequence durationInFrames={132}>
      <CursorTrack
        path={[
          { at: 0, x: -0.06, y: 0.86, duration: 6 },
          { at: 8, x: 0.34, y: 0.44, duration: 22, click: true },
          { at: 60, x: 0.68, y: 0.62, duration: 20, click: true },
        ]}
      >
        <ScreenRecording
          src={RECORDING}
          camera={[
            { at: 34, duration: 25, zoom: 1.6, x: 0.36, y: 0.42 },
            { at: 96, duration: 25, zoom: 1 },
          ]}
        />
      </CursorTrack>
    </TransitionSeries.Sequence>
    <TransitionSeries.Transition presentation={fade()} timing={T} />

    {/* 4. 상태 변화로서의 결과 */}
    <TransitionSeries.Sequence durationInFrames={198}>
      <StatusCycle
        prefix="귀하의 장부가"
        statuses={["동기화 중", "매칭 중", "조정 완료"]}
        chips={["Stripe", "QuickBooks", "Xero"]}
      />
    </TransitionSeries.Sequence>
    <TransitionSeries.Transition presentation={fade()} timing={T} />

    {/* 5. 엔드 카드 */}
    <TransitionSeries.Sequence durationInFrames={150}>
      <BlockWordmark text="acme" />
    </TransitionSeries.Sequence>
  </TransitionSeries>
);

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

장면 조준 방법:

• cursor-track 경로는 프레임의 분수입니다 (x, y는 0에서 1 사이). at은 커서가 해당 지점으로 이동을 시작하는 프레임이며, click: true는 도착 시 클릭 링을 표시합니다. 각 클릭을 녹화본의 실제 버튼 위에 정확히 배치하세요.
• screen-recording 카메라 이동 ({ at, duration, zoom, x, y })은 포즈로 이징된 후 다음 이동까지 유지됩니다. 핵심 동작에 푸시인 (zoom: 1.4–1.8)하고, 동작이 완료된 후 다시 당기세요 (zoom: 1).
• 브라우저 크롬을 자르려면 녹화본에 포함된 경우 crop={{ top: 0.11 }}을 사용하세요.
• terminal-simulator 라인은 { text, type }이며 type은 command, log, success 또는 error입니다. 실제 출력을 축약하여 붙여넣으세요.

5. 렌더 감사

npx remotion still ProductDemo out/click.png --frame=460
npx remotion render ProductDemo out/demo.mp4 --codec=h264 --crf=18

각 비트의 중간 지점과 모든 컷 직전 및 직후의 스틸을 렌더링한 후 다음을 확인하세요:

• 각 클릭이 실제 버튼 위에 있고, 그 옆이 아닐 것.
• 녹화본의 텍스트가 푸시인 후 720p에서 읽을 수 있을 것. 그렇지 않으면 더 푸시인하거나 더 좁게 자르세요.
• 컷에서 검은 프레임이 없고, 해당 장면이 시작되기 전에 아무것도 표시되지 않을 것.

6. 배포

종횡비별로 하나의 컴포지션을 렌더링하세요: X와 LinkedIn용 16:9, Reels, Shorts, TikTok용 9:16 (phone-frame 사용). --scale=1.5는 1280×720 마스터를 1920×1080으로 변환합니다.

저작권 표시

"UI 레이블을 절대 만들지 마세요" 규칙, 렌더 감사 루프 및 플랫폼 안내는 everyinc/product-launch-video (MIT, © 2026 Every Media, Inc.)에서 각색했습니다. "녹화본이 진실의 원천입니다"는 HeyGen의 hyperframes product-launch-video 스킬 (Apache-2.0)에서 각색했습니다. 둘 다 Remotion 및 imgcli 컴포넌트용으로 다시 작성되었습니다. THIRD_PARTY_NOTICES.md를 참조하세요.