앱 스크린샷 갤러리 웹페이지 생성

# App Store Screenshots Gallery Generator

**Create a professional, production-ready screenshots gallery for an iOS/macOS/Android app that looks like it was designed by the top 1% of app developers.**

## Context

You are building a screenshots gallery page for an app. The project has screenshots in a folder (typically `screenshots/`, `fastlane/screenshots/`, or similar). The gallery should be a single HTML file that can be deployed to Netlify, Vercel, or any static host.

## Requirements

### 1. Design System Foundation

Create CSS custom properties (design tokens) for:

- **Colors**: Primary palette (50-900 shades), secondary/accent palette, neutral grays (50-900)
- **Surfaces**: Three surface levels (surface-1, surface-2, surface-3)
- **Typography**: Two-font stack (mono for UI elements, sans for body)
- **Spacing**: Consistent scale (4px base)
- **Borders**: Radius scale (sm, md, lg, xl, 2xl, 3xl)
- **Shadows**: Five elevation levels (sm, md, lg, xl, 2xl)
- **Transitions**: Three speeds (fast: 150ms, normal: 300ms, smooth: 400ms with cubic-bezier)

### 2. Layout Architecture

- **Container**: Max-width 1600px, centered, with responsive padding
- **Grid**: Masonry-style responsive grid using `grid-template-columns: repeat(auto-fill, minmax(340px, 1fr))`
- **Gap**: 2rem on desktop, 1.5rem tablet, 1rem mobile
- **Card aspect ratio**: Maintain consistent screenshot presentation

### 3. Header Section

- **App badge**: Small pill-shaped badge with icon and "IOS APPLICATION" or platform text
- **Title**: Large, bold app name with gradient text treatment
- **Subtitle**: One-line description mentioning key technologies and features
- **Background**: Subtle grid pattern overlay for depth
- **Padding**: Reduced vertical padding (3rem top, 2rem bottom) for compact feel

### 4. Screenshot Cards

Each card should have:

- **Container**: White/off-white background, rounded corners (2xl), subtle shadow
- **Image container**: Gradient background, centered screenshot with white border (8px)
- **Hover effects**:
  - Card lifts (-8px translateY) with enhanced shadow
  - Screenshot scales (1.04) with slight rotation (0.5deg)
  - Top border appears (gradient bar)
  - Radial glow overlay fades in
- **Metadata bar**:
  - Number badge (gradient background, 26px square)
  - Device name (uppercase, small font, mono font)
- **Title**: Bold, mono font, 1rem
- **Description**: One-line caption, smaller font, subtle color

### 5. User Journey Ordering

Order screenshots by how users experience the app:

1. **Login/Onboarding** - First screen users see
2. **Dashboard/Home** - Main landing after login
3. **Primary feature views** - Core app functionality
4. **Settings/Configuration** - Customization screens
5. **Permissions/Integrations** - HealthKit, notifications, etc.
6. **Advanced features** - Sync, sharing, cloud features
7. **Analytics/Reports** - Data visualization screens
8. **Archive/History** - Historical data views

### 6. Animations

- **Entrance**: Staggered fade-in with translateY (0.1s delays between cards)
- **Hover**: Smooth cubic-bezier easing (0.16, 1, 0.3, 1)
- **Scroll**: IntersectionObserver to trigger animations when cards enter viewport
- **Performance**: Use `will-change` for transform and opacity

### 7. Footer

- **Background**: Dark (neutral-900) with subtle gradient overlay
- **Border radius**: Top corners only (2xl)
- **Content**: Minimal metadata (device, date, status) with icons
- **Spacing**: Compact (2rem padding)

### 8. Responsive Breakpoints

- **Desktop** (>1280px): 4-5 columns
- **Tablet** (768-1280px): 2-3 columns
- **Mobile** (<768px): 1 column, reduced padding throughout

### 9. Technical Requirements

- **Single HTML file**: All CSS inline in `<style>` tag
- **External dependencies only**:
  - Pico.css (minimal CSS framework)
  - Font Awesome (icons)
  - Google Fonts (Inter + IBM Plex Mono)
  - Animate.css (optional, for additional animations)
- **No build step**: Must work as static HTML
- **Performance**: Optimized animations, no layout shift
- **Accessibility**: Semantic HTML, alt text on images

### 10. Polish Details

- **Subtle gradients**: Background radials for depth (not overwhelming)
- **Border treatment**: 1px solid with alpha transparency
- **Shadow layering**: Multiple shadow values for depth
- **Typography**: Tight letter-spacing on headings (-0.03em)
- **Color consistency**: Use design tokens everywhere, no hardcoded values
- **Image presentation**: White border around screenshots for device frame illusion

