제품 런칭 비디오

시청자가 제품을 직접 만지기도 전에 느낄 수 있도록 하는 시네마틱하고 강력한 제품 런칭 비디오를 디자인하고 구축하세요.

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

핵심 철학

모든 결정을 지배하는 세 가지 원칙:

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

감각적 전환. 훌륭한 런칭 비디오는 시청자가 제품을 느끼게 만듭니다. 추상적인 개념(속도, 보안, 편안함)과 물리적 특성(무게, 질감, 반응성)을 시각적, 청각적 경험으로 전환하세요. 제품이 빠르다면 시청자는 속도를 느껴야 합니다. 우아하다면 시청자는 모든 프레임에서 세련됨을 느껴야 합니다.

대비의 숙달. 훌륭한 비디오는 병치에서 탄생합니다. 스케일의 대비(매크로 디테일 vs. 와이드 샷), 속도의 대비(격렬한 에너지 vs. 슬로우 모션), 조명의 대비(그림자 vs. 하이라이트), 오디오의 대비(침묵 vs. 강한 비트)를 사용하여 시청자의 주의를 사로잡는 역동적인 긴장감을 만드세요.

사용 시기

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

0단계: 제품 이해

시각적 작업 전에, 무엇을 선보일지 깊이 이해하세요. 이것이 모든 것을 결정합니다.

사용자에게 (질문을 하나씩 하지 말고 한 번에 모두) 물어보세요:

제품 — 제품은 무엇인가요? 무엇을 하나요? 어떤 문제를 해결하나요?
시청자 — 누가 이 비디오를 보나요? 개발자? 소비자? 투자자? 내부 팀?
핵심 메시지 — 시청자가 본 후 기억해야 할 한 가지는 무엇인가요?
톤 — 시청자가 무엇을 느끼길 바라나요? (감동 / 흥분 / 차분 / 영감 / 자신감)
길이 — 얼마나 긴가요? (15초 티저 / 30초 스팟 / 45-60초 전체 런칭 / 90초+ 심층 탐구)
자산 — 로고, 제품 사진, 스크린샷, 녹화본, 브랜드 색상 또는 글꼴이 있나요?
내레이션 — 비디오에 나레이션이 있어야 하나요? 있다면 어떤 언어인가요? 목소리 캐릭터에 선호 사항이 있나요? (성별, 톤, 에너지 레벨)
레퍼런스 — 감탄하는 비디오가 있나요? (Apple 키노트 스타일, Nike 제품 필름, Stripe 개발자 미학, 재미있는 Notion 느낌, 럭셔리 시계 광고 등)
게시 컨텍스트 — 이 비디오가 어디에 게시되나요? (랜딩 페이지, X/Twitter, LinkedIn, YouTube, Shorts/Reels/TikTok, 투자자 데크, 내부 데모) 화면 비율, 자막, 속도는 이에 따라 달라집니다.

사용자가 대화에서 이미 맥락을 제공했다면, 거기서 답변을 추출하고 누락된 부분을 확인하세요.

게이트: 위의 9가지 질문에 대한 답변(사용자로부터 직접 받거나 맥락에서 유추)을 얻을 때까지 1단계로 진행하지 마세요. 자산이 제공되면 감사하세요 — 사용 가능한 모든 자산을 나열하고 각각을 어떻게 사용하여 내러티브를 강화할지 계획하세요. 모든 자산이 반드시 등장해야 하는 것은 아니지만, 이유 없이 무시되어서는 안 됩니다.

1단계: 미학 확립

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

1.1 단계: 시각적 방향 선택

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

이름 — 짧고 연상되는 라벨 (예: "Midnight Precision," "Warm Analog," "Electric Pulse")
분위기 — 감정적 분위기에 대한 2-3문장 설명
색상 팔레트 — 4-5가지 색상(헥스 코드 포함)과 역할 (배경, 기본, 강조, 텍스트, 하이라이트)
타이포그래피 — 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-roll을 요구한다면, 자연스럽게 스토리보드에 포함시키세요.
그러나 새로운 생성 자산은 제품의 내러티브와 시각적 계층 구조에 적극적으로 기여하는 경우에만 도입하세요. 단순히 복잡성을 위해 자산을 생성하지 마세요.

내러티브 아크

제품 런칭 비디오는 극적인 구조를 따릅니다(짧은 비디오라도):

