Back to Details

store-screenshots

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

스토어 스크린샷 생성기

商店截图生成器

원본 앱 스크린샷을 받아 → 기기 프레임 + 브랜드 배경 + 홍보 문구를 얹은 스토어 등록용 이미지를 만든다.
接收原始应用截图 → 叠加设备边框 + 品牌背景 + 宣传文案，生成用于商店上架的图片。

에이전트 호환

Agent 兼容性

이 스킬은 Claude Code와 OpenAI Codex 어디서든 동작한다. 본문의 표현은 실행 중인 에이전트에 맞게 해석한다:
  • "선택지로 묻는다" — 선택지 UI 툴이 있으면 그걸 쓰고(Claude Code: AskUserQuestion, multiSelect 지원), 없으면(Codex 등) 번호를 매긴 선택지를 텍스트로 제시하고 번호로 답하게 한다. 추천 항목에는 "(Recommended)"를 붙인다.
  • "이미지를 열어 확인한다" — 에이전트의 이미지 열람 수단을 쓴다(Claude Code: Read, Codex: view_image).
  • 원본 폴더 인자 — Claude Code는 
    $ARGUMENTS
    , Codex는 스킬 호출 문장에 함께 적힌 경로를 쓴다.
本 Skill 可在 Claude Code 和 OpenAI Codex 中运行。正文中的操作描述会按当前运行的 Agent 进行解释：
  • “用选项询问” — 如果有选项 UI 工具，则使用该工具（Claude Code：AskUserQuestion，支持 multiSelect）；如果没有（Codex 等），则用文本提供带编号的选项，并要求用户按编号回答。推荐项要附加“(Recommended)”。
  • “打开图像确认” — 使用 Agent 提供的图像查看能力（Claude Code：Read，Codex：view_image）。
  • 原始文件夹参数 — Claude Code 使用 
    $ARGUMENTS
    ，Codex 使用 Skill 调用语句中一并填写的路径。

절대 규칙

绝对规则

  1. 컨펌 전에는 전체 렌더링을 하지 않는다. 문구 초안 표 + 시안 1장(첫 슬라이드)을 보여주고 사용자 OK를 받은 뒤에만 나머지를 렌더링한다.
  2. 최종 PNG는 전부 픽셀 크기를 검증(
    sips
    또는 ImageMagick 
    identify
    )하고, 규격 표와 다르면 다시 렌더링한다.
  3. 기기 프레임은 외부에서 다운로드하지 않고 HTML/CSS로 직접 그린다(라이선스·네트워크 문제 없음). 실사 프레임을 원하면 아래 "실사 프레임" 참고.
  4. 중간 작업 파일(html 등)은 임시 폴더(스크래치패드 등)에 두고, 출력 폴더에는 최종 PNG만 남긴다.
  5. 사용자에게 손을 쓰게 하지 않는다. 화면 전환·탭 같은 기기 조작은 에이전트가 adb/idb/AppleScript로 직접 한다(아래 "자동 캡처"). 사용자의 개입은 선택지 고르기나 짧은 타이핑까지만. "화면 띄우고 메시지 보내주세요" 같은 진행은 금지 — 자동화 수단이 전부 실패했을 때만 선택지로 수동 진행 여부를 묻는다.
  1. 获得确认前不得进行整体渲染。 先展示文案草案表 + 1 张设计稿（第一张幻灯片），只有收到用户的 OK 后才渲染其余内容。
  2. 必须使用 
    sips
    或 ImageMagick 
    identify
    验证所有最终 PNG 的像素尺寸；如果与规格表不一致，则重新渲染。
  3. 设备边框不得从外部下载，应直接使用 HTML/CSS 绘制（避免许可证和网络问题）。如果需要逼真的设备边框，请参阅下文“逼真设备边框”。
  4. 中间工作文件（html 等）应放在临时文件夹（scratchpad 等）中，输出文件夹中只保留最终 PNG。
  5. 不要让用户手动完成工作。 屏幕切换、标签页切换等设备操作应由 Agent 通过 adb/idb/AppleScript 直接完成（见下文“自动捕获”）。只有选择选项或进行简短输入时才需要用户参与。禁止让用户执行“打开屏幕并发消息给我”之类的操作——只有当所有自动化手段均失败时，才用选项询问是否改为手动继续。

