app-preview-craft — 스토어 스크린샷, 소셜 카드 및 3D 기기 비디오은(는) 무엇을 하나요?
이 스킬이 만드는 모든 것은 테마로 꾸며진 페이지(stage/stage.html)이며, 헤드리스 Chrome으로 캡처됩니다. 정적 이미지는 스크린샷 후 sharp로 마무리되고, 비디오는 프레임 단위로 렌더링되어 ffmpeg로 전달됩니다. 동일한 페이지가 프리뷰 스튜디오를 구동하므로, 사용자가 거기서 보는 것이 CLI에서 내보낸 결과물과 정확히 일치합니다.
0. 스킬 찾기 및 초기 설정
아래 경로는 이 SKILL.md가 있는 디렉터리를 기준으로 합니다. 한 번 확인하고 명령어에 접두사로 사용하세요. $SKILL은 이 문서 전체에서 해당 디렉터리를 의미합니다.
SKILL=/absolute/path/to/app-preview-craft # SKILL.md, scripts/, stage/ 폴더가 있는 위치
# 설치 위치를 모르겠다면? (스킬 폴더나 Claude Code 플러그인 캐시 확인)
find ./.claude/skills ./.agents/skills ./.goose/skills ~/.claude/skills ~/.agents/skills \
~/.gemini/skills ~/.config/goose/skills ~/.claude/plugins \
-path '*app-preview-craft*/scripts/cli.mjs' 2>/dev/null | head -1
그런 다음 머신을 확인하세요. --fix는 패키지가 없을 때 스킬 내부에서 npm install을 실행합니다.
node "$SKILL/scripts/doctor.mjs" --fix
Doctor가 Ready.로 끝나야 합니다. ffmpeg가 없으면 경고만 표시됩니다(정적 이미지는 여전히 작동). WebGL이 없다고 보고되면 3D 테마를 렌더링할 수 없습니다. 이 경우 자동으로 플랫 테마로 전환하지 말고 사용자에게 알려야 합니다.
출력 파일은 사용자가 작업 중인 디렉터리(쉘의 cwd)에 저장되며, 사용자가 --out으로 다른 폴더를 지정하지 않는 한 그렇습니다. $SKILL 안에는 절대 렌더링 결과를 쓰지 마세요. 임시 상태는 $TMPDIR/app-preview-craft/에 저장되며 각 실행 후 제거됩니다.
1. 워크플로우
-
카테고리 선택(첫 번째 CLI 인수) 사용자가 요청한 것에 따라:
카테고리 생성물 기본 크기 app-store세트: 슬라이드당, 크기당 스크린샷 한 장 + overview.pngiphone-6.91320×2868social-cardog/X/LinkedIn/Instagram/스토리용 카드 한 장(또는 --all슬라이드 전체)og1200×630screen-video스크린만으로 만든 2D 모션; 화면 녹화도 허용 reel1080×1920device-videothree.js 기기 쇼케이스 비디오 reel1080×1920device-mockup3D 히어로 정적 이미지, 선택적으로 투명 배경 mockup-landscape2400×1600 -
콘텐츠 수집. 사용자 프로젝트에서 스크린샷(PNG/JPG/WebP) 및/또는 녹화(MP4/MOV/WebM)를 슬라이드당 하나씩 순서대로 가져옵니다. 사용자가 직접 제공하지 않는 한 직접 카피를 작성하세요(§4 참조). 스크린이 없으면 번들 샘플 앱 "Tempo"가 사용됩니다. 테마 시연에는 괜찮지만, 실제 납품용으로는 사용하지 마세요.
-
테마 선택. 사용자가 지정한 테마가 우선합니다. App Store 세트의 경우 앱의 스토어 카테고리를 §3의 표와 매칭하고 선택한 테마와 그 이유를 설명하세요. 사용자가 결정을 못 내릴 경우, 먼저 옵션을 보여주세요:
node "$SKILL/scripts/cli.mjs" gallery app-store # → ./gallery-app-store.png시트를 다시 읽어서(사용자에게 렌더링되도록) 사용자가 선택하게 하세요. 사용자가 시각적으로 탐색하고 조정하려면 스튜디오(§8)가 더 나은 선택입니다.
-
렌더링.
node "$SKILL/scripts/cli.mjs" app-store shots/01.png shots/02.png shots/03.png \ --theme ledger \ --title "Every euro, *accounted for*" --title "Budgets that *adapt*" --title "Private *by design*" \ --subtitle "One-line benefit…" --subtitle "…" --subtitle "…" \ --size iphone-6.9,ipad-13 --set palette.accent=auto -
결과 보고 전에 검사하세요.
overview.png(세트), 정적 이미지, 또는 비디오에서 프레임 추출(--frames 1,4,mid,end는 비디오 대신 PNG 프레임을 렌더링 — 모션 확인에 저렴함). 잘린 헤드라인, 기기 위의 텍스트, 데코를 가리는 기기, 빈 화면이 없는지 확인하세요.--set/슬라이드별 재정의로 수정하고 다시 렌더링하세요. -
보고 출력 경로, 테마와 크기, 그리고 3D 기기가 나타날 때마다
CREDITS.txt가 작성되었고 CC-BY 크레딧이 이미지와 함께 전달되어야 한다는 점을 알리세요(§7).
2. 크기
node "$SKILL/scripts/cli.mjs" list sizes --category app-store 명령어가 표를 출력합니다. WxH 형식도 작동합니다. 여러 개를 한 번에 지정: --size iphone-6.9,iphone-6.5,ipad-13.
- App Store Connect는 iPhone 앱의 경우 6.9" 세트(
iphone-6.9)를, iPad 앱의 경우ipad-13을 필요로 합니다. 다른 크기는 선택 사항입니다. PNG 출력은 평면화됩니다(Apple은 알파 채널을 거부). - 태블릿 크기는 테마가 프레임리스가 아닌 한 자동으로 휴대폰을 평평한 태블릿 프레임으로 대체합니다. 앱에 해당 슬라이드가 있는 경우 iPad 스크린샷을 제공하세요.
- 앱 프리뷰 비디오:
--size app-preview(886×1920) 또는app-preview-ipad, 15–30초, 30fps. 무음 스테레오 AAC 트랙이 자동으로 추가됩니다(Connect가 오디오를 기대함). - Google Play:
play-phone,play-tablet,play-feature(1024×500, 소셜 카드).
3. 테마
list themes --category <c> 명령어가 이 테마들을 레이아웃과 함께 출력합니다. 각 카테고리는 ≥ 5개의 테마를 가집니다.
app-store — 각각 인기 앱 카테고리를 모델로 함
| 테마 | 앱 카테고리 | 영감 받은 앱 | 느낌 |
|---|---|---|---|
stride | 건강 및 피트니스 | Strava, Nike Run Club | 뜨거운 오렌지, 압축된 대문자 필, 스피드 스트라이프, 각진 휴대폰 |
ledger | 금융 | Revolut, Monzo, Robinhood | 미드나잇 메쉬, 민트→시안 그라데이션 단어, 크롬 오브 |
serene | 건강 및 마음챙김 | Calm, Headspace | 파스텔 오로라, 이탤릭 세리프 악센트, 부드러운 블롭 위 프레임리스 스크린 |
canvas | 생산성 | Notion, Things, Linear | 따뜻한 종이, 노트북 그리드, 큰 세리프, 평평한 잉크 휴대폰 |
sizzle | 음식 및 음료 | DoorDash, Uber Eats, Deliveroo | 햇살 노랑, 물방울 무늬, 빨간 마커 강조, 기울어진 휴대폰 |
wander | 여행 | Airbnb, Hopper, Booking | 황혼 그라데이션과 세트 전체를 가로지르는 레트로 태양(파노라마) |
mixtape | 음악 및 오디오 | Spotify, Apple Music | 화면이 흐려져 빛나는 배경이 됨, 거대한 외곽선 단어 |
arcade | 게임 | Apple Arcade, 모바일 게임 런칭 아트 | 신스웨이브 그리드, 네온 테두리, 광택 3D 장난감 |
snapshot | 사진 및 소셜 | Instagram, BeReal, VSCO | 세 장의 프레임리스 샷이 마치 인화지처럼 펼쳐짐, 따뜻한 필름 메쉬 |
pulse | 건강 데이터 및 웨어러블 | Oura, WHOOP, Apple Health | 임상적인 검정, 진홍빛 광선, 정면 Pro Max 아래 헤드라인 |
테마는 브랜드가 아닌 분위기에서 빌려옵니다. 해당 앱의 로고, 이름 또는 아트워크는 나타나지 않습니다.
social-card
launch (오로라 + 기울어진 휴대폰), spotlight (빔 + 거울 바닥), pastel-fan (세 개의 펼쳐진 화면), bento (화면 자른 그리드), neon-grid (신스웨이브), editorial (종이, 세리프, 듀오톤 화면), duo (MacBook + 휴대폰 — 노트북용 desktop 화면 전달).
screen-video (2D)
carousel, stack (카드가 날아감), scroll (긴 캡처가 휴대폰 안에서 스크롤됨), zoom-tour (전체 화면 Ken Burns 효과로 각 슬라이드의 focus로 이동), wall (기울어진 화면 벽), store-preview (App Store 프리뷰 스타일 — --size app-preview 사용), grid-reveal.
device-video (3D)
turntable, orbit (카메라 아크), float (반복 가능), rise (카메라가 안으로 밀어넣음), flip (뒤→앞 공개), trio (세 모델이 부채꼴로 펼쳐짐), desk (MacBook 뚜껑 열리고 휴대폰이 그 옆으로 미끄러짐; 둘 다 scene.floor 위에 서 있음), spotlight (거울 위 360°), synthwave, keyframes (직접 만든 기기 및 카메라 움직임, motion.keys 사용 — §5 참조).
device-mockup (3D 정적 이미지)
studio, noir, pedestal, levitate, lineup (모든 휴대폰 모델), flatlay, desk-duo. 컷아웃 PNG를 위해 --transparent를 추가하세요.
4. 카피
- 슬라이드당 헤드라인: 6단어 이하, 기능이 아닌 이점. 테마 스타일에서 강조하기 위해 1–2단어를
*별표*로 감싸세요;" | "는 줄 바꿈을 강제합니다. - 부제목: 하나의 짧은 문장. 킥커(선택 사항): 위에 한 단어 라벨.
- 처음 두 슬라이드가 핵심을 전달합니다. 대부분의 구매자는 더 이상 스크롤하지 않습니다.
- 평점, 다운로드 수, 수상 경력 또는 언론 인용을 절대 만들어내지 마세요.
rating및laurels와 같은 데코는 사용자가 제공한 실제 수치를 위한 것입니다. 확실하지 않으면 물어보세요. - 경쟁사를 언급하거나 스토어 가이드라인이 허용하는 것 이상으로 Apple/Google 상표를 카피에 사용하지 마세요.
5. 모든 것 구성하기
해결 순서, 나중에 선언된 것이 우선합니다:
내장 기본값 → 레이아웃 기본값 → 테마(및 그 extends 체인) → 사용자 정의 테마 파일 → 프로젝트 설정 themeOverrides → CLI 단축키 → --set → 슬라이드별 theme.
- 단축키:
--layout --device --finish --pose --font --body-font --bg --bg2 --bg3 --ink --sub --accent --accent2 --background --pattern --background-image --clean-status-bar --no-decor --duration --fps --speed --intro --outro. --set path=value는 모든 테마 키에 도달합니다(반복 가능).list options가 문서화된 경로를 유형 및 범위와 함께 출력합니다. 값은 강제 변환됩니다. JSON은 리스트/객체에 작동합니다:--set device.pose=5,-15,4 --set 'decor=[{"kind":"sparkles","count":8}]'.device.pose는x,y,z도입니다. 테마는 대략 ±20° 요 및 ±6° 롤 내에 있어 스토어 썸네일 크기에서도 화면이 여전히 읽힙니다. 더 급한 포즈도 가능하지만 가독성을 해칠 수 있습니다.- 색상은
auto를 허용합니다. 첫 번째 스크린샷에서 가장 선명한 색상:--accent auto. --device iphone-17-pro | iphone-17-pro-max | iphone-12-pro | galaxy-s21-ultra | macbook-pro-16 | flat[:phone|phone-android|tablet|browser] | frameless | none, 또는 사용자가 직접 만든 모델의 ID(§7).- 레이아웃은 종류 내에서 서로 바꿔 쓸 수 있습니다(
list layouts): 정적 이미지 —hero-top,hero-bottom,tilt,duo,fan,split,big-type,callout,bento,laptop-phone,showcase,pedestal,lineup,flatlay; 비디오 —carousel,stack,scroll,zoom-tour,wall,phone-swap,grid-reveal,turntable,orbit,float,rise,flip,trio,desk,spotlight,keyframes. - 직접 만든 모션:
keyframes레이아웃은motion.keys를 통해 하나의 3D 기기와 카메라를 움직입니다.motion.keys는{ "at": 0..1, "x", "y", "size", "pose": [rx, ry, rz], "cam": { "yaw", "pitch", "dist" }, "ease" }의 리스트입니다.at은 전체 비디오의 분수입니다. 키에서 생략된 값은 이전 키의 값을 유지합니다. 첫 번째 키는 테마 자체의 포즈에서 시작합니다. 이징:linear inOutCubic inOutSine outCubic outQuart outBack inOutQuart outExpo.--theme keyframes --set 'motion.keys=[{"at":0,"y":1.4,"pose":[0,70,0]},{"at":0.3,"y":0.62,"pose":[4,-20,3],"ease":"outQuart"},{"at":1,"pose":[0,15,0],"cam":{"dist":0.9}}]'. 애니메이션 라이브러리는 관여하지 않습니다. 모든 프레임은 시간의 순수 함수이므로 프레임을 순서 없이 렌더링할 수 있습니다.--frames 0,2,mid,end로 움직임을 확인하세요.
사용자 정의 테마는 extends를 포함한 테마 키의 하위 집합이 있는 JSON(또는 .mjs) 파일입니다:
{ "extends": "app-store/ledger", "name": "Acme", "palette": { "accent": "#ff5a1f" },
"type": { "display": "bricolage", "weight": 800 }, "device": { "finish": "#1c1f24" } }
--theme path/to/acme.json으로 전달하거나, ./.app-preview-craft/themes/(또는 ~/.app-preview-craft/themes/)에 넣고 --theme acme를 사용하세요. list themes는 사용자 정의 테마를 보여줍니다.
프로젝트 설정. node "$SKILL/scripts/cli.mjs" init app-store는 app-preview-craft.json을 작성합니다. 이후 node "$SKILL/scripts/cli.mjs"(인수 없음)가 이를 렌더링하고, 플래그가 이를 재정의합니다. $SKILL/examples/app-preview-craft.json은 완전하고 작동하는 예제입니다: 슬라이드별 카피, 데코 및 테마 재정의, 사용자 정의 테마 파일, 데스크탑 화면, 그리고 하나의 명령으로 App Store 세트, 소셜 카드, 목업 및 비디오를 렌더링하는 jobs 리스트가 포함되어 있습니다. 설정의 경로는 설정 파일을 기준으로 해석됩니다.
슬라이드별 키: screen, desktop (노트북 디스플레이), title, subtitle, kicker, theme (해당 슬라이드에만 적용되는 재정의), decor (해당 슬라이드의 테마 데코를 대체), focus: [x, y, zoom] (줌 투어 대상), hold (비디오에서 초), trim: [start, end] 및 at (녹화에서 정적 이미지가 사용할 초), bigWord (큰 글자 레이아웃).
데코 항목은 {kind, x, y, scale, rotate, style, layer, delay, …}이며 x/y는 페이지 분수이고 style은 glass | solid | light | dark | outline 중 하나입니다:
| kind | 추가 키 |
|---|---|
badge | text, icon (star bolt heart check sparkle trophy leaf lock music pin flame bell chart shield globe play) |
rating | score, label, starColor |
laurels | top, text, bottom |
chips | items[], icons[], width, lead |
notification | app, title, body, time, icon (이미지 경로) 또는 glyph, width |
stat | label, value, trend, trendColor |
callout | rect: [x, y, w, h] (확대할 스크린샷의 영역), w, border, radius |
arrow | w, h, text (손글씨 메모), flip, stroke |
logo | name, src (앱 아이콘 경로) |
store-badge | top, text, 또는 공식 배지 아트워크를 위한 src |
sparkles confetti | count, colors[], area: [x0, y0, x1, y1], seed |
blob | size, color, opacity (기기 뒤에 위치) |
orbs rings shapes | 3D 기본 요소: count, shapes[], finish (glossy chrome matte glass iridescent), area, items[] |
credit | text (모델 크레딧 라인 기본값) |
6. 화면 및 처리
- sharp는 Chrome이 시작되기 전에 모든 스크린샷을 준비합니다:
screen.cleanStatusBar(9:41 / 완충 iOS 상태 표시줄 다시 그림 — 휴대폰 모양 캡처만 해당),tint+tintAmount,duotone: "#dark,#light",saturate,brightness,sharpen, 및blur-shot배경을 위한 사전 블러 배경. - iPhone 모델에서 Dynamic Island는 모델의 알약 및 카메라 컷아웃 위에 하나의 병합된 검은 알약으로 그려지며, iOS가 표시하는 것과 일치합니다. Dynamic Island 영역이 깨끗한 스크린샷을 제공하세요(일반 iOS 캡처이면 충분함);
cleanStatusBar는 시간과 아이콘을 양쪽에 유지합니다. - 디스플레이보다 긴 캡처는 비디오에서 스크롤되고(
scroll테마), 정적 이미지에서는 상단을 표시합니다(screen.fit=top). - 녹화는 출력 프레임 속도로 ffmpeg에 의해 프레임으로 분할됩니다. 비디오에서는 각 녹화의 슬라이드가 클립 길이만큼 지속됩니다(
hold로 재정의,trim으로 자르기). 정적 이미지는 하나의 프레임을 사용합니다(at, 기본값: 중간). - 노트북 디스플레이는 슬라이드에
desktop화면이 없으면 휴대폰 스크린샷을 흐리게 복사한 위에 레터박스로 표시합니다.desktop은 녹화도 받습니다.desk비디오에서는...
(번역 중략) 나머지 내용은 원본 SKILL.md의 나머지 부분을 그대로 따릅니다.