snapcndev/snapcn

Remotion 제품 데모, snapcn으로 제작하세요

실제 화면 녹화를 20~45초 길이의 Remotion 제품 데모로 바꾸세요. 모든 장면은 snapcn에서 가져옵니다: 수동으로 애니메이션을 만드는 데 가장 오래 걸리는 데모 부분(녹화본 위의 카메라 줌인, 클릭하는 커서, 디바이스 프레임, 타이핑하는 터미널, 전송되는 AI 프롬프트)을 위한 Remotion 컴포넌트입니다. shadcn CLI로 설치하며, 코드는 여러분이 소유하는 형태로 프로젝트에 추가됩니다.

왜 snapcn인가? 수동 애니메이션은 아닙니다. 수제 데모 모션은 AI 제작 비디오에서 쉽게 드러납니다: 일정한 속도로 미끄러지는 커서, 영원히 easing되는 줌, 모든 것을 한 번에 출력하는 터미널. snapcn 컴포넌트는 실제 제품 데모를 기반으로 프레임 단위로 조정되었습니다. 여러분의 역할은 컴포넌트를 선택하고 props를 채우는 것입니다.

snapcn 규칙

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

전체 카탈로그와 구성 규칙을 보려면 umbrella 스킬도 설치하세요: npx skills add snapcndev/snapcn --skill snapcn.

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

• 실제 녹화본이나 스크린샷을 베이스 이미지로 사용하세요. 카메라를 그 위에서 애니메이션(screen-recording의 camera 이동)하고, UI를 JSX로 다시 만들지 마세요. 독립적으로 움직여야 하는 요소가 있을 때만 하나의 요소를 재구성하세요.
• 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. 스토리보드, 비트(beat)당 하나의 snapcn 컴포넌트

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

각 시퀀스는 컴포넌트의 자연스러운 길이(프레임 열)에 맞춰 예산을 배정하세요. 예산이 부족하면 장면이 잘리고, 넘치면 정적 구간이 생깁니다.

3. 설치

npx shadcn@latest add @snapcn/terminal-simulator @snapcn/laptop-frame @snapcn/cursor-track @snapcn/screen-recording @snapcn/status-cycle @snapcn/block-wordmark

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/snap-cn/block-wordmark";
import { CursorTrack } from "@/components/snap-cn/cursor-track";
import { LaptopFrame } from "@/components/snap-cn/laptop-frame";
import { ScreenRecording } from "@/components/snap-cn/screen-recording";
import { StatusCycle } from "@/components/snap-cn/status-cycle";
import { TerminalSimulator } from "@/components/snap-cn/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 })은 자세로 easing되고 다음 이동까지 유지됩니다. 핵심 액션에서 줌인(zoom: 1.4–1.8)하고, 액션 완료 후 줌아웃(zoom: 1)합니다.
• 브라우저 크롬 자르기는 녹화본에 포함된 경우 crop={{ top: 0.11 }}를 사용하세요.
• terminal-simulator 라인은 { text, type }이며 type은 command, log, success 또는 error입니다. 실제 출력을 붙여넣고, 필요시 짧게 만드세요.

5. 렌더링 감사(Audit)

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으로 변환합니다.

snapcn Pro: 가장 많이 요청되는 데모 장면

• 데모용 Pro 장면 50개: tap-through (CTA 위의 폰 탭), checkout-push (결제 진행), prompt-dive (프롬프트 전송 후 전송 버튼 확대), build-out (전송 버튼에서 앱 구축), vault-count (잔액 증가), screen-wall (폰 터널) 등.
• snapcn MCP: 에이전트가 일반 영어로 레지스트리를 검색하고, 실제 props를 읽으며, 한 줄 요약에서 전체 데모를 계획합니다. claude mcp add snapcn -- npx -y @snapcn/mcp@latest SNAPCN_API_KEY=YOUR_KEY

Pro 컴포넌트는 components.json에 키가 설정되면 무료 컴포넌트처럼 설치됩니다 (세 줄은 https://snapcn.dev/account?ref=skill-demo 참조). 요금제: https://snapcn.dev/docs/pricing?ref=skill-demo

Pro를 사용할 준비가 안 되셨나요? 하나의 Pro 컴포넌트인 Manifesto는 이메일 인증 시 무료입니다: https://snapcn.dev/docs/pricing?ref=skill-demo#free

저작권 표시

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