운동과 식단을 10초 안에 기록하고, 목표 대비 변화를 그래프와 주간 리포트로 보여주는 앱
어떻게 만드나?
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) + 인증 기반으로 제한.
전체 골격 만들기 — 마스터 프롬프트 실행
아래 프롬프트를 통째로 복사해 에이전트에 붙여넣으면 프로젝트 뼈대가 만들어집니다.
[역할] 당신은 시니어 풀스택 엔지니어로, 건강관리(운동·식단) 기록 앱의 검증용 웹 MVP를 빌드하는 AI 코딩 에이전트를 안내합니다. 아래 제품 개요와 요구사항, 하드 컨스트레인트, 그리고 구현 단계를 명확하게 따릅니다. 생성하는 모든 코드, 컴포넌트, 설정, 설명은 Next.js App Router·Firebase Auth·Cloud Firestore·Firebase Hosting 기준으로 제한하며, MVP를 빠르고 안전하게 출시하는 데 집중하세요. [제품 요약] 2040 직장인을 위한 건강관리 웹앱(MVP). 목표: 간편한 식단·운동 기록, 목표 설정, 변화 추이 그래프 및 리포트. 난잡하거나 과도한 입력 없이 빠른 기록과 명확한 변화 시각화, 진행 상태를 한눈에 볼 수 있도록 구성. [필수 스택] …
모듈 구현 — 프로젝트 셋업 (Next.js + Firebase)
앞 단계 결과 위에서 이 프롬프트를 실행해 기능을 채웁니다.
Next.js (App Router)로 프로젝트를 생성하고, Firebase JS SDK 및 firebase-admin을 설치합니다. 환경변수(.env.local)로 API 키 등 시크릿을 분리해 구성하고, 코드에는 하드코딩하지 마세요. Firestore와 Auth를 초기화하는 유틸을 만드세요. Firebase Hosting은 build output을 쓰도록 설정만 하고, 코드는 배포와 분리하세요.
모듈 구현 — Firebase Auth 인증 · 로그인/회원가입 구현
앞 단계 결과 위에서 이 프롬프트를 실행해 기능을 채웁니다.
Firebase Auth(Email/Password 기반)로 회원가입, 로그인, 로그아웃 기능을 Next.js 클라이언트 컴포넌트에서 구현하세요. 이 때 인증 상태를 Context로 관리하고, 인증된 사용자만 기록/목표 페이지 접근이 가능해야 합니다. 클라이언트에는 서버전용 서비스를 노출하지 않습니다.
모듈 구현 — Firestore 데이터모델 셋업 (보안 규칙 포함)
앞 단계 결과 위에서 이 프롬프트를 실행해 기능을 채웁니다.
users, goals, records 3개 컬렉션으로 Cloud Firestore를 설계하고, users(id/email/created_at), goals(user_id/target_weight/start_date/updated_at), records(user_id/date/exercise_type/exercise_duration_minutes/meal_type/meal_description/created_at) 구조로 만드세요. Firestore 보안 규칙은 user 본인만 자신의 데이터(읽기/쓰기) 가능하도록 작성하세요. 테스트용 dummy 데이터 한두 건 예시도 코드 주석으로 만들어 보여주세요.
모듈 구현 — 핵심 기능 구현: 기록 입력, 목표 설정, 대시보드·리포트
앞 단계 결과 위에서 이 프롬프트를 실행해 기능을 채웁니다.
'간편 기록 입력'(운동/식단), '목표 설정/수정', '내 진행상태 대시보드', '주간 리포트' 기능을 각각 Next.js 서버액션/클라이언트 컴포넌트로 만드세요. 모든 기록/목표 저장은 서버액션에서 인증 체크 후 처리합니다. 대시보드엔 현재 체중, 목표까지 남은 거리(%) 변화 추이 그래프, 최근 기록 히스토리를 포함하세요. 리포트는 지난주/이번주 변화와 간단 요약만. 코드는 최소 단위(핵심/기본 동작)로 작성하고, 과설계·AI/결제/커뮤니티/채팅은 생략하세요.
모듈 구현 — 관리자 및 배포 환경
앞 단계 결과 위에서 이 프롬프트를 실행해 기능을 채웁니다.
Firebase Hosting 배포용으로 Next.js 프로젝트 빌드와 호스팅 연동 가이드를 단계별로 요약해서 작성하세요. 관리자 기능은 MVP에서 구현하지 않고, 코드에도 포함하지 않습니다(예: 사용자 관리, 통계 등). 환경변수 관리는 .env.local만 사용하고, 서비스 키 등 시크릿이 브라우저에 노출되지 않도록 유의점을 주석으로 정리하세요.
배포하기
# 배포 — 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 관리.
검증 — 핵심 시나리오 테스트
아래 체크리스트로 핵심 기능이 동작하는지 확인하세요.
### [수용 테스트 체크리스트] ##### 회원가입/로그인 - [ ] 올바른 이메일/비밀번호로 회원가입 및 로그인 가능 - [ ] Firebase Auth 인증 상태가 없으면 서버액션/데이터 접근 불가 (리다이렉트 또는 에러) ##### 목표 설정 및 변경 - [ ] 목표 체중을 정상 입력/수정/조회 가능 - [ ] 목표 미설정 상태에서 알림/입력 유도 UI 정상 ##### 기록 입력/수정/삭제 - [ ] 운동/식단 기록을 빠르게 입력, 수정, 삭제 가능 (최소 입력만으로 성공해야 함) - [ ] 오늘/최근 일자별 기록이 올바로 저장, 불러오기, 수정, 삭제됨 - [ ] 서버 보안 규칙으로 본인 기록만 읽기/쓰기 가능 ##### 데이터 시각화/리포트 - [ ] 기록 데이터가 변화 추이/그래프/주간 리포트 화면에 정확히 표시됨 - [ ] 목표와 현상태 비교, 진행 정도 표시 정상동작 ##### 환경/배포 - [ ] 환경변수 미설정 시 빌드/실행 오류 없이 즉시 안내됨 - [ ] 배포 환경에서 Firestore 권한/인증 문제 없는지 점검 ##### 오동작/경계조건 - [ ] 인증 만료/없는 상태에서 기록 요청시 401 반환 및 UI 반영 - [ ] 기록 입력값 부족/오타/비정상 값 입력시 적절한 에러 및 안내 표시
막혔을 때 — 트러블슈팅
에이전트가 에러로 막히면 아래 대응을 참고하세요.
### [Troubleshooting FAQ] #### 1. 증상: 빌드/실행 시 "FIREBASE_API_KEY is not defined" 또는 환경변수 미설정 에러 - 원인: .env.local 등 환경변수 파일 누락/오타, Vercel 등 배포시 환경변수 설정 미반영 - 해결: .env.local(개발)과 Vercel 환경변수(배포) 모두 포함, 키값 불일치/오타 체크 #### 2. 증상: "Firestore: Missing or insufficient permissions" 에러 - 원인: 보안 규칙 미설정 혹은 과도개방(wildcard) 상태 - 해결: Firestore 콘솔 → Security rules 에서 본인(user.uid 일치)만 읽기/쓰기가능하게 설정. 배포 후 rules upload #### 3. 증상: 로그인이 풀리거나, 인증 없는 상태에서 서버에서 401 반환/페이지 리다이렉트가 반복 - 원인: Next.js 서버액션 내에서 Firebase Auth 세션 전달 누락, 클라/서버 인증상태 불일치 - 해결: 공통 미들웨어 또는 서버액션 내 인증 체크 함수 사용, getServerSession 등으로 항상 auth 동기화 #### 4. 증상: CORS 에러, fetch/api 요청이 차단 - 원인: 프론트-백 분리 서버라면(즉, Next 내 API/서버액션이 아닌 별도 서버) CORS 미설정 - 해결: Next API Route에서는 내부호출만 허용, 배포 환경에서 CORS(도메인) 허용/제한 확실히 설정 #### 5. 증상: Firestore 데이터가 너무 느리거나, list/검색 에서 타유저 데이터가 일부 노출 - 원인: 쿼리 파라미터 미필터, 인덱스 미설정, 보안규칙 미적용 - 해결: 쿼리 작성시 항상 user_id or user.uid로 필터, 보안 규칙 및 인덱스 상태 확인
막히거나 시간이 없다면? 전문가가 이 빌드킷 그대로 제작해드립니다.
전문가에게 맡기기 →직장인들이 건강 관리(운동/식단/체중)를 간단하게 기록하고, 목표에 대한 진행 상황을 쉽게 확인할 수 있게 하는 웹앱입니다. 복잡한 입력 없이 매일 기록을 남기고, 자신의 변화 추이와 목표 달성 현황을 그래프 및 리포트로 한눈에 볼 수 있습니다. 회원가입, 목표 설정, 기록 저장, 대시보드, 주간 리포트 등으로 최소 핵심을 구성한 MVP입니다.
회원 가입 및 로그인 (Firebase Auth)
신규 사용자는 이메일/비밀번호로 가입하고, 로그인하여 자신의 데이터를 안전하게 관리한다.
목표 체중 설정 및 수정
사용자는 본인의 목표 체중을 설정하고 필요시 수정한다.
운동/식단 기록 입력 (간편)
매일 자신의 식단과 운동 기록을 쉽고 빠르게 추가할 수 있다.
변화 추이 대시보드
로그인 후 내 목표와 현재 상태, 최근 기록, 변화 차트(체중/빈도 등)를 한눈에 볼 수 있다.
주간 리포트 화면
지난 1주일간 내 기록 종합/요약(운동일수, 총 운동시간, 체중 변화 등)을 확인한다.
backend/firestore.rules
샘플에서는 일부만 표시rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
// User documents, only owner can read/write
match /users/{userId} {
allow read, write: if request.auth != null && request.auth.uid == userId;
}
// Goals, only the owner (userId) can read/write나머지 12줄은 실제 결과물에서 확인할 수 있습니다
backend/firestore.indexes.json
샘플에서는 일부만 표시{
"indexes": [
{
"collectionGroup": "records",
"queryScope": "COLLECTION",
"fields": [
{ "fieldPath": "user_id", "order": "ASCENDING" },
{ "fieldPath": "date", "order": "DESCENDING" }나머지 14줄은 실제 결과물에서 확인할 수 있습니다
backend/seed.ts
샘플에서는 일부만 표시// Seed script for Firestore - run in Node.js with ADMIN credentials
import { initializeApp, applicationDefault, cert } from "firebase-admin/app";
import { getFirestore } from "firebase-admin/firestore";
import serviceAccount from "./serviceAccountKey.json";
initializeApp({
credential: cert(serviceAccount as any),
});나머지 67줄은 실제 결과물에서 확인할 수 있습니다
frontend/tailwind.config.js
샘플에서는 일부만 표시module.exports = {
content: [
"./app/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {
colors: {나머지 9줄은 실제 결과물에서 확인할 수 있습니다
frontend/app/layout.tsx
샘플에서는 일부만 표시import './globals.css';
import type { ReactNode } from 'react';
export default function RootLayout({ children }: { children: ReactNode }) {
return (
<html lang="en">
<body className="bg-secondary text-gray-900 min-h-screen">
<header className="bg-primary text-white p-4 mb-4">나머지 8줄은 실제 결과물에서 확인할 수 있습니다
frontend/components/Button.tsx
샘플에서는 일부만 표시import { ButtonHTMLAttributes } from 'react';
export default function Button({
children,
className = '',
...props
}: ButtonHTMLAttributes<HTMLButtonElement>) {
return (나머지 9줄은 실제 결과물에서 확인할 수 있습니다
frontend/components/Card.tsx
샘플에서는 일부만 표시import { ReactNode } from 'react';
export default function Card({ children, className = '' }: { children: ReactNode; className?: string }) {
return (
<div className={`bg-white shadow rounded p-4 mb-4 ${className}`}>{children}</div>
);
}
frontend/app/dashboard/page.tsx
샘플에서는 일부만 표시import Card from '../../components/Card';
import Button from '../../components/Button';
export default function DashboardPage() {
return (
<div>
<Card>
<h2 className="text-xl font-semibold">목표 현황</h2>나머지 16줄은 실제 결과물에서 확인할 수 있습니다
M0. 프로젝트/인프라 초기화
세부 태스크 3개
M1. 데이터 모델·시드·인증 스캐폴드
세부 태스크 3개
M2. 기본 화면
세부 태스크 3개
M3. 기록·목표 입력/리포트·그래프 스텁 추가
세부 태스크 2개
[역할] 당신은 시니어 풀스택 엔지니어로, 건강관리(운동·식단) 기록 앱의 검증용 웹 MVP를 빌드하는 AI 코딩 에이전트를 안내합니다. 아래 제품 개요와 요구사항, 하드 컨스트레인트, 그리고 구현 단계를 명확하게 따릅니다. 생성하는 모든 코드, 컴포넌트, 설정, 설명은 Next.js App Router·Firebase Auth·Cloud Firestore·Firebase Hosting 기준으로 제한하며, MVP를 빠르고 안전하게 출시하는 데 집중하세요. [제품 요약] 2040 직장인을 위한 건강관리 웹앱(MVP). 목표: 간편한 식단·운동 기록, 목표 설정, 변화 추이 그래프 및 리포트. 난잡하거나 과도한 입력 없이 빠른 기록과 명확한 변화 시각화, 진행 상태를 한눈에 볼 수 있도록 구성. [필수 스택] - Next.js (App Router) - Firebase Auth
나머지 36줄은 실제 결과물에서 확인할 수 있습니다
프로젝트 셋업 (Next.js + Firebase)
샘플에서는 일부만 표시Next.js (App Router)로 프로젝트를 생성하고, Firebase JS SDK 및 firebase-admin을 설치합니다. 환경변수(.env.local)로 API 키 등 시크릿을 분리해 구성하고, 코드에는 하드코딩하지 마세요. Firestore와 Auth를 초기화하는 유틸을 만드세요. Firebase Hosting은 build output을 쓰도록 설정만 하고, 코드는 배포와 분리하세요.
Firebase Auth 인증 · 로그인/회원가입 구현
샘플에서는 일부만 표시Firebase Auth(Email/Password 기반)로 회원가입, 로그인, 로그아웃 기능을 Next.js 클라이언트 컴포넌트에서 구현하세요. 이 때 인증 상태를 Context로 관리하고, 인증된 사용자만 기록/목표 페이지 접근이 가능해야 합니다. 클라이언트에는 서버전용 서비스를 노출하지 않습니다.
Firestore 데이터모델 셋업 (보안 규칙 포함)
샘플에서는 일부만 표시users, goals, records 3개 컬렉션으로 Cloud Firestore를 설계하고, users(id/email/created_at), goals(user_id/target_weight/start_date/updated_at), records(user_id/date/exercise_type/exercise_duration_minutes/meal_type/meal_description/created_at) 구조로 만드세요. Firestore 보안 규칙은 user 본인만 자신의 데이터(읽기/쓰기) 가능하도록 작성하세요. 테스트용 dummy 데이터 한두 건 예시도 코드 주석으로 만들어 보여주세요.
핵심 기능 구현: 기록 입력, 목표 설정, 대시보드·리포트
샘플에서는 일부만 표시'간편 기록 입력'(운동/식단), '목표 설정/수정', '내 진행상태 대시보드', '주간 리포트' 기능을 각각 Next.js 서버액션/클라이언트 컴포넌트로 만드세요. 모든 기록/목표 저장은 서버액션에서 인증 체크 후 처리합니다. 대시보드엔 현재 체중, 목표까지 남은 거리(%) 변화 추이 그래프, 최근 기록 히스토리를 포함하세요. 리포트는 지난주/이번주 변화와 간단 요약만. 코드는 최소 단위(핵심/기본 동작)로 작성하고, 과설계·AI/결제/커뮤니티/채팅은 생략하세요.
관리자 및 배포 환경
샘플에서는 일부만 표시Firebase Hosting 배포용으로 Next.js 프로젝트 빌드와 호스팅 연동 가이드를 단계별로 요약해서 작성하세요. 관리자 기능은 MVP에서 구현하지 않고, 코드에도 포함하지 않습니다(예: 사용자 관리, 통계 등). 환경변수 관리는 .env.local만 사용하고, 서비스 키 등 시크릿이 브라우저에 노출되지 않도록 유의점을 주석으로 정리하세요.