#스크린샷 제너레이터 (로컬 전용)

라우트:

• /{locale}/{product}/screenshots-generator

이 페이지는 개발 환경 전용(NODE_ENV=development)이며, 프로덕션에서는 404를 반환합니다.

#소스 이미지 디렉토리

제너레이터는 아래 경로에서 소스 이미지를 읽습니다.

• public/products/{slug}/raw-screenshots/{locale}/phone
• public/products/{slug}/raw-screenshots/{locale}/tablet

예시:

• public/products/aurora-eos/raw-screenshots/en-US/phone/home.png
• public/products/aurora-eos/raw-screenshots/en-US/tablet/home.png

권장 파일명:

• home.png
• capture.png
• insights.png
• shared.png
• customize.png
• reminder.png

#프로덕트별 커스터마이징

프로덕트별로 문구/테마를 분리하려면 아래 파일을 생성합니다.

• public/products/{slug}/raw-screenshots/screenshot-generator.config.json

로케일별 스크린샷 문구만 분리하려면 아래 파일을 추가합니다.

• public/products/{slug}/raw-screenshots/{locale}/screenshot-generator.json

~/.config/pabal-mcp/registered-apps.json에 등록된 App Store / Google Play 지원 언어 기준으로 로케일 입력 폴더를 맞추고 최종 스크린샷 PNG까지 생성하려면 아래 명령 하나만 실행합니다.

yarn screenshots:generate

명령을 실행하면 public/products 안의 앱 목록이 표시되고, 번호로 생성할 앱을 선택할 수 있습니다. slug를 바로 지정할 수도 있습니다.

yarn screenshots:generate pabal

이 명령은 먼저 raw-screenshots/{locale}/phone, raw-screenshots/{locale}/tablet 입력 폴더를 준비합니다. 기존 screenshot-generator.json 문구 파일은 수정하지 않습니다. 그다음 내부 Next dev 서버와 Playwright 브라우저를 임시로 띄워 로컬 제너레이터 UI와 같은 React/html-to-image 렌더링 결과를 아래 경로에 저장합니다. 사용자가 직접 localhost를 열 필요는 없습니다.

• public/products/{slug}/screenshots/{locale}/phone/1.png
• public/products/{slug}/screenshots/{locale}/tablet/1.png
• public/products/{slug}/screenshots/{locale}/feature-graphic.png

예시 설정:

{
  "title": "Aurora EOS App Store Screenshots",
  "subtitle": "Localized marketing screenshots for weather intelligence",
  "statusLabel": "Export Status",
  "accentGradient": "linear-gradient(120deg, #0f172a 0%, #134e4a 55%, #0ea5e9 100%)",
  "theme": {
    "backgroundStart": "#0b1220",
    "backgroundEnd": "#12263a",
    "panel": "rgba(255,255,255,0.9)",
    "textPrimary": "#f8fafc",
    "textSecondary": "#cbd5e1",
    "accent": "#22c55e"
  },
  "slides": [
    {
      "fileName": "home.png",
      "headline": "Know tomorrow's aurora chance"
    },
    {
      "fileName": "capture.png",
      "headline": "Track Kp, cloud cover, and visibility"
    }
  ],
  "tabletSlides": [
    {
      "fileName": "home.png",
      "headline": "Know tomorrow's aurora chance"
    },
    {
      "fileName": "capture.png",
      "headline": "Track Kp, cloud cover, and visibility"
    },
    {
      "fileName": "insights.png",
      "headline": "Plan the night from a wider view"
    }
  ]
}

로케일별 문구 예시:

{
  "title": "Post Black Belt: 주짓수 일지",
  "subtitle": "주짓수 기록 & 벨트 트래커",
  "slides": [
    {
      "fileName": "home.png",
      "headline": "훈련 후 다음에 무엇을 연습할지 바로 확인",
      "subheadline": "수업 후 다음 단계를 바로 확인하세요."
    }
  ],
  "tabletSlides": [
    {
      "fileName": "home.png",
      "headline": "훈련 흐름을 큰 화면에서 보기",
      "subheadline": "태블릿 스크린샷은 보통 3개만 사용합니다."
    }
  ]
}

#참고

• slides를 생략하면 파일명 기준으로 자동 슬라이드 라벨이 생성됩니다.
• tabletSlides를 추가하면 iPad 생성에서만 해당 문구/파일명을 사용합니다. 기본 생성 스크립트는 태블릿용 데이터를 3개로 생성합니다.
• slides를 생략하면 아래 순서를 우선 사용합니다: home.png, capture.png, insights.png, shared.png, customize.png, reminder.png.
• screenshots:generate는 기존 screenshot-generator.json 문구를 자동으로 덮어쓰지 않습니다.
• 해당 로케일 폴더에 파일이 없으면 기본 로케일, 이후 config.json의 screenshot metadata 순서로 fallback 됩니다.
• 로컬 제너레이터 UI는 개발 중 미리보기/수동 내보내기용이고, yarn screenshots:generate는 같은 UI를 내부 브라우저에서 자동 캡처해 PNG 파일을 생성합니다.