Community이미지github.com

erberkk/store-screenshots

App Store 및 Google Play 스크린샷과 Play 기능 그래픽을 제작하거나 업데이트할 때 사용합니다. 실제 인앱 화면을 각 기기의 논리적 크기와 픽셀 비율로 캡처하고, 전체 기기 매트릭스(iPhone 6.9", 중간 Dynamic Island 슬롯, iPhone Duo 외부/내부 디스플레이, iPad 13", Play 폰, 7" 및 10" 태블릿, 1024x500 기능 그래픽)를 포함하며, 알파 채널 및 잘못된 크기를 검사한 후 App Store Connect 및 Google Play API를 통해 순서대로 업로드합니다.

store-screenshots란 무엇인가요?

이 스킬은 App Store와 Google Play 스토어 스크린샷을 자동화된 방식으로 제작하고 업로드하는 고급 워크플로우를 제공합니다. 실제 앱에서 캡처한 스크린샷을 사용하여 각 스토어 슬롯(iPhone 6.9", 중간 Dynamic Island, iPhone Duo 외부/내부 디스플레이, iPad 13", Play 폰, 7" 및 10" 태블릿, 1024x500 기능 그래픽)에 정확한 해상도로 맞춥니다. 스킬은 Flutter Golden 테스트, XCUITest, Espresso/Compose와 같은 캡처 하네스를 사용하여 실제 UI를 렌더링합니다. 그런 다음 Node.js 기반 렌더러가 파노라마 템플릿을 사용하여 모든 프레임을 합성하고, 각 이미지가 필요한 차원과 일치하고 알파 채널이 없는지 확인합니다. 마지막으로, App Store Connect 및 Google Play API를 통해 순서대로 업로드하고, 각 언어 및 기기 유형별로 업로드된 자산을 검증합니다. 이 스킬은 Claude Code, Cursor, Codex와 같은 AI 에이전트와 함께 사용할 수 있으며, 버전 관리된 파일과 API 키가 필요합니다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/erberkk/mobile-app-launch-skills/tree/HEAD/skills/store-screenshots

Installed? Explore more 이미지 skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →

원본 보기→모든 스킬 둘러보기

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

문서

스토어 스크린샷

목적

전환율이 높고, 앱과 일치하며, 스토어에서 요구하는 모든 슬롯에 맞는 스크린샷을 스크립트로 생성하여 UI가 변경될 때 몇 분 안에 다시 생성할 수 있게 합니다.

전제 조건

  • 이번 릴리스의 UI가 최종 확정된 빌드.
  • 앱 내에 결정론적 데모 데이터로 화면을 렌더링할 수 있는 캡처 하네스(Flutter golden/integration 테스트, XCUITest, Espresso/Compose 스크린샷 테스트 또는 Fastlane snapshot).
  • Node.js 18+ 및 Chrome/Chromium (렌더링용, scripts/에서 npm i 실행).
  • 업로드용 API 자격 증명 (accounts-and-tax).

원칙

  1. 실제 캡처, 목업이 아님. 프레임 안의 모든 폰 화면은 출시된 앱의 캡처입니다. 다시 그리거나 "개선된" UI는 오해를 불러일으키며(가이드라인 2.3) 금방 구식이 됩니다.
  2. 숫자는 앱과 일치해야 함. 프레임에 "1,850 걸음" 또는 "12분"이 표시되면 앱이 데모 데이터에 대해 정확히 그 값을 생성해야 합니다. 하네스에서 데모 데이터를 생성하고 동일한 테스트에서 이를 단언(assert)하세요.
  3. 스크린샷이 앱이 수행하지 않는 작업을 보여주면 둘 중 하나를 수정하세요. 기능을 빌드하거나 프레임을 변경하세요. 갭을 출시하지 마십시오.
  4. 프레임에 다른 플랫폼을 표시하지 마세요. iOS에 Android 상태/내비게이션 바가 없어야 하며, Play에 Apple UI나 "App Store"가 없어야 합니다(2.3.10).
  5. 모든 로케일과 모든 기기에서 동일한 프레임 순서를 유지하세요.