워크플로

工作流

1. 원본 수집

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단계 질문에 선택지로 끼워서 같이 묻는다.
  • 重新运行时先询问。 如果输出文件夹（
    store-screenshots/
    ）或之前使用的原始素材已经存在，而用户又提出“重新制作”之类的请求，则应在开始工作前通过选项询问：
    • “复用现有截图进行更新 (Recommended)” — 跳过捕获，使用现有原始素材重新制作文案、设计和规格。
    • “从头重新制作” — 从应用原始捕获开始，重新完成全部内容。
    • 无论选择哪一种，都应在渲染前清空目标输出文件夹，避免张数变化时混入之前的文件。
  • 如果通过参数提供了文件夹，则从该文件夹读取；否则在当前目录中扫描 png/jpg： 
    find . -maxdepth 2 \( -iname '*.png' -o -iname '*.jpg' \) -not -path '*/store-screenshots/*'
  • 如果未找到文件，Agent 应直接操作设备完成捕获（见下文“自动捕获”），不要请用户切换屏幕。
  • 打开每张原始图像，判断其显示的页面。 宣传文案必须以实际页面内容为依据。即使是直接捕获的，也要在捕获后立即打开图像，确认是否为预期页面；如果不是，则重新探索并重新捕获。
  • 如果可以找到应用名称和图标，则将其作为参考（Info.plist、strings.xml、ic_launcher、应用图标文件等）。
  • 需要捕获的页面列表（首页、核心功能页面等）由 Agent 根据应用结构自行决定；如果不明确，则在第 2 步的问题中作为选项一并询问。

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

自动捕获 — 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
    .
  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 시뮬레이터

自动捕获 — iOS 模拟器

캡처는 
xcrun simctl io booted screenshot 01.png
. 화면 이동은 우선순위대로:
  1. 딥링크가 최우선. 앱 소스에서 URL scheme을 찾는다(Info.plist의 
    CFBundleURLTypes
    , 라우팅 코드). 있으면 탭이 아예 필요 없다: 
    xcrun simctl openurl booted "myapp://calendar"
    → 1초 대기 → 캡처. simctl만으로 100% 자동화되므로 아래 도구들이 전부 불필요. scheme이 없는 앱이면 "탭별 딥링크를 앱에 추가해줄까?"를 선택지로 제안해볼 것 — 몇 줄이면 되고 이후 재실행도 편해진다.
  2. idb가 있으면(
    command -v idb
    ): 
    idb ui describe-all
    로 요소 좌표를 얻고 
    idb ui tap X Y
    .
  3. Maestro가 있으면(
    command -v maestro
    ): 
    tapOn
    /
    takeScreenshot
    으로 flow yaml을 만들어 
    maestro test
    .
  4. 둘 다 없으면 AppleScript로 Simulator 창을 직접 클릭(손쉬운 사용 권한 필요): System Events로 Simulator 창의 position/size를 얻고, 기기 해상도 → 창 좌표로 비례 변환해 
    click at {x, y}
    , 사이사이 
    delay 1
    .
  5. 전부 실패했을 때만 선택지로 묻는다: "idb 설치 후 자동 진행 (Recommended)" / "앱에 딥링크 추가하고 진행" / "내가 직접 화면을 넘길게". 수동을 골랐을 때만 사용자에게 화면 전환을 부탁한다.
