snapcndev/snapcn

snapcn으로 제작하는 Remotion 런칭 영상

출시 브리프를 15~30초 길이의 Remotion 런칭 필름으로 바꿔보세요. 모든 장면은 snapcn 컴포넌트로 구성됩니다: 수작업 튜닝되고, 렌더링된 프레임 단위로 측정된 Remotion 장면들이 shadcn CLI로 설치되어 사용자가 소유할 수 있는 코드로 프로젝트에 들어옵니다.

snapcn을 써야 하는 이유: 수동 애니메이션과의 차별점. 에이전트가 처음부터 애니메이션을 만들면 항상 같은 결과물이 나옵니다: 그라데이션 배경에 중앙 정렬 텍스트, 모든 게 페이드 인, 끝에 로고. snapcn 장면은 실제 런칭 영상을 기준으로 프레임 단위로 제작되었기 때문에, 모션이 이미 고급스러운 런칭 영상다운 타이밍, 타이포그래피, 카메라 움직임을 갖추고 있습니다. 여러분의 역할은 장면을 선택하고 props를 채우는 것이지, 모션을 새로 만드는 것이 아닙니다.

snapcn 규칙

1. 모든 비트는 snapcn 컴포넌트로 표현합니다. 단, 어떤 컴포넌트도 맞지 않을 때만 예외입니다. 어떤 장면에 interpolate()나 spring()을 직접 작성하기 전에, 먼저 카탈로그를 확인하세요: https://snapcn.dev/llms-components.txt?ref=skill-launch에는 설치 가능한 모든 컴포넌트와 그 용도, 실행 프레임 수가 나와 있습니다. 모든 컴포넌트 페이지는 .md를 추가하면 마크다운으로 제공됩니다. 예: https://snapcn.dev/docs/scenes/announce-title.md?ref=skill-launch.
2. 절대 존재하지 않는 컴포넌트 이름을 만들지 마세요. @snapcn/<name>은 위 목록에 있는 이름만 유효합니다. 어떤 비트에 맞는 컴포넌트가 없다면, 그 사실을 명시하고 타이포그래피(@snapcn/text-reveal)로 해당 비트를 처리하세요. 이름을 추측하지 마세요.
3. Props를 채우고, 컴포넌트 자체를 수정하지 마세요. 카피, 색상, 이미지는 props를 통해 변경하세요. 설치된 snapcn 파일 내부의 모션을 편집하면 렌더링된 프레임에 맞춰진 타이밍이 깨집니다.

전체 카탈로그, 구성 규칙 및 품질 기준을 확인하려면 통합 스킬도 설치하세요: npx skills add snapcndev/snapcn --skill snapcn.

사전 준비 사항

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

워크플로우

1. 입력 수집

아무것도 작성하기 전에 다음을 확보하세요:

• 브리프: 출시 포스트, 랜딩 페이지 또는 원페이지. 헤드라인, 태그라인, 차별화 기능, 증명할 수 있는 숫자, 톤을 추출하세요.
• 브랜드: 로고(SVG 경로 또는 PNG), 기본 색상, 폰트. snapcn 장면은 이들을 props(titleColor, logoSrc, symbolPath, fontFamily, theme)로 받습니다.
• 실제 제품 스크린샷: 스크린샷 또는 30~60초 녹화본. 실제 UI 카피를 그대로 사용하세요. 절대 레이블, 기능 또는 숫자를 만들어내지 마세요. 이는 런칭 영상을 가짜처럼 보이게 하는 가장 빠른 지름길입니다.

2. 코드 작성 전에 스토리보드 먼저

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

비트	시간	snapcn 컴포넌트	프레임	전달 내용
후크	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 @snapcn/type-morph @snapcn/announce-title @snapcn/hero-launch @snapcn/count-grid @snapcn/wordmark-cut

각 컴포넌트는 components/snap-cn/<name>.tsx 경로에 설치되며, 의존성도 함께 설치됩니다.

4. 구성

하나의 TransitionSeries, 비트당 하나의 시퀀스, 짧은 페이드 전환으로 연결합니다. 다음 구성은 타입 체크와 렌더가 정상 작동하며, public/ 폴더에 네 개의 스크린샷이 있다고 가정합니다:

