App Store 및 Google Play 스크린샷 자동 생성 도구

이 도구는 나중에 이미지를 일일이 조정해야 하는 번거로움을 덜어줍니다.

Apple에서 승인된 스크린샷 및 앱 - https://apps.apple.com/us/app/bloom-coffee-shelf-recipe/id6759914524

• 앱의 브랜드, 기능 및 스타일 선호도를 질문합니다.

• 최소한의 Next.js 프로젝트를 구성합니다 (또는 기존 프로젝트 내에서 작동합니다).

• 각 스크린샷을 디자인합니다.

• 내장된 iPhone 목업 (mockup) 및 CSS 기반의 Android 기기 프레임을 사용하여 스크린샷을 전체 해상도로 렌더링합니다.

• 양쪽 스토어 모두에 필요한 모든 크기의 PNG를 내보냅니다. Android Phone, 7인치 태블릿, 10인치 태블릿(세로 + 가로) 및 Feature Graphic(1024×500)을 지원합니다.

• 로케일 (locale) 기반의 스크린샷 세트와 현지화된 문구를 지원합니다.

• 재사용 가능한 테마 프리셋을 지원하여 아트 디렉션을 빠르게 변경할 수 있습니다.

• RTL (Right-to-Left) 인지 레이아웃과 로케일/기기/테마 조합에 따른 일괄 내보내기를 지원합니다.

mockup.png

— 화면 영역이 투명한 사전 측정된 iPhone 프레임 - Android 기기 프레임은 CSS만으로 렌더링되므로 추가적인 목업 PNG가 필요하지 않습니다.

npx skills add ParthJadhav/app-store-screenshots

이 도구는 Claude Code, Cursor, Windsurf, OpenCode, Codex 및 40개 이상의 다른 에이전트 (agents)와 함께 작동합니다.

전역 설치 (모든 프로젝트에서 사용 가능):

npx skills add ParthJadhav/app-store-screenshots -g

특정 에이전트용 설치:

npx skills add ParthJadhav/app-store-screenshots -a claude-code

git clone https://github.com/ParthJadhav/app-store-screenshots ~/.claude/skills/app-store-screenshots

설치가 완료되면, Claude Code에게 다음과 같은 요청을 할 때 스킬이 자동으로 트리거됩니다:

• App Store 또는 Google Play 스크린샷 제작
• iOS 또는 Android 앱을 위한 마케팅 스크린샷 생성
• 양쪽 스토어용으로 내보낼 수 있는 스크린샷 에셋 생성

또는 Claude Code에게 필요한 내용을 말하기만 하면 됩니다:

> Build App Store and Google Play screenshots for my app

Claude는 제작을 시작하기 전에 앱의 스크린샷, 브랜드 색상, 글꼴, 기능, 스타일 방향 및 슬라이드 수에 대해 질문할 것입니다.

이러한 프롬프트들은 제품의 맥락 (context)을 제공하면서도, 스킬 (skill)이 디자인 프로세스를 가이드할 수 있는 여지를 남겨두기 때문에 좋은 시작점이 됩니다.

내 습관 추적기 (habit tracker) 앱을 위한 App Store 스크린샷을 제작해줘.
이 앱은 사람들이 간단한 일상 루틴을 꾸준히 유지할 수 있도록 도와줘.
6개의 슬라이드, 깔끔하고 미니멀한 (clean/minimal) 스타일, 따뜻한 뉴트럴 (warm neutrals) 톤, 그리고 차분하고 프리미엄한 느낌을 원해.

내 개인 자산 관리 (personal finance) 앱을 위한 App Store 스크린샷을 생성해줘.
이 앱의 주요 강점은 빠른 지출 기록, 명확한 월간 트렌드, 그리고 공유 예산이야.
높은 대비 (high contrast)를 가진 날카롭고 현대적인 스타일로 7개의 슬라이드를 원해.

내 AI 노트 필기 앱을 위한 내보내기 가능한 (exportable) App Store 스크린샷을 만들어줘.
핵심 가치는 엉망인 음성 메모를 깔끔한 요약과 실행 항목 (action items)으로 변환하는 것이야.
대담한 카피 (bold copy), 어두운 배경, 그리고 세련된 기술 중심적 (tech-forward)인 외관을 원해.

내 명상 앱을 위한 마케팅 스크린샷을 제작해줘.
이 앱은 수면, 스트레스 해소, 그리고 짧은 가이드 세션에 집중해.
부드럽고 따뜻하며 유기적인 (organic) 스타일을 사용하고, 기능 목록보다는 정서적 결과물을 우선시해줘.

내 언어 학습 앱을 위한 App Store 스크린샷을 제작해줘.
영어, 독일어, 아랍어 스크린샷 세트가 필요해.
재사용 가능한 두 가지 테마인 clean-light와 dark-bold를 사용해줘.
...

• 앱이 무엇을 하는지 한 문장으로 설명하기
• 상위 3~5가지 기능을 우선순위에 따라 나열하기
• 원하는 시각적 스타일 (visual style) 설명하기
• 필요한 슬라이드 수 언급하기
• 다국어 또는 RTL (Right-to-Left) 로캘이 필요한지 언급하기
• 하나의 아트 디렉션 (art direction)을 원하는지 또는 재사용 가능한 테마 프리셋 (theme presets)을 원하는지 언급하기
• 결과물이 특정 App Store 스타일과 일치하기를 원한다면 레퍼런스 (references) 제공하기

