사용 가이드로 건너뛰기
App Store Screenshots작성자 ParthJadhav

App Store Screenshots 스킬.

개별 광고로도 쓰이고 함께 놓아도 어울리는 스토어 등록용 스크린샷을 구성합니다.

  • 앱 마케팅
  • 스크린샷
  • 현지화
소스 검토 · App Store ScreenshotsSKILL.md
작업 앱 마케팅 결과물 • 앱 콘텐츠가 미리 채워진 로컬 스크린샷 디자인 에디터 • 버전 관리에 적합한 프로젝트 JSON 파일과 로컬 스크린샷 에셋 • 기기, 크기, 로캘별로 정리된 PNG 내보내기 번들 시작하기 전에 패키지로 제공되는 Next.js 에디터, 지원되는 Node 및 패키지 관리자 환경, 브라우저가 필요합니다. PNG 내보내기는 html-to-image를 사용하며, 소스 캡처, 글꼴 및 기타 에셋은 적절한 사용 권한이 있어야 합니다.
편집 요약 · 소스 검토일 2026-10-07 · 생성된 예시 아님

01 기능 소개

App Store Screenshots

로컬 프로젝트 저장, 플랫폼별 별도 덱, 현지화된 문구, 연결된 구성, 크롭 중심 내보내기 점검을 갖춘 템플릿 기반 스크린샷 에디터입니다.

소스 기반 워크플로실행 벤치마크 아님

작업 방식

App Store Screenshots는 스토어 등록용 마케팅 이미지를 위해 미리 만들어진 Next.js 및 ShadCN 에디터를 구성합니다. 실제 앱 캡처, 아이콘, 기능 우선순위, 비주얼 방향을 제공하면 에디터가 기기 프레임, 인라인 문구 편집, 레이아웃 선택, 이미지 오버레이, 내보내기 제어를 제공합니다. 결과물은 마케팅 아트워크이며, 새로운 앱 인터페이스나 모든 플랫폼의 제품 화면 자동 캡처가 아닙니다.

연결된 캔버스에서는 기기나 장식 요소가 인접한 스크린샷으로 이어질 수 있지만, 내보낸 각 크롭은 여전히 하나의 완결된 메시지를 전달해야 합니다. 프로젝트 상태는 로컬 에셋과 함께 JSON 파일에 저장되며, 편의를 위한 브라우저 미러도 있습니다. 기기별 덱과 현지화된 라벨은 여러 스토어 대상을 지원합니다. 기존 프로젝트는 이전에 잘리던 구성을 바꿀 수 있는 연결형 내보내기를 조용히 적용하지 않고, 보존 중심의 마이그레이션 경로를 따릅니다.

예상 결과물

  • 앱 콘텐츠가 미리 채워진 로컬 스크린샷 디자인 에디터
  • 버전 관리에 적합한 프로젝트 JSON 파일과 로컬 스크린샷 에셋
  • 기기, 크기, 로캘별로 정리된 PNG 내보내기 번들
예시 브리프 보기

브리프에서 검토까지

  1. 01
    기존 작업 확인

    구성하기 전에 이전 스크린샷 프로젝트가 있는지 확인하세요. 마이그레이션을 원하면 샘플로 교체하지 말고 사용자의 문구, 덱, 에셋, 복구 가능한 스냅샷을 보존하세요.

  2. 02
    실제 앱 자료 제공

    기기 캡처, 아이콘, 앱 이름, 우선 기능, 대상 플랫폼, 언어, 스타일 방향을 준비하세요. 스크린샷 캡처는 필요한 경우 별도 작업입니다.

  3. 03
    덱 구성

    패키지 에디터로 레이아웃을 다양하게 구성하고 이미지마다 하나의 명확한 혜택을 쓰세요. 화면에 걸친 요소는 각 크롭 안에서 중요한 텍스트와 UI가 읽히도록 계획하세요.

  4. 04
    내보내기 결과 점검

    썸네일 가독성, 현지화된 줄바꿈, 에셋 로딩, 내보낸 크롭을 확인하세요. 선택한 각 기기의 번들을 내보내고 제출 전에 최신 스토어 요건을 확인하세요.

02 활용 상황

사용 시기

패키지로 제공되는 Next.js 에디터, 지원되는 Node 및 패키지 관리자 환경, 브라우저가 필요합니다. PNG 내보내기는 html-to-image를 사용하며, 소스 캡처, 글꼴 및 기타 에셋은 적절한 사용 권한이 있어야 합니다.

적합한 경우

  • 반복 가능한 등록 에셋제품 저장소와 함께 스토어 마케팅 이미지를 관리하고, 다른 협업자가 같은 콘텐츠와 에셋을 다시 열 수 있어야 할 때 유용합니다.
  • 조율된 스크린샷 세트모든 스크린샷에 같은 중앙 배치 폰 구성을 강요하지 않으면서 시각적 연속성이 필요한 덱에 적합합니다.

확인할 한계

  • 앱 캡처 서비스 아님에디터는 실제 캡처를 전제로 합니다. 소스는 일부 iOS 워크플로를 위한 별도의 동반 경로를 안내하며, 다른 플랫폼은 여전히 적절한 캡처 과정이 필요합니다.
  • 스토어 승인 보장 없음템플릿의 내보내기 크기는 구현 데이터이며 현재 스토어 규정 준수를 약속하지 않습니다. 업로드 전에 대상 스토어의 최신 규칙을 확인하고 실제 제품 주장 내용을 검토하세요.

