--- name: store-screenshots description: 앱스토어·플레이스토어 등록용 마케팅 스크린샷 자동 생성. 원본 앱 스크린샷에 기기 프레임(iPhone, iPad, Galaxy, Fold, Flip)을 씌우고 배경 그라데이션과 홍보 문구를 얹어 스토어 규격 PNG로 출력한다. Turns raw app screenshots into store-ready App Store & Google Play marketing images — device frames, branded backgrounds, marketing copy, exact store sizes. "스토어 스크린샷 만들어줘", "앱스토어 이미지", "플레이스토어 스크린샷", "make App Store screenshots", "Play Store screenshots" 같은 요청에 사용. argument-hint: [원본 스크린샷 폴더 경로] ---

# 스토어 스크린샷 생성기

원본 앱 스크린샷을 받아 → 기기 프레임 + 브랜드 배경 + 홍보 문구를 얹은 스토어 등록용 이미지를 만든다.

## 에이전트 호환

이 스킬은 Claude Code와 OpenAI Codex 어디서든 동작한다. 본문의 표현은 실행 중인 에이전트에 맞게 해석한다:

- **"선택지로 묻는다"** — 선택지 UI 툴이 있으면 그걸 쓰고(Claude Code: AskUserQuestion, multiSelect 지원), 없으면(Codex 등) 번호를 매긴 선택지를 텍스트로 제시하고 번호로 답하게 한다. 추천 항목에는 "(Recommended)"를 붙인다. - **"이미지를 열어 확인한다"** — 에이전트의 이미지 열람 수단을 쓴다(Claude Code: Read, Codex: view_image). - **원본 폴더 인자** — Claude Code는 `$ARGUMENTS`, Codex는 스킬 호출 문장에 함께 적힌 경로를 쓴다.

## 절대 규칙

1. **컨펌 전에는 전체 렌더링을 하지 않는다.** 문구 초안 표 + 시안 1장(첫 슬라이드)을 보여주고 사용자 OK를 받은 뒤에만 나머지를 렌더링한다. 2. 최종 PNG는 전부 픽셀 크기를 검증(`sips` 또는 ImageMagick `identify`)하고, 규격 표와 다르면 다시 렌더링한다. 3. 기기 프레임은 외부에서 다운로드하지 않고 HTML/CSS로 직접 그린다(라이선스·네트워크 문제 없음). 실사 프레임을 원하면 아래 "실사 프레임" 참고. 4. 중간 작업 파일(html 등)은 임시 폴더(스크래치패드 등)에 두고, 출력 폴더에는 최종 PNG만 남긴다. 5. **사용자에게 손을 쓰게 하지 않는다.** 화면 전환·탭 같은 기기 조작은 에이전트가 adb/idb/AppleScript로 직접 한다(아래 "자동 캡처"). 사용자의 개입은 선택지 고르기나 짧은 타이핑까지만. "화면 띄우고 메시지 보내주세요" 같은 진행은 금지 — 자동화 수단이 전부 실패했을 때만 선택지로 수동 진행 여부를 묻는다.

## 워크플로

### 1. 원본 수집

- **재실행이면 먼저 묻는다.** 출력 폴더(`store-screenshots/`)나 이전에 쓰던 원본이 이미 있는 상태에서 "다시 해줘" 류의 요청이 오면, 작업 전에 선택지로 묻는다: - "기존 스크린샷 재활용해서 업데이트 (Recommended)" — 캡처를 생략하고 기존 원본으로 문구·디자인·규격만 다시 작업한다. - "처음부터 새로 만들기" — 앱에서 원본 캡처부터 전부 다시 한다. - 어느 쪽이든 렌더링 전에 대상 출력 폴더를 비워, 장수가 달라졌을 때 이전 파일이 섞이지 않게 한다. - 인자로 폴더를 받았으면 거기서, 아니면 현재 디렉토리에서 png/jpg를 스캔한다: `find . -maxdepth 2 \( -iname '*.png' -o -iname '*.jpg' \) -not -path '*/store-screenshots/*'` - 파일이 없으면 **에이전트가 직접 기기를 조작해서 캡처한다**(아래 자동 캡처). 사용자에게 화면 전환을 부탁하지 않는다. - **각 원본 이미지를 열어 무슨 화면인지 파악한다.** 문구는 실제 화면 내용에 근거해야 한다. 직접 캡처한 경우에도 캡처 직후 이미지를 열어 의도한 화면이 맞는지 확인하고, 아니면 다시 탐색해서 재캡처한다. - 앱 이름·아이콘을 찾을 수 있으면 참고한다(Info.plist, strings.xml, ic_launcher, 앱 아이콘 파일 등). - 캡처할 화면 목록(홈, 핵심 기능 화면 등)은 에이전트가 앱 구조를 보고 스스로 정하되, 애매하면 2단계 질문에 선택지로 끼워서 같이 묻는다.