막	목적	일반 길이 (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 음성 검색을 위한 특성 배열: confident, warm, energetic, calm, authoritative, conversational, inspiring"],
    "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": "정확한 내레이션 텍스트, 또는 내레이션이 없으면 null. 내레이션은 타이밍의 기초이며 시각적 요소는 주요 단어와 동기화됨. 모든 장면에 내레이션이 필요한 것은 아님",
      "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%. 피처 쇼케이스나 클라이맥스를 위한 시간이 없습니다.
30초 스팟: 후크 10%, 제품 공개 20%, 쇼케이스 (2-3 기능) 40%, 클라이맥스 15%, 마무리 15%.
45-60초 전체 런칭: 후크 8%, 제품 공개 15%, 쇼케이스 (3-4 기능) 50%, 숨고르기 비트 7%, 클라이맥스 12%, 마무리 8%.
90초+ 심층 탐구: 확장된 후크/맥락 10%, 제품 공개 15%, 쇼케이스 (4+ 기능) 45%, 비전/사회적 증거 12%, 클라이맥스 10%, 마무리 8%.

이것들은 지침입니다. 다양한 페이싱을 위해 10-15% 조정하세요.

게이트: 스토리보드를 완료하고 이 섹션 끝에 있는 검토 체크리스트에 대해 검증할 때까지 3단계로 진행하지 마세요. 스토리보드는 시각적 및 시간적 청사진 역할을 하며, 이에 동의하면 이후 단계에서 변경할 수 없습니다.

스토리보드 검토 체크리스트

스토리보드를 확정하기 전에 다음을 확인하세요:

총 지속 시간이 사용자 사양과 일치합니까?
각 장면이 내러티브 아크 내에서 명확한 목적을 가지고 있습니까?
제품이 첫 3초 이내에 나타납니까? (비-피드 컨텍스트에서 허용되는 추상 후크)
각 모션 설명이 모호함 없이 정확한 메커니즘을 지정합니까?
연속된 쇼케이스 장면이 서로 다른 레이아웃과 애니메이션 패턴을 사용합니까?
페이싱이 전체적으로 다양합니까? (단일 템포 없음)
음소거 시청자를 위해 주요 메시지가 화면에 캡션/텍스트로 표시됩니까?
페이싱이 게시 컨텍스트에 적합합니까? (소셜 피드는 더 빠르고, 랜딩 페이지는 더 느리게)
"무제한 시각적 예산" 규칙을 적용했습니까? 생성된 자산이 내러티브에 기여합니까 아니면 단순한 복잡성입니까?

3단계: Remotion 구현

이제 코드를 작성할 시간입니다. 전체적으로 Remotion을 사용하세요.

프로젝트 설정

npx create-video로 시작하세요. TypeScript 템플릿을 선택하세요.

게이트: 새 Remotion 프로젝트를 생성하세요. 이전 단계의 파일을 새 프로젝트로 복사하지 마세요. storyboard.json을 프로젝트 루트에 복사하세요.

컴포넌트 구조

컴포넌트를 다음 구조로 구성하세요:

src/
  Root.tsx              # 메인 시퀀스, 장면 연결
  Introduction.tsx      # 후크 및 공개 장면
  FeatureCards.tsx       # 기능 쇼케이스 장면
  Climax.tsx            # 클라이맥스 순간
  Outro.tsx             # 마무리 및 CTA
  theme.ts              # 글꼴 및 색상
  transitions.ts        # 공유 전환 함수
  types.ts              # 스토리보드 유형

일정 및 속도

useCurrentFrame()과 useVideoConfig()를 사용하여 스토리보드에 정의된 타이밍과 정확히 일치하세요. 대부분의 비디오는 30fps입니다.

각 장면에 <Sequence>를 사용하고 스토리보드의 startSec 사양과 일치하는 from 프레임을 사용하세요:

<Sequence from={0} durationInFrames={90} name="Hook">
  <Hook />
</Sequence>
<Sequence from={90} durationInFrames={150} name="Reveal">
  <Reveal />
</Sequence>

애니메이션 패턴

Remotion의 내장 spring, interpolate, Easing 함수를 사용하세요. react-spring 및 framer-motion과 같은 외부 라이브러리를 사용하지 마세요.

전환

장면 전환을 위해 transitions.ts라는 전용 유틸리티 파일을 만드세요. 각 전환은 방향(시작 위치, 크기 조정, 회전, 사전/사후 상태)을 지정하는 TransitionSeries와 유사한 방식이어야 하지만 Remotion의 네이티브 도구를 사용하세요.

무성 전환(컷) 또는 프레임 간 8-16프레임 동안 지속되어야 합니다.

자산 처리

사용자가 자산(로고, 스크린샷, 비디오)을 제공한 경우:

public/ 폴더에 배치하세요.
코드에서 staticFile()을 사용하여 참조하세요.
부드러운 페이드, 스케일, 회전으로 진입하는 애니메이션을 제공하세요.
모든 자산을 사용하지 않아도 되지만, 사용되지 않은 각 자산에 대해 스토리보드에 이유가 문서화되어 있어야 합니다.

스토리보드 개선

사용자가 스토리보드에 만족하면 스토리보드 객체를 더욱 구체적으로 만들어 구현 단계로 이월하세요. 각 장면의 elements 필드를 확장하고 정확한 프레임별 지침을 포함하세요.

최종 결과물

완전히 구현된 Remotion 프로젝트여야 합니다. 사용자는 npx remotion render를 실행하여 MP4를 생성할 수 있어야 합니다.

README에 YouTube 데모 썸네일을 포함하세요.

제품 런칭 비디오 스킬