[안티그래비티]Saas개발 전체 과정 (랜딩페이지~배포·DB·결제)with AI

작업 1 시작 ─┐ 작업 2 시작 ─┼→ 동시 진행 작업 3 시작 ─┘ ↓ 각자 완료되면 결과 반환

[프로젝트 개요] 서비스명: 스냅투스토리 (SnapStory) 개발 도구: Antigravity (안티그래비티) 총 과정: 9단계 35차시 목표: 사진 자동 선별 + AI 보정 + 글쓰기 + PDF 생성 웹앱 주요 기술 스택 확인: Frontend: React + Next.js 인증: Supabase Auth (구글/카카오 OAuth) 스토리지: Cloudflare R2 결제: 토스페이먼츠 배포: Vercel (CI/CD) 보안: Upstash Redis (Rate Limit)

"커밋만 꼼꼼히 해두면, 내 컴퓨터가 폭발해도 GitHub에서 다시 '클론(Clone)'이나 '풀(Pull)'을 받아 모든 걸 되살릴 수 있다!"

프로젝트 시작하기 전에 깃허브 저장소 셋팅후 연결부터 해놓을까? 프로젝트 저장소명은 https://github.com/roughkyo/snaptostory 야

깃관리를 위해 알아야할 핵심사항과 내용, 명령어 정리해봐. 특히 중간에 내가 소스코드를특정시점으로 롤백하기 위해 알아야 하는 사항도 함께.

