Communitygithub.com

product-launch-video-skill

디자인하고 제작하는 고품질 제품 출시 동영상(Remotion/React 기반) — 제품 출시, 프로모션, 데모, 기능 발표, 브랜드 론칭 등에 사용하세요.

product-launch-video-skill란 무엇인가요?

이 스킬은 제품 출시 영상을 시네마틱하고 고임팩트하게 제작하기 위한 종합 가이드입니다. Remotion(React)을 기반으로 하여, 사용자가 제공한 로고, 스크린샷, 브랜드 컬러 등의 에셋을 활용해 스토리보드 작성부터 실제 코드 구현까지 전 과정을 지원합니다. 핵심 철학은 '의도성', '감각 전이', '대비의 숙련'이며, 제품의 정체성에 맞춰 시각적 방향(미학)을 2~3가지 제안하고 사용자가 선택할 수 있도록 합니다. 모든 결정은 사용자의 답변(9가지 질문)을 기반으로 이루어지며, 스토리보드는 JSON 형식으로 저장되어 단일 진실 공급원(single source of truth) 역할을 합니다. AI 요약은 기술적인 디테일과 창의적인 비전을 균형 있게 담아, 개발자와 크리에이터 모두가 바로 활용할 수 있도록 설명합니다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/memex-lab/product-launch-video-skill/tree/HEAD/skills/product-launch-video

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

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

제품 출시 동영상

사용자가 제품을 만지기 전에 그 제품을 느낄 수 있도록 하는 영화적이고 고임팩트한 제품 출시 동영상을 디자인하고 제작합니다.

이 스킬은 하나의 미학에 고정되지 않습니다. 시각적 스타일은 제품의 DNA에 맞춰 조정됩니다. 중요한 것은 어떤 방향을 선택하든 그 실행이 움직임, 조명, 구성, 시각적 스토리텔링에서 절대적인 최고 수준을 반영해야 한다는 점입니다.

핵심 철학

세 가지 원칙이 모든 결정을 지배합니다:

의도성 vs 장식. 모든 시각적 요소, 움직임, 광원은 목적이 있어야 합니다. 미니멀하든 맥시멀하든, 단순히 공간을 채우기 위해 존재하는 것은 없습니다. 모든 것이 서사를 진행하고, 기능을 강조하거나, 특정 감정을 불러일으킵니다.

감각 전이. 훌륭한 출시 동영상은 시청자가 제품을 느끼게 만듭니다. 추상적인 개념(속도, 보안, 편안함)과 물리적 특성(무게, 질감, 반응성)을 시각적 및 청각적 경험으로 변환하세요. 제품이 빠르다면 시청자는 속도를 느껴야 합니다. 고급스럽다면 시청자는 모든 프레임에서 세련미를 느껴야 합니다.

대비의 숙련. 훌륭한 비디오는 병치에서 비롯됩니다. 규모(매크로 디테일 vs. 광대한 와이드 샷), 페이싱(광란의 에너지 vs. 슬로우 모션 리빌), 조명(그림자 vs. 하이라이트), 오디오(침묵 vs. 무거운 비트)의 대비를 사용하여 주의를 사로잡는 역동적인 긴장감을 만드세요.

사용 시기

  • 제품 출시 또는 발표 동영상 제작
  • 시네마틱한 품질의 데모 또는 기능 소개 구축
  • 브랜드 런칭 또는 티저 트레일러 제작
  • 모션 그래픽을 사용한 애니메이션 제품 쇼케이스 제작
  • 모든 제품에 대한 비디오 구조 스토리보드 및 계획
  • 제품 비주얼, 사진 또는 컨셉을 비디오 내러티브로 전환

0단계: 제품 이해

시각적 작업 전에, 선보일 제품을 깊이 이해하세요. 이것이 모든 것을 형성합니다.

