App Store Screenshot Studio 사용법

시뮬레이터 스크린샷 원본에서 다국어 App Store Connect 제출용 PNG 세트까지, 네 단계면 끝납니다 — 전부 브라우저 안에서, 계정도 업로드도 없이. AI 어시스턴트가 대부분을 대신해 주는 파일 기반 파이프라인까지 포함한 전체 안내입니다.

1단계 — 프로젝트 설정

스튜디오를 열고 디바이스 종류(iPhone 또는 iPad — 어차피 각 슬라이드의 종류는 나중에 스크린샷에서 자동 감지됩니다), 슬라이드 수, 테마를 고릅니다. 빈 화면에서 시작하지 않아도 됩니다:

템플릿에서 시작 — 디자인된 멀티 슬라이드 스타터 세트로 바로 에디터에 진입합니다.
프로젝트 가져오기 — AI가 작성한 파일 세트(매니페스트 + 캡션 + 스크린샷, 아래 참고)를 선택하면 한 번에 검토만 하면 되는 프로젝트가 만들어집니다.

모든 데이터는 브라우저에 저장됩니다(localStorage + IndexedDB). 어디로도 전송되지 않습니다.

2단계 — 에디터에서 디자인

스크린샷 — 슬라이드당 한 장씩 업로드하면 디바이스 프레임에 자동으로 들어갑니다. 회전, 가장자리 드래그 크롭, 히어로 레이아웃용 캔버스 밖 블리드도 가능합니다.
텍스트 — 슬라이드별 헤드라인·서브헤드라인에 타이포그래피 전체 제어; 드래그로 배치하고 더블클릭으로 편집합니다.
하이라이트 — 스크린샷 위에 점선 영역을 그리면 확대된 루페 카드가 베젤 위에 떠오릅니다.
부가 요소 — 배지, 이모지 장식, 그라디언트/이미지 배경, 슬라이드 두 장에 걸치는 App Store 스타일 2페이지 파노라마.
완성한 슬라이드 세트는 헤더에서 재사용 가능한 템플릿으로 저장할 수 있습니다.

3단계 — 현지화

캡션은 슬라이드 × 언어 표에 들어 있습니다. 채우는 방법은 세 가지:

그리드에 번역을 직접 입력합니다.
템플릿을 내보내(CSV 또는 JSON, 언어마다 라벨이 붙은 열 하나) 스프레드시트에서 채우거나 번역가에게 넘긴 뒤 다시 가져옵니다. 빈 칸은 건너뛰므로 일부만 채워도 됩니다.
내장 번역 프롬프트를 복사해 내보낸 템플릿과 함께 ChatGPT / Claude / Gemini에 붙여넣고, 채워진 파일을 다시 가져옵니다. API 키가 필요 없습니다.

앱 UI가 현지화돼 있다면 01-home.en.png, 01-home.ko.png, … 형식의 이름으로 언어별 스크린샷을 한꺼번에 추가하세요 — 앞자리 숫자가 슬라이드를, 확장자 앞 접미사가 로케일을 결정합니다. 오버라이드가 없는 언어는 기본 스크린샷으로 대체됩니다. 내보내기 전에 에디터의 미리보기 드롭다운으로 어떤 로케일이든 캔버스에서 확인할 수 있습니다. 전체 전략은 현지화 가이드를 참고하세요.

4단계 — 내보내기

클릭 한 번으로 모든 슬라이드 × 언어를 App Store Connect의 정확한 해상도로 렌더링합니다. 알파 채널이 제거돼 업로드가 반려되지 않고, locale/device/NN.png 구조의 ZIP으로 묶입니다. “fastlane용 ZIP” 버튼은 바로 실행 가능한 fastlane deliver 폴더를 만들어 줍니다 — 압축을 풀고 번들 ID와 API 키만 넣은 뒤 ./upload.sh를 실행하세요.

AI 에이전트 파이프라인 (클릭 0번)

스튜디오의 입력과 출력이 모두 파일이라서, 위의 모든 과정은 사람이 키보드 앞에 없어도 돌아갑니다. AI 어시스턴트(Claude Code, Cursor 등)가 가져오기 폴더의 초안을 만들면:

launch-screenshots/
├── manifest.json        # 디바이스, 로케일, 슬라이드별 레이아웃·텍스트 블록 수
├── captions.csv         # 슬라이드 × 언어 캡션 표
├── 01-home.en.png       # 스크린샷: {slide}[-desc].{locale}.{ext}
├── 01-home.ko.png
└── 02-add.en.png

사람이 그 폴더를 1단계의 “프로젝트 가져오기”에 떨어뜨리면 됩니다. 또는 저장소의 헤들리스 파이프라인으로 브라우저를 아예 건너뛸 수도 있습니다:

node scripts/headless-export.mjs launch-screenshots/ out/
# → out/en-US/iphone/01.png … 모든 로케일, 정확한 규격
# --fastlane → Appfile/Deliverfile/upload.sh가 포함된 deliver 폴더

에이전트 루프는 이렇습니다: 매니페스트나 캡션을 수정 → 다시 실행 → PNG 확인 → 만족할 때까지 반복. 매니페스트 스키마와 파일명 규칙은 docs/project-import.md에 문서화돼 있습니다. 실행 환경 요구사항: Node, @playwright/test + Chromium, 그리고 로컬 체크아웃 또는 호스팅된 스튜디오를 가리키는 BASE_URL.

App Store Screenshot Studio 열기 — 무료, 오픈소스, 완전 클라이언트사이드. 스크린샷은 절대 내 컴퓨터를 떠나지 않습니다. →

FAQ

프로젝트는 어디에 저장되나요?
브라우저 안입니다: 프로젝트 데이터는 localStorage, 이미지는 IndexedDB. 사이트 데이터를 지우면 함께 삭제되니, 작업이 끝나면 세트를 내보내거나 템플릿으로 저장해 두세요.

비용이 들거나 계정이 필요한가요?
아니요. GitHub Pages에 호스팅된 MIT 라이선스 오픈소스이고, 백엔드가 아예 없습니다.

어떤 규격으로 내보내나요?
App Store Connect 업로드 슬롯 규격입니다: iPhone 6.9″ (1320×2868), iPhone 6.5″ (1242×2688), iPad 13″ (2064×2752), iPad 11″ (1668×2388) — 실제로 필요한 규격은 사이즈 가이드에서 확인하세요.