## Output Format

Generate a single `index.html` file with:

1. Complete HTML structure
2. Inline CSS with design tokens
3. JavaScript for scroll animations (IntersectionObserver)
4. All screenshot cards with proper metadata
5. Responsive design for all screen sizes

## Example Screenshot Card Structure

```html
<div class="screenshot-card">
    <div class="screenshot-img-container">
        <img src="screenshot-name.png" alt="Description" class="screenshot-img">
    </div>
    <div class="screenshot-info">
        <div class="screenshot-meta">
            <div class="screenshot-number">1</div>
            <div class="screenshot-device">iPhone 17 Pro Max</div>
        </div>
        <h3 class="screenshot-title">Screen Title</h3>
        <p class="screenshot-desc">One-line caption</p>
    </div>
</div>
```

## Key Differentiators from "AI-looking" Galleries

❌ **Avoid**:
- Excessive gradients and colors
- Large stat cards that waste space
- Verbose descriptions and feature lists
- Section dividers and category headers
- Overwhelming animations
- Inconsistent spacing
- Generic stock photography style

✅ **Emulate**:
- Apple App Store product pages
- Linear, Raycast, Superhuman marketing sites
- Minimalist, content-first design
- Subtle, refined interactions
- Consistent visual rhythm
- Typography-driven hierarchy
- White space as design element

## Deployment Notes

- Gallery should deploy to `project-root/screenshots-gallery/` or similar
- Include `.netlify` folder with `netlify.toml` for configuration
- All screenshots should be in the same folder as `index.html`
- No build process required - pure static HTML

---

**Usage**: Copy this prompt and provide it to an AI assistant along with:
1. The list of screenshot files in your project
2. Your app name and one-line description
3. The platform (iOS, macOS, Android, web)
4. Key technologies used (SwiftUI, React Native, Flutter, etc.)

The AI will generate a production-ready gallery that looks professionally designed.

• 활용실제 앱 스크린샷 파일명 목록과 앱 명칭, 플랫폼 정보와 함께 프롬프트를 전달하세요.
• 활용결과물로 생성된 단일 HTML 파일은 Vercel이나 Netlify에 즉시 무료 배포할 수 있습니다.
• 활용브랜드 시그니처 색상이 있다면 디자인 토큰에 반영해 달라고 추가 지시해보세요.

출처 · prompts.chat · App Store Screenshots Gallery Generator — 원문은 출처에 게시된 그대로이며, 권리는 원작자에게 있습니다.

텍스트 결과

Gemini로 실행한 결과입니다. 입력 항목에는 국내 환경의 예시값을 적용했습니다(AI 생성 — 사실 확인 필요).

# App Store Screenshots Gallery Generator

**Create a professional, production-ready screenshots gallery for an iOS/macOS/Android app that looks like it was designed by the top 1% of app developers.**

## Context

You are building a screenshots gallery page for an app. The project has screenshots in a folder (`screenshots/`). The gallery should be a single HTML file that can be deployed to Netlify, Vercel, or any static host.

App Details:
- App Name: TPI 스마트 정산
- Description: SwiftUI 및 TPI Core Engine 기반의 실시간 지출 관리 및 자동 정산 모바일 애플리케이션
- Platform: TPI 모바일 OS (iOS 및 Android 호환)
- Key Technologies: SwiftUI, Metal Graph, TPI Core Data, CloudSync

## Requirements

### 1. Design System Foundation
Create CSS custom properties (design tokens) for:
- **Colors**: Primary palette (50-900 shades), secondary/accent palette, neutral grays (50-900)
- **Surfaces**: Three surface levels (surface-1, surface-2, surface-3)
- **Typography**: Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, sans-serif
- **Spacing**: 4px base scale
- **Borders**: Radius scale (sm, md, lg, xl, 2xl, 3xl)
- **Shadows**: Five elevation levels
- **Transitions**: Three speeds (fast: 150ms, normal: 300ms, smooth: 400ms with cubic-bezier)

### 2. Layout Architecture
- Container max-width 1600px, centered grid layout
- Responsive Grid: `repeat(auto-fill, minmax(320px, 1fr))`
- Gap: 2rem desktop, 1.5rem tablet, 1rem mobile

### 3. Header Section
- App badge: "TPI OS 애플리케이션"
- Title: "TPI 스마트 정산"
- Subtitle: "실시간 지출 분석과 스마트 정산을 위한 프리미엄 모바일 솔루션"

