ASO App Store Screenshots: 앱 코드를 분석해 앱스토어 스크린샷을 만드는 Claude 스킬

읽을거리&정보공유
, , , , ,
1

ASO App Store Screenshots: 앱 코드를 분석해 앱스토어 스크린샷을 만드는 Claude 스킬
ASO App Store Screenshots: 앱 코드를 분석해 앱스토어 스크린샷을 만드는 Claude 스킬1536×1024 282 KB

ASO App Store Screenshots 소개

앱을 만들고 나면 마지막 관문으로 앱스토어에 올릴 스크린샷이 남습니다. 어떤 기능을 앞세울지 고르고, 시뮬레이터 화면을 캡처하고, 헤드라인과 기기 프레임을 얹어 전환율 높은 이미지를 만드는 일은 손이 많이 가는 작업입니다. adamlyttleapps 가 만든 claude-skill-aso-appstore-screenshots(README 상의 이름은 ASO App Store Screenshots) 는 이 과정을 Claude Code 스킬로 자동화합니다. 앱의 코드베이스를 분석해 핵심 혜택을 찾고, 그에 맞춰 앱스토어용 스크린샷 이미지를 생성합니다.

이 스킬의 특징은 이미지를 처음부터 통째로 생성하지 않는다는 점입니다. AI에 곧바로 스크린샷을 만들게 하면 레이아웃이 매번 달라져 일관성이 깨지기 쉽습니다. 대신 이 스킬은 결정론적(deterministic) 스캐폴드를 먼저 만들고, 그 위에 AI 보정을 얹는 두 단계로 나눕니다. 텍스트 위치와 기기 프레임은 코드로 정확히 고정하고, 창의적인 시각 다듬기만 AI에 맡기는 구조입니다.

동작은 크게 네 단계로 이뤄집니다. 다운로드를 유도하는 핵심 혜택을 코드베이스에서 도출하고, 시뮬레이터 스크린샷을 평가해 각 혜택과 짝지으며, 스캐폴드와 AI 보정을 결합해 스크린샷을 만들고, 마지막으로 전체를 한눈에 보는 쇼케이스 이미지를 생성합니다. 이 글에서는 ASO App Store Screenshots 의 4단계 흐름과 스캐폴드-보정 파이프라인, 출력물 구조, 설치·사용법을 정리합니다.

ASO App Store Screenshots가 만드는 4단계

ASO App Store Screenshots의 앱스토어 스크린샷 생성 4단계 흐름
ASO App Store Screenshots의 앱스토어 스크린샷 생성 4단계 흐름1536×1024 251 KB

첫 번째 혜택 발굴 단계에서는 앱의 코드베이스를 분석해 다운로드를 이끄는 3~5개의 핵심 혜택을 추립니다. 두 번째 스크린샷 페어링 단계에서는 사용자가 준비한 시뮬레이터 스크린샷을 검토·평가하고, 각 화면을 가장 잘 맞는 혜택과 짝짓습니다.

세 번째 생성 단계가 이 스킬의 핵심입니다. compose.py 가 텍스트 위치와 기기 프레임, 그리고 내부에 합성한 시뮬레이터 스크린샷을 담은 결정론적 스캐폴드를 만들고, 이어서 Gemini MCP를 통해 호출하는 Nano Banana Pro 가 이 스캐폴드를 보정해 사실적인 기기 프레임과 강조 요소, 시각적 마감을 더합니다. 마지막 쇼케이스 단계에서는 완성된 스크린샷들을 나란히 배치한 미리보기 이미지를 만들어, 전체 세트를 한눈에 확인할 수 있게 합니다.

ASO App Store Screenshots의 스캐폴드-보정 파이프라인

이 스킬이 일관된 결과를 내는 비결은 생성 단계를 두 층으로 나눈 데 있습니다. 먼저 compose.py 가 Pillow 기반으로 스캐폴드를 만듭니다. 여기서 헤드라인 텍스트의 정확한 위치, 기기 프레임, 그리고 프레임 안에 넣을 시뮬레이터 스크린샷 합성이 코드로 결정됩니다. 그다음 Nano Banana Pro 가 이 스캐폴드를 입력으로 받아 사실적인 기기 프레임과 화면 밖으로 튀어나오는 강조 요소(breakout elements), 시각적 완성도를 더합니다.