#### 자동 캡처 — Android (adb, 완전 자동)

1. `adb devices`로 기기/에뮬레이터 확인. 앱 실행: `adb shell monkey -p <package> 1` 또는 `adb shell am start -n <package>/<activity>`. 2. 현재 화면의 UI 구조를 덤프해서 탭·버튼 좌표를 얻는다: `adb exec-out uiautomator dump /dev/tty` → XML의 `bounds="[x1,y1][x2,y2]"`에서 중심 좌표 계산. 3. 이동 → 안정화 → 캡처를 한 번에 (sleep은 기기 쪽에서 실행): `adb shell "input tap X Y; sleep 1" && adb exec-out screencap -p > 02-mypet.png` 4. 화면마다 2~3을 반복. 스크롤이 필요하면 `adb shell input swipe`, 텍스트 입력은 `adb shell input text`.

#### 자동 캡처 — iOS 시뮬레이터

캡처는 `xcrun simctl io booted screenshot 01.png`. 화면 이동은 우선순위대로:

0. **딥링크가 최우선.** 앱 소스에서 URL scheme을 찾는다(Info.plist의 `CFBundleURLTypes`, 라우팅 코드). 있으면 탭이 아예 필요 없다: `xcrun simctl openurl booted "myapp://calendar"` → 1초 대기 → 캡처. simctl만으로 100% 자동화되므로 아래 도구들이 전부 불필요. scheme이 없는 앱이면 "탭별 딥링크를 앱에 추가해줄까?"를 선택지로 제안해볼 것 — 몇 줄이면 되고 이후 재실행도 편해진다. 1. **idb**가 있으면(`command -v idb`): `idb ui describe-all`로 요소 좌표를 얻고 `idb ui tap X Y`. 2. **Maestro**가 있으면(`command -v maestro`): `tapOn`/`takeScreenshot`으로 flow yaml을 만들어 `maestro test`. 3. 둘 다 없으면 AppleScript로 Simulator 창을 직접 클릭(손쉬운 사용 권한 필요): System Events로 Simulator 창의 position/size를 얻고, 기기 해상도 → 창 좌표로 비례 변환해 `click at {x, y}`, 사이사이 `delay 1`. 4. 전부 실패했을 때만 선택지로 묻는다: "idb 설치 후 자동 진행 (Recommended)" / "앱에 딥링크 추가하고 진행" / "내가 직접 화면을 넘길게". 수동을 골랐을 때만 사용자에게 화면 전환을 부탁한다.

#### 캡처 전 상태바 정리 (스토어 품질)

모든 캡처의 시계·배터리·안테나를 통일하면 결과물이 한 세트로 보인다. 캡처 시작 전에 걸고, 끝나면 해제한다.

- iOS: ```bash xcrun simctl status_bar booted override --time "9:41" --batteryLevel 100 --cellularBars 4 --wifiBars 3 # 캡처 끝난 뒤: xcrun simctl status_bar booted clear ``` - Android (데모 모드): ```bash adb shell settings put global sysui_demo_allowed 1 adb shell am broadcast -a com.android.systemui.demo -e command enter adb shell am broadcast -a com.android.systemui.demo -e command clock -e hhmm 0941 adb shell am broadcast -a com.android.systemui.demo -e command battery -e level 100 -e plugged false adb shell am broadcast -a com.android.systemui.demo -e command network -e wifi show -e level 4 # 캡처 끝난 뒤: adb shell am broadcast -a com.android.systemui.demo -e command exit ```