捕获命令：
xcrun simctl io booted screenshot 01.png
。屏幕导航按以下优先级执行：
  1. Deep Link 优先级最高。 从应用源码中查找 URL scheme（Info.plist 的 
    CFBundleURLTypes
    、路由代码）。如果存在，则完全不需要切换标签页： 
    xcrun simctl openurl booted "myapp://calendar"
    → 等待 1 秒 → 捕获。仅使用 simctl 即可实现 100% 自动化，因此以下工具都不再需要。如果应用没有 scheme，可通过选项询问“是否为每个标签页添加 Deep Link，以便继续执行？”——只需几行代码，之后重新执行也会更方便。
  2. 如果存在 
    idb
    （
    command -v idb
    ），使用 
    idb ui describe-all
    获取元素坐标，再使用 
    idb ui tap X Y
    。
  3. 如果存在 
    Maestro
    （
    command -v maestro
    ），使用 
    tapOn
    /
    takeScreenshot
    创建 flow YAML，并通过 
    maestro test
    运行。
  4. 如果两者都不存在，则使用 AppleScript 直接点击 Simulator 窗口（可能需要辅助功能权限）：使用 System Events 获取 Simulator 窗口的 position/size，按设备分辨率与窗口坐标的比例进行转换，然后执行 
    click at {x, y}
    ，操作之间使用 
    delay 1
    。
  5. 只有在所有方式都失败后才通过选项询问：“安装 idb 后自动继续 (Recommended)” / “为应用添加 Deep Link 后继续” / “由我手动切换屏幕”。只有用户选择手动方式时，才请用户切换屏幕。

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

捕获前清理状态栏（商店品质）

모든 캡처의 시계·배터리·안테나를 통일하면 결과물이 한 세트로 보인다. 캡처 시작 전에 걸고, 끝나면 해제한다.
  • 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
统一所有捕获中的时钟、电池和天线图标，可以让最终图片呈现为同一套视觉风格。应在捕获开始前设置，并在捕获结束后解除。
  • 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. 질문 플로우 (전부 선택지로)

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)으로 기능을 적게 한다
对于对话中已经回答的问题，不要再次询问。应使用选项，让用户无需输入文字即可完成选择。
第一轮 — 平台（一个问题）：
  • App Store（iOS）/ Google Play（Android）/ 两者都要
第二轮 — 细节（一次询问以下 4 个问题，机型选项根据第一轮答案调整）：
问题选项
机型（多选）iOS：iPhone(Recommended)、iPad · Android：Galaxy 手机(Recommended)、Fold、Flip、平板 · 两者：iPhone、iPad、Galaxy 手机、Fold·Flip
风格与现有应用设计保持一致(Recommended) / 现代简约 / 明亮活泼 / 深色高级
张数4 张 / 5 张(Recommended) / 6 张 / 商店允许的最大张数
主打方向由你挑选(Recommended) / 直接指定核心功能——选择直接指定时，通过自由输入 (Other) 写下功能

3. 배경 디자인 결정

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도 기울이면 리듬감(기울임 여부는 컨펌 때 언급).
根据风格选择确定背景、装饰和色调。
  • 与现有应用设计保持一致（默认）：从应用实际使用的设计系统中提取。
    • 颜色：Android 使用 
      res/values/colors.xml
      和 
      themes.xml
      ，iOS 使用 
      Assets.xcassets
      中的 Color Set，Flutter 使用 
      ThemeData
      ，基于 Web 的应用则使用 CSS 变量或 tailwind config。如果找不到源码，则从应用图标和截图中提取主色与强调色。
    • 色调：应用 UI 为浅色时使用明亮背景，为深色时使用深色背景。应用的圆角较大时，背景装饰也使用较大的圆角；按钮为直角时，装饰也使用直角。
  • 现代简约：使用明亮的纯色或非常浅的渐变，加大留白，不添加装饰。标题使用粗体，副标题使用较浅的颜色。
  • 明亮活泼：使用高饱和度渐变（主色及其邻近色），加入 1～2 个大型斑块或形状装饰，并积极使用倾斜构图。
  • 深色高级：使用 
    #0b0b0f
    系列的深色背景，以主色光晕或渐变作为亮点，并强化设备边框阴影。