{ "mcpServers": { "context7": { "command": "npx", "args": [ "-y", "@upstash/context7-mcp", "--api-key", "YOUR_UPSTASH_API_KEY" // API키 입력 ] }, "sequential-thinking": { "command": "npx", "args": [ "-y", "@modelcontextprotocol/server-sequential-thinking" ] } } }

Role: 너는 Next.js 16 (App Router), TypeScript, Tailwind CSS v4에 정통한 시니어 풀스택 엔지니어이자 UI/UX 디자이너야. 아래 기획안을 바탕으로 **'스냅투스토리(SnapToStory)'**의 랜딩 페이지와 핵심 인터페이스를 구현해줘. 1. 기술 스택 및 공통 디자인 시스템 -Framework: Next.js 16 (App Router), TypeScript -Styling: Tailwind CSS v4 -Icons: Lucide-react -Theme: 전체적으로 밝은 흰색 배경(bg-white-50), 글라스 모피즘을 강하게 적용 -Primary Color: 퍼플 (text-#601EF9), 그라디에이션 적용 2. 컴포넌트별 상세 요구사항 섹션별 세부구현 가이드라인 -Header,"* 왼쪽: '스냅투스토리' 텍스트 로고* 가운데: AI 스토리 생성, 내 갤러리, 요금제, 사용내역 메뉴* 오른쪽: [시작하기] 버튼 (에메랄드색)" -Hero,"* 제목: ""스냅투스토리"" (우측 상단에 30도 기울어진 에메랄드색 ""AI"" 배지 포함)* 부제: ""10장의 사진 중 최고의 순간을 선별하여 이야기를 입히다""" -AI Interface,"* 흰색 카드 레이아웃 (bg-white, shadow-2xl) 적용* 입력창: 키워드 및 스토리 배경 입력이 가능한 와이드 텍스트 필드. 우측 하단에 [사진 10장 업로드] 아이콘 배치* 옵션: 보정 강도(하/중/상) 드롭다운, 문서 스타일(에세이/뉴스/SNS) 선택 버튼* 버튼: 하단에 너비 100%의 검정색 [스토리 및 보정본 생성하기] 버튼" -Sample Gallery,"* 카테고리: 에세이, 뉴스기사, SNS 업로드용 탭 구성* 원본 섹션: ""AI 선별 원본"" 배지가 붙은 큰 이미지 박스* 결과 섹션: 아래에 3x3 그리드로 ""AI 보정 및 스토리 결과물"" 배치* 기능: 샘플 이미지 클릭 시 해당 스타일의 프롬프트가 입력창에 자동 반영되는 로직 포함" -CTA & Footer,"* ""지금 바로 시작해보세요"" 문구와 [바로 시작하기 →] 에메랄드 버튼* 푸터: 좌측에 스냅투스토리 회사 정보, 우측에 이용약관 및 개인정보처리방침 링크* Copyright: © 2026 스냅투스토리. All rights reserved." 3. 개발 지침 (Implementation Logic) -src/components 내부에 각 섹션(Header, Hero, Generator, Gallery, Footer)을 모듈화하여 작성할 것. -Tailwind v4의 신기능을 활용해 버튼 호버 및 카드 등장 애니메이션을 부드럽게 처리할 것. -state 관리를 통해 사용자가 보정 강도를 선택하거나 이미지를 업로드하는 인터랙션을 시각적으로 피드백할 것. -모바일 환경에서도 3x3 그리드가 1열 또는 2열로 자연스럽게 변하는 반응형 디자인을 적용할 것. 자, 이제 스냅투스토리의 전체 소스 코드를 폴더 구조에 맞춰서 작성해줘.

public/samples 폴더에 webp파일 4개 넣었어. 메인페이지에 반영해

현재 우리의 서비스는 크게 3단계 로직이야 1.AI가 구도, 선명도 등을 분석해 베스트 1~2장 선정: gemini-3-flash-preview (Vision) 2. 선택된 보정 강도(상/중/하)에 따른 이미지 인핸싱: Cloudinary API 3. 보정된 사진 분석 후 키워드 조합 (에세이, 기사, SNS)하여 텍스트 작성: gemini-3-flash-preview #그럼 API키가 총 2개 필요하겠지? - gemini-3-flash-preview API 키: ~~~~~ - cloudinary API키: 9~~~ # API키 설정에 대한 참조주소는 다음과 같아 -https://ai.google.dev/gemini-api/docs/models?hl=ko - https://console.cloudinary.com/app/c-bb4c67500f8e9d27b884121e161920/image/getting-started 3단계 기능이 제대로 구현될 수 있도록 MCP잘 활용해. 사용자가 이미지 5장~10장 한번에 업도르 하는 기능부터 단계별로 구현해봐

1. 현재 드래드&드랍 기능이 구현이 안되었어. 사용자가 사진을 브라우저로 드래그 했을 때 이를 인식하여 업로드 기능이 활성화 될 수 있도록 수정해. 2. AI가 업로드된 여러장의 사진중, 왜 그사진을 뽑았는지 그 이유를 간단히 사용자에게 안내해주는 기능 추가해 3. 사진 보정 기능이 작동하고 있는것 같지 않아. - 사진 보정후에도 원본 사진과 크기는 동일해야해. 너 마음대로 사진 사이즈를 변경하지는 마 - 사진 보정기능을 위한 기능은 AI Image Enhancer야, 다시 확인해 - 사용예시: import { enhance } from "@cloudinary/url-gen/actions/effect"; new CloudinaryImage("me/underexposed-1.jpg").effect(enhance());

당신은 사람들의 소중한 순간을 기록하는 따뜻한 시선을 가진 전문 사진작가이자 큐레이터입니다. 제공된 여러 장의 사진들 중 다음 3가지 핵심 기준을 우선순위로 고려하여 가장 가치 있는 사진 1장을 골라주세요: 1. 특별한 관심이 가거나 독특한 순간을 담은 사진 2. 혼자보다는 많은 사람이 함께 어우러진 북적북적한 사진 3. 웃음꽃이 피었거나, 재미있는 표정, 행복함이 가득 느껴지는 생생한 사진

좋아. 이미지 저장기능을 구현하자. '이미지 저장하기'를 누르면 로컬 컴퓨터에 저장될 수 있도록 코드 반영해

사진을 10장정도 올리면 [1단계] AI가 자동으로 잘 나온 사진을 1~2장 선별해서, 보정함- 보정의 강도를 상/중/하로 선택할 수 있음 [2단계] 보정된 사진과 사용자가 입력한 키워드를 바탕으로 다음 3가지 형태의 문서를 작성-에세이, 뉴스기사, SNS업로드용 [3단계] 사용자에게 pdf형태로 다운로드 제공

사용자 ↓ [웹앱 인터페이스] ↓ (사진 10장 + 키워드 입력) ↓ [백엔드 서버] ↓ ┌─────────────────────────────────┐ │ 1. 사진 분석 AI (MaaS) │ │ - Google Vision API │ │ - 점수 매겨서 베스트 1-2장 │ └─────────────┬───────────────────┘ ↓ ┌─────────────────────────────────┐ │ 2. 사진 보정 (MaaS) │ │ - Cloudinary / Remini API │ │ - 상/중/하 강도 선택 │ └─────────────┬───────────────────┘ ↓ ┌─────────────────────────────────┐ │ 3. AI 글쓰기 (MaaS) │ │ - Claude/gemini API │ │ - 프롬프트: "사진 + 키워드 │ │ 바탕으로 에세이/기사/SNS" │ └─────────────┬───────────────────┘ ↓ ┌─────────────────────────────────┐ │ 4. PDF 생성 │ │ - jsPDF 라이브러리 │ │ - 사진 + 글 레이아웃 │ └─────────────┬───────────────────┘ ↓ [다운로드]

화면 구성 (5단계) ┌─────────────────────────────────┐ │ Step 1: 사진 업로드 │ │ [+] 사진 10장까지 드래그 │ └─────────────────────────────────┘ ↓ ┌─────────────────────────────────┐ │ Step 2: 키워드 입력 │ │ [____] 여행, 추억, 제주도 │ └─────────────────────────────────┘ ↓ ┌─────────────────────────────────┐ │ Step 3: 보정 강도 선택 │ │ ( ) 상 (●) 중 ( ) 하 │ └─────────────────────────────────┘ ↓ ┌─────────────────────────────────┐ │ Step 4: AI 처리 중... │ │ ▓▓▓▓▓▓▓▓░░░░ 75% │ └─────────────────────────────────┘ ↓ ┌─────────────────────────────────┐ │ Step 5: 결과 미리보기 │ │ [사진] [에세이] [기사] [SNS] │ │ [PDF 다운로드 🔽] │ └─────────────────────────────────┘