### 2. 질문 플로우 (전부 선택지로)

이미 대화에서 답이 나온 항목은 다시 묻지 않는다. 사용자가 타이핑 없이 **선택만으로** 답할 수 있게 선택지로 묻는다.

**1차 — 플랫폼** (질문 1개): - App Store (iOS) / Google Play (Android) / 둘 다

**2차 — 세부** (질문 4개를 한 번에, 기종 선택지는 1차 답에 맞춰 구성):

| 질문 | 선택지 | |---|---| | 기종 (복수 선택) | iOS: iPhone(Recommended), iPad · Android: Galaxy 폰(Recommended), Fold, Flip, 태블릿 · 둘 다: iPhone, iPad, Galaxy 폰, Fold·Flip | | 스타일 | 기존 앱 디자인에 맞추기(Recommended) / 모던·미니멀 / 밝고 팝하게 / 다크·세련 | | 장수 | 4장 / 5장(Recommended) / 6장 / 스토어 최대 | | 어필 방향 | 알아서 뽑아줘(Recommended) / 핵심 기능 직접 지정 — 직접 지정이면 자유 입력(Other)으로 기능을 적게 한다 |

### 3. 배경 디자인 결정

스타일 답에 따라 배경·장식·톤을 정한다.

- **기존 앱 디자인에 맞추기** (기본): 앱의 실제 디자인 시스템에서 뽑는다. - 색: Android는 `res/values/colors.xml`·`themes.xml`, iOS는 `Assets.xcassets`의 Color Set, Flutter는 `ThemeData`, 웹 기반이면 CSS 변수·tailwind config. 소스가 없으면 앱 아이콘·스크린샷에서 주조색과 포인트색을 추출한다. - 톤: 앱 UI가 라이트면 밝게, 다크면 어둡게. 앱의 코너 radius가 크면 배경 장식도 둥글게, 버튼이 각지면 장식도 각지게. - **모던·미니멀**: 밝은 단색 또는 아주 옅은 그라데이션, 여백 크게, 장식 없음. 헤드라인 볼드 + 서브카피 옅게. - **밝고 팝하게**: 채도 높은 그라데이션(주조색 ± 인접색), 큰 블롭·도형 장식 1~2개, 기울임 적극 사용. - **다크·세련**: `#0b0b0f` 계열 어두운 배경 + 주조색 글로우·그라데이션 포인트, 프레임 그림자 강하게.

공통: 텍스트는 상단 12~18%에 배경과 대비 확실한 색, 폰트 `-apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif`. 슬라이드마다 같은 hue에서 명도만 살짝 바꾸면 세트 느낌이 난다. 기기는 하단 중앙 + bottom bleed(화면 아래로 살짝 잘리게) + `box-shadow`, 홀수 장 -2도 / 짝수 장 +2도 기울이면 리듬감(기울임 여부는 컨펌 때 언급).

### 4. 시안 + 문구 초안 ← 컨펌 게이트

- 슬라이드 구성 (2차 질문의 장수 답 반영, App Store 최대 10장·Play 폼팩터당 2~8장): - 1장: 훅 — 앱의 핵심 가치 한 줄. 목록에서 1~2장만 보이므로 가장 중요하다. - 중간: 자랑할 기능 하나씩 (어필 방향 반영). - 마지막: 신뢰·마무리(리뷰, 다운로드 수, CTA) — 근거가 있을 때만. - 문구 규칙: - 헤드라인: 한글 6~14자, 혜택 중심. "할 일을 잊지 않게" > "알림 기능". - 서브카피: 0~1줄, 20자 이내. - "1위", "최고" 같은 표현은 근거가 있을 때만. - **문구 표 + 시안 1장을 함께 제시한다**: - 표: | # | 원본 파일 | 헤드라인 | 서브카피 | - 시안: 1번 슬라이드만 실제 규격으로 렌더링해서 macOS면 `open <파일>`로 띄워 보여준다. 배경·프레임·문구를 실물로 확인시키기 위함. - 수정 요청이 오면 반영해 다시 제시한다(시안도 다시 렌더링). **OK를 받으면** 전체 렌더링으로.

