Claude Code를 활용한 앱 스토어 스크린샷 자동 생성 스킬 공개

실용적 조언

GitHub 저장소에서 SKILL.md 파일을 다운로드하여 ~/.claude/skills/ 경로에 복사하면 즉시 사용 가능하다.
스크린샷 생성 시 /store-screenshots 명령어를 사용하여 브랜드 분석부터 다국어 지원 이미지 생성까지 한 번에 처리할 수 있다.

섹션별 상세

Claude Code가 프로젝트의 코드베이스를 직접 읽어 브랜드 자산을 추출한다. 소스 코드 내의 HTML/CSS 구성 요소를 분석하여 브랜드 색상, 폰트, 로고 및 주요 기능을 자동으로 파악하고 이를 디자인 요소로 변환한다. 이를 통해 수동으로 디자인 가이드를 입력하지 않아도 일관된 브랜드 아이덴티티를 유지하는 스크린샷을 생성한다.

추출된 UI 컴포넌트를 바탕으로 현대적인 디자인 트렌드가 반영된 편집 스타일의 슬라이드를 구성한다. 글래스모피즘 효과, 그라데이션, 대형 타이포그래피 등을 적용하여 Spotify나 Discord와 같은 상위 앱들의 디자인 규칙을 따르도록 설계됐다. 최소 텍스트 크기나 행당 최대 항목 수와 같은 디자인 가이드라인이 내장되어 있어 시각적 완성도를 보장한다.

Puppeteer를 활용하여 다양한 스토어 규격에 맞는 고해상도 이미지를 출력한다. iOS(1290x2796), Mac App Store(2560x1600), Google Play 등 각 플랫폼이 요구하는 해상도로 자동 리사이징 및 내보내기를 수행한다. 기본적으로 영어와 스페인어 등 다국어 버전을 동시에 생성하여 글로벌 출시 준비 시간을 대폭 단축한다.

용어 해설

Claude Code 스킬(Claude Code Skill): — Claude Code의 기능을 확장하기 위해 사용자가 정의할 수 있는 커스텀 명령어 세트이다. 특정 디렉토리에 마크다운 형식의 정의 파일을 배치하여 Claude가 새로운 도구(Tool)나 워크플로를 실행할 수 있도록 설계되었다.
글래스모피즘(Glassmorphism): — 반투명한 배경과 흐림 효과(Blur)를 사용하여 유리 같은 질감을 표현하는 최신 UI 디자인 트렌드이다. 레이어 간의 깊이감을 강조하며 현대적인 앱 스토어 스크린샷 디자인에 자주 활용된다.
퍼피티어(Puppeteer): — 헤드리스 크롬(Chrome) 브라우저를 제어할 수 있는 Node.js 라이브러리이다. 웹 페이지를 렌더링하고 고해상도 스크린샷을 캡처하거나 PDF로 변환하는 자동화 작업에 주로 사용된다.

코드 예제

bash

git clone https://github.com/dontoreve/store-screenshots-skill.git
mkdir -p ~/.claude/skills/store-screenshots
cp store-screenshots-skill/SKILL.md ~/.claude/skills/store-screenshots/

Claude Code에 스토어 스크린샷 생성 스킬을 설치하는 명령어

언급된 도구

Claude Code추천

Anthropic의 CLI 기반 코딩 에이전트로 스킬 확장이 가능함

Puppeteer추천

고해상도 PNG 이미지 수출 및 렌더링

언급된 리소스

GitHubstore-screenshots-skill GitHub Repository