通用要求：文字放在顶部 12%～18% 的位置，并确保与背景有明显对比；字体使用 
-apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif
。每张幻灯片保持相同 hue，仅略微调整明度，使整套图片风格统一。设备位于底部中央，并应用 bottom bleed（让屏幕底部略微被裁切）和 
box-shadow
。奇数张使用 -2° 旋转，偶数张使用 +2° 旋转，从而形成节奏感（是否旋转应在确认阶段告知用户）。

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

4. 设计稿 + 文案草案 ← 确认门

  • 슬라이드 구성 (2차 질문의 장수 답 반영, App Store 최대 10장·Play 폼팩터당 2~8장):
    • 1장: 훅 — 앱의 핵심 가치 한 줄. 목록에서 1~2장만 보이므로 가장 중요하다.
    • 중간: 자랑할 기능 하나씩 (어필 방향 반영).
    • 마지막: 신뢰·마무리(리뷰, 다운로드 수, CTA) — 근거가 있을 때만.
  • 문구 규칙:
    • 헤드라인: 한글 6~14자, 혜택 중심. "할 일을 잊지 않게" > "알림 기능".
    • 서브카피: 0~1줄, 20자 이내.
    • "1위", "최고" 같은 표현은 근거가 있을 때만.
  • 문구 표 + 시안 1장을 함께 제시한다:
    • 표: | # | 원본 파일 | 헤드라인 | 서브카피 |
    • 시안: 1번 슬라이드만 실제 규격으로 렌더링해서 macOS면 
      open <파일>
      로 띄워 보여준다. 배경·프레임·문구를 실물로 확인시키기 위함.
  • 수정 요청이 오면 반영해 다시 제시한다(시안도 다시 렌더링). OK를 받으면 전체 렌더링으로.
  • 幻灯片构成（反映第二轮问题中的张数选择；App Store 最多 10 张，Play 每个版式规格为 2～8 张）：
    • 第 1 张：吸引点击的内容——用一句话表达应用的核心价值。由于商店列表中通常只显示 1～2 张，因此这一张最为重要。
    • 中间部分：每张突出一个功能（根据主打方向调整）。
    • 最后一张：建立信任并收尾（评价、下载量、CTA）——仅在存在相关依据时使用。
  • 文案规则：
    • 标题：6～14 个韩文字符，以用户收益为中心。“不会忘记待办事项”优于“提醒功能”。
    • 副标题：0～1 行，不超过 20 个韩文字符。
    • 只有存在明确依据时，才能使用“第 1 名”“最佳”等表述。
  • 同时提交文案表和 1 张设计稿：
    • 表格：| # | 原始文件 | 标题 | 副标题 |
    • 设计稿：仅将第 1 张幻灯片按实际规格渲染；如果使用 macOS，则通过 
      open <文件>
      打开并展示。通过实际效果确认背景、边框和文案。
  • 如果收到修改请求，则应用修改后再次提交（设计稿也要重新渲染）。收到 OK 后才能进行整体渲染。

5. 렌더링

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
    필요할 수 있음).
  • 为每个目标平台 × 每张幻灯片生成一个 HTML 文件（见下方模板）。body 尺寸 = 商店规格的像素尺寸。
  • 原始图像通过相对路径 
    <img src="./01.png">
    引用（无需使用 data URI——将文件复制到同一文件夹即可）。
  • 渲染命令（默认使用无头 Chrome）：
    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"
  • 如果没有 Chrome，则使用以下回退方案：
    npx -y playwright screenshot --viewport-size=1320,2868 "$HTML" "$OUT"
    （首次运行时可能需要执行 
    npx playwright install chromium
    ）。

6. 검증·보고

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/
  • 逐一检查所有像素尺寸，并与规格表进行对照：macOS 使用 
    sips -g pixelWidth -g pixelHeight <文件>
    ，其他操作系统使用 
    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월 기준, 공식 문서 검증 완료)

商店规格（截至 2026 年 8 月，已完成官方文档验证）