### 5. 렌더링

- 타깃 × 슬라이드마다 HTML 파일을 생성한다(아래 템플릿). body 크기 = 스토어 규격 픽셀. - 원본 이미지는 상대경로 `<img src="./01.png">`로 참조한다(data URI 불필요 — 같은 폴더에 복사해 두면 된다). - 렌더 명령 (기본: 헤드리스 크롬):

```bash # 크롬 실행 파일 찾기 (OS에 맞게) CHROME="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" # macOS command -v google-chrome >/dev/null 2>&1 && CHROME=google-chrome # Linux command -v chromium >/dev/null 2>&1 && CHROME=chromium

"$CHROME" --headless=new --screenshot="$OUT" --window-size=1320,2868 \ --force-device-scale-factor=1 --hide-scrollbars --virtual-time-budget=2000 "$HTML" ```

- 크롬이 없으면 폴백: `npx -y playwright screenshot --viewport-size=1320,2868 "$HTML" "$OUT"` (첫 실행 시 `npx playwright install chromium` 필요할 수 있음).

### 6. 검증·보고

- 픽셀 크기 전수 확인 후 규격 표와 대조: macOS는 `sips -g pixelWidth -g pixelHeight <파일>`, 그 외 OS는 `identify -format '%wx%h\n' <파일>`(ImageMagick). - 슬라이드 최소 1장을 이미지로 직접 열어 확인: 글자 잘림, 프레임 비율 왜곡, 스크린샷 상하단 잘림. - 출력 구조를 보여주고, 스토어 어느 슬롯에 올리면 되는지 안내하며 마무리한다.

출력 구조:

``` store-screenshots/ ├── appstore-iphone-69/01.png … # 1320×2868 ├── appstore-iphone-65/ # 1284×2778 — iPhone은 항상 두 세트 ├── appstore-ipad-13/ ├── play-phone/ └── play-foldable/ ```

## 스토어 규격 (2026년 8월 기준, 공식 문서 검증 완료)

| 타깃 | 크기(px, 세로) | 장수 | 비고 | |---|---|---|---| | App Store iPhone 6.9" | 1320×2868 | 최대 10 | 1290×2796도 허용. iPhone Air·iPhone 17 Pro Max·16 Pro Max 포함 | | App Store iPhone 6.5" | 1284×2778 | 최대 10 | 1242×2688도 허용 | | App Store iPad 13" | 2064×2752 | 최대 10 | iPad 지원 앱이면 필수. 2048×2732 허용 | | Play 폰 | 1080×1920 | 2~8 | 9:16. 피처링 조건: 최소 1080px, 4장 이상 | | Play 태블릿 7"/10" | 1080×1920 또는 1920×1080 | 최대 8 | 태블릿 지원 시 | | Play 폴더블 | 폰 슬롯에 포함 | — | 별도 슬롯 없음. Fold 펼침 화면은 태블릿 슬롯에도 활용 가능 |

- **iPhone은 6.9"와 6.5" 두 세트를 모두 렌더링한다.** App Store Connect는 앱의 기기 지원 범위에 따라 6.5" 규격(1284×2778 / 1242×2688)을 요구하기도 해서, 6.9" 한 세트만 만들면 업로드가 거부될 수 있다. 같은 HTML에서 body 크기만 바꿔 다시 캡처하면 되므로 비용이 거의 없다.

규격은 바뀔 수 있다. 확신이 없으면 렌더링 전에 공식 문서를 확인한다: - App Store: developer.apple.com/help/app-store-connect/reference/screenshot-specifications - Play: support.google.com/googleplay/android-developer/answer/9866151

## 기기 프레임 스펙 (CSS로 그리기)

