출시 동영상 및 시각 자료
이 스킬은 제품 출시를 위한 시각 자료 및 동영상 자산 생성에 관한 내용을 다룹니다. 가장 영향력 있는 자산입니다. 훌륭한 데모 동영상이나 GIF는 사용자의 시선을 사로잡고 가치를 말보다 빠르게 전달하며 공유됩니다. 반면, 형편없는 자산은 제품을 혼란스럽고 조잡하게 보이게 만들어 출시를 적극적으로 망칠 수 있습니다.
미디어 계층 구조
대부분의 출시에서 어떤 것을 만들지 결정하는 순서는 다음과 같습니다.
- 데모 동영상 — 제품이 실제로 작동하는 모습을 맥락과 함께 보여줍니다. 무언가의 작동 방식을 설명하는 데 가장 좋습니다.
- 애니메이션 GIF 또는 화면 녹화 루프 — 더 짧고 소셜 미디어에서 인라인으로 자동 재생됩니다. 특정 상호작용을 보여주는 데 가장 좋습니다.
- 주석이 달린 스크린샷 — 정적이며 빠르게 제작 가능하고 특정 상태나 기능을 보여주는 데 좋습니다.
- 다이어그램 또는 일러스트레이션 — 아키텍처, 개념 또는 스크린샷으로 찍을 수 없는 것들을 위한 것입니다.
일반적으로: 흐름이 중요할 때는 동영상을, 단일 상호작용이 가치를 전달할 때는 GIF를, 특정 상태가 핵심일 때는 스크린샷을 사용하세요.
데모 동영상
플랫폼별 길이
| 플랫폼 | 목표 길이 | 제한 시간 |
|---|---|---|
| Product Hunt | 60-90초 | 3분 |
| 랜딩 페이지 히어로 | 60-90초 | 2분 |
| X/Twitter 임베디드 | 30-45초 | 2분 20초 |
| 45-90초 | 10분 | |
| YouTube (전체 데모) | 3-5분 | — |
플랫폼 제한 시간은 단순 기술적인 문제가 아닙니다. 그 이상으로 가면 참여도가 급격히 떨어집니다. 4분짜리 PH 동영상은 사실상 동영상이 아닙니다.
스크립트 구조 (짧은 형식 데모용)
5-7개의 비트로 유지하세요.
- 문제 (5-10초) — 해결하려는 문제를 말합니다. 한 문장. 긴 도입부는 안 됩니다.
- 솔루션 소개 (5-10초) — 제품 이름과 핵심 가치 제안을 언급합니다.
- 데모: 행복 경로 (30-60초) — 주요 사용 사례가 처음부터 끝까지 작동하는 모습을 보여줍니다. 이것이 동영상의 핵심입니다.
- 주요 기능 (10-20초) — 보조 기능을 보여주는 빠른 컷 2-3개. 빠르게 유지하세요.
- 증거 포인트 (5-10초) — 지표, 고객 인용문 또는 벤치마크. 슬라이드 하나 또는 보이스오버 한 줄.
- CTA (5초) — 하나의 행동. "[URL]에서 무료로 사용해보기" 또는 "[URL]에서 가입하세요."
피해야 할 것: 긴 인트로, 애니메이션 로고(시청자가 클릭해서 나감), 느린 제품 시작 화면, 제품이 무언가를 하고 있는 모습을 보여주지 않는 모든 것.
녹화 팁
- 프로덕션이 아닌 데모 환경을 사용하세요. 깨끗한 데이터, 창피한 고객 정보 없음, 안정적인 상태.
- 의도적인 상호작용을 천천히 하세요. 사람들은 일반 작업 속도가 아닌 의도적으로 움직일 때 커서 움직임을 더 잘 따라갑니다.
- 목표 해상도의 2배로 녹화하세요. 2880×1800 또는 1440×900(레티나)으로 녹화한 다음 배송용으로 다운스케일하세요. 이렇게 하면 확대 공간이 확보되고 더 선명해 보입니다.
- 불필요한 것은 모두 숨기세요. Slack 알림을 닫고, 브라우저 북마크바를 숨기고, 깨끗한 브라우저 프로필을 사용하세요. 녹화물의 산만함은 신뢰를 떨어뜨립니다.
- 사용할 것보다 더 많이 캡처하세요. 전체 워크플로우를 녹화하고 포스트에서 편집하세요. 비트를 놓쳐서 다시 녹화하는 것보다 빠릅니다.
보이스오버 vs. 무음
둘 다 효과적입니다. 선택은 상황에 따라 다릅니다.
- 보이스오버: 더 따뜻하고, 설명적이며, YouTube와 랜딩 페이지에서 더 잘 작동합니다. 깨끗한 녹음 환경과 좋은 오디오 품질이 필요합니다. 나쁜 오디오는 오디오가 없는 것보다 더 나쁩니다.
- 텍스트 오버레이가 있는 무음: 자동 재생-음소거 컨텍스트(소셜 피드)에서 더 잘 작동합니다. 제작 속도가 더 빠릅니다. 화면에 명확한 레이블이 필요합니다.
확실하지 않은 경우: 데모를 무음으로 녹화하고, 주요 순간에 텍스트 오버레이를 추가한 다음, 플랫폼에 따라 보이스오버를 추가할지 결정하세요.
도구
- 화면 녹화: Loom (빠름), Screen Studio (세련된 출력, 마케팅에 좋음), QuickTime (원시), OBS (완전 제어)
- 동영상 편집: CapCut (빠르고 쉬움), DaVinci Resolve (전문가용, 무료), Final Cut Pro, Adobe Premiere
- 모션 디자인 / 로고 애니메이션: After Effects, Motion (Mac), Jitter (웹 기반)
- 자막/캡션: Descript (대본 편집에도 좋음), Captions 앱, Rev
- 프로그래매틱 동영상: Remotion (React 기반 — 아래 섹션 참조)
Remotion을 사용한 프로그래매틱 동영상
빠르게 출시하고 매 출시마다 모션 디자이너를 기다리지 않으려는 팀의 경우, 프로그래매틱 동영상을 사용하면 React 컴포넌트를 작성하여 MP4 파일로 렌더링할 수 있습니다. 동영상이 코드가 됩니다: 버전 관리되고, 매개변수화되며, 타임라인 편집기 없이 반복할 수 있습니다.
프로그래매틱 동영상을 사용해야 하는 경우
다음과 같은 경우에 잘 작동합니다.
- 소셜 미디어용 출시 공지 클립 (15-45초)
- UI 작동 모습을 보여주는 제품 워크스루 동영상
- 텍스트 오버레이와 스크린샷이 포함된 기능 하이라이트 릴
- 데이터 기반 동영상 (벤치마크 비교, 성장 지표)
- 출시마다 재사용할 템플릿 동영상 (콘텐츠만 교체)
다음과 같은 경우에는 적합하지 않습니다.
- 복잡한 모션 디자인이 필요한 시네마틱 브랜드 동영상
- 라이브 푸티지가 포함된 창립자 내러티브 동영상
- 광범위한 사용자 정의 일러스트레이션이나 3D가 필요한 동영상
주요 티어 1 출시의 경우 접근 방식을 결합할 수 있습니다: 소셜 클립용 프로그래매틱 동영상과 히어로 동영상용 전문 모션 디자이너.
Remotion 설정
npx create-video@latest my-launch-video
cd my-launch-video
npm start # 미리보기용 Remotion Studio 열기
핵심 개념:
- Composition: 동영상은 정의된 지속 시간(프레임 단위)과 프레임 속도를 가진 React 컴포넌트입니다.
- useCurrentFrame(): 현재 프레임 번호를 반환하는 Hook — 애니메이션을 구동하는 데 사용합니다.
- Sequence: 시간상에서 자식을 오프셋하는 컴포넌트 — 장면을 순서대로 배열하는 데 사용합니다.
- spring(): 자연스러운 느낌의 모션(이징 인/아웃)을 위한 애니메이션 유틸리티입니다.
- Assets: 이미지, 스크린샷, 오디오는
public/폴더에 들어갑니다.
장면 계획 템플릿
코드를 작성하기 전에 동영상의 장면별 계획을 세우세요.
| 필드 | 설명 |
|---|---|
| 장면 # | 순차 번호 |
| 지속 시간 | 초 (예: "3s") |
| 목적 | 이 장면이 전달하는 내용 (한 문장) |
| 텍스트 내용 | 화면에 표시되는 정확한 텍스트 |
| 시각적 요소 | 스크린샷, 아이콘, 코드 스니펫, 다이어그램 |
| 애니메이션 스타일 | 페이드 인, 왼쪽에서 슬라이드, 타자기, 확대 등 |
| 전환 아웃 | 이 장면이 어떻게 종료되는지 (페이드, 컷, 슬라이드) |
코드 패턴
순차 장면:
<Sequence from={0} durationInFrames={90}>
<HookScene />
</Sequence>
<Sequence from={90} durationInFrames={120}>
<DemoScene />
</Sequence>
<Sequence from={210} durationInFrames={90}>
<CTAScene />
</Sequence>
텍스트 나타내기:
const frame = useCurrentFrame();
const opacity = interpolate(frame, [0, 20], [0, 1], {
extrapolateRight: 'clamp',
});
return <h1 style={{ opacity }}>여기에 주요 가치 제안</h1>;
반복 워크플로우
- 장면 계획 — 위 템플릿 사용
- 자산 수집 — 스크린샷, 로고, 제품 이미지 →
public/폴더 - 초안 작성 또는 프롬프트 — 구조와 콘텐츠를 올바르게 만듦
- Studio에서 미리보기 — 전체를 시청하고, 타이밍과 시각적 문제를 기록
- 반복 — 타이밍, 애니메이션, 콘텐츠 조정. 일반적으로 2-4회 필요
- 렌더링 —
npx remotion render src/index.ts MyComposition out/video.mp4 - 플랫폼 사양 확인 — 해상도와 파일 크기가 대상 플랫폼에 적합한지 확인
GIF 및 짧은 루프
GIF는 대부분의 플랫폼에서 자동 재생되며 단일 상호작용(UI 상태 변화, CLI 명령 출력, API 응답)을 보여주는 데 이상적입니다. 동영상보다 제작 속도가 빠르고 소셜 게시물에 더 효과적인 경우가 많습니다.
GIF 대 동영상 사용 시기
다음과 같은 경우 GIF를 사용하세요.
- 전체 가치를 3-8초 안에 전달할 수 있을 때
- 워크플로우가 아닌 단일 UI 상호작용을 보여줄 때
- 트윗이나 README에 임베드되며 동영상 재생이 덜 안정적일 때
다음과 같은 경우 동영상을 사용하세요.
- 가치를 전달하는 데 맥락(문제 → 해결책)이 필요할 때
- 상호작용을 보여주는 데 8초 이상 걸릴 때
- 오디오가 필요할 때
GIF 녹화
- 2배로 캡처, 목표 해상도로 다운스케일
- 웹 성능을 위해 5MB 미만 유지 (팔레트 감소 또는 프레임 수 줄이기 사용)
- 매끄럽게 루프 — 시작 상태와 끝 상태가 일치하여 루프가 어색하지 않아야 함
- 도구 옵션: CleanShot X (Mac에 권장), Kap, Giphy Capture, Gifski (동영상 클립 변환용)
GIF 파일 크기 최적화
- 색상 팔레트 줄이기 (많은 UI 녹화의 경우 256 → 128 또는 64색)
- 프레임 드롭 (30fps → 15fps는 UI 녹화에서 거의 눈에 띄지 않음)
- 과감하게 자르기 — 화면 전체가 아닌 변화하는 부분만 표시
- 플랫폼에서 지원하는 경우 GIF 대신 자동 재생/루프가 있는 MP4로 변환 (MP4는 동등한 GIF보다 약 10배 작음)
스크린샷
스크린샷은 출시에서 덜 사용됩니다. 명확한 주석이 있는 잘 구성된 스크린샷은 한 단락보다 기능을 더 빨리 전달합니다.
구성
- 의미 있는 상태의 제품을 보여주세요 — 빈 화면, 로딩 상태, 기능을 보기 어렵게 만드는 더미 데이터로 가득 찬 화면은 안 됩니다.
- 깨끗한 환경을 사용하세요 — 탭이 없는 브라우저, 일관되게 적용된 다크 또는 라이트 모드, 개인 데이터가 보이지 않아야 함.
- 관련 영역을 강조하세요 — 콜아웃 상자, 화살표 또는 하이라이트로 중요한 부분에 주의를 집중시킵니다.
주석 도구
- CleanShot X (Mac) — 하나의 흐름으로 캡처, 주석, 내보내기
- Skitch — 간단한 주석
- Figma / Sketch — 사용자 정의 스타일이 적용된 보다 세련된 제품 샷용
브라우저 프레이밍
웹 제품의 경우 브라우저 프레임을 사용하여 스크린샷이 날것처럼 보이지 않고 의도적으로 보이게 만드세요. Screely, Browserframe 또는 사용자 정의 Figma 템플릿과 같은 도구는 브라우저 크롬 오버레이를 추가합니다.
기능 그리드용 여러 스크린샷
랜딩 페이지와 Product Hunt 갤러리에는 종종 제품의 다양한 측면을 보여주는 3-5개의 스크린샷이 필요합니다. 이를 세트로 계획하세요:
- 각 스크린샷은 고유한 기능을 보여줍니다.
- 일관된 시각적 처리 (동일한 확대/축소 수준, 동일한 브라우저 테마, 동일한 주석 스타일)
- 진행 상황을 보여줍니다: 진입 → 주요 작업 → 결과
등급별 자산 체크리스트
티어 1
- 데모 동영상 (60-90초, PH 및 랜딩 페이지에 적합)
- 짧은 소셜 컷 (동일 녹화에서 30-45초)
- 랜딩 페이지 및 PH 갤러리용 3-5개의 주석이 달린 스크린샷
- 소셜 게시물용 1-2개의 GIF (주요 상호작용 표시)
- 블로그 게시물 및 소셜 링크 미리보기용 Open Graph 이미지
티어 2
- 1-2개의 GIF 또는 짧은 화면 녹화
- 랜딩 페이지 섹션용 2-3개의 스크린샷
- Open Graph 이미지
티어 3
- 스크린샷 1개
- 선택 사항: 변경 사항이 시각적인 경우 짧은 GIF
Open Graph 이미지
링크로 공유되는 모든 콘텐츠(블로그 게시물, 랜딩 페이지, 변경 로그 항목)에는 사용자 정의 Open Graph(OG) 이미지가 있어야 합니다. OG 이미지는 링크가 Twitter, Slack, iMessage 또는 LinkedIn에 붙여넣어질 때 표시되는 이미지입니다.
- 크기: 1200×630px
- 콘텐츠: 제품 이름 + 주요 가치 제안. 작은 크기에서도 읽을 수 있는 빌보드처럼 취급하세요.
- 일관성: 모든 출시 콘텐츠가 통일된 느낌을 갖도록 템플릿을 사용하세요.
- 도구: Figma 템플릿, Vercel OG (코드 생성), Bannerbear (자동화)
플랫폼별 동영상 사양
| 플랫폼 | 해상도 | 최대 길이 | 형식 | 참고 |
|---|---|---|---|---|
| X/Twitter | 1280×720 또는 1920×1080 | 2:20 | MP4 (H.264) | 음소거 자동 재생 — 캡션 추가 |
| 1920×1080 | 10분 | MP4 (H.264) | 정사각형 (1080×1080)이 피드에서 잘 작동함 | |
| Product Hunt | 1920×1080 | 90초 | MP4 | 50MB 미만 유지 |
| 웹사이트 히어로 | 1920×1080 | 제한 없음 | MP4/WebM | 자동 재생 루프 고려 (오디오 없음) |
함께 사용되는 스킬
- launch-strategy — 출시 등급에 필요한 자산을 결정합니다.
- launch-tweet — GIF와 동영상은 트윗에 첨부됩니다 (링크가 아님).
- launch-landing-page — 데모 동영상과 스크린샷은 페이지에 들어갑니다.
- launch-distribution — 플랫폼별 형식 요구 사항을 다룹니다.