사용자에게 (한 번에 모두 질문하고, 한 방울씩 묻지 마세요):

  1. 제품 — 제품은 무엇인가요? 무엇을 하나요? 어떤 문제를 해결하나요?
  2. 대상 — 누가 이 비디오를 보나요? 개발자? 소비자? 투자자? 내부 팀?
  3. 핵심 메시지 — 시청자가 본 후 기억해야 할 한 가지는 무엇인가요?
  4. 톤 — 시청자가 무엇을 느껴야 하나요? (인상적/흥분됨/차분함/영감 받음/권한 부여됨)
  5. 길이 — 얼마나 긴가요? (15초 티저 / 30초 스팟 / 45-60초 전체 출시 / 90초+ 딥 다이브)
  6. 에셋 — 로고, 제품 사진, 스크린샷, 녹화본, 브랜드 색상, 폰트가 있나요?
  7. 내레이션 — 비디오에 나레이션이 있어야 하나요? 그렇다면 어떤 언어인가요? 목소리 캐릭터(성별, 톤, 에너지 레벨)에 대한 선호도가 있나요?
  8. 레퍼런스 — 감탄하는 비디오가 있나요? (Apple 키노트 스타일, Nike 제품 필름, Stripe 개발자 미학, 장난기 있는 Notion 분위기, 럭셔리 시계 광고 등)
  9. 게시 컨텍스트 — 이 비디오는 어디에 게시되나요? (랜딩 페이지, X/Twitter, LinkedIn, YouTube, Shorts/Reels/TikTok, 투자자 데크, 내부 데모.) 종횡비, 자막, 페이싱이 이에 따라 달라집니다.

사용자가 대화에서 이미 컨텍스트를 제공했다면, 제공된 내용에서 답변을 추출하고 누락된 부분을 확인하세요.

게이트: 위의 9가지 질문에 대한 답변(사용자로부터 또는 컨텍스트에서 추론)을 얻을 때까지 1단계로 진행하지 마십시오. 에셋이 제공되면 감사하세요 — 사용 가능한 모든 에셋을 나열하고 각각이 서사를 강화하는 위치에 사용할 계획을 세우세요. 모든 에셋이 반드시 등장해야 하는 것은 아니지만, 이유 없이 무시되어서는 안 됩니다.


1단계: 미학 확립

이것이 가장 중요한 창의적 결정입니다. 미학은 로고가 바뀐 일반 템플릿이 아니라 이 특정 제품을 위해 디자인된 것처럼 느껴져야 합니다.

1.1단계: 시각적 방향 선택

제품의 성격과 사용자의 톤 선호도에 따라 2~3가지 뚜렷한 미학적 방향을 제안하세요. 각 방향에는 다음이 포함되어야 합니다:

  • 이름 — 짧고 암시적인 레이블 (예: "자정의 정밀함", "따뜻한 아날로그", "전기적 맥박")

  • 분위기 — 2-3문장의 감정적 분위기 설명

  • 컬러 팔레트 — 4-5가지 색상(16진수 코드 포함) 및 역할 (배경, 기본, 강조, 텍스트, 하이라이트)

  • 타이포그래피 — Google Fonts 또는 Fontshare의 디스플레이 + 본문 글꼴 페어링 (Inter, Roboto, Arial, 시스템 폰트 절대 사용 금지). 서체는 제품의 성격을 구현해야 합니다:

    • 우아한 세리프 (예: Playfair Display, Cormorant) → 럭셔리, 에디토리얼, 프리미엄
    • 굵은 그로테스크 산세리프 (예: Space Grotesk, Satoshi) → 테크, 대담함, 현대적
    • 기하학적 산세리프 (예: Plus Jakarta Sans, General Sans) → 깔끔함, 신뢰감, SaaS
    • 운동 또는 가변 글꼴 (예: Syne, Cabinet Grotesk) → 청년 문화, 창의적, 장난기
    • 모노스페이스 또는 코드 글꼴 (예: JetBrains Mono, Fira Code) → 개발자 도구, 터미널 미학

    글꼴은 시각화된 브랜드 보이스입니다. 제품 성격과 서체의 불일치는 다른 모든 디자인 결정을 약화시킵니다.

  • 모션 캐릭터 — 사물이 움직이는 방식 (스냅 스프링, 부드러운 글라이드, 탄성 바운스, 시네마틱 슬로우 리빌)

  • 시그니처 요소 — 이 비디오를 차별화하는 하나의 시각적 모티프 (그라데이션 메시 배경, 유리 모피즘 카드, 입자 필드, 기하학적 패턴, 빛줄기, 시네마틱 사진 처리, 설명 레이블이 있는 제품 클로즈업 등)