| 기기 | 화면비(세로) | 코너 radius | 베젤 | 상단 요소 | |---|---|---|---|---| | iPhone | 1320:2868 | 프레임 폭의 ~14% | 균일 ~2% | Dynamic Island 알약 (폭 ~26%, 상단에서 ~1.8%) | | iPad | 3:4 | ~4% | 균일 ~3.5% | 없음 | | Galaxy S | 9:19.5 | ~7% | 균일 ~1.5% | 중앙 펀치홀 (지름 ~3%) | | Galaxy Fold 펼침 | 1856:2160 (거의 정사각) | ~5% | ~2% | 우측 상단 펀치홀 + 중앙 세로 힌지 라인(아주 옅게) | | Galaxy Flip | 9:22 | ~8% | ~1.5% | 중앙 펀치홀 |

- 프레임 = `div` (배경 `#101014`, `border-radius`, `padding` = 베젤, `inset box-shadow`로 금속 테두리 느낌 한 줄). - 화면 = `img { object-fit: cover; object-position: top; border-radius: 바깥radius − 베젤 }`. - 원본 비율이 프레임과 다르면 cover로 채우되 **상단 고정**(상태바 쪽이 보이는 게 자연스럽다). - Galaxy 펀치홀: 알약 대신 `.hole { width:34px; height:34px; border-radius:50%; background:#000; top:40px; left:50%; }`. - Fold 힌지: 화면 위에 세로 1줄 `linear-gradient` 오버레이(투명→살짝 어둡게→투명).

### 실사 프레임을 원할 때

사용자가 "진짜 기기 사진 프레임"을 원하면 직접 다운로드하지 말고 안내한다: - Apple 공식 베젤: developer.apple.com/design/resources (Product Bezels, 마케팅 가이드라인 확인 필요) - Samsung: Samsung Developers / Samsung Newsroom의 공식 목업 검색 사용자가 파일을 받아 경로를 주면, CSS 프레임 대신 그 이미지를 겹쳐 쓴다.

## 슬라이드 HTML 템플릿 (iPhone 6.9" 예시)

다른 기기는 body 크기, `.device`의 `aspect-ratio`·`border-radius`·상단 요소만 위 표대로 바꾼다.

```html <!doctype html> <html><head><meta charset="utf-8"> <style> :root { --c1:#4F46E5; --c2:#312E81; } /* 앱 주조색으로 교체 */ * { margin:0; box-sizing:border-box; } body { width:1320px; height:2868px; overflow:hidden; background:linear-gradient(165deg,var(--c1),var(--c2)); font-family:-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif; display:flex; flex-direction:column; align-items:center; } .copy { text-align:center; margin-top:220px; color:#fff; padding:0 90px; } .copy h1 { font-size:118px; font-weight:800; letter-spacing:-2px; line-height:1.15; } .copy p { font-size:52px; font-weight:500; opacity:.85; margin-top:36px; } .device { margin-top:170px; width:1010px; aspect-ratio:1320/2868; background:#101014; border-radius:145px; padding:24px; box-shadow:0 80px 160px rgba(0,0,0,.45), inset 0 0 0 5px #3c3c40; position:relative; transform:rotate(-2deg); } .device img { width:100%; height:100%; object-fit:cover; object-position:top; border-radius:121px; } .island { position:absolute; top:52px; left:50%; transform:translateX(-50%); width:270px; height:78px; border-radius:44px; background:#000; } </style></head> <body> <div class="copy"><h1>헤드라인</h1><p>서브카피</p></div> <div class="device"><img src="./01-home.png"><div class="island"></div></div> </body></html> ```

## 문구 톤 가이드

- 스토어 목록에서 실제로 보이는 건 1~2장 — 첫 장에 앱의 존재 이유를 담는다. - 혜택 > 기능: "가계부가 자동으로 써진다" > "SMS 파싱 기능". - 사용자가 "알아서"를 골랐으면: 스크린샷을 보고 차별점이 큰 순서로 4개를 뽑아, 왜 그걸 골랐는지 근거와 함께 제시한다. - 로케일: 기본 한국어. 영어 스토어에도 올린다면 같은 레이아웃에 영어 문구 세트를 추가로 생성한다.