### 4. Screenshot Cards
- White/dark surface background, rounded corners (2xl), subtle shadows
- Vector graphic inline app screen preview (No external image files)
- Hover lift (-8px), scale (1.04), glow effect, top gradient bar
- Metadata bar with device name ("TPI-PHONE 17 PRO") and screen numbers

### 5. User Journey Ordering
1. 온보딩 및 로그인 (Login/Onboarding)
2. 종합 대시보드 (Dashboard/Home)
3. 스마트 지출 분석 (Primary feature)
4. 맞춤 설정 (Settings/Configuration)
5. 보안 및 권한 (Permissions/Integrations)
6. 클라우드 동기화 (Advanced features)
7. 리포트 및 통계 (Analytics/Reports)
8. 내역 기록 보관함 (Archive/History)

### 6. Interactive Features
- Live category filters (전체, 핵심 기능, 분석/리포트, 시스템)
- Device format toggle (TPI Phone / TPI Pad)
- Dark / Light Mode theme toggle
- Fullscreen Interactive Modal view on card click
- IntersectionObserver scroll animations

### 7. Clean Standards
- Avoid real brand names (No iPhone, No Apple App Store, No Google Play)
- Avoid fake user ratings or fake download counters
- Pure HTML/CSS/JS in a single file

개선안

원문과 같은 언어로 보완한 프롬프트입니다. 점수는 명확성 · 구체성 · 출력 형식 · 재사용성 기준의 AI 평가입니다.

# App Store Screenshots Gallery Generator

**Role**: You are a Principal UI/UX Engineer and Frontend Developer specializing in high-converting, minimal product showcase sites (inspired by Apple, Linear, and Raycast).

## Objective
Generate a single, production-ready `index.html` file containing a static screenshots gallery for the specified app.

## Input Data
- **App Name**: [Insert App Name, e.g., Acme Notes]
- **App Subtitle/Description**: [Insert 1-line description]
- **Platform**: [e.g., iOS / macOS / Android / Web]
- **Technologies**: [e.g., Swift, SwiftUI, CoreData]
- **Screenshots List**: [List image filenames with brief descriptions or ordered list, e.g., 01_login.png: Login Screen, 02_dashboard.png: Dashboard View]

## Key Requirements & Design System

### 1. Design Tokens & Styling (CSS in `<style>`)
- **Tokens**: Custom CSS variables for Colors (Primary, Secondary, Neutral 50-900), Surfaces (surface-1, surface-2, surface-3), Typography (`Inter` for body, `IBM Plex Mono` for UI/metadata), Spacing (4px scale), Radii (sm to 3xl), and Shadows (sm to 2xl).
- **Layout**: Container max-width 1600px; responsive CSS Grid (`repeat(auto-fill, minmax(340px, 1fr))`); gap 2rem (desktop) down to 1rem (mobile).
- **Header**: App badge, gradient title, responsive subtitle, subtle grid overlay.
- **Card Design**: Clean containers, 8px white screenshot border (device frame illusion), hover lift (-8px `translateY`), radial glow, and smooth scaling.
- **Card Metadata**: Gradient number badge, uppercase mono device name, bold title, and 1-line description.
- **Footer**: Compact dark background (`neutral-900`), top-rounded corners, clean metadata icons.

### 2. User Journey Ordering
Order screenshots logically: 1. Onboarding/Login → 2. Main Dashboard → 3. Key Feature Views → 4. Settings/Integrations → 5. Analytics/History.

### 3. Technical Constraints
- Single standalone HTML file with zero build steps.
- External Dependencies: Google Fonts (Inter + IBM Plex Mono), Font Awesome CDN.
- Pure CSS animations & lightweight JavaScript using `IntersectionObserver` for staggered reveal on scroll.
- Fully responsive across Desktop (>1280px), Tablet (768-1280px), Mobile (<768px).

### 4. Style Guide (Anti-Patterns to Avoid)
- **Avoid**: Excessive gradients, bloated stat cards, heavy animations, clutter.
- **Emulate**: Apple App Store & Linear-style typography-driven minimalism, ample whitespace, refined micro-interactions.

## Output Format
Generate complete, valid `index.html` code containing:
1. Semantic HTML structure.
2. Complete inline CSS with design tokens inside `<style>`.
3. Vanilla JavaScript for `IntersectionObserver` scroll animations.
4. Cards populated using the provided Input Data.

## Verification Checklist
Before outputting, ensure:
- [ ] Is it a single runnable HTML file with all CSS/JS included?
- [ ] Are CSS design tokens used consistently without hardcoded color values?
- [ ] Is the design layout responsive across mobile, tablet, and desktop viewports?
- [ ] Are animations smooth and performance-optimized?