snapcn으로 제작하는 Remotion 설명 영상

Remotion 기반의 내레이션 설명 영상: 음성 해설이 타이밍을 이끌고, 자막이 내장되며, 화면의 모든 비트는 snapcn 장면입니다. snapcn 장면은 shadcn CLI로 설치되며, 사용자가 소유하는 코드로 프로젝트에 포함됩니다.

왜 snapcn인가, 수동 슬라이드 대신. 처음부터 제작하는 내레이션 영상은 종종 그라데이션 배경에 페이드 인되는 글머리 기호에 그칩니다. snapcn은 각 비트에 실제 장면을 제공합니다: 강력하게 컷팅되는 문장, 상태가 변하는 상태 표시기, 숫자가 스케일링되는 카운터, 기기 위의 제품.

snapcn 규칙

모든 비트는 snapcn 컴포넌트를 사용하며, 적합한 컴포넌트가 없을 때만 예외로 합니다. 카탈로그 길이: https://snapcn.dev/llms-components.txt?ref=skill-explainer; 모든 페이지는 마크다운으로 제공됩니다 (예: https://snapcn.dev/docs/captions/word-captions.md?ref=skill-explainer).
컴포넌트 이름을 임의로 만들지 마십시오. 목록에 있는 이름만 설치 가능합니다.
모든 텍스트 prop을 설정합니다. 장면에는 샘플 카피가 포함되어 있지만, 그대로 두면 영상에 남아 있습니다.

전체 카탈로그를 확인하려면 포괄 스킬도 설치하십시오: npx skills add snapcndev/snapcn --skill snapcn

작업 흐름

1. 스크립트 우선

코드보다 먼저 음성 해설을 작성하십시오. 각 비트당 한 문장씩입니다. 약 150단어가 1분 정도입니다.

비트	내용	snapcn 장면	프레임 수
후크	시청자의 관점에서 본 문제	`punch-lines`, `type-morph`	144 / 94
작동 방식	2~3단계 또는 상태	`status-cycle`, `word-flip`, `card-rail`	198 / 180 / 108
시연	작동 중인 제품	`laptop-frame`, `phone-frame`, `screen-recording`	240 / 240 / 139
증거	실제 숫자 하나	`count-grid`	47
마무리	이름	`wordmark-cut`, `block-wordmark`	66 / 150

2. 음성 해설 및 단어 타이밍

음성 해설을 녹음하거나 생성합니다. public/voiceover.mp3에 넣습니다.
단어 수준의 타이밍을 { text, startMs, endMs }[] 형식으로 얻습니다. 이는 @remotion/captions 형식이며, Whisper (@remotion/install-whisper-cpp) 또는 TTS 제공업체에서 얻을 수 있습니다.
음성 해설이 길이를 결정합니다. 각 비트의 시퀀스를 해당 문장의 길이에 맞게 늘리되, 장면의 기본 길이(프레임 수 열)보다 짧게 하지 마십시오.

3. 자막

word-captions: 트랜스크립트를 페이지별로 넘기는 내장 자막입니다. captions를 전달합니다. 스타일은 preset으로 지정하며, 세로 영상의 경우 aspect="9:16"를 사용합니다.
karaoke-captions: 한 줄씩 단어가 채워지는 자막으로, 강조된 인용문에 사용합니다.
자막은 모든 장면 위에 위치하며, 뒤에 있는 장면에 대해 투명하게 표시됩니다.

4. 빌드

npx shadcn@latest add @snapcn/punch-lines @snapcn/status-cycle @snapcn/count-grid @snapcn/wordmark-cut @snapcn/word-captions

약 15초 길이의 설명 영상: 문제 → 작동 방식 → 증거 → 이름, 내레이션 및 자막 포함. public/voiceover.mp3와 네 개의 스크린샷이 있으면 타입 검사 및 렌더링이 정상 작동합니다:

import { AbsoluteFill, Audio, Series, staticFile } from "remotion";
import { CountGrid } from "@/components/snap-cn/count-grid";
import { PunchLines } from "@/components/snap-cn/punch-lines";
import { StatusCycle } from "@/components/snap-cn/status-cycle";
import { WordCaptions } from "@/components/snap-cn/word-captions";
import { WordmarkCut } from "@/components/snap-cn/wordmark-cut";