이렇게 나누면 모든 스크린샷의 레이아웃은 코드가 보장해 일관되게 유지되고, 창의적인 보정만 AI가 담당하게 됩니다. 저장소에는 스캐폴드 생성기 compose.py 외에도 기기 프레임 템플릿을 만드는 generate_frame.py, 쇼케이스 이미지를 만드는 showcase.py, 그리고 미리 렌더링된 기기 프레임 템플릿(assets/device_frame.png)이 함께 들어 있습니다.

ASO App Store Screenshots의 출력물

생성된 스크린샷은 프로젝트의 screenshots/ 디렉토리에 저장됩니다. 혜택별 작업 폴더에는 compose.py 가 만든 scaffold.png, AI가 보정한 여러 버전(v1.png, v2.png, v3.png), 그리고 앱스토어 규격으로 잘라 낸 리사이즈본이 담깁니다.

screenshots/
  01-benefit-slug/          ← 작업 버전
    scaffold.png            ← compose.py의 결정론적 출력
    v1.png, v2.png, v3.png  ← AI 보정 버전
    v1-resized.png, ...     ← 앱스토어 규격으로 크롭
  final/                    ← 승인된 스크린샷, 업로드 준비 완료
    01-benefit-slug.png
    02-benefit-slug.png
  showcase.png              ← 전체 스크린샷 미리보기

final/ 폴더에는 애플 규격에 맞춘 앱스토어용 스크린샷이 담기며, 기본값은 iPhone 6.7인치용 1290×2796px 입니다.

ASO App Store Screenshots 설치 및 사용법

먼저 Claude Code에 스킬을 추가하고, 스캐폴드 생성에 필요한 Pillow를 설치합니다.

# 1) Claude Code에 스킬 추가
claude install-skill github.com/adamlyttleapps/claude-skill-aso-appstore-screenshots

# 2) 파이썬 의존성 설치
pip install Pillow

헤드라인 텍스트에는 SF Pro Display Black 글꼴을 사용하므로, macOS라면 애플 개발자 글꼴에서 설치해 /Library/Fonts/SF-Pro-Display-Black.otf 경로에 두어야 합니다. AI 보정 단계에는 @houtini/gemini-mcp를 MCP 서버로 설정해야 합니다.

# 3) Gemini MCP 설치 (AI 보정용)
npm install -g @houtini/gemini-mcp

이후 Claude Code의 MCP 설정(~/.claude/settings.json 또는 프로젝트의 .mcp.json)에 등록하면 준비가 끝납니다. 사용은 앱 프로젝트 디렉토리 안에서 다음 명령을 실행하면 됩니다.

/aso-appstore-screenshots

스킬이 각 단계를 대화형으로 안내하며, 진행 상황은 Claude Code의 메모리 시스템에 저장되어 대화를 넘나들며 이어서 진행할 수 있습니다.

ASO App Store Screenshots의 라이선스

ASO App Store Screenshots 는 MIT 라이선스로 공개되어 있어 개인 및 상업적 목적으로 자유롭게 사용할 수 있습니다.

:github: ASO App Store Screenshots 프로젝트 GitHub 저장소

더 읽어보기



이 글은 GPT 모델로 정리한 글을 바탕으로 한 것으로, 원문의 내용 또는 의도와 다르게 정리된 내용이 있을 수 있습니다. 관심있는 내용이시라면 원문도 함께 참고해주세요! 읽으시면서 어색하거나 잘못된 내용을 발견하시면 덧글로 알려주시기를 부탁드립니다. :hugs:

:pytorch:파이토치 한국 사용자 모임:south_korea:이 정리한 이 글이 유용하셨나요? 회원으로 가입하시면 주요 글들을 이메일:love_letter:로 보내드립니다! 텔레그램(Telegram)이나 Slack/Discord/Teams/Dooray/GoogleChat 등으로도 새 글 알림을 받으실 수 있습니다. :smiley:

:wrapped_gift: 아래:down_right_arrow:쪽에 좋아요:+1:를 눌러주시면 새로운 소식들을 정리하고 공유하는데 힘이 됩니다~ :star_struck: