app-preview-craft — 스토어 스크린샷, 소셜 카드 및 3D 디바이스 비디오
이 스킬이 만드는 모든 것은 페이지(stage/stage.html)를 테마로 꾸미고 헤드리스 Chrome으로 캡처한 결과물입니다: 정적 이미지는 스크린샷을 찍어 sharp로 마무리하고, 비디오는 프레임별로 렌더링하여 ffmpeg로 연결합니다. 동일한 페이지가 미리보기 스튜디오를 구동하므로, 사용자가 거기서 보는 것이 CLI로 내보낼 때와 정확히 일치합니다.
0. 스킬 찾기 및 초기 설정
아래 경로는 이 SKILL.md가 있는 디렉토리를 기준으로 합니다. 한 번 확인하여 명령어 앞에 해당 경로를 붙이세요. $SKILL은 문서 전체에서 이 디렉토리를 의미합니다:
SKILL=/절대/경로/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세트: 슬라이드당 스크린샷 1개, 크기별, overview.png포함iphone-6.91320×2868social-cardog/X/LinkedIn/Instagram/스토리용 카드 1개(또는 --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 "모든 유로, *정리된*" --title "예산이 *적응하는*" --title "*설계상* 비공개" \ --subtitle "한 줄 이점…" --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 스크린샷이 있을 때 해당 슬라이드에 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 (각 슬라이드의 focus로 전체 화면 Ken Burns), 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. --transparent를 추가하면 컷아웃 PNG를 얻습니다.
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레이아웃은 하나의 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:
| 종류 | 추가 키 |
|---|---|
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: "#어두운색,#밝은색",saturate,brightness,sharpen, 및blur-shot배경을 위한 사전 블러 배경. - iPhone 모델에서 Dynamic Island는 모델의 알약 및 카메라 컷아웃 위에 하나의 병합된 검은색 알약으로 그려지며, iOS가 표시하는 것과 일치합니다. 스크린샷은 아이슬랜드 영역이 깨끗하게 제공되어야 합니다(일반 iOS 캡처면 충분함);
cleanStatusBar는 시간과 아이콘을 양쪽에 유지합니다. - 디스플레이보다 긴 캡처는 비디오(
scroll테마)에서 스크롤되고 정적 이미지에서는 상단을 표시합니다(screen.fit=top). - 녹화는 출력 프레임 속도로 ffmpeg에 의해 프레임으로 분할됩니다; 비디오에서 각 녹화의 슬라이드는 클립만큼 지속됩니다(
hold로 재정의,trim으로 자르기). 정적 이미지는 하나의 프레임을 사용합니다(at, 기본값: 중간). - 노트북 디스플레이는 슬라이드에
desktop화면이 없으면 흐릿한 복사본 위에 전화기 스크린샷을 레터박스로 표시합니다.desktop도 녹화를 허용합니다.desk비디오에서 전화기 슬라이드와 동일한 시점을 공유합니다.
7. 사용자 정의 3D 모델
사용자가 자신의 .glb 또는 .gltf 디바이스 모델을 제공할 수 있습니다. $SKILL/example-models/에 예제가 있습니다. 모델은 scripts/device-conform.mjs에 문서화된 규칙을 따라야 합니다: 명명된 재질, 관절 및 원점. 준비가 되면:
node "$SKILL/scripts/cli.mjs" device-mockup shots/01.png \
--device /path/to/model.glb \
--theme studio
크레딧 요구사항: 번들된 모든 모델(Apple, Samsung, generic)은 CC-BY 4.0 라이선스입니다. 출력 이미지에 자동으로 CREDITS.txt가 포함되며, 출처 표시 조건에 동의한 것으로 간주됩니다. 사용자는 렌더링된 모든 곳에 크레딧을 포함시켜야 합니다. 자신의 모델을 추가하면 그들의 라이선스가 적용됩니다.
8. 미리보기 스튜디오
사용자가 시각적으로 탐색하고 조정하려면 스튜디오를 시작하십시오:
node "$SKILL/scripts/cli.mjs" studio --port 3000 # 기본 포트, 자동으로 브라우저 열기
node "$SKILL/scripts/cli.mjs" studio shots/01.png shots/02.png # 스튜디오에서 스크린샷 로드
스튜디오는 동일한 stage/stage.html 페이지를 사용하며, 편집기와 미리보기가 동일한 DOM입니다. 사이드바에서 테마, 디바이스, 크기 및 모든 렌더링 속성을 변경할 수 있습니다. 오른쪽 상단의 "내보내기" 버튼은 스크린샷 또는 비디오를 활성 설정으로 렌더링하여 --out 디렉토리(기본값: cwd)에 저장합니다.
9. 문제 해결
| 문제 | 확인할 사항 |
|---|---|
| 렌더링이 흰색 화면으로 표시됨 | doctor가 Ready를 보고했는지 확인; 콘솔 오류 확인; 스크린샷 경로가 확장자를 포함하고 존재하는지 확인 |
| 비디오가 생성되지 않음 | ffmpeg가 설치되었는지 확인 (doctor가 경고 표시); 출력 디렉토리에 쓰기 권한이 있는지 확인 |
| 3D 테마가 작동하지 않음 | GPU/WebGL 가용성 확인 (doctor가 보고); --device flat으로 대체 |
| 텍스트가 잘림 | 헤드라인 단축 또는 글꼴 크기 조정; --set type.size로 재정의 |
| 잘못된 색상 | --set palette.accent=auto 또는 특정 16진수 코드 사용; 스크린샷이 올바른 색 공간인지 확인 |
| 모델이 보이지 않음 | .glb 파일 경로 확인; 모델이 필요한 명명 규칙을 따르는지 확인 (device-conform.mjs 참조) |