// Whisper(또는 @remotion/captions)에서 얻은 단어 수준 타이밍: { text, startMs, endMs }[].
const captions = [
  { text: "Closing", startMs: 0, endMs: 400 },
  { text: "the", startMs: 400, endMs: 550 },
  { text: "books", startMs: 550, endMs: 1000 },
  { text: "takes", startMs: 1000, endMs: 1350 },
  { text: "a", startMs: 1350, endMs: 1450 },
  { text: "week.", startMs: 1450, endMs: 2100 },
];

// 실제 제품 스크린샷은 public/에 있습니다. 없으면 snapcn 샘플 이미지로 폴백됩니다.
const shots = ["shot-1.jpg", "shot-2.jpg", "shot-3.jpg", "shot-4.jpg"].map((f) => staticFile(f));

// 약 15초 설명 영상: 문제 → 작동 방식 → 결과 → 이름, 내레이션 및 자막 내장.
export const Explainer: React.FC = () => (
  <AbsoluteFill>
    <Series>
      <Series.Sequence durationInFrames={144}>
        <PunchLines script="Closing the books / takes a week. | Acme / does it overnight." />
      </Series.Sequence>
      <Series.Sequence durationInFrames={198}>
        <StatusCycle
          prefix="Every invoice gets"
          statuses={["imported", "matched", "reconciled"]}
          chips={["Stripe", "QuickBooks", "Xero"]}
        />
      </Series.Sequence>
      <Series.Sequence durationInFrames={60}>
        <CountGrid from="5" to="500" noun="teams" cards={shots} />
      </Series.Sequence>
      <Series.Sequence durationInFrames={66}>
        <WordmarkCut word="acme." />
      </Series.Sequence>
    </Series>
    <WordCaptions captions={captions} />
    <Audio src={staticFile("voiceover.mp3")} />
  </AbsoluteFill>
);

durationInFrames={468}, fps={30}, width={1280}, height={720}으로 등록합니다. 실제 설명 영상에서는 각 시퀀스의 길이를 해당 문장의 타이밍에서 유도하고, 전체 길이는 음성 해설의 길이로 설정하십시오.

5. 확인 및 렌더링

npx remotion still Explainer out/beat.png --frame=250
npx remotion render Explainer out/explainer.mp4 --codec=h264 --crf=18

각 장면은 해당 문장이 발화되는 동안 화면에 표시됩니다. 소리와 함께 한 번 시청하십시오.
자막이 장면 자체의 제목을 가리지 않아야 합니다. 가린다면 장면의 카피를 이동하거나 더 짧은 자막 페이지(maxWords)를 사용하십시오.
화면의 모든 문자열은 스크립트에서 비롯되어야 하며, 기본값에서 남은 샘플 카피가 없어야 합니다.

규칙

말한 다음, 보여주십시오. 장면은 음성이 방금 말한 내용을 보여주며, 동시에 다른 텍스트를 읽게 해서는 안 됩니다.
비트당 하나의 아이디어, 각각 약 5~8초.
자막을 내장하십시오. 대부분의 시청자는 음소거 상태로 시작합니다.
실제 숫자만 사용하십시오. 증거 비트에 지표를 임의로 만들지 마십시오.

snapcn Pro

Pro는 설명 영상 비트(예: orbit-flow(세 개의 라벨이 있는 정류장으로 작동 방식 표시), proof-line, hex-tally, metric-morph(숫자가 표시됨), read-through)와 템플릿, 스크립트에서 비트를 계획하는 snapcn MCP를 추가합니다: claude mcp add snapcn -- npx -y @snapcn/mcp@latest SNAPCN_API_KEY=YOUR_KEY. Pro 컴포넌트는 components.json이 키를 보내면 무료 컴포넌트처럼 설치됩니다 (https://snapcn.dev/account?ref=skill-explainer). 요금제: https://snapcn.dev/docs/pricing?ref=skill-explainer

Pro가 아직 준비되지 않으셨나요? 하나의 Pro 컴포넌트인 Manifesto는 확인된 이메일에 대해 무료입니다: https://snapcn.dev/docs/pricing?ref=skill-explainer#free

snapcndev/snapcn

snapcn란 무엇인가요?

즐겨 사용하는 AI에게 물어보기

문서