준비할 입력

  • 앱 캡처와 아이콘대상 기기와 언어에 맞는 네이티브 해상도 스크린샷과 승인된 앱 아이콘을 제공하세요.
  • 기능 우선순위실제 혜택을 순서대로 나열하고 평점, 수상, 사용량 주장의 근거가 있다면 함께 제공하세요. 히어로 영역을 채우려고 사회적 증거를 만들어내지 마세요.
  • 플랫폼과 로캘원하는 스토어, 기기 덱, 언어, 비주얼 스타일, 기존 프로젝트를 마이그레이션할지 여부를 명시하세요.

03 핵심 결정

중요한 결정

  1. 연결되지만 독립적

    화면에 걸친 구성은 세트에 연속성을 주고, 개별 크롭 검토는 전체 스트립 밖에서 헤드라인이나 핵심 UI를 알아볼 수 없게 되는 일을 막습니다.

  2. 복구 가능한 프로젝트 상태

    JSON 파일과 업로드된 에셋은 브라우저 전용 목업보다 협업을 더 안정적으로 만듭니다. 연결형 구성을 의도적으로 켜기 전까지 기존의 분리형 내보내기는 그대로 유지됩니다.

04 예시 브리프

집중된 브리프로 시도하기

아래 예시 브리프는 테스트되지 않았습니다. 사용하기 전에 스킬의 설정을 확인하세요.

설정 검토

에디터 템플릿과 스타일 참고 자료가 포함된 전체 스킬 폴더를 사용하세요. 소스에 있는 캡처 동반 도구 설치 명령은 별도의 도구를 설치하며 이 스크린샷 에디터를 설치하지 않습니다.

업스트림 소스 파일
https://github.com/ParthJadhav/app-store-screenshots/blob/82d4ebba770ce821d89e27f6a5bd30a2cb65ab23/skills/app-store-screenshots/SKILL.md

패키지로 제공되는 Next.js 에디터, 지원되는 Node 및 패키지 관리자 환경, 브라우저가 필요합니다. PNG 내보내기는 html-to-image를 사용하며, 소스 캡처, 글꼴 및 기타 에셋은 적절한 사용 권한이 있어야 합니다.

하나의 결과물로 시작

스킬을 실행하기 전에 이 브리프의 범위, 소스 자료, 제약을 상황에 맞게 조정하세요.

예시 브리프
App Store Screenshots를 사용해 제공된 습관 앱의 영어 전용 iPhone 등록 덱을 만드세요. 제공된 아이콘과 실제 캡처 6장을 사용하고, 주간 계획과 연속 기록 복구를 우선시하며, 평점이나 수상 내역을 지어내지 마세요. 패키지 에디터에 다양한 레이아웃과 화면에 걸친 은은한 장식 요소 하나를 넣어 초기 구성하세요. 모든 헤드라인을 각자의 크롭 안에 유지하고, 내보낸 PNG를 썸네일 크기로 점검하세요. 스토어에는 아무것도 업로드하지 마세요.

결과 확인

실제 출력물을 다음의 관찰 가능한 기준과 비교해 확인하세요.

  • 내보낸 각 이미지는 인접한 스크린샷 없이도 하나의 완결된 혜택을 전달합니다.
  • 선택한 모든 로캘이 설명되지 않는 대체 텍스트 없이 실제 문구와 유효한 캡처 경로로 연결됩니다.
  • 프로젝트 파일과 로컬 에셋으로 다시 열었을 때 의도한 기기 덱을 재현할 수 있습니다.

OpenDesign은 코딩 에이전트를 위한 로컬 디자인 작업 공간을 제공합니다. 이 목록은 스킬이 번들로 포함되어 있거나 외부 도구, 자격 증명, 소프트웨어 의존성이 포함되어 있다는 뜻이 아닙니다.

05 출처 및 라이선스

소스 및 라이선스

이 페이지는 아래에 링크된 고정된 소스 리비전을 설명합니다. 업스트림 동작과 요구 사항은 변경될 수 있습니다.

소스 소유자
ParthJadhav
라이선스
MIT
검토한 스냅샷
2026-10-07 · 82d4ebba770c
편집 소스 요약
로컬 프로젝트 저장, 플랫폼별 별도 덱, 현지화된 문구, 연결된 구성, 크롭 중심 내보내기 점검을 갖춘 템플릿 기반 스크린샷 에디터입니다.

링크된 소스를 바탕으로 OpenDesign이 작성한 원본 요약입니다. 저장소 스타 수는 특정 시점의 인기 신호일 뿐 스킬 사용량이나 품질 점수가 아닙니다.

06 시작 전 질문

시작 전 질문

앱의 실제 스크린샷을 생성하나요?

주된 역할은 제공된 캡처로 마케팅 에셋을 구성하는 것입니다. 해당하는 경우 캡처 자동화는 별도의 동반 워크플로입니다.

기기 하나가 두 스크린샷에 걸쳐 겹칠 수 있나요?

네, 연결 모드는 공유 캔버스의 크롭을 내보냅니다. 중요한 텍스트와 UI는 각 크롭 안에 두고 이미지를 각각 따로 검토하세요.

기존 프로젝트를 업그레이드하면 크롭이 바뀌나요?

소스는 이미 연결형 구성을 선택한 경우가 아니면 기존 프로젝트를 분리 모드로 유지합니다. 마이그레이션은 복구 가능한 백업과 함께 기존 에셋과 문구를 보존해야 합니다.

OpenDesign

다음 디자인 반복을 위한 여유를 만드세요.

브리프, 소스 자료, 디자인 작업을 로컬 작업 공간에 함께 보관하세요. 워크플로에 추가하기 전에 스킬 자체의 설정을 확인하세요.

업스트림 소스 파일
https://github.com/ParthJadhav/app-store-screenshots/blob/82d4ebba770ce821d89e27f6a5bd30a2cb65ab23/skills/app-store-screenshots/SKILL.md