/marketing-demo — 제품 데모 레코더
마케팅용 제품 데모 영상을 녹화합니다. 두 가지 제작 경로: 빠른(ply + ffmpeg) 방식은 대략적인 데모용, 고급(Remotion) 방식은 브랜드 맞춤형 마케팅 비디오용입니다.
읽기
brand/creative-kit.md— 브랜드 오버레이용 색상, 폰트, 로고 경로brand/voice-profile.md— 텍스트 오버레이 톤 가이드brand/stack.md— 사용 가능한 도구(ply, ffmpeg, remotion)
활성화 시
brand/creative-kit.md파일을 읽어 색상, 폰트, 로고 경로를 확인합니다. 파일이 없으면 브랜드 색상과 로고를 요청합니다.brand/voice-profile.md파일을 읽어 텍스트 오버레이 톤 가이드를 확인합니다. 파일이 없으면 명확/중립 톤을 사용합니다.brand/stack.md파일을 읽어 사용 가능한 도구를 확인합니다. 파일이 없으면 도구를 직접 감지합니다.- 도구 가용성을 확인합니다:
command -v ply && echo "ply: ready" || echo "ply: missing" command -v ffmpeg && echo "ffmpeg: ready" || echo "ffmpeg: missing" command -v npx && echo "remotion: available" || echo "remotion: unavailable" ply또는ffmpeg가 없으면 경고하고 설치를 제안합니다.
샷 지속 시간 규칙
| 데모 유형 | 샷당 지속 시간 | 비고 |
|---|---|---|
| 빠른 개요 | 0.5-1초 | 빠른 컷, 흥미 유발 |
| 기능 데모 | 2-3초 | 읽고 이해할 시간 |
| 둘러보기 | 4-5초 | 설명적 페이스 |
| 소셜 클립 | 1-2초 | 시선 사로잡기, 빠르게 |
데모 스토리텔링 원칙
데모가 실패하는 이유는 제품을 기계적으로 보여주기 때문입니다. 시청자가 계속 볼 이유가 필요합니다. 이 원칙은 실제 랜딩 페이지와 소셜에서 효과를 본 경험에서 비롯되었습니다.
- 셋업이 아닌 결과로 시작하세요. 처음 2초가 나머지를 시청할지 결정합니다. '이후' 상태 — 데이터가 있는 대시보드, 완성된 디자인, 결과물을 보여주세요. 로그인, 로딩, 탐색은 주목받지 못합니다.
- 하나의 기능 = 하나의 데모. 30초에 5가지 기능을 우겨넣으면 모두 잊혀집니다. 집중된 하나의 기능 데모가 서두른 투어보다 가치 있습니다.
- 마법의 순간을 보여주세요. 모든 제품에는 사용자가 '와!' 하는 상호작용이 있습니다. 그 순간을 찾아 데모를 그 중심에 구축하세요. 그것이 사람들이 '체험하기'를 클릭하는 이유입니다.
- 텍스트 오버레이로 맥락을 추가하세요. 소셜 비디오는 음소거 상태로 자동 재생됩니다. 텍스트 콜아웃 없이 UI가 변경되는 것을 보는 시청자는 무슨 일이 일어나고 있는지, 왜 중요한지 알 수 없습니다. 모든 샷에는 가치를 설명하는 3-6단어의 오버레이가 필요합니다.
- 페이스: 개념당 2-3초. 빠르게 느껴지지만 시청자의 집중력은 냉혹합니다. 새로운 정보를 제공하지 않는 샷은 화면 시간을 벌지 못합니다.
1단계: 데모 유형 결정
| 유형 | 지속 시간 | 해상도 | 포맷 | 사용 사례 |
|---|---|---|---|---|
| 히어로 데모 | 15-30초 | 1280x800 | MP4 | 랜딩 페이지 상단 |
| 기능 강조 | 5-15초 | 1280x800 | GIF/MP4 | 기능 섹션, 문서 |
| 전체 둘러보기 | 60-180초 | 1280x800 | MP4 | YouTube, 영업 자료 |
| 소셜 클립 | 5-15초 | 1080x1080 | MP4 | Instagram, Twitter/X |
| 이메일 GIF | 3-8초 | 600x400 | GIF | 이메일 캠페인 |
| 사용 방법 | 30-90초 | 1280x800 | MP4 | 도움말 문서, 온보딩 |
사용자에게 유형을 묻거나 맥락에서 추론합니다.
2단계: 샷 목록 계획
녹화 전에 각 샷을 계획합니다:
## 샷 목록
1. [액션: 랜딩 페이지로 이동]
- URL: https://example.com
- 대기: 1초 (로딩)
- 강조: 히어로 섹션
2. [액션: "시작하기" 버튼 클릭]
- 대기: 전환 애니메이션
- 강조: 가입 양식
3. [액션: 데모 데이터 입력]
- 입력: [email protected]
- 강조: 성공 상태
각 샷 = 하나의 ply 스크린샷 또는 상호작용 시퀀스입니다.
3단계: 제작 모드 선택
모드 A: 빠른 데모 (ply + ffmpeg)
스크린샷을 연결한 빠르고 대략적인 비디오입니다.
스크린샷 캡처:
# 각 샷으로 이동 및 스크린샷
ply navigate "https://example.com"
ply screenshot --output marketing/demos/shot-01.png
ply click "시작하기"
ply screenshot --output marketing/demos/shot-02.png
ffmpeg로 연결:
# 스크린샷으로 MP4 만들기 (프레임당 2초)
ffmpeg -framerate 0.5 -i marketing/demos/shot-%02d.png \
-c:v libx264 -pix_fmt yuv420p \
-vf "scale=1280:800:force_original_aspect_ratio=decrease,pad=1280:800:(ow-iw)/2:(oh-ih)/2" \
marketing/demos/demo.mp4
# 미리보기 GIF (낮은 품질, 작은 파일)
ffmpeg -i marketing/demos/demo.mp4 \
-vf "fps=10,scale=640:-1:flags=lanczos" \
-c:v gif marketing/demos/demo-preview.gif
# 이메일 GIF (600px 너비, 최적화)
ffmpeg -i marketing/demos/demo.mp4 \
-vf "fps=8,scale=600:-1:flags=lanczos,split[s0][s1];[s0]palettegen[p];[s1][p]paletteuse" \
marketing/demos/demo-email.gif
# 소셜용 정사각형 크롭 (1080x1080)
ffmpeg -i marketing/demos/demo.mp4 \
-vf "crop=min(iw\,ih):min(iw\,ih),scale=1080:1080" \
marketing/demos/demo-square.mp4
모드 B: 고급 데모 (Remotion)
전환, 텍스트 오버레이, 브랜드 인트로가 포함된 마케팅 수준의 출력물입니다.
Remotion 구성 생성:
# 필요시 초기화
npx remotion init marketing/demos/remotion-demo
# 최종 비디오 렌더링
npx remotion render marketing/demos/remotion-demo/src/index.tsx \
--output marketing/demos/demo-polished.mp4
구성 구조:
src/
├── index.tsx # 루트 구성
├── Intro.tsx # 브랜드 인트로 (로고, 태그라인)
├── DemoScene.tsx # 스크린샷 + 텍스트 오버레이
├── Transition.tsx # 장면 간 페이드/슬라이드
└── Outro.tsx # CTA + URL
핵심 Remotion 패턴 (전체 컴포넌트 코드는 references/remotion-examples.md 참조):
- 스크린샷에는
<Img>, 레이아웃에는<AbsoluteFill>사용 - 애니메이션에
useCurrentFrame()+interpolate()사용 brand/creative-kit.md에서 브랜드 색상 가져오기- 30fps로 부드러운 재생, 1280x720 또는 1920x1080 사용
<Sequence>로 기능을 강조하는 텍스트 오버레이 추가
인트로 장면 (2-3초): 로고 중앙 정렬, 태그라인 페이드 인. 배경 그라디언트에 브랜드 색상 사용. 짧게 유지하세요. 제품이 주인공입니다.
데모 장면 (샷당): 스크린샷이 프레임의 80%를 채웁니다. 상단 또는 하단에 1줄 기능 콜아웃이 있는 텍스트 오버레이. 장면 지속 시간 동안 미묘한 확대(1.0 → 1.05)에 interpolate()를 사용하여 생동감을 더합니다.
장면 간 전환: 페이드 + 약간의 슬라이드 (200ms). 화려한 전환 효과는 사용하지 마세요. 제품에서 주의를 분산시킵니다.
아웃트로 장면 (3-4초): CTA 텍스트 ("[url]에서 무료 체험"), 로고, 선택적 사회 증명 문구. 판매하는 유일한 슬라이드입니다. 다른 모든 슬라이드는 보여주는 데 집중해야 합니다.
오류 복구
ply 실패 (페이지 로드 안 됨, 요소 찾을 수 없음, 시간 초과): 샷 N+1로 건너뛰고 샷 목록에 실패를 기록합니다. 모든 샷 완료 후 건너뛴 샷을 검토하고 한 번 재시도합니다. 여전히 실패하면 수동 스크린샷을 대체 수단으로 사용합니다.
ffmpeg 실패 (코덱 없음, 포맷 오류): ffmpeg -codecs로 사용 가능한 코덱을 확인합니다. libx264가 없으면 -c:v h264를 시도하거나 brew install ffmpeg로 설치합니다. GIF 팔레트 문제가 있으면 필터 체인을 단순화합니다. split/palettegen/paletteuse를 제거하고 기본 -vf "fps=10,scale=640:-1"을 사용합니다.
Remotion 실패 (렌더 충돌, 구성 오류): Node 버전 확인 (node -v, 18+ 필요). npx remotion render가 실패하면 GPU 문제의 경우 npx remotion render --gl=angle 또는 --gl=swangle을 시도합니다. 구성 오류의 경우 모든 <Img> 소스 경로가 올바른지, 이미지가 존재하는지 확인합니다.
4단계: 변환 및 출력
모든 출력은 marketing/demos/에 저장됩니다. 유형별 이름:
| 출력 | 파일명 | 비고 |
|---|---|---|
| MP4 (데스크탑) | demo-hero.mp4 | H.264, 1280x800 |
| MP4 (소셜) | demo-social-1080.mp4 | 정사각형, 1080x1080 |
| GIF (미리보기) | demo-preview.gif | 640px 너비, <5MB |
| GIF (이메일) | demo-email.gif | 600px 너비, <2MB |
| MP4 (고급) | demo-polished.mp4 | Remotion 출력 |
5단계: 완료 요약
## 생성된 데모 에셋
| 에셋 | 크기 | 포맷 | 추천 사용처 |
|-------|------|------|--------------|
| demo-hero.mp4 | 1.2MB | MP4 1280x800 | 랜딩 페이지 히어로 |
| demo-preview.gif | 3.4MB | GIF 640px | README, 문서 |
| demo-email.gif | 1.1MB | GIF 600px | 이메일 캠페인 |
| demo-social-1080.mp4 | 800KB | MP4 1080x1080 | Instagram, X |
모든 에셋이 `marketing/demos/`에 저장되었습니다.
뷰포트 설정
| 플랫폼 | 너비 | 높이 | 배율 |
|---|---|---|---|
| 데스크탑 | 1280 | 800 | 1x |
| 데스크탑 HD | 1920 | 1080 | 1x |
| 모바일 | 390 | 844 | 2x |
| 1080 | 1080 | 1x | |
| Twitter/X | 1200 | 675 | 1x |
| 이메일 | 600 | 400 | 1x |
안티 패턴
| 실수 | 실패 이유 |
|---|---|
| 로그인/가입 흐름 녹화 | 아무도 인증 화면에 관심 없음. 로그인 후부터 시작하세요. |
| 로딩 스피너 보여주기 | 편집해서 제거하거나 로딩 완료 상태로 건너뛰세요. 스피너는 흐름을 끊습니다. |
| 음소거 자동 재생 시 텍스트 오버레이 없음 | 소셜 비디오는 음소거로 자동 재생됩니다. 텍스트 없이 시청자는 무엇을 보고 있는지 알 수 없습니다. |
| 챕터 구분 없이 60초 이상 데모 | 15초 후 주의력이 떨어집니다. 길다면 명확한 섹션 제목을 추가하세요. |
| 일관되지 않은 뷰포트 크기로 녹화 | 샷 간 크기가 바뀌면 아마추어처럼 보입니다. 녹화 전 뷰포트를 고정하세요. |
| 모든 기능 보여주기 | 최대 3-5개 기능만 선택하세요. 모든 것을 보여주는 데모는 아무것도 팔지 않습니다. |
| 마우스 커서가 목적 없이 움직임 | 각 클릭을 계획하세요. 커서는 목적 있게 움직여야 합니다 — 목표물까지 직선 경로로. |
관련 스킬
/creative— 광고 비주얼, 제품 사진 (정적 에셋, 데모 아님)/content-atomizer— 데모를 플랫폼별 게시글로 변환/page-cro— 데모가 보여주는 페이지 감사