취향 기반으로 오늘 뭐 먹을지 골라주는 추천 서비스
어떻게 만드나?
AI 빌드 기획 패키지 · 49,000원
AI 코딩 에이전트가 바로 투입할 정밀 스펙 + 붙여넣기 프롬프트.
Next.js (App Router) · Firebase Auth · Cloud Firestore · Firebase Hosting
샘플은 여기까지 공개합니다
파일 다운로드와 전문(全文) 복사는 실제 결과물에서만 제공됩니다. 내 아이디어를 입력하면 같은 형식의 결과물을 받아볼 수 있습니다.
AI 코딩 에이전트(Cursor · v0 · Claude Code 등)에 아래 순서대로 붙여넣으면 됩니다. 각 단계를 끝내면 체크하세요.
AI 코딩 에이전트 준비
Cursor · v0 · Claude Code · Bolt 중 편한 도구를 열고 새 프로젝트를 시작하세요. 스택은 Next.js (App Router) · Cloud Firestore (Next.js · Firebase · Firebase Hosting) 기준입니다.
프로젝트 셋업 — 환경변수 · 인증
필요한 환경변수
NEXT_PUBLIC_FIREBASE_API_KEY NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN NEXT_PUBLIC_FIREBASE_PROJECT_ID NEXT_PUBLIC_FIREBASE_APP_ID FIREBASE_SERVICE_ACCOUNT_KEY
# 인증 설정 — Firebase Auth (Google 로그인) 1. Firebase 콘솔에서 프로젝트 생성 → 웹 앱 등록 후 firebaseConfig 확보 2. Authentication > Sign-in method > Google 사용 설정 3. 환경변수에 firebaseConfig 값(NEXT_PUBLIC_FIREBASE_*) 등록. Admin 작업용 service account 키는 서버 전용. 4. 패키지: `firebase`(클라이언트), `firebase-admin`(서버) 5. 클라이언트는 firebase/auth 로 Google 로그인. 서버 검증은 firebase-admin 으로 ID 토큰 verify. 6. Firestore 접근은 보안 규칙(firestore.rules) + 인증 기반으로 제한.
전체 골격 만들기 — 마스터 프롬프트 실행
아래 프롬프트를 통째로 복사해 에이전트에 붙여넣으면 프로젝트 뼈대가 만들어집니다.
## 역할 당신은 시니어 풀스택 엔지니어입니다. 아래 명세를 읽고 **AI 음식 추천 서비스 MVP**를 처음부터 완성까지 빌드하세요. 비개발자도 따라올 수 있도록 각 단계를 순서대로 구현합니다. --- ## 제품 요약 …
모듈 구현 — 1단계: 프로젝트 셋업
앞 단계 결과 위에서 이 프롬프트를 실행해 기능을 채웁니다.
Next.js 15 (App Router) + TypeScript + Tailwind CSS + Firebase 프로젝트를 셋업하라. ## 수행 작업 1. `npx create-next-app@latest` 로 프로젝트 생성 (TypeScript, App Router, Tailwind 선택) …
모듈 구현 — 2단계: Firebase Auth 인증
앞 단계 결과 위에서 이 프롬프트를 실행해 기능을 채웁니다.
Firebase Auth를 사용해 Google 소셜 로그인 단일 인증 플로우를 구현하라. ## 수행 작업 1. `src/lib/auth.ts` — `signInWithPopup(GoogleAuthProvider)`, `signOut` 헬퍼 함수 …
모듈 구현 — 3단계: Firestore DB 스키마 & 보안 규칙
앞 단계 결과 위에서 이 프롬프트를 실행해 기능을 채웁니다.
Cloud Firestore 컬렉션 스키마와 보안 규칙을 정의하고, Admin SDK 기반 서버 유틸을 작성하라. ## 컬렉션 스키마 (TypeScript 타입으로 정의, `src/types/schema.ts`) ``` …
모듈 구현 — 4단계: 핵심 기능 구현
앞 단계 결과 위에서 이 프롬프트를 실행해 기능을 채웁니다.
취향 입력 → AI 추천 → 음식점 카드 → 관심 저장 핵심 플로우를 구현하라. ## 화면 및 Route - `src/app/preference/page.tsx` — 취향 입력 폼: 원하는 음식 카테고리 (한식/중식/일식/양식/기타) 멀티셀렉트, 분위기 태그 (간편/든든/가벼운/매운 등), 제출 버튼 …
모듈 구현 — 5단계: 관리자 데이터 등록 & Firebase Hosting 배포
앞 단계 결과 위에서 이 프롬프트를 실행해 기능을 채웁니다.
관리자 전용 데이터 등록 화면과 Firebase Hosting + Cloud Functions(SSR) 배포 설정을 완성하라. ## 관리자 기능 1. `src/app/admin/page.tsx` — 음식(food) 및 음식점(restaurant) 데이터 등록 폼 …
배포하기
# 배포 — Firebase Hosting 1. `npm i -g firebase-tools` 후 `firebase login`, `firebase init`(Hosting + Firestore) 2. Next.js → Firebase Hosting 은 `firebase experiments:enable webframeworks` 또는 정적 export/SSR 설정 사용 3. `firebase.json` 에 hosting/firestore 설정. `firebase deploy --only hosting,firestore:rules,firestore:indexes` 4. 환경변수는 빌드 시 주입(NEXT_PUBLIC_*) + 서버 함수용 secret 관리.
검증 — 핵심 시나리오 테스트
아래 체크리스트로 핵심 기능이 동작하는지 확인하세요.
# 수용 테스트 / QA 체크리스트
> 테스트 환경: Firebase Emulator Suite (Auth + Firestore) + Next.js 개발 서버
> 우선순위: 🔴 필수 · 🟡 권장 · 🟢 선택
---
## 1. 인증 (Firebase Auth)
- [ ] 🔴 이메일/비밀번호로 회원가입 후 Firestore `users` 문서 자동 생성 확인
- [ ] 🔴 로그인 후 ID Token이 서버 쿠키에 안전하게 저장되는지 확인 (httpOnly)
- [ ] 🔴 비로그인 상태에서 추천·찜 액션 호출 시 401/리다이렉트 처리 확인
- [ ] 🔴 로그아웃 후 쿠키 만료 및 보호 경로 접근 차단 확인
- [ ] 🟡 토큰 만료(1시간) 후 자동 갱신 또는 재로그인 유도 확인
---
## 2. 취향 입력
- [ ] 🔴 카테고리·태그·지역 선택 후 저장 시 Firestore `users/{uid}.preferences` 업데이트 확인
- [ ] 🔴 아무것도 선택하지 않고 저장 시 유효성 오류 메시지 표시 확인
- [ ] 🔴 취향 재저장 시 기존 값 덮어쓰기(merge) 정상 동작 확인
- [ ] 🟡 취향 저장 완료 후 추천 결과 화면으로 자동 이동 확인
---
## 3. 추천 결과
- [ ] 🔴 취향 태그와 교집합이 있는 음식 카드가 1개 이상 표시되는지 확인
- [ ] 🔴 매칭 결과가 0건일 때 "추천 결과 없음" 안내 UI 표시 확인
- [ ] 🔴 각 음식 카드에 이름·카테고리·태그가 올바르게 렌더링되는지 확인
- [ ] 🔴 음식 카드에서 연결된 음식점 정보(이름·지역)가 표시되는지 확인
- [ ] 🟡 취향 미설정 사용자가 추천 화면 진입 시 취향 입력 화면으로 유도 확인
- [ ] 🟢 추천 목록 로딩 중 스켈레톤/스피너 UI 표시 확인
---
## 4. 음식점 카드
- [ ] 🔴 음식점 카드에 이름·지역 정보가 정상 출력되는지 확인
- [ ] 🔴 지도 API 미연동 상태에서 지도 관련 UI가 노출되지 않는지 확인 (Hard Constraint)
- [ ] 🔴 예약·결제 버튼이 MVP 화면에 노출되지 않는지 확인 (Hard Constraint)
---
## 5. 관심 저장 (찜)
- [ ] 🔴 추천 결과에서 찜 버튼 클릭 시 `saved_items` 문서 생성 확인
- [ ] 🔴 동일 음식을 중복 찜 시 중복 저장되지 않고 안내 처리 확인
- [ ] 🔴 찜 후 저장 목록 화면에서 해당 항목 즉시 반영 확인
- [ ] 🔴 찜 삭제 후 목록에서 제거되는지 확인
- [ ] 🟡 타인의 savedItemId로 삭제 요청 시 서버에서 거부(403/401) 확인
---
## 6. 저장 목록 화면
- [ ] 🔴 로그인 사용자의 찜 목록만 표시되는지 확인 (타인 데이터 혼입 없음)
- [ ] 🔴 저장 목록이 비어있을 때 빈 상태 UI(empty state) 표시 확인
- [ ] 🟡 목록에서 음식 이름·카테고리가 올바르게 표시되는지 확인
---
## 7. 관리자 데이터 등록
- [ ] 🔴 `role == "admin"` 사용자로 음식 등록 시 `foods` 컬렉션에 문서 생성 확인
- [ ] 🔴 `role == "admin"` 사용자로 음식점 등록 시 `restaurants` 컬렉션에 문서 생성 확인
- [ ] 🔴 일반 사용자가 관리자 액션 직접 호출 시 403 반환 확인
- [ ] 🔴 필수 필드(name, category, tags) 누락 시 유효성 오류 반환 확인
- [ ] 🟡 등록된 음식으로 즉시 추천 결과에 반영되는지 확인
---
## 8. 보안 / 환경변수
- [ ] 🔴 브라우저 Network 탭에서 서비스 계정 키 등 서버 시크릿이 노출되지 않는지 확인
- [ ] 🔴 `NEXT_PUBLIC_` 접두사 없는 환경변수가 클라이언트 번들에 포함되지 않는지 확인
- [ ] 🔴 Firestore 보안 규칙으로 클라이언트 직접 쓰기 차단 여부 Emulator에서 확인
- [ ] 🔴 `.env` 파일이 `.gitignore`에 포함되어 있는지 확인
---
## 9. 랜딩 페이지
- [ ] 🔴 비로그인 사용자에게 서비스 소개 및 시작하기(로그인/회원가입) 버튼 표시 확인
- [ ] 🟡 로그인 상태에서 랜딩 진입 시 추천 결과 또는 취향 입력으로 리다이렉트 확인
막혔을 때 — 트러블슈팅
에이전트가 에러로 막히면 아래 대응을 참고하세요.
## 빌드/타입 에러가 나요 - **증상**: 빌드 시 타입 에러. **원인**: 서버/클라이언트 컴포넌트 경계 혼동. **해결**: 데이터 조회는 서버에서, 상호작용은 `"use client"` 로 분리하라고 지시. ## 로그인이 안 되거나 팝업이 닫혀요 - **증상**: 구글 로그인 실패. **원인**: Firebase Authentication 에서 Google 공급자 미활성 또는 승인된 도메인 누락. **해결**: Authentication > Sign-in method 에서 Google 켜고, Settings > Authorized domains 에 localhost 와 배포 도메인 추가. ## 환경변수 관련 에러 - **증상**: Firebase config 관련 에러. **원인**: `.env.local` 미설정. **해결**: `.env.example` 를 복사해 값을 채우고 서버 재시작. `NEXT_PUBLIC_` 접두사 확인. ## 데이터가 안 보이거나 저장이 안 돼요 - **증상**: 읽기/쓰기 권한 거부. **원인**: Firestore 보안 규칙이 기본 차단. **해결**: 규칙에 컬렉션별 read/write 조건을 추가(공개 읽기/본인 쓰기 등). 서버(관리자 SDK) 쓰기는 서비스 계정 키 사용. ## 서버 전용 키가 노출돼요 - **증상**: 서비스 계정 키가 브라우저에 노출. **원인**: 클라이언트에서 admin SDK 사용. **해결**: 관리자 SDK/서비스 키는 서버 라우트에서만 사용하고 절대 `NEXT_PUBLIC_` 로 두지 않는다.
막히거나 시간이 없다면? 전문가가 이 빌드킷 그대로 제작해드립니다.
전문가에게 맡기기 →매번 메뉴를 고르는 피로를 줄여주는 취향 기반 AI 음식 추천 서비스. 사용자가 현재 상황(기분·카테고리·지역)을 간단히 입력하면, Firestore에 등록된 음식·음식점 데이터를 기반으로 규칙 기반 필터링 추천 결과를 보여주고, 마음에 드는 항목을 저장할 수 있다.
Google 소셜 로그인 / 로그아웃
사용자로서 Google 계정으로 1클릭 로그인하여 내 취향 저장 목록을 개인화하고 싶다.
취향 입력 (규칙 기반 필터 파라미터 수집)
사용자로서 카테고리·기분·지역을 간단히 선택하여 지금 나에게 맞는 음식 추천을 받고 싶다.
규칙 기반 음식·음식점 추천
사용자로서 내가 선택한 취향에 맞는 음식과 음식점 카드를 즉시 확인하고 싶다.
관심 항목 저장 / 저장 취소
사용자로서 마음에 드는 음식점 카드를 저장하고 나중에 다시 확인하고 싶다.
저장 목록 조회
사용자로서 내가 저장한 음식점 카드를 모아보고 빠르게 재확인하고 싶다.
관리자 음식·음식점 데이터 등록
관리자로서 음식과 음식점 데이터를 웹 화면에서 직접 등록하여 추천 풀을 관리하고 싶다.
backend/firestore.rules
샘플에서는 일부만 표시rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
// ─── users ───────────────────────────────────────────────
// 본인 문서만 읽기/쓰기 허용
match /users/{userId} {
allow read, write: if request.auth != null && request.auth.uid == userId;나머지 44줄은 실제 결과물에서 확인할 수 있습니다
backend/firestore.indexes.json
샘플에서는 일부만 표시{
"indexes": [
{
"collectionGroup": "restaurants",
"queryScope": "COLLECTION",
"fields": [
{ "fieldPath": "food_id", "order": "ASCENDING" },
{ "fieldPath": "area", "order": "ASCENDING" },나머지 39줄은 실제 결과물에서 확인할 수 있습니다
backend/seed.ts
샘플에서는 일부만 표시/** * seed.ts — Firebase Admin SDK 데모 데이터 시드 스크립트 * * 사용법: * 1. 서비스 계정 키를 환경변수로 설정 (코드에 하드코딩 금지) * export GOOGLE_APPLICATION_CREDENTIALS="/path/to/serviceAccountKey.json" * export FIREBASE_PROJECT_ID="your-project-id" * 2. ts-node seed.ts
나머지 210줄은 실제 결과물에서 확인할 수 있습니다
M0. 프로젝트 초기화 및 환경 설정
세부 태스크 6개
M1. Firestore 스키마 배포 및 시드
세부 태스크 5개
M2. Firebase Auth 연동 및 사용자 흐름
세부 태스크 6개
M3. 취향 입력 및 음식 추천 기능
세부 태스크 6개
M4. 관심 저장 및 저장 목록 기능
세부 태스크 5개
M5. 관리자 데이터 등록 화면
세부 태스크 6개
M6. 랜딩 페이지 및 UI 완성
세부 태스크 5개
M7. 배포 및 MVP 검증
세부 태스크 6개
## 역할 당신은 시니어 풀스택 엔지니어입니다. 아래 명세를 읽고 **AI 음식 추천 서비스 MVP**를 처음부터 완성까지 빌드하세요. 비개발자도 따라올 수 있도록 각 단계를 순서대로 구현합니다. --- ## 제품 요약 매번 뭘 먹을지 고르기 어려운 2030 직장인을 위해, 취향을 입력하면 AI가 음식과 음식점을 추천해주는 웹 서비스. 카테고리·태그 기반 룰로 추천하고, 마음에 드는 항목은 저장할 수 있다.
나머지 94줄은 실제 결과물에서 확인할 수 있습니다
1단계: 프로젝트 셋업
샘플에서는 일부만 표시Next.js 15 (App Router) + TypeScript + Tailwind CSS + Firebase 프로젝트를 셋업하라. ## 수행 작업 1. `npx create-next-app@latest` 로 프로젝트 생성 (TypeScript, App Router, Tailwind 선택) 2. 패키지 설치: `firebase`, `firebase-admin`, `openai` (AI 추천용), `zod`
나머지 13줄은 실제 결과물에서 확인할 수 있습니다
2단계: Firebase Auth 인증
샘플에서는 일부만 표시Firebase Auth를 사용해 Google 소셜 로그인 단일 인증 플로우를 구현하라. ## 수행 작업 1. `src/lib/auth.ts` — `signInWithPopup(GoogleAuthProvider)`, `signOut` 헬퍼 함수 2. `src/context/AuthContext.tsx` — `onAuthStateChanged` 로 user 상태 관리, Context + Provider 작성
나머지 10줄은 실제 결과물에서 확인할 수 있습니다
3단계: Firestore DB 스키마 & 보안 규칙
샘플에서는 일부만 표시Cloud Firestore 컬렉션 스키마와 보안 규칙을 정의하고, Admin SDK 기반 서버 유틸을 작성하라.
## 컬렉션 스키마 (TypeScript 타입으로 정의, `src/types/schema.ts`)
```
users : { id, email, createdAt: Timestamp }나머지 21줄은 실제 결과물에서 확인할 수 있습니다
4단계: 핵심 기능 구현
샘플에서는 일부만 표시취향 입력 → AI 추천 → 음식점 카드 → 관심 저장 핵심 플로우를 구현하라. ## 화면 및 Route - `src/app/preference/page.tsx` — 취향 입력 폼: 원하는 음식 카테고리 (한식/중식/일식/양식/기타) 멀티셀렉트, 분위기 태그 (간편/든든/가벼운/매운 등), 제출 버튼 - `src/app/recommend/page.tsx` — 추천 결과 페이지: 추천 카드 리스트
나머지 19줄은 실제 결과물에서 확인할 수 있습니다
5단계: 관리자 데이터 등록 & Firebase Hosting 배포
샘플에서는 일부만 표시관리자 전용 데이터 등록 화면과 Firebase Hosting + Cloud Functions(SSR) 배포 설정을 완성하라. ## 관리자 기능 1. `src/app/admin/page.tsx` — 음식(food) 및 음식점(restaurant) 데이터 등록 폼 - food 등록: name, category, tags (쉼표 구분 입력)
나머지 20줄은 실제 결과물에서 확인할 수 있습니다