앱 프로모 미디어 전문가 (2026 에디션)
English
오케스트레이션 및 통합
ai-media-generation-expert: AI 이미지(Flux 1.1 Pro), 비디오 B-roll(Sora, Runway Gen-3), 합성 음성 내레이션(ElevenLabs v3) 생성svg-animation-motion-expert: 고성능 SVG 애니메이션, Framer Motion 전환, 키네틱 타이포그래피file-upload-media-expert: CDN 자산 배포, 손실/무손실 이미지 압축(Sharp), 비디오 트랜스코딩seo: 동적 오픈 그래프(og:image), Twitter 카드 메타데이터, 소셜 크롤러 미리보기ui-ux-pro-max: 디자인 토큰, 타이포그래피 계층 구조, 프로모 카드 레이아웃 스타일링visual-ui-auditor: 마케팅 스크린샷, 대비, 기기 프레임에 대한 멀티모달 비전 감사anti-slop: 반-슬롭 마케팅 그래픽, 일반적인 스톡 목업 및 가짜 UI 아티팩트 제거senior-frontend/tailwind-expert: 고충실도 CSS 기기 프레임, 캔버스 합성, 반응형 레이아웃 스타일링zero-to-prod-orchestrator: 5단계(시각 자산 및 UI 브랜딩)와 8단계(출시, 배포, 마케팅 자산 인계) 조정- 교차 도메인 시너지 및 서브 에이전트 스웜 통합:
mobile-expo-expert,design-system-architect
설명
정적 그래픽(앱 스토어 스크린샷, 소셜 미디어 카드, 동적 OG 배너)부터 동적 모션 미디어(Remotion 프로그래매틱 비디오 티저, 키네틱 앱 워크스루, AI 내레이션 런치 데모)까지, 높은 전환율을 자랑하는 앱 프로모션 미디어 제작을 위한 프로덕션급 엔지니어링 가이드입니다.
트리거 조건
- Apple App Store 및 Google Play Store용 기기 목업이 포함된 프로모션 스크린샷 생성
- Product Hunt, Twitter/X 배너, LinkedIn 쇼케이스, Instagram/TikTok 캐러셀 광고용 출시 그래픽 생성
- Satori /
@vercel/og를 통한 동적 오픈 그래프(OG) 소셜 카드 이미지 구현 - Remotion(React 기반 비디오)을 사용한 프로그래매틱 앱 프로모 비디오, 티저 트레일러 또는 제품 투어 비디오 생성
- AI 음성 해설이 포함된 30초 고전환 앱 티저 스토리보드 스크립팅 및 합성
- 헤드리스 브라우저 자동화(Playwright/Puppeteer)를 사용한 다중 해상도 스크린샷 캡처 파이프라인 자동화
핵심 아키텍처 및 미디어 제작 기둥
┌──────────────────────────────────────────────┐
│ 앱 프로모 미디어 엔진 │
└──────────────────────┬───────────────────────┘
│
┌────────────────────────────┴───────────────────────────┐
▼ ▼
정적 이미지 및 그래픽 모션 및 비디오 제작
├── App Store 및 Google Play 스크린샷 ├── Remotion 프로그래매틱 비디오 (React)
├── 소셜 카드 (X, LinkedIn, Product Hunt) ├── 30초 고전환 티저 공식
├── 동적 OpenGraph 배너 (@vercel/og) ├── 키네틱 타이포그래피 및 커서 트레일
└── 순수 CSS/SVG 기기 목업 (iPhone/Pixel) └── AI 음성 해설 및 B-roll 동기화
1. App Store 및 Google Play 스크린샷 매트릭스
A. 해상도 및 사양 표준 (2026)
| 대상 플랫폼 | 디스플레이 크기 | 기본 해상도 | 화면 비율 | 형식 요구 사항 |
|---|---|---|---|---|
| Apple iOS (iPhone 16 Pro Max) | 6.9" Super Retina | 1320 × 2868 px | 19.5:9 | 24비트 PNG, RGB, 알파 없음, 최대 10MB |
| Apple iOS (iPhone 16 / 15 Pro) | 6.7" Super Retina | 1290 × 2796 px | 19.5:9 | 24비트 PNG, RGB, 알파 없음, 최대 10MB |
| Apple iPadOS (iPad Pro 13") | 13.0" Liquid Retina | 2064 × 2752 px | 4:3 | 24비트 PNG, RGB, 알파 없음 |
| Google Play 전화 | 표준 플래그십 | 1080 × 2400 px (또는 1080 × 1920) | 20:9 / 16:9 | PNG/JPEG, 짧은 쪽 최소 1080px |
| Google Play 기능 그래픽 | 히어로 배너 | 1024 × 500 px | ~2:1 | 24비트 PNG/JPEG, 알파 없음, 최대 1MB |
| App Store 프로모 비디오 | 프리뷰 비디오 | 1080 × 1920 px (세로) / 1920 × 1080 | 9:16 / 16:9 | MP4/ProRes, 최대 30초, 가짜 OS 오버레이 없음 |
B. 고전환 스크린샷 구성 공식
시퀀스의 모든 스크린샷은 4단계 시각적 계층 구조를 따라야 합니다:
- 헤드라인 (강력한 혜택): 최대 4-6단어. 기술적 기능이 아닌 변화에 초점을 맞춥니다 (예: "3초 만에 청구서 자동화" vs "청구서 생성 양식").
- 서브헤드라인 (맥락 앵커): 워크플로를 설명하는 짧은 문장 1개.
- 플로팅 UI / 프레임 목업: 고대비, 픽셀 완벽 기기 목업을 5°-12° 기울이거나 정면으로 배치하고 프레임 하단 65%에 중앙 정렬.
- 앰비언트 캔버스 / 그라디언트: 브랜드 테마와 일치하는 미묘한 OKLCH 배경 그라디언트와 부드러운 방사형 글로우.
2. 소셜 출시 그래픽 사양
- Product Hunt 출시 키트:
- 갤러리 이미지:
1270 × 760 px(5:3 비율). 선명한 타이포그래피와 실제 UI 화면으로 상위 3가지 기능을 보여줍니다. - 애니메이션 갤러리 티저:
240 × 240 pxGIF 또는 MP4 (3MB 미만) 제품 카드 썸네일용.
- 갤러리 이미지:
- Twitter / X 카드:
- 피드 내 프로모션 카드:
1200 × 675 px(16:9) 또는1200 × 630 px(1.91:1). - 프로필 배너:
1500 × 500 px(3:1 비율).
- 피드 내 프로모션 카드:
- Instagram 및 TikTok 게시물:
- 캐러셀 피드 슬라이드:
1080 × 1350 px(4:5 세로 비율). - 스토리 및 세로 티저:
1080 × 1920 px(9:16 비율).
- 캐러셀 피드 슬라이드:
3. 동적 오픈 그래프(OG) 이미지 생성기
동적 OG 생성을 통해 Twitter/X, Discord, Slack, WhatsApp의 모든 링크 공유 시 맞춤형 고해상도 브랜드 카드가 렌더링됩니다.
// app/api/og/route.tsx (Next.js 15 + @vercel/og / Satori)
import { ImageResponse } from 'next/og';
import { NextRequest } from 'next/server';
export const runtime = 'edge';
export async function GET(req: NextRequest) {
const { searchParams } = new URL(req.url);
const title = searchParams.get('title') || '차세대 AI 워크스페이스';
const subtitle = searchParams.get('subtitle') || 'VibesPlug Swarm 아키텍처로 구축됨';
const tag = searchParams.get('tag') || 'v3.0 프로덕션 준비 완료';
return new ImageResponse(
(
<div
style={{
height: '100%',
width: '100%',
display: 'flex',
flexDirection: 'column',
alignItems: 'flex-start',
justifyContent: 'space-between',
padding: '64px',
backgroundColor: '#090a0f',
backgroundImage: 'radial-gradient(circle at 80% 20%, rgba(99, 102, 241, 0.25) 0%, transparent 60%), radial-gradient(circle at 20% 80%, rgba(236, 72, 153, 0.2) 0%, transparent 60%)',
fontFamily: 'Inter, sans-serif',
color: '#ffffff',
}}
>
{/* 상단 배지 */}
<div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
<div
style={{
padding: '6px 16px',
borderRadius: '9999px',
backgroundColor: 'rgba(255, 255, 255, 0.1)',
border: '1px solid rgba(255, 255, 255, 0.2)',
fontSize: '20px',
fontWeight: 600,
color: '#818cf8',
}}
>
{tag}
</div>
</div>
{/* 주요 제목 및 부제목 */}
<div style={{ display: 'flex', flexDirection: 'column', gap: '16px', maxWidth: '850px' }}>
<h1
style={{
fontSize: '60px',
fontWeight: 800,
lineHeight: 1.1,
letterSpacing: '-0.02em',
background: 'linear-gradient(135deg, #ffffff 40%, #94a3b8 100%)',
backgroundClip: 'text',
color: 'transparent',
margin: 0,
}}
>
{title}
</h1>
<p
style={{
fontSize: '26px',
color: '#94a3b8',
lineHeight: 1.4,
margin: 0,
}}
>
{subtitle}
</p>
</div>
{/* 하단 브랜딩 */}
<div
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
width: '100%',
borderTop: '1px solid rgba(255, 255, 255, 0.1)',
paddingTop: '24px',
}}
>
<div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
<div
style={{
width: '32px',
height: '32px',
borderRadius: '8px',
background: 'linear-gradient(135deg, #6366f1, #a855f7)',
}}
/>
<span style={{ fontSize: '22px', fontWeight: 700 }}>MyApp.io</span>
</div>
<span style={{ fontSize: '18px', color: '#64748b' }}>오늘 무료로 사용해보세요 • 신용카드 불필요</span>
</div>
</div>
),
{
width: 1200,
height: 630,
}
);
}
4. Remotion을 사용한 프로그래매틱 비디오 제작 (React)
Remotion을 사용하면 개발자가 코드로 MP4 프로모 비디오를 완전히 렌더링하여 애니메이션 UI 구성 요소, 키네틱 타이포그래피, 스프링 물리학 및 기기 회전을 구현할 수 있습니다.
// src/remotion/AppPromoComposition.tsx
import { AbsoluteFill, interpolate, spring, useCurrentFrame, useVideoConfig } from 'remotion';
import React from 'react';
export function AppPromoComposition({
headline,
subheadline,
screenshotUrl
}: {
headline: string;
subheadline: string;
screenshotUrl: string;
}) {
const frame = useCurrentFrame();
const { fps } = useVideoConfig();
// 기기 목업 진입 스프링 애니메이션
const deviceEntrance = spring({
frame,
fps,
config: { damping: 14, stiffness: 90 },
});
const translateY = interpolate(deviceEntrance, [0, 1], [400, 0]);
const scale = interpolate(deviceEntrance, [0, 1], [0.85, 1]);
// 진입 후 지속적인 부동 호버 효과
const hoverY = Math.sin(frame / 20) * 12;
// 텍스트 전환 애니메이션
const textOpacity = interpolate(frame, [0, 20], [0, 1], { extrapolateRight: 'clamp' });
const textTranslateY = interpolate(frame, [0, 20], [30, 0], { extrapolateRight: 'clamp' });
return (
<AbsoluteFill
style={{
backgroundColor: '#0a0d14',
backgroundImage: 'radial-gradient(ellipse at 50% 10%, rgba(99, 102, 241, 0.35) 0%, transparent 70%)',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
fontFamily: 'Inter, sans-serif',
overflow: 'hidden',
padding: '60px',
}}
>
{/* 키네틱 헤드라인 */}
<div
style={{
opacity: textOpacity,
transform: `translateY(${textTranslateY}px)`,
textAlign: 'center',
marginBottom: '40px',
zIndex: 10,
}}
>
<h1
style={{
fontSize: '56px',
fontWeight: 800,
color: '#ffffff',
margin: '0 0 16px 0',
letterSpacing: '-0.02em',
}}
>
{headline}
</h1>
<p style={{ fontSize: '26px', color: '#94a3b8', margin: 0 }}>
{subheadline}
</p>
</div>
{/* 부동 기기 컨테이너 */}
<div
style={{
transform: `translateY(${translateY + hoverY}px) scale(${scale})`,
width: '720px',
height: '1100px',
borderRadius: '48px',
padding: '16px',
backgroundColor: '#1f2937',
boxShadow: '0 30px 80px rgba(0, 0, 0, 0.7), 0 0 40px rgba(99, 102, 241, 0.25)',
border: '4px solid #374151',
overflow: 'hidden',
display: 'flex',
flexDirection: 'column',
}}
>
{/* 동적 노치 / 아일랜드 */}
<div style={{ display: 'flex', justifyContent: 'center', marginBottom: '8px' }}>
<div style={{ width: '120px', height: '24px', backgroundColor: '#000', borderRadius: '12px' }} />
</div>
{/* 화면 콘텐츠 */}
<img
src={screenshotUrl}
alt="앱 화면"
style={{
width: '100%',
height: '100%',
objectFit: 'cover',
borderRadius: '32px',
}}
/>
</div>
</AbsoluteFill>
);
};
Remotion CLI 렌더링 명령어
# 9:16 세로 프로모 티저 렌더링 (릴스 / TikTok / 쇼츠)
npx remotion render src/remotion/index.ts AppPromoTeaser out/promo-teaser.mp4 --props='{"headline":"몇 분 만에 앱 출시","subheadline":"자율 스웜 지능","screenshotUrl":"/assets/screen.png"}'
5. 30초 고전환 티저 비디오 공식
| 타임스탬프 | 단계 | 시각적 신호 | 오디오 / 내레이션 가이드 |
|---|---|---|---|
| 00:00 - 00:04 | 후크 | 문제로 빠르게 줌 인 (예: 지저분한 수동 스프레드시트 또는 실패한 빌드). 빨간색/주황색 경고 배지. | "여전히 수동으로 릴리스를 배포하는 데 시간을 낭비하고 계신가요?" (강력하고 에너지 넘치는 음성 해설). |
| 00:04 - 00:12 | 공개 | 원활한 3D 기기 기울기 전환. 빛나는 대화형 악센트가 있는 앱 대시보드 등장. | "[앱 이름]을 소개합니다 — 자율적인 제로-투-프로드 엔진입니다." |
| 00:12 - 00:20 | 핵심 슈퍼파워 | 핵심 기능을 보여주는 3개의 빠른 컷: 1. 원클릭 설정; 2. 실시간 분석; 3. 즉시 동기화. | "한 번의 클릭으로 워크플로를 변환하고, 실시간 데이터를 동기화하며, 사람의 실수를 제거합니다." |
| 00:20 - 00:26 | 사회적 증거 | 별 5개 배지, G2/Product Hunt 배지, 떠다니는 사용 후기 아바타 알약. | "전 세계 10,000명 이상의 개발자가 신뢰합니다." |
| 00:26 - 00:30 | 행동 촉구 | 크고 반짝이는 CTA 버튼, App Store 및 Google Play 배지, 눈에 띄는 URL. | "지금 App Store에서 다운로드하거나 myapp.io를 방문하여 오늘 무료로 시작하세요." |
6. 자동 다중 기기 스크린샷 캡처 파이프라인
Playwright와 Puppeteer를 사용하여 CD/CI 파이프라인 내에서 실제 기기와 브라우저 창의 스크린샷을 캡처하면 마케팅 자산이 최신 UI를 반영하도록 보장합니다.
// scripts/capture-screenshots.ts
import { chromium } from 'playwright';
import path from 'path';
const DEVICE_CONFIGS = [
{ name: 'iPhone-16-Pro-Max', viewport: { width: 430, height: 932 }, deviceScaleFactor: 3 },
{ name: 'iPad-Pro-13', viewport: { width: 1024, height: 1366 }, deviceScaleFactor: 2 },
{ name: 'Pixel-9-Pro', viewport: { width: 412, height: 915 }, deviceScaleFactor: 3.5 },
{ name: 'Desktop-1440p', viewport: { width: 1440, height: 900 }, deviceScaleFactor: 1 },
];
async function captureScreenshots(appUrl: string, routes: string[], outputDir: string) {
const browser = await chromium.launch({ headless: true });
for (const device of DEVICE_CONFIGS) {
const context = await browser.newContext({ ...device });
const page = await context.newPage();
for (const route of routes) {
await page.goto(`${appUrl}${route}`, { waitUntil: 'networkidle' });
await page.waitForTimeout(2000); // 애니메이션 안정화
const screenshotPath = path.join(outputDir, `${device.name}${route.replace(/\//g, '-')}.png`);
await page.screenshot({ path: screenshotPath, fullPage: true });
console.log(`✅ 스크린샷 캡처됨: ${screenshotPath}`);
}
await context.close();
}
await browser.close();
}
// 사용법
captureScreenshots('http://localhost:3000', ['/', '/dashboard', '/settings'], './screenshots');
CI/CD 파이프라인 통합 (GitHub Actions)
# .github/workflows/screenshots.yml
name: Capture Marketing Screenshots
on:
schedule:
- cron: '0 6 * * 1' # 매주 월요일 오전 6시 UTC
workflow_dispatch: # 수동 트리거
jobs:
screenshots:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: 22
- run: npm ci
- run: npx playwright install --with-deps
- run: npm run build:storybook # 스크린샷을 위한 UI 라이브러리 빌드
- run: npx http-server storybook-static -p 6006 &
- run: npx tsx scripts/capture-screenshots.ts
- uses: actions/upload-artifact@v4
with:
name: promo-screenshots
path: ./screenshots/*
7. 접근성 및 대비 감사 (시각 UI 감사자)
모든 프로모 미디어 자산은 WCAG 2.2 AA/AAA 접근성 표준을 충족해야 합니다. visual-ui-auditor 자식 에이전트는 AI 비전(LLaVA-NeXT, GPT-4o)을 사용하여 각 마케팅 그래픽을 검사합니다:
- 대비 비율 확인: 텍스트-배경 명암비(일반 텍스트의 경우 WCAG AA: 4.5:1, 큰 텍스트의 경우 3:1).
- 가짜 UI 아티팩트 감지: 잘못된 OS 상태 표시줄 아이콘, 부정확한 그림자, 일치하지 않는 폰트 패밀리.
- 장치 프레임 충실도: Apple 및 Google의 HIG(휴먼 인터페이스 가이드라인)와 실제 기기 디멘전이 일치하는지 확인.
8. SVG 애니메이션 및 Framer Motion 통합
마이크로 인터랙션, 로딩 덤벨, 키네틱 로고 애니메이션을 포함한 가벼운 SVG 애니메이션 미디어 자산의 경우.
// components/AnimatedAppLogo.tsx
import { motion } from 'framer-motion';
const logoVariants = {
rest: { scale: 1, rotate: 0 },
hover: {
scale: 1.1,
rotate: [0, -10, 10, -5, 5, 0],
transition: { duration: 0.6, ease: 'easeInOut' },
},
};
export function AnimatedAppLogo({ size = 48 }: { size?: number }) {
return (
<motion.svg
width={size}
height={size}
viewBox="0 0 48 48"
fill="none"
xmlns="http://www.w3.org/2000/svg"
variants={logoVariants}
initial="rest"
whileHover="hover"
>
<rect x="4" y="4" width="40" height="40" rx="12" fill="url(#gradient)" />
<path d="M16 24L22 30L34 18" stroke="white" strokeWidth="4" strokeLinecap="round" strokeLinejoin="round" />
<defs>
<linearGradient id="gradient" x1="4" y1="4" x2="44" y2="44">
<stop stopColor="#6366f1" />
<stop offset="1" stopColor="#a855f7" />
</linearGradient>
</defs>
</motion.svg>
);
}
Bahasa Indonesia
Deskripsi
Panduan teknik kelas produksi untuk membuat media promosi aplikasi yang memiliki konversi tinggi, mencakup grafis statis visual (cuplikan layar App Store, kartu media sosial, spanduk OG dinamis) dan media gerak dinamis (video cuplikan programatis Remotion, panduan aplikasi kinetik, dan demo peluncuran bernarasi AI).
Kondisi Pemicu
- Membuat cuplikan layar promosi untuk Apple App Store & Google Play Store dengan tiruan perangkat.
- Membuat grafis peluncuran untuk Product Hunt, spanduk Twitter/X, tampilan LinkedIn, dan iklan karosel Instagram/TikTok.
- Menerapkan pembuatan gambar kartu sosial Open Graph (OG) dinamis melalui Satori /
@vercel/og. - Membuat video promosi aplikasi, trailer cuplikan, atau video tur produk secara programatis menggunakan Remotion (video berbasis React).
- Menulis skrip dan mensintesis papan cerita cuplikan aplikasi 30 detik dengan konversi tinggi menggunakan sulih suara AI.
- Mengotomatiskan jalur penangkapan cuplikan layar multi-resolusi menggunakan otomatisasi peramban headless (Playwright/Puppeteer).