빈 폴더에서 시작할 경우, 스킬은 다음과 같이 생성합니다:

project/
├── public/
│ ├── mockup.png # iPhone 프레임 (스킬에서 복사됨)
...

두 스토어를 모두 타겟팅할 때, 스킬은 iOS와 Android 스크린샷을 분리하여 유지하기 위해 플랫폼 기반의 폴더 구조를 사용합니다.

전체 생성기는 단일 page.tsx 파일로 구성됩니다. 개발 서버 (dev server)를 실행하고 브라우저를 열어, 아무 스크린샷이나 클릭하면 PNG로 내보낼 수 있습니다.

해당 스킬의 최신 버전은 에이전트(agent)가 다음 항목들을 생성하도록 안내합니다:

• 로케일(locale) 탭 및 로케일별 스크린샷 폴더
• 디자인 토큰 (design tokens) 기반의 재사용 가능한 테마 프리셋 (theme presets)
• 아랍어 및 히브리어와 같은 언어를 위한 RTL (Right-to-Left) 인식 레이아웃
• 로케일/기기/테마 조합에 대한 일괄 내보내기 (bulk export) 흐름

디스플레이 (Display)	해상도 (Resolution)
6.9"	1320 x 2868
...	...
기기 (Device)	해상도 (Resolution)
---	---
휴대폰 (세로형) (Phone (portrait))	1080 x 1920
...	...

스크린샷은 플랫폼별로 가장 큰 사이즈로 디자인된 후, 더 작은 사이즈에 맞춰 축소됩니다. Android 기기 프레임은 CSS로 렌더링됩니다.

이 스킬은 다음과 같이 로케일 폴더 아래에 이미지를 중첩하여 여러 로케일에 대한 스크린샷 시스템을 생성할 수 있습니다:

public/screenshots/en/home.png
public/screenshots/de/home.png
public/screenshots/ar/home.png

생성된 페이지는 슬라이드 구조를 동일하게 유지하면서 로케일 기본 경로와 카피 사전 (copy dictionary)만 교체합니다.

하나의 아트 디렉션 (art direction)을 하드코딩하는 대신, 이제 이 스킬은 토큰 기반의 프리셋 시스템을 권장합니다. 예를 들어:

const THEMES = {
"clean-light": { bg: "#F6F1EA", fg: "#171717", accent: "#5B7CFA" },
"dark-bold": { bg: "#0B1020", fg: "#F8FAFC", accent: "#8B5CF6" },
...

이를 통해 동일한 슬라이드 시스템을 재사용하면서 다양한 시각적 방향을 빠르게 테스트할 수 있습니다.

아랍어 및 히브리어와 같은 RTL 로케일의 경우, 이제 스킬은 에이전트에게 다음을 수행하도록 지시합니다:

• 스크린샷 캔버스에 dir="rtl" 설정
• 대상 언어에 맞춰 줄 바꿈 재작성
• 비대칭 레이아웃을 의도적으로 미러링 (mirror)
• 구도가 기계적으로 뒤집히는 대신 네이티브 (native) 느낌을 유지하도록 구성

이제 생성기는 현재 슬라이드뿐만 아니라 다음 항목들의 내보내기를 지원해야 합니다:

• 현재 로케일/기기/테마에 대한 모든 슬라이드
• 현재 테마에 대한 모든 로케일
• 필요 시 전체 로케일 + 기기 + 테마 매트릭스 (matrices)

| 의존성 (Dependency) | 용도 | |
|---|---| |
| Next.js | 개발 서버 (Dev server) + 정적 이미지 서빙 (static image serving) | |
| ... | | |

스크린샷은 문서가 아니라 광고입니다— 각 슬라이드는 하나의 아이디어를 판매해야 합니다.
카피(Copy)는 "1초 규칙"을 따릅니다— App Store의 썸네일 크기에서도 읽을 수 있어야 합니다.
레이아웃은 다양해야 합니다— 인접한 두 슬라이드가 동일한 휴대폰 배치를 공유해서는 안 됩니다.
스타일은 사용자 중심입니다— 색상, 그라데이션, 폰트를 하드코딩하지 않습니다.

내보내기(Export) 전에 각 슬라이드는 다음의 빠른 검토를 통과해야 합니다:

• 헤드라인이 약 1초 안에 하나의 아이디어를 전달하는가

• 첫 번째 슬라이드가 가장 강력한 사용자 혜택을 판매하는가

• 인접한 슬라이드가 동일한 레이아웃을 재사용하지 않는가

• 장식 요소가 UI를 가리는 대신 메시지를 지원하는가

• 내보내기 크기 조정(export sizing) 후에도 텍스트, 스크린샷, 프레임이 여전히 올바르게 보이는가

• Node.js 18+

• bun, pnpm, yarn, npm 중 하나 (자동 감지되며, bun 권장)

다음 분야를 중심으로 기여(Contributions)를 환영합니다:

• 스크린샷 생성 신뢰성 (screenshot generation reliability)
• 스킬 프롬프트 (skill prompt) 품질
• 더 명확한 문서 및 온보딩 (onboarding)
• 교차 에이전트 호환성 (cross-agent compatibility)

기여하고 싶다면 CONTRIBUTING.md부터 시작하세요.

버그 보고(Bug reports) 및 기능 요청(feature requests) 또한 재현과 검토를 용이하게 하기 위해 이제 이슈 템플릿(issue templates)을 제공합니다.

MIT