타깃크기(px, 세로)장수비고
App Store iPhone 6.9"1320×2868최대 101290×2796도 허용. iPhone Air·iPhone 17 Pro Max·16 Pro Max 포함
App Store iPhone 6.5"1284×2778최대 101242×2688도 허용
App Store iPad 13"2064×2752최대 10iPad 지원 앱이면 필수. 2048×2732 허용
Play 폰1080×19202~89: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
目标平台尺寸（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×19202～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로 그리기)

设备边框规格（使用 CSS 绘制）

기기화면비(세로)코너 radius베젤상단 요소
iPhone1320:2868프레임 폭의 ~14%균일 ~2%Dynamic Island 알약 (폭 ~26%, 상단에서 ~1.8%)
iPad3:4~4%균일 ~3.5%없음
Galaxy S9:19.5~7%균일 ~1.5%중앙 펀치홀 (지름 ~3%)
Galaxy Fold 펼침1856:2160 (거의 정사각)~5%~2%우측 상단 펀치홀 + 중앙 세로 힌지 라인(아주 옅게)
Galaxy Flip9: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
    오버레이(투명→살짝 어둡게→투명).
设备屏幕比例（纵向）圆角边框顶部元素
iPhone1320:2868约为边框宽度的 14%均匀约 2%Dynamic Island 胶囊形（宽度约 26%，距离顶部约 1.8%）
iPad3:4约 4%均匀约 3.5%无
Galaxy S9:19.5约 7%均匀约 1.5%居中打孔（直径约 3%）
Galaxy Fold 展开1856:2160（接近正方形）约 5%约 2%右上角打孔 + 中央垂直铰链线（非常浅）
Galaxy Flip9:22约 8%均匀约 1.5%居中打孔
  • 边框使用 
    div
    绘制（背景 
    #101014
    、
    border-radius
    、
    padding
    = 边框宽度，并使用 
    inset box-shadow
    营造单行金属边缘效果）。
  • 屏幕使用 
    img { object-fit: cover; object-position: top; border-radius: 外部圆角 − 边框宽度 }
    。
  • 如果原始图像比例与边框不同，使用 cover 填充，但必须固定在顶部（这样状态栏区域能够自然显示）。
  • Galaxy 打孔：不要使用胶囊形，而应使用 
    .hole { width:34px; height:34px; border-radius:50%; background:#000; top:40px; left:50%; }
    。
  • Fold 铰链：在屏幕上覆盖一条垂直的 
    linear-gradient
    线条（透明 → 略微变暗 → 透明）。

실사 프레임을 원할 때

需要逼真设备边框时

사용자가 "진짜 기기 사진 프레임"을 원하면 직접 다운로드하지 말고 안내한다:
  • Apple 공식 베젤: developer.apple.com/design/resources (Product Bezels, 마케팅 가이드라인 확인 필요)
  • Samsung: Samsung Developers / Samsung Newsroom의 공식 목업 검색 사용자가 파일을 받아 경로를 주면, CSS 프레임 대신 그 이미지를 겹쳐 쓴다.
如果用户希望使用“真实设备照片边框”，不要直接下载，而应提供以下指引：
  • Apple 官方边框：developer.apple.com/design/resources（需要确认 Product Bezels 和营销指南）。
  • Samsung：在 Samsung Developers / Samsung Newsroom 中搜索官方 mockup。
如果用户提供已下载的文件及路径，则使用该图像进行叠加，替代 CSS 边框。

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

幻灯片 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>
对于其他设备，只需按照上表修改 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개를 뽑아, 왜 그걸 골랐는지 근거와 함께 제시한다.
  • 로케일: 기본 한국어. 영어 스토어에도 올린다면 같은 레이아웃에 영어 문구 세트를 추가로 생성한다.
  • 商店列表中通常只会实际看到 1～2 张图片，因此第一张必须传达应用存在的理由。
  • 收益 > 功能：“账本会自动记录”优于“SMS 解析功能”。
  • 如果用户选择“由你来挑选”，则查看截图后，按照差异化程度从高到低选出 4 项，并说明选择这些文案或功能的依据。
  • Locale：默认使用韩语。如果还要上传到英文商店，则在相同布局中额外生成一套英文文案。