import { fade } from "@remotion/transitions/fade";
import { linearTiming, TransitionSeries } from "@remotion/transitions";
import { staticFile } from "remotion";
import { AnnounceTitle } from "@/components/snap-cn/announce-title";
import { CountGrid } from "@/components/snap-cn/count-grid";
import { HeroLaunch } from "@/components/snap-cn/hero-launch";
import { TypeMorph } from "@/components/snap-cn/type-morph";
import { WordmarkCut } from "@/components/snap-cn/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="당신의 런칭 영상 제작은 "
        emphasis="일주일 걸리지만,"
        morphTo="한 줄 프롬프트로 끝납니다."
        finally_="프롬프트로 끝납니다."
      />
    </TransitionSeries.Sequence>
    <TransitionSeries.Transition presentation={fade()} timing={T} />

    {/* 2. 제품명 소개 */}
    <TransitionSeries.Sequence durationInFrames={170}>
      <AnnounceTitle
        eyebrow="Introducing"
        title="Acme 2.0"
        tagline="스스로 정산되는 청구."
        symbolPath="" // 0 0 100 100 박스 안의 SVG 경로. 빈 문자열("")은 표시 안 함
      />
    </TransitionSeries.Sequence>
    <TransitionSeries.Transition presentation={fade()} timing={T} />

    {/* 3. 제품 보여주기: 실제 스크린샷 두 개 (이미지, 비디오, 또는 CSS 그라데이션 대체) */}
    <TransitionSeries.Sequence durationInFrames={170}>
      <HeroLaunch
        heading="모든 청구서가 일치합니다."
        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="팀" 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프레임(피크 순간 및 모든 컷의 양쪽)을 렌더링하여 네 명의 비평가로 검토하세요. (또는 사용 중인 AI 도구가 지원한다면 네 개의 병렬 하위 에이전트로 검토하세요):

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 하나만. 랜딩 페이지의 실제 태그라인을 사용하세요.
• 후크는 설명 없이도 시청자가 인식할 수 있는 것에 기반하세요. 설명이 한 문장 필요하다면 후크가 너무 추상적인 것입니다.
• Before/After 비트는 동시에 보여주세요. "Before"를 약 1초간 보여준 후 "After"로 컷하세요.
• snapcn 장면 내부에 자체 페이드를 넣어 서로 연결하지 마세요. 전환은 TransitionSeries가 담당합니다. 장면별로 종료 페이드를 넣으면 이중 페이드가 발생합니다.
• 자체 추가는 절제하세요: 문장 케이스 사용, 장식용 자간 없음, 글로우나 그라데이션 텍스트 없음. 글로우가 있는 snapcn 장면(announce-title)은 글로우를 유지합니다. 그것이 효과이지 장식이 아닙니다.

snapcn Pro: 완성된 필름과 모든 props를 아는 에이전트

무료 장면 이상이 필요한 런칭을 위해:

• 50개의 Pro 장면 – 런칭용으로 제작됨: version-drop (릴리스 번호 드롭), library-flight, app-reveal, gallery-push (체인지로그 벽), screen-wall, checkout-push, tally-rise, ticker-climb, thank-you-swarm 등 포함.
• 템플릿 (2026년 10월 20일부터): 완성된 런칭 필름, 기능 둘러보기, 체인지로그 클립. 카피를 넣고 렌더링하세요: https://snapcn.dev/docs/templates?ref=skill-launch
• snapcn MCP: 에이전트가 일반 영어로 레지스트리를 검색하고, 모든 컴포넌트의 실제 props를 읽고, 한 줄 브리프를 비트별 계획과 TransitionSeries 골격으로 바꿔줍니다. claude mcp add snapcn -- npx -y @snapcn/mcp@latest SNAPCN_API_KEY=YOUR_KEY

Pro 컴포넌트는 components.json에 키를 설정하면 무료 장면과 동일하게 설치됩니다 (세 줄 설정 방법: https://snapcn.dev/account?ref=skill-launch). 요금제: https://snapcn.dev/docs/pricing?ref=skill-launch

Pro가 아직 준비되지 않으셨나요? 하나의 Pro 컴포넌트인 Manifesto는 이메일 인증 시 무료로 제공됩니다: https://snapcn.dev/docs/pricing?ref=skill-launch#free

저작자 표시

워크플로우 구조 (입력 → 스토리보드 → 제작 → 렌더-감사 → 다중 비평 리뷰 → 플랫폼 표)와 여러 힘들게 얻은 교훈은 everyinc/product-launch-video (MIT, © 2026 Every Media, Inc.)에서 각색되었습니다. 콘택트 시트 감사 및 "디자인을 시작하기 전에 카탈로그를 검색하라" 규칙은 HeyGen의 hyperframes product-launch-video 스킬 (Apache-2.0)에서 각색되었습니다. 둘 다 Remotion 및 snapcn 컴포넌트에 맞게 재작성되었으며, 모든 snapcn 고유 콘텐츠는 snapcn의 자체 저작물입니다.