손님이 QR로 대기를 걸고, 자리가 나면 알림을 받아 돌아오는 매장 대기 관리 앱
‘MVP 기획’·‘AI 빌드 기획 패키지’·‘프로토타입 프롬프트’는 빌드 패키지 하나에 함께 들어갑니다 — 따로 결제하지 않습니다.
어떻게 만드나?
AI 빌드 기획 패키지 · 베타 무료
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) + 인증 기반으로 제한.
전체 골격 만들기 — 마스터 프롬프트 실행
아래 프롬프트를 통째로 복사해 에이전트에 붙여넣으면 프로젝트 뼈대가 만들어집니다.
# 역할 넌 비개발자가 복사해 붙여넣어도 자동으로 대기/호출 앱 MVP(웹) 최초버전을 만드는 AI 코드 에이전트야. 너는 명확한 지시와 코드를 작성하고, 개발·인프라 지식을 요구하는 부분을 자동으로 구성해. 복잡한 추가기능 없이, 심플하고 검증 가능한 MVP 스펙을 구현할 때까지 단계별로 진행한다. # 제품 요약 - 10~30석 소규모 매장(식당/카페) 사장이 손님 대기 관리를 종이와 음성 호출 없이 QR/웹으로 처리 - 손님은 매장 앞 QR코드 스캔 및 간단 입력으로 대기 등록 / 내 대기 현황 실시간 확인 / 알림(웹 or push) …
모듈 구현 — 프로젝트 셋업 (Next.js + Firebase)
앞 단계 결과 위에서 이 프롬프트를 실행해 기능을 채웁니다.
다음 조건을 모두 반영하여 기본 Next.js (App Router) 프로젝트를 셋업합니다. - TypeScript 활성화 - Firebase SDK(v9 이상, modular) 설치 (firebase, firebase/auth, firebase/firestore) - 환경변수 사용 (Firebase 프로젝트용 환경변수는 .env.local에) …
모듈 구현 — Firebase Auth 인증 모듈 구현
앞 단계 결과 위에서 이 프롬프트를 실행해 기능을 채웁니다.
Firebase Auth 로 이메일/비밀번호 회원가입, 로그인, 로그아웃(세션 유지 포함) 기능을 구현합니다. - 로그인/회원가입 페이지 생성 및 Form 작성 - 입력값 유효성(이메일, 비밀번호) 체크 - 로그인/회원가입/로그아웃 성공시 라우팅 처리 …
모듈 구현 — Cloud Firestore DB 스키마 정의 및 접근 레이어
앞 단계 결과 위에서 이 프롬프트를 실행해 기능을 채웁니다.
Cloud Firestore에 다음 형식으로 컬렉션/도큐먼트/필드 구조를 정의합니다. - users(id, role(손님|사장), name, contact) - stores(id, name, location, owner_user_id) - waiting_lists(id, store_id, user_id, party_size, status(대기중|호출중|완료), position, created_at, notified_at) …
모듈 구현 — 핵심 기능: 대기 등록/현황 조회/알림 모듈
앞 단계 결과 위에서 이 프롬프트를 실행해 기능을 채웁니다.
아래 핵심 기능을 Next.js + Firestore로 간결하게 구현합니다. - 손님: QR/웹링크로 대기 등록(매장 선택, 인원, 이름, 연락처 기입), 대기 현황(남은팀, 대기 순번) 실시간 조회 - 사장: 매장별 대기자 리스트 실시간 관리 화면(호출/완료 처리 등), 대기순 변경·업데이트 - 손님: 자신의 대기상태 변화(호출/입장 등) 시 웹 알림 또는 리얼타임 팝업 표시 …
모듈 구현 — 관리자 기능·배포 및 운영 가이드 (선택)
앞 단계 결과 위에서 이 프롬프트를 실행해 기능을 채웁니다.
사장으로 가입된 user만 자신의 매장 설정(이름/위치 추가 및 수정), 매장별 대기자 내역/히스토리 접근 가능하게 합니다. - 사장==owner_user_id 일치 여부 검사 - 핵심 관리자 기능 예시와 route 보호 - 프로젝트/환경 변수 관리, Firebase Hosting 배포 전체 프로세스, 운영·roll back 체크리스트도 작성 …
배포하기
# 배포 — 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 관리.
검증 — 핵심 시나리오 테스트
아래 체크리스트로 핵심 기능이 동작하는지 확인하세요.
- [ ] 회원가입/로그인/로그아웃 절차 테스트(인증 정보 미입력/중복 등 예외 포함) - [ ] 손님 대기 등록(정상/비정상 입력값 테스트) - [ ] 손님 대기 현황 조회(정상/예외적 waitingId, storeId) - [ ] 사장용 대기자 리스트 조회/실시간 반영 - [ ] 사장이 손님 호출/알림(상태 변화, 알림 도달 테스트) - [ ] 사장이 대기 완료 처리(상태 변화, 리스트 반영) - [ ] 각 API 인증(토큰 O/X, role 위조) 테스트 - [ ] Firestore Security Rule 침투(권한 없는 조작 시도 차단 확인) - [ ] 브라우저에서 서비스 전반 흐름 E2E 시나리오 - [ ] 부적절/이상 데이터 입력 시 예외처리 및 에러 응답 테스트
막혔을 때 — 트러블슈팅
에이전트가 에러로 막히면 아래 대응을 참고하세요.
1. 빌드 실패 or Firebase 연결 오류 → 환경변수 미설정 등 - 증상: "Firebase: No Firebase App '[DEFAULT]' has been created" 등 에러, 빌드중 실패 - 원인: .env.local 등 Firebase config 누락, NEXT_PUBLIC_ 접두사 사용 미흡 - 해결: .env(.local)에 firebase apiKey, projectId 등 올바로 등록, client/server 구분 2. 인증 문제로 API 차단 → Permission denied, 인증풀림 - 증상: 로그인 후에도 요청 시 401/403, Firestore에서 Permission denied - 원인: 인증토큰 누락/만료, Firestore Security Rules 미적용, role 검사 루틴 미작성 - 해결: 요청 헤더에 currentUser.getIdToken() 포함, 클라이언트 관련 트리거 재검토, firestore.rules 확인 3. CORS 에러 발생 → 요청 실패 - 증상: 브라우저 콘솔에 CORS 오류, API 인식 안됨 - 원인: 서버(API Route/Firebase Functions)에서 CORS 허용 미설정 - 해결: API Route에 허용 Origin 추가, Firebase Functions CORS import및 라이브러리로 허용 4. Firestore 쓰기 실패(RLS) - 증상: 대기 등록/완료/호출 등 쓰기 요청시 Permission denied - 원인: 보안규칙이 인증/role에 맞지 않게 너무 느슨 또는 엄격 - 해결: rules에서 request.auth.uid 등 조건과, 서버측 role 체크 병행. 직접쓰기 차단 5. Firebase Hosting 배포시 접속불가(빈 화면) - 증상: 사이트 배포 후 접속 불/에러, public 디렉토리 문제 - 원인: next build → next export 미수행, firebase.json에 out과 public 경로 불일치 - 해결: 배포 전 "next build && next export"로 out 생성, firebase.json의 공개폴더 out지정, 파일유무 최종 체크
막히거나 시간이 없다면? 전문가가 이 빌드킷 그대로 제작해드립니다.
전문가에게 맡기기 →10~30석 소규모 식당·카페에서 대기 손님 관리를 쉽게 하는 QR 기반 웹 앱. 사장은 실시간으로 대기자 명단을 보고, 손님은 QR을 스캔해 대기 등록·진행 상황·호출 알림을 확인할 수 있습니다.
손님 대기 등록(매장 QR)
식당·카페를 방문한 손님은 매장 QR코드를 스캔하여 자신의 이름, 인원수를 입력, 대기를 등록할 수 있다.
대기자 리스트(사장용)
사장은 현재 대기 중인 손님 리스트를 웹 앱에서 실시간 확인할 수 있다.
대기 상태 확인(손님용)
손님은 등록 후 자신이 몇 번째인지, 예상 대기 시간을 확인할 수 있다.
순서 알림(호출/입장)
사장은 대기 손님을 '호출' 상태로 변경, 손님은 즉시 알림을 받고 입장할 수 있다.
매장 관리(사장 전용)
사장은 자신의 매장 등록, 정보 수정, 대기 리스트를 매장별로 관리할 수 있다.
권한 관리 및 인증
사장과 손님 역할에 따라 화면과 접근 권한이 구분된다. 모든 데이터 쓰기는 인증된 사용자만 가능하다.
backend/firestore.rules
샘플에서는 일부만 표시rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
// User profiles - only authenticated user can read/write own profile
match /users/{userId} {
allow read, write: if request.auth != null && request.auth.uid == userId;
}
나머지 18줄은 실제 결과물에서 확인할 수 있습니다
backend/firestore.indexes.json
샘플에서는 일부만 표시{
"indexes": [
{
"collectionGroup": "waiting_lists",
"queryScope": "COLLECTION",
"fields": [
{ "fieldPath": "store_id", "order": "ASCENDING" },
{ "fieldPath": "position", "order": "ASCENDING" },나머지 15줄은 실제 결과물에서 확인할 수 있습니다
backend/seed.ts
샘플에서는 일부만 표시// Run with: npx ts-node seed.ts (after setting GOOGLE_APPLICATION_CREDENTIALS)
import { initializeApp, cert, ServiceAccount } from 'firebase-admin/app';
import { getFirestore } from 'firebase-admin/firestore';
initializeApp();
const db = getFirestore();
async function seed() {나머지 40줄은 실제 결과물에서 확인할 수 있습니다
frontend/tailwind.config.js
샘플에서는 일부만 표시module.exports = {
content: [
'./app/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}'
],
theme: {
extend: {},
},나머지 3줄은 실제 결과물에서 확인할 수 있습니다
frontend/app/layout.tsx
샘플에서는 일부만 표시import './globals.css';
import { ReactNode } from 'react';
export default function RootLayout({ children }: { children: ReactNode }) {
return (
<html lang="ko">
<body className="bg-gray-50 min-h-screen">
<header className="w-full px-4 py-2 bg-white shadow">나머지 8줄은 실제 결과물에서 확인할 수 있습니다
frontend/components/Button.tsx
샘플에서는 일부만 표시import React from 'react';
type Props = React.ButtonHTMLAttributes<HTMLButtonElement> & { children: React.ReactNode };
export function Button({children, className = '', ...props}: Props) {
return (
<button
className={`bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded transition ${className}`}
{...props}
>나머지 5줄은 실제 결과물에서 확인할 수 있습니다
frontend/components/Card.tsx
샘플에서는 일부만 표시import React from 'react';
export function Card({ children, className = '' }: { children: React.ReactNode, className?: string }) {
return (
<div className={`bg-white shadow rounded p-4 mb-4 ${className}`}>{children}</div>
);
}frontend/app/wait/page.tsx
샘플에서는 일부만 표시// 대기 등록 화면 (QR 링크 직통)
'use client';
import { useState } from 'react';
import { Button } from '../../components/Button';
import { Card } from '../../components/Card';
export default function WaitPage() {
const [partySize, setPartySize] = useState(2);나머지 25줄은 실제 결과물에서 확인할 수 있습니다
M0. 프로젝트 구조 및 기본환경
세부 태스크 3개
M1. DB 구조 & 보안정책 설정
세부 태스크 2개
M2. UI 프리미티브 & 레이아웃
세부 태스크 3개
M3. 핵심 화면 스텁
세부 태스크 2개
# 역할 넌 비개발자가 복사해 붙여넣어도 자동으로 대기/호출 앱 MVP(웹) 최초버전을 만드는 AI 코드 에이전트야. 너는 명확한 지시와 코드를 작성하고, 개발·인프라 지식을 요구하는 부분을 자동으로 구성해. 복잡한 추가기능 없이, 심플하고 검증 가능한 MVP 스펙을 구현할 때까지 단계별로 진행한다. # 제품 요약 - 10~30석 소규모 매장(식당/카페) 사장이 손님 대기 관리를 종이와 음성 호출 없이 QR/웹으로 처리 - 손님은 매장 앞 QR코드 스캔 및 간단 입력으로 대기 등록 / 내 대기 현황 실시간 확인 / 알림(웹 or push) - 사장은 대기 리스트 실시간 확인, 손님 호출, 상태변경 진행
나머지 42줄은 실제 결과물에서 확인할 수 있습니다
프로젝트 셋업 (Next.js + Firebase)
샘플에서는 일부만 표시다음 조건을 모두 반영하여 기본 Next.js (App Router) 프로젝트를 셋업합니다. - TypeScript 활성화 - Firebase SDK(v9 이상, modular) 설치 (firebase, firebase/auth, firebase/firestore) - 환경변수 사용 (Firebase 프로젝트용 환경변수는 .env.local에) - Firebase 클라이언트 초기화 util 작성(firestore, auth 포함)
나머지 3줄은 실제 결과물에서 확인할 수 있습니다
Firebase Auth 인증 모듈 구현
샘플에서는 일부만 표시Firebase Auth 로 이메일/비밀번호 회원가입, 로그인, 로그아웃(세션 유지 포함) 기능을 구현합니다. - 로그인/회원가입 페이지 생성 및 Form 작성 - 입력값 유효성(이메일, 비밀번호) 체크 - 로그인/회원가입/로그아웃 성공시 라우팅 처리 - 인증 상태를 전역 context/provider로 관리
나머지 3줄은 실제 결과물에서 확인할 수 있습니다
Cloud Firestore DB 스키마 정의 및 접근 레이어
샘플에서는 일부만 표시Cloud Firestore에 다음 형식으로 컬렉션/도큐먼트/필드 구조를 정의합니다. - users(id, role(손님|사장), name, contact) - stores(id, name, location, owner_user_id) - waiting_lists(id, store_id, user_id, party_size, status(대기중|호출중|완료), position, created_at, notified_at) - 구조 설명, 각 컬렉션 샘플 도큐먼트/필드값 명시
나머지 2줄은 실제 결과물에서 확인할 수 있습니다
핵심 기능: 대기 등록/현황 조회/알림 모듈
샘플에서는 일부만 표시아래 핵심 기능을 Next.js + Firestore로 간결하게 구현합니다. - 손님: QR/웹링크로 대기 등록(매장 선택, 인원, 이름, 연락처 기입), 대기 현황(남은팀, 대기 순번) 실시간 조회 - 사장: 매장별 대기자 리스트 실시간 관리 화면(호출/완료 처리 등), 대기순 변경·업데이트 - 손님: 자신의 대기상태 변화(호출/입장 등) 시 웹 알림 또는 리얼타임 팝업 표시 - 인원 2명 이상 동시에 등록/호출 되는 엣지 케이스도 고려
나머지 2줄은 실제 결과물에서 확인할 수 있습니다
관리자 기능·배포 및 운영 가이드 (선택)
샘플에서는 일부만 표시사장으로 가입된 user만 자신의 매장 설정(이름/위치 추가 및 수정), 매장별 대기자 내역/히스토리 접근 가능하게 합니다. - 사장==owner_user_id 일치 여부 검사 - 핵심 관리자 기능 예시와 route 보호 - 프로젝트/환경 변수 관리, Firebase Hosting 배포 전체 프로세스, 운영·roll back 체크리스트도 작성 - 실시간 채팅/결제 등 불필요한 기능은 개발하지 않도록 명확히 표기