기기 매트릭스

논리적 크기와 API 식별자가 포함된 전체 테이블: references/device-matrix.md. 요약 (Apple 스크린샷 사양 및 Play 미리보기 자산에서 확인):

슬롯픽셀 (세로)필수 여부?
iPhone 대형 Dynamic Island (6.9")1320×2868 (1290×2796, 1260×2736도 가능)권장 기본 세트
iPhone 중간 Dynamic Island1206×2622 또는 1179×2556최소 1개 스크린샷 필수
iPhone Duo 외부 디스플레이1398×2034iOS 27.1 SDK 이상으로 빌드된 앱은 2027년 4월부터 필수; "iPhone Duo 최적화" 배지 추가
iPhone Duo 내부 디스플레이2007×2853외부와 동일
iPad 13"2064×2752 (또는 2048×2732)앱이 iPad에서 실행되는 경우에만 필수(iPhone 전용 앱은 제외)
Play 폰예: 1080×1920 또는 1080×2160 (가로 320–3840 px, 긴 쪽 ≤ 2× 짧은 쪽)게시하려면 ≥ 2개 스크린샷; ≥ 1080 px에서 ≥ 4개 권장
Play 7" 및 10" 태블릿1080–7680 px, 9:16 또는 16:9앱이 태블릿을 지원하는 경우 권장
Play 기능 그래픽1024×500필수
Play 아이콘512×512, 32비트 PNG필수

Apple: 크기당 최대 10개; PNG 또는 JPEG; 알파 채널이나 투명도 없음. Play: 기기 유형당 최대 8개; JPEG 또는 24비트 PNG(알파 없음).

App Store 제품 페이지 크리에이티브 자산(최신 App Store Connect, "헤더 및 검색 결과" 탭):

  • 헤더: 제품 페이지 상단에 있는 하나의 와이드 이미지, 3840×1646 또는 5244×2950. 선택 사항(없어도 제출 가능).
  • 검색 결과: 5244×2950, 3840×2560 또는 1920×1280; 비어 있으면 스크린샷과 미리보기가 사용됩니다.
  • 버전 페이지 또는 자산 라이브러리(크리에이티브 자산 업로드)를 통해 업로드한 다음 자산 찾아보기로 선택하세요. 라이브러리에 업로드된 자산은 나중에 사용할 수 있도록 유지됩니다.
  • 디자인 참고: 스토어는 아이콘, 이름 및 Get 버튼을 헤더의 일부에 오버레이하므로 콘솔 미리보기에서 결과를 확인하세요.
  • 이 슬롯은 버전이 검토 대기 중인 동안 잠깁니다. 제출하기 전에 추가하세요.

절차

1. 스토리 계획 (스토리보드 승인)

5–8개 프레임의 스토리보드를 작성합니다: 하나의 헤드라인(≤ 6단어), 하나의 지원 문구, 각각 하나의 캡처. 선택적 "파노라마" 레이아웃(번들 템플릿이 수행하는 작업): 프레임은 하나의 넓은 캔버스 조각이므로 모양이 프레임 가장자리를 가로질러 계속됩니다. 레이아웃이 무엇이든, 표시된 제안(무료 시작, 평가판)은 진실해야 합니다.

2. 실제 화면 캡처

대상 기기의 논리적 크기 × 픽셀 비율로 각 화면을 캡처하여 텍스트와 레이아웃이 해당 기기에 표시되는 것과 정확히 일치하도록 합니다. Flutter 예제(위젯/골든 테스트):

// 6.9\" iPhone: 440 x 956 논리적 포인트 @3x = 1320 x 2868 px
tester.view.physicalSize = const Size(1320, 2868);
tester.view.devicePixelRatio = 3.0;
await tester.pumpWidget(App(demo: DemoData.storeShots(locale: 'en')));
await tester.pumpAndSettle();
expect(find.text('1,850 steps'), findsOneWidget);       // 헤드라인의 숫자는 실제입니다
await expectLater(find.byType(App), matchesGoldenFile('captures/en/iphone69/01_home.png'));
  • 테스트에서 폰트를 로드하세요(그렇지 않으면 테스트 폰트가 상자를 렌더링합니다).
  • 고정된 시계, 고정된 데모 데이터, 네트워크 없음.
  • 디버그 배너를 숨기고 상태 표시줄을 깨끗한 상태로 설정하세요(또는 자르고 아무것도 그리지 마세요).
  • 각 로케일을 별도로 캡처하세요. 현지화된 프레임 안에 영어 UI를 절대 배치하지 마십시오.

3. 프레임 합성

템플릿: templates/panorama.html, 렌더러: scripts/render.mjs.

cd scripts && npm i
node render.mjs ../templates/frames.example.json out/

렌더러는 모든 프레임을 하나의 캔버스(너비 = 프레임 수 × 프레임 너비)에 배치하고, 캡처를 로드하고, 글꼴을 기다린 다음, 구성의 모든 기기에 대해 정확한 픽셀 크기로 각 프레임 조각을 스크린샷합니다. 또한 1024×500 기능 그래픽을 렌더링합니다.

4. 확인

node check-images.mjs out/

다음의 경우 실패: 폴더 기기에 대한 잘못된 크기, 알파 채널 존재(PNG 컬러 유형 4/6 또는 tRNS 청크), 10개(Apple) / 8개(Play) 초과 파일, 번호 매기기 간격. 그런 다음 모든 이미지를 100% 확대하여 확인: 잘린 텍스트, 다른 플랫폼 UI, 플레이스홀더 문자열, 오래된 숫자.

5. API를 통한 업로드 (라이브 세트 교체 전 승인 필요)

  • App Store Connect — scripts/upload-asc.mjs: 편집 가능한 appStoreVersion 찾기 → 해당 appStoreVersionLocalizations → screenshotDisplayType별 appScreenshotSets → 이전 스크린샷 삭제 → 예약 (POST /v1/appScreenshots with fileName, fileSize) → uploadOperations에서 부분 업로드 → 커밋 (PATCH with uploaded: true 및 MD5 sourceFileChecksum) → 세트의 appScreenshots 관계에서 순서 설정. 문서: 자산을 App Store Connect에 업로드.
  • Google Play — scripts/upload-play.mjs: edits.insert → 언어 및 이미지 유형별로 edits.images.deleteall → 순서대로 edits.images.upload (phoneScreenshots, sevenInchScreenshots, tenInchScreenshots, featureGraphic) → edits.commit. 문서: edits.images.upload.

두 스크립트 모두 기본적으로 드라이 런(dry run)이며, 실제로 쓰려면 DRY_RUN=0을 설정하세요.

6. 다시 읽어보기

로케일 및 기기당 업로드된 자산 목록을 가져와서(두 API 모두) 로컬 폴더의 개수 및 순서와 비교합니다. Apple은 업로드를 비동기식으로 처리합니다. 모든 자산이 COMPLETE 전달 상태를 보고할 때까지 기다리세요.

사람의 승인이 필요한 결정 지점

스토리보드 및 헤드라인, 최종 시각적 방향, 라이브 스크린샷 세트 교체, Play 편집 커밋.

검증

  • check-images.mjs 통과; 모든 필수 Apple 슬롯에 최소 하나의 이미지가 있습니다. Play에는 폰 샷과 기능 그래픽이 있습니다.
  • 다시 읽기 순서가 일치하고 실패한 자산 상태가 없습니다.
  • 프레임의 각 숫자와 기능이 빌드에 대해 확인되었습니다.

일반적인 실수

  • 6.9"만 업로드하고 필수 중간 Dynamic Island 슬롯을 누락하는 경우.
  • 알파 채널로 내보낸 PNG(디자인 도구 및 투명 배경의 헤드리스 브라우저에서 흔히 발생 — 항상 불투명한 본문 배경을 설정).
  • Play에서 6.9" 1320×2868 이미지를 사용하는 경우: 종횡비가 Play의 2:1 제한을 초과합니다. Play 전용 크기로 렌더링하세요.
  • iPhone 전용 앱에 대한 iPad 스크린샷(필요 없음) — 또는 앱이 iPad에서 실행되는데 누락하는 경우.
  • 앱에 없는 설정 행이나 결과를 표시하는 프레임.
  • 헤드라인은 번역되었지만 캡처는 여전히 영어인 경우.

Individual skills in this repo

This repo contains 4 individual skills — each has its own dedicated page.

erberkk/privacy-and-declarations

Use when filling in or auditing App Store privacy and compliance answers and Google Play App content declarations - Apple App Privacy labels, Play Data safety (CSV import), Health apps declaration and Health Connect permissions, advertising ID, PrivacyInfo.xcprivacy and required-reason APIs, export compliance (ITSAppUsesNonExemptEncryption), age rating, account deletion (in-app, web URL, re-authentication), consent and disclosure for AI features, and rules for health data. Derives every answer from a code and SDK scan so the forms, the privacy policy and the in-app text say the same thing.

erberkk/review-readiness

Use before submitting an app version or a first subscription for App Store or Google Play review, or after receiving a rejection. Runs a go/no-go checklist and writes a report - demo account that signs in with a password (no email one-time code), filled with data and premium unlocked; review notes; in-app purchases visible and purchasable (guideline 2.1(b)); iPad compatibility mode for iPhone-only apps; no placeholders or "coming soon"; metadata matching the app; live privacy URLs; crash-free cold start - and gives a playbook for replying in Resolution Center and deciding when to appeal.

erberkk/social-publishing

Use when setting up scheduled publishing of an app's marketing content to Instagram (Reels, carousels, Stories), Threads, X and TikTok through official APIs - self-hosting Postiz in Docker behind a Cloudflare Tunnel, creating the Meta app with the newer use-case flow (business portfolio, Facebook Page linked to the Instagram professional account, Threads tester invite), X developer pay-per-use credits and spend cap, TikTok and YouTube audit limits, safe OAuth account selection when one browser holds personal and brand accounts, resource limits, and phasing a posting calendar around real launch events.

erberkk/web-presence-and-seo

Use when building, checking or deploying the website that a mobile app needs for its store listings and launch - privacy policy, terms, support and web account-deletion pages that work signed-out; hosting apple-app-site-association and assetlinks.json; invite/referral pages (/i/<code>) that open the app or fall back to the store with the Play install referrer; a landing page with store badges and honest per-country prices filled at the edge; Open Graph images; technical SEO (hreflang, canonical, sitemap, robots.txt, JSON-LD); Search Console, Bing Webmaster and IndexNow; AI crawler policy and llms.txt; and a Cloudflare Worker deploy with a production approval gate. Includes a site checker and an IndexNow ping script.

관련 스킬

steipete/songsee

Generate spectrograms and feature-panel visualizations from audio with the songsee CLI.

community

affaan-m/frontend-design

Create distinctive, production-grade frontend interfaces with high design quality. Use when the user asks to build web components, pages, or applications and the visual direction matters as much as the code quality.

community

mattpocock/improve-codebase-architecture

Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.

community

lobehub/add-provider-doc

Add documentation for a new AI provider — usage docs, env vars, Docker config, image resources.

community

addyosmani/browser-testing-with-devtools

Tests in real browsers via Chrome DevTools MCP. Use when building or debugging anything that runs in a browser. Use when you need to inspect the DOM, capture console errors, analyze network requests, profile performance, or verify visual output with real runtime data. Requires the chrome-devtools MCP server to be configured.

community

bytedance/chart-visualization

This skill should be used when the user wants to visualize data. It intelligently selects the most suitable chart type from 26 available options, extracts parameters based on detailed specifications, and generates a chart image using a JavaScript script.

community
← More 이미지 skills