앱 스토어 스크린샷 갤러리 생성기

# 앱 스토어 스크린샷 갤러리 생성기 **상위 1% 앱 개발자가 디자인한 것처럼 보이는 iOS/macOS/Android 앱용 전문적이고 프로덕션 준비가 완료된 스크린샷 갤러리를 생성합니다.** ## 컨텍스트 앱용 스크린샷 갤러리 페이지를 구축 중입니다. 프로젝트에는 스크린샷이 폴더(일반적으로 `screenshots/`, `fastlane/screenshots/` 등)에 있습니다. 갤러리는 Netlify, Vercel 또는 모든 정적 호스트에 배포할 수 있는 단일 HTML 파일이어야 합니다. ## 요구 사항 ### 1. 디자인 시스템 기반 CSS 사용자 정의 속성(디자인 토큰) 생성: - **색상**: 기본 팔레트(50-900 음영), 보조/액센트 팔레트, 중립 회색(50-900) - **표면**: 세 가지 표면 레벨(surface-1, surface-2, surface-3) - **타이포그래피**: 두 가지 글꼴 스택(UI 요소용 모노, 본문용 산세리프) - **간격**: 일관된 스케일(4px 기준) - **테두리**: 반경 스케일(sm, md, lg, xl, 2xl, 3xl) - **그림자**: 다섯 가지 높이 레벨(sm, md, lg, xl, 2xl) - **전환**: 세 가지 속도(fast: 150ms, normal: 300ms, smooth: 400ms with cubic-bezier) ### 2. 레이아웃 아키텍처 - **컨테이너**: 최대 너비 1600px, 중앙 정렬, 반응형 패딩 - **그리드**: `grid-template-columns: repeat(auto-fill, minmax(340px, 1fr))`을 사용한 메이슨리 스타일 반응형 그리드 - **간격**: 데스크톱 2rem, 태블릿 1.5rem, 모바일 1rem - **카드 종횡비**: 일관된 스크린샷 표현 유지 ### 3. 헤더 섹션 - **앱 배지**: 아이콘과 "IOS APPLICATION" 또는 플랫폼 텍스트가 있는 작은 알약 모양 배지 - **제목**: 그라데이션 텍스트 처리가 있는 크고 굵은 앱 이름 - **부제목**: 주요 기술과 기능을 언급하는 한 줄 설명 - **배경**: 깊이감을 위한 미묘한 그리드 패턴 오버레이 - **패딩**: 컴팩트한 느낌을 위한 축소된 세로 패딩(상단 3rem, 하단 2rem) ### 4. 스크린샷 카드 각 카드에는 다음이 포함됩니다: - **컨테이너**: 흰색/오프화이트 배경, 둥근 모서리(2xl), 미묘한 그림자 - **이미지 컨테이너**: 그라데이션 배경, 흰색 테두리(8px)가 있는 중앙 정렬 스크린샷 - **호버 효과**: - 카드가 위로 떠오름(-8px translateY) 및 강화된 그림자 - 스크린샷 확대(1.04) 및 약간의 회전(0.5deg) - 상단 테두리 표시(그라데이션 바) - 방사형 글로우 오버레이 페이드 인 - **메타데이터 바**: - 번호 배지(그라데이션 배경, 26px 정사각형) - 기기 이름(대문자, 작은 글꼴, 모노 글꼴) - **제목**: 굵은 모노 글꼴, 1rem - **설명**: 한 줄 캡션, 더 작은 글꼴, 미묘한 색상 ### 5. 사용자 여정 순서 사용자가 앱을 경험하는 방식에 따라 스크린샷 정렬: 1. **로그인/온보딩** - 사용자가 처음 보는 화면 2. **대시보드/홈** - 로그인 후 메인 랜딩 3. **주요 기능 보기** - 핵심 앱 기능 4. **설정/구성** - 사용자 지정 화면 5. **권한/통합** - HealthKit, 알림 등 6. **고급 기능** - 동기화, 공유, 클라우드 기능 7. **분석/보고서** - 데이터 시각화 화면 8. **아카이브/기록** - 과거 데이터 보기 ### 6. 애니메이션 - **입장**: 카드 간 0.1초 지연이 있는 계단식 페이드 인 및 translateY - **호버**: 부드러운 cubic-bezier 이징(0.16, 1, 0.3, 1) - **스크롤**: IntersectionObserver를 사용하여 카드가 뷰포트에 들어올 때 애니메이션 트리거 - **성능**: transform 및 opacity에 `will-change` 사용 ### 7. 푸터 - **배경**: 다크(neutral-900) 및 미묘한 그라데이션 오버레이 - **테두리 반경**: 상단 모서리만(2xl) - **콘텐츠**: 아이콘이 있는 최소한의 메타데이터(기기, 날짜, 상태) - **간격**: 컴팩트(2rem 패딩) ### 8. 반응형 중단점 - **데스크톱**(>1280px): 4-5열 - **태블릿**(768-1280px): 2-3열 - **모바일**(<768px): 1열, 전체 패딩 축소 ### 9. 기술 요구 사항 - **단일 HTML 파일**: 모든 CSS는 `<style>` 태그에 인라인 - **외부 종속성만**: - Pico.css(최소 CSS 프레임워크) - Font Awesome(아이콘) - Google Fonts(Inter + IBM Plex Mono) - Animate.css(선택 사항, 추가 애니메이션용) - **빌드 단계 없음**: 정적 HTML로 작동해야 함 - **성능**: 최적화된 애니메이션, 레이아웃 이동 없음 - **접근성**: 시맨틱 HTML, 이미지의 alt 텍스트 ### 10. 폴리시 디테일 - **미묘한 그라데이션**: 깊이감을 위한 배경 방사형(과하지 않게) - **테두리 처리**: 알파 투명도가 있는 1px 실선 - **그림자 레이어링**: 깊이감을 위한 여러 그림자 값 - **타이포그래피**: 제목의 타이트한 자간(-0.03em) - **색상 일관성**: 하드코딩된 값 없이 모든 곳에서 디자인 토큰 사용 - **이미지 표현**: 기기 프레임 효과를 위한 스크린샷 주변 흰색 테두리 ## 출력 형식 다음을 포함하는 단일 `index.html` 파일 생성: 1. 완전한 HTML 구조 2. 디자인 토큰이 포함된 인라인 CSS 3. 스크롤 애니메이션용 JavaScript(IntersectionObserver) 4. 적절한 메타데이터가 있는 모든 스크린샷 카드 5. 모든 화면 크기에 대한 반응형 디자인 ## 예시 스크린샷 카드 구조 ```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> ``` ## "AI 생성처럼 보이는" 갤러리와의 주요 차별점 ❌ **피해야 할 것**: - 과도한 그라데이션과 색상 - 공간을 낭비하는 큰 통계 카드 - 장황한 설명과 기능 목록 - 섹션 구분선과 카테고리 헤더 - 과도한 애니메이션 - 일관되지 않은 간격 - 일반적인 스톡 사진 스타일 ✅ **모방할 것**: - Apple App Store 제품 페이지 - Linear, Raycast, Superhuman 마케팅 사이트 - 미니멀리스트, 콘텐츠 우선 디자인 - 미묘하고 세련된 인터랙션 - 일관된 시각적 리듬 - 타이포그래피 중심의 계층 구조 - 디자인 요소로서의 여백 ## 배포 노트 - 갤러리는 `project-root/screenshots-gallery/` 또는 유사한 위치에 배포 - 구성용 `netlify.toml`이 있는 `.netlify` 폴더 포함 - 모든 스크린샷은 `index.html`과 같은 폴더에 있어야 함 - 빌드 프로세스 불필요 - 순수 정적 HTML --- **사용법**: 이 프롬프트를 복사하여 AI 어시스턴트에 다음 정보와 함께 제공: 1. 프로젝트의 스크린샷 파일 목록 2. 앱 이름과 한 줄 설명 3. 플랫폼(iOS, macOS, Android, 웹) 4. 사용된 주요 기술(SwiftUI, React Native, Flutter 등) AI는 전문적으로 디자인된 것처럼 보이는 프로덕션 준비가 완료된 갤러리를 생성합니다.