이것을 텍스트 벽이 아닌 간결한 카드로 제시하세요. 사용자가 하나를 선택하거나 요소를 혼합합니다.

나쁜 예 ("AI 슬롭" 체크리스트)

일반적인 AI 생성 비디오의 명백한 징후를 피하세요:

  • 어두운 배경에 보라색 그라데이션 (#1 클리셰)
  • 디스플레이 텍스트에 Inter/Roboto/시스템 폰트 사용
  • 모든 항목이 동일한 속도와 지연으로 진입하는 균일한 타이밍
  • 아이콘으로 사용된 이모지
  • 깊이감이나 그림자가 없는 평평하고 균일하게 조명된 장면
  • 동일한 애니메이션이 있는 판에 박은 듯한 카드 그리드
  • 콘텐츠와 공간적 관계 없이 그냥 "페이드 인"되는 텍스트
  • 단색인 배경

게이트: 사용자에게 2~3가지 미학적 방향을 제시하세요. 사용자가 방향을 선택하거나 확인할 때까지 2단계로 진행하지 마십시오. 사용자가 "그냥 해"라고 말하면 제품 성격에 가장 잘 맞는 방향을 선택하고 진행하기 전에 명시적으로 선택 사항을 명시하세요.


2단계: 스토리보드

스토리보드는 청사진입니다. 모든 장면은 존재 이유를 정당화해야 합니다.

필수: 코드를 작성하기 전에 전체 스토리보드를 작성하세요. 아래 정의된 스키마를 사용하여 프로젝트 루트 디렉토리에 storyboard.json으로 저장하세요. 이 섹션 끝에 있는 스토리보드 검토 체크리스트와 비교하여 확인하세요. 두 개의 연속적인 쇼케이스 장면은 동일한 레이아웃이나 애니메이션 패턴을 사용할 수 없습니다.

"무제한 시각적 예산" 규칙

스토리보드를 구상할 때 사용자가 제공한 원시 에셋에 상상력을 제한하지 마십시오.

  • 사용자가 제공한 2D 에셋(원시 스크린샷, 평평한 로고, 기본 사진)을 개념적 씨앗 또는 기본 텍스처로 취급하세요.
  • 내러티브 요구 사항을 평가하세요. 스토리가 더 풍부한 생태계를 구축하기 위해 추가적인 시각적 다양성, 보충 환경 또는 B-롤을 요구한다면 자연스럽게 스토리보드에 포함시키세요.
  • 그러나 새로운 생성 에셋은 제품의 내러티브와 시각적 계층을 적극적으로 제공하는 경우에만 도입하세요. 복잡성만을 위해 에셋을 생성하지 마십시오.

내러티브 아크

제품 출시 동영상은 짧은 영상이라도 극적인 구조를 따릅니다:

막목적일반적인 길이 (30초 비디오)
훅주목을 끕니다. 문제를 제기하고, 긴장을 보여주거나, 눈에 띄는 시각적 요소로 시작합니다.3-5초
리빌제품을 소개합니다. "히어로 순간"입니다.5-8초
쇼케이스2-4가지 주요 기능을 시연합니다. 각 기능은 고유한 시각적 박자를 갖습니다.12-18초
클라이맥스가장 인상적인 순간 — 전체 화면 데모, 극적인 통계 또는 "와우" 전환.3-5초
마무리로고, 태그라인, CTA. 지속적인 인상을 남깁니다.3-5초

더 짧은 비디오(15초)의 경우: 훅 → 리빌 → 마무리로 압축하세요. 더 긴 비디오(60초+)의 경우: 더 많은 기능 박자로 쇼케이스를 확장하고 마무리 전에 "사회적 증명" 또는 "비전" 박자를 추가하세요.

단 한 줄의 코드도 작성하기 전에 비디오 구조를 계획하세요. 스토리보드는 창의적 비전과 기술적 실행 간의 계약입니다.

게시 및 피드 규칙

  • 제품을 일찍 보여주세요. 출시, 데모 및 소셜 형식에서 시청자는 처음 3초 이내에 제품, 제품 인터페이스 또는 명백한 제품 아티팩트를 볼 수 있어야 합니다. 추상적인 훅은 즉시 제품으로 해소되는 경우에만 허용됩니다.
  • 음소거 재생을 위해 디자인하세요. 비디오가 피드에 나타날 수 있는 경우, 많은 시청자가 소리 없이 시청할 것이라고 가정하세요. 주요 주장, 장면 비트, 자막 및 CTA는 내레이션이 있더라도 화면에 표시되어야 합니다.

비디오 메타데이터

빌드하기 전에 다음 결정을 문서화하세요:

  • 길이, FPS, 해상도 — 0단계에서 파생
  • 게시 컨텍스트 — 0단계에서 파생. 비디오가 게시될 위치와 페이싱, 자막, 안전 영역 또는 결과물에 영향을 미치는 모든 제약 사항을 기록하세요.
  • 디스플레이 글꼴 + 본문 글꼴 — 1단계 미학 방향에서 (가중치 포함)
  • 컬러 팔레트 — 색상뿐만 아니라 역할을 정의하세요: 배경, 표면(돌출 요소), 기본(헤드라인), 음소거(보조 텍스트), 강조(CTA/하이라이트), 하이라이트(특별 순간). 각 역할은 명확한 사용 규칙을 가져야 합니다.

내러티브 구조

제품의 스토리에 가장 잘 맞는 구조를 선택하세요:

  • 문제 → 해결책 — 명확한 문제점을 해결하는 제품에 가장 적합합니다. 문제를 제기하여 긴장을 만들고, 해결책으로 제품을 공개하며, 기능을 보여주고, "와우" 순간으로 절정에 이르며 CTA로 마무리합니다.
  • 비전 → 현실 — 야심찬 제품이나 새로운 카테고리에 가장 적합합니다. 이상적인 미래를 그리고, 격차를 인정하며, 제품이 어떻게 이를 연결하는지 보여주고, 기능으로 증명하며 마무리합니다.
  • 몽타주 → 집중 — 기능이 풍부한 제품이나 주요 업데이트에 가장 적합합니다. 많은 기능의 빠른 몽타주, 잠시 멈춤, 2-3가지 주요 기능에 대한 심층 분석, 넓이를 위한 몽타주 복귀, 마무리.
  • 티저 (15초 이하) — 추상적인 비주얼로 호기심을 유발하고, 빠른 제품 미리보기를 플래시하며 로고 + 출시일을 공개합니다.

스토리보드 스키마

스토리보드는 프로젝트 루트에 storyboard.json으로 저장됩니다. 이것은 단일 진실 공급원입니다 — 구현, 내레이션 생성 및 타이밍을 주도합니다.

{
  "meta": {
    "title": "제품 이름 및 비디오 유형",
    "durationSec": "전체 비디오 길이(초)",
    "fps": 30,
    "width": 1920,
    "height": 1080,
    "narrativeStructure": "problem-solution | vision-reality | montage-focus | teaser",
    "fonts": {
      "display": { "family": "Google Fonts / Fontshare 글꼴군 이름", "weights": ["700"] },
      "body": { "family": "Google Fonts / Fontshare 글꼴군 이름", "weights": ["400", "500"] }
    },
    "colors": {
      "background": "#hex - 기본 배경",
      "surface": "#hex - 카드와 같은 돌출 요소",
      "primary": "#hex - 헤드라인 및 주요 텍스트",
      "muted": "#hex - 보조 텍스트 및 레이블",
      "accent": "#hex - CTA 및 하이라이트",
      "highlight": "#hex - 특별한 순간 및 강조"
    }
  },
  "voice": {
    "enabled": "비디오에 내레이션이 있으면 true, 음악만 있으면 false",
    "gender": "male | female | neutral",
    "age": "young adult | middle-aged | mature",
    "tone": ["AI 음성 검색을 위한 특성 배열: 자신감, 따뜻함, 활기참, 차분함, 권위적, 대화체, 영감을 주는"],
    "accent": "American | British | neutral | other",
    "pace": "fast | moderate | slow"
  },
  "scenes": [
    {
      "id": "고유한 케밥-케이스 장면 식별자",
      "act": "hook | reveal | showcase | climax | close",
      "startSec": "절대 시작 시간. 인접 장면은 전환을 위해 0.2-0.5초 중첩될 수 있음",
      "durationSec": "장면 길이. 내레이션이 있으면 ~2.5단어/초 속도로 내레이션에 맞아야 함",
      "purpose": "이 장면이 존재하는 이유, 전달하는 내용",
      "emotionalBeat": "시청자가 느껴야 하는 것",
      "voiceover": "정확한 내레이션 텍스트 또는 VO가 없으면 null. 내레이션은 타이밍 백본입니다. 시각적 요소는 핵심 단어와 동기화됩니다. 모든 장면에 VO가 필요한 것은 아닙니다",
      "layout": "요소의 공간적 배열 (위치 스케치 또는 설명)",
      "elements": "각 시각적 요소: 설명, 크기, 색상, 위치",
      "animation": "요소별: 효과 유형, 지연, 길이, 이징",
      "camera": "뷰포트 이동 (줌, 팬, 시차)",
      "lighting": "빛이 오는 곳, 밝은 곳, 그림자가 있는 곳",
      "transitionOut": "이 장면이 다음 장면으로 나가는 방법"
    }
  ]
}

스토리보드 설명은 매우 구체적이어야 합니다. "멋진 전환" 또는 "요소가 애니메이션으로 들어옴"과 같은 모호한 설명은 금지됩니다. 구현 중에 너무 많은 해석의 여지를 남겨 일반적인 출력을 초래합니다.

모든 요소의 움직임은 정확한 메커니즘으로 설명되어야 합니다. "제목이 나타납니다" 대신: "헤드라인이 30px 아래에서 스케일 0.9→1, 블러 8→0으로 0.5초 동안 스프링인되며, 대각선 빛줄기가 0.3초 지연 후 텍스트 표면을 왼쪽에서 오른쪽으로 휩쓸고 지나갑니다." "카드가 애니메이션으로 들어옴" 대신: "세 개의 기능 카드가 오른쪽에서 150ms 간격으로 계단식으로 나타나며, 각각 translateX(40)→0, 불투명도 0→1, 그리고 0°로 안정되는 미세한 3° 회전으로 진입합니다."

설명은 두 명의 다른 개발자가 거의 동일한 구현을 생성할 수 있을 만큼 구체적이어야 합니다. 설명이 완전히 다른 시각적 결과를 초래할 수 있다면 충분히 구체적이지 않은 것입니다.

타이밍 및 페이싱

페이싱 리듬. 잘 짜여진 비디오는 긴장과 이완을 번갈아 가며 사용합니다:

빠름 → 느림 → 빠름 → 느림 → 빠름 → 유지

훅     리빌    기능    숨고르기 클라이맥스 마무리
(긴장) (안도) (에너지) (멈춤)  (정점)   (해소)

출시 동영상이 할 수 있는 최악의 일은 전체적으로 단일 템포를 유지하는 것입니다. 단조로운 페이싱은 비주얼이 아무리 아름다워도 시청자를 잠들게 합니다.

길이 할당. 전체 길이에 따라 시간을 비례적으로 할당하세요. 정확한 초보다 비율이 더 중요합니다:

  • 15초 티저: ~20% 훅, ~50% 제품 미리보기, ~30% 로고 공개. 기능에 대한 시간이 없습니다.

...

[truncated for translation]

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

관련 스킬