명함을 찍으면 이름·회사·직함·연락처가 자동으로 뽑히고, 미팅 메모를 넣어 두면 다시 연락할 때 그 사람 요약과 첫 문장을 만들어 주는 앱
‘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) + 인증 기반으로 제한.
전체 골격 만들기 — 마스터 프롬프트 실행
아래 프롬프트를 통째로 복사해 에이전트에 붙여넣으면 프로젝트 뼈대가 만들어집니다.
[역할/목적] 당신은 Next.js (App Router), Firebase Auth, Cloud Firestore, Firebase Hosting으로 빠르게 **명함·미팅 기록 웹 앱(MVP)**을 만드는 AI 코딩 에이전트입니다. 개발 경험이 적은 사용자가 바로 복사/붙여넣기 할 수 있게, 모든 단계별 작업을 명확하게 안내합니다. [제품 요약] - 행사나 미팅에서 받은 명함을 사진으로 업로드하면, 이름/회사/직함/연락처 등을 추출하여 저장하고, 미팅 메모를 남기고 검색·관리할 수 있는 웹 애플리케이션입니다. - 주요 사용자는 영업 담당자, 창업자 등 네트워킹이 잦은 사람입니다. …
모듈 구현 — 프로젝트 셋업
앞 단계 결과 위에서 이 프롬프트를 실행해 기능을 채웁니다.
Next.js (App Router) 프로젝트를 생성하고, Firebase SDK를 셋업하여 Firebase Auth와 Cloud Firestore를 연동합니다. 프로젝트 구조를 src/feature 모듈 방식으로 구성하고, .env.local 파일을 통해 Firebase 환경변수를 관리하되, 시크릿을 코드에 하드코딩하지 않도록 합니다. gitignore에 .env.local를 추가합니다.
모듈 구현 — 인증(Firebase Auth)
앞 단계 결과 위에서 이 프롬프트를 실행해 기능을 채웁니다.
Firebase Auth 이메일/비밀번호 방식만을 사용해, 회원가입(Sign Up), 로그인(Log In), 로그아웃(Log Out) 기능을 App Router 기반으로 구현합니다. 인증 상태에 따라 화면 접근을 제어하고, 클라이언트에서 토큰 등을 노출하지 않으며, Firestore 접근은 인증된 사용자로 한정할 수 있도록 보안 규칙을 반영합니다. 소셜 연동 없이 기본 인증만 구현합니다.
모듈 구현 — DB 스키마 및 Firestore 연동
앞 단계 결과 위에서 이 프롬프트를 실행해 기능을 채웁니다.
Cloud Firestore에 users, contacts, meeting_notes 컬렉션을 아래 스키마에 맞춰 설계합니다. Firestore 보안 규칙을 통해 인증된 사용자만 각자의 데이터에 읽기/쓰기가 가능하도록 제한합니다. contacts 문서마다 user_id 필드로 소유자를 관리합니다. Firestore의 CRUD 함수(읽기, 추가, 수정, 삭제)를 React hooks 형태의 유틸로 구현합니다. 스키마: - users(id/email/password_hash/created_at) …
모듈 구현 — 핵심 기능 구현
앞 단계 결과 위에서 이 프롬프트를 실행해 기능을 채웁니다.
다음 핵심 화면과 기능을 구현합니다. 1. 명함 업로드: 이미지를 업로드하고, OCR(OpenAI or Google Vision API)을 통해 정보(name/company/title/email/phone)를 추출하여 contacts에 저장합니다. 2. 미팅 메모 입력: 연락처(명함) 상세 화면에서 meeting_notes 컬렉션에 메모 추가. 3. 명함 리스트/검색: 본인의 contacts 컬렉션을 리스트로 보여주고, 텍스트로 검색할 수 있게 구현합니다. …
모듈 구현 — 관리자·배포 및 보안 점검
앞 단계 결과 위에서 이 프롬프트를 실행해 기능을 채웁니다.
Firebase Hosting으로 Next.js 앱을 배포합니다. Firestore Rules, Auth 설정, .env 파일, 소스코드에 시크릿 노출 여부를 점검합니다. 관리자 기능이나 관리자는 MVP에 포함하지 않으므로 반드시 생략합니다. 배포 후 인증, 데이터 접근, 이미지 업로드 플로우에 취약점이 없는지 체크리스트를 만듭니다.
배포하기
# 배포 — 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 체크리스트 #### 1. 로그인/인증 - [ ] Firebase Auth에 신규 가입(이메일/비밀번호) 및 정상 로그인 가능 - [ ] 로그아웃 시 모든 protected api 접근 불가 #### 2. 명함 등록/검색/조회 - [ ] 명함의 사진을 업로드하면 imageUrl이 정상 저장됨 - [ ] 명함 정보(name, company 등)를 입력/수정/삭제할 수 있다 - [ ] 본인이 등록한 명함만 목록/조회 가능 (타인 데이터 접근/조작 불가) - [ ] 입력한 명함을 이름, 회사명 등으로 검색 가능 #### 3. 미팅 메모 - [ ] 명함에 연결된 메모 추가/조회가 가능하다 - [ ] 타 명함에는 메모가 보이지 않는다(연결 확인) #### 4. 보안/인증 - [ ] Bearer 토큰 없이 API 접근 시 401 오류 - [ ] 잘못된 유저 id로 접근 시 403 오류 - [ ] env 파일 없이 빌드/실행 시 실패(키 노출 여부 확인) #### 5. 배포/환경 - [ ] Firebase Hosting 배포 시 env 미설정 확인 등으로 오류 안내 - [ ] 서버 액션/API 라우트가 클라이언트 코드에 비밀값 노출 없이 동작
막혔을 때 — 트러블슈팅
에이전트가 에러로 막히면 아래 대응을 참고하세요.
### 빌드/배포시 자주 막히는 문제 & 해결법
1. **증상:** API에서 "PermissionDenied" 에러, 데이터 접근 불가
- **원인:** Firestore 보안 규칙 미설정, 인증 없는 유저의 데이터 조회 시도
- **해결:** Firebase 콘솔 > Firestore > 규칙에서 userId 기반 owner check 규칙 작성, 모든 API에서 auth 검증 추가
2. **증상:** "service account key leaked" 또는 .env 누락/bad config로 작동 안함
- **원인:** 서비스키를 코드에 하드코딩하거나 .env 파일 미설정, 잘못된 값 세팅
- **해결:** 절대 하드코딩 금지! .env.local에 admin SDK 키를 저장하고, 환경별(project 별)로 맞는 키 사용
3. **증상:** Firebase Auth 토큰 받아서 API 호출했으나 항상 401 Unauthorized
- **원인:** 서버액션에서 토큰 파싱/검증 누락 or client에서 토큰 전달 안 됨
- **해결:** api route/server action 에서 항상 idToken(JSON Web Token) 파싱해 "firebase-admin" SDK로 직접 검증
- 클라에서는 getIdToken()으로 받아 Authorization: Bearer {token} 헤더로 전달
4. **증상:** Next.js(13+) App Router에서 서버 컴포넌트가 클라이언트 환경 변수를 참조해 런타임 에러 or 빌드 실패
- **원인:** "NEXT_PUBLIC_" prefix 없이 env 접근 혹은 서버-클라 경계 혼동
- **해결:** 클라이언트 전용 환경변수 = NEXT_PUBLIC_ 접두사, 서비스/시크릿 키는 서버에서만 import (server action/api route에만 사용)
5. **증상:** Firebase Hosting/Vercel 배포 후 이미지 업로드 및 fetch 실패(CORS)
- **원인:** 트리거 서비스와 호출 도메인 mismatch, CORS 세팅 누락
- **해결:** Cloud Function/upload API에서 CORS header (Access-Control-Allow-Origin) 명확히 세팅, 또는 same origin 정책 유지
막히거나 시간이 없다면? 전문가가 이 빌드킷 그대로 제작해드립니다.
전문가에게 맡기기 →이 앱은 행사나 미팅에서 받은 명함과 그에 대한 간단한 메모를 쉽게 저장하고, 나중에 빠르게 검색할 수 있게 도와주는 웹 서비스입니다. 사용자는 명함을 찍어서 정보를 추출받고, 미팅 기억을 메모로 남겨 재연락에 활용할 수 있습니다. 스마트폰, 컴퓨터 브라우저에서 자유롭게 이용할 수 있으며, 개인정보는 사용자의 것만 안전하게 저장됩니다.
명함 사진 업로드 및 정보 자동 추출
사용자는 받은 명함의 사진을 올릴 때, 이름/회사/직함/이메일/번호 등이 인식되어 자동 입력되어야 한다.
명함 추가/수정/삭제
사용자는 정보를 직접 입력하거나 이미 등록된 명함 정보를 쉽게 변경 또는 삭제할 수 있어야 한다.
미팅 메모 작성 및 관리
사용자는 명함별로 만난 날짜와 대화 내용을 메모 형태로 남기고 다시 볼 수 있어야 한다.
명함 및 메모 검색
사용자는 저장한 명함 정보, 메모 내용을 이름, 회사, 키워드 등으로 빠르게 찾을 수 있어야 한다.
로그인 및 사용자 데이터 보호
각 사용자는 본인 데이터만 안전하게 관리하고, 로그아웃 시 정보 접근이 불가해야 한다.
backend/firestore.rules
샘플에서는 일부만 표시// Firebase Firestore Security Rules
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /users/{userId} {
allow read, write: if request.auth != null && request.auth.uid == userId;
}
나머지 14줄은 실제 결과물에서 확인할 수 있습니다
backend/firestore.indexes.json
샘플에서는 일부만 표시{
"indexes": [
{
"collectionGroup": "contacts",
"queryScope": "COLLECTION",
"fields": [
{ "fieldPath": "user_id", "order": "ASCENDING" },
{ "fieldPath": "name", "order": "ASCENDING" }나머지 14줄은 실제 결과물에서 확인할 수 있습니다
backend/seed.ts
샘플에서는 일부만 표시// Run with: npx ts-node seed.ts (Node.js env with GOOGLE_APPLICATION_CREDENTIALS)
import { initializeApp, applicationDefault } from 'firebase-admin/app';
import { getFirestore, Timestamp } from 'firebase-admin/firestore';
initializeApp({ credential: applicationDefault() });
const db = getFirestore();
async function seed() {나머지 48줄은 실제 결과물에서 확인할 수 있습니다
frontend/tailwind.config.js
샘플에서는 일부만 표시module.exports = {
content: [
'./app/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}'
],
theme: {
extend: {
colors: {나머지 7줄은 실제 결과물에서 확인할 수 있습니다
frontend/app/layout.tsx
샘플에서는 일부만 표시"use client";
import './globals.css';
import React from 'react';
export default function RootLayout({children}: {children: React.ReactNode}) {
return (
<html lang="ko">
<body className="bg-accent min-h-screen font-sans text-gray-900">나머지 6줄은 실제 결과물에서 확인할 수 있습니다
frontend/components/Button.tsx
샘플에서는 일부만 표시import React from 'react';
type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
children: React.ReactNode;
};
export function Button({children, className = '', ...props}: ButtonProps) {
return (
<button
className={`bg-primary hover:bg-blue-800 text-white font-semibold rounded px-4 py-2 ${className}`}나머지 4줄은 실제 결과물에서 확인할 수 있습니다
frontend/components/Input.tsx
샘플에서는 일부만 표시import React from 'react';
type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
export function Input(props: InputProps) {
return <input className="border rounded px-3 py-2 w-full" {...props} />;
}frontend/app/contacts/page.tsx
샘플에서는 일부만 표시"use client";
import React, { useEffect, useState } from 'react';
import { Button } from '../../components/Button';
// 실제 Firestore 연동 필요: firestore SDK 연동 및 인증 연동 (TODO)
type Contact = {
id: string;
name: string;나머지 31줄은 실제 결과물에서 확인할 수 있습니다
M0. 프로젝트 시작 & 기본 설정
세부 태스크 3개
M1. DB/보안 및 데모 데이터
세부 태스크 3개
M2. 프론트엔드 골격
세부 태스크 3개
M3. 인증 및 CRUD 연결
세부 태스크 3개
M4. 최소화된 배포 & 테스트
세부 태스크 2개
[역할/목적] 당신은 Next.js (App Router), Firebase Auth, Cloud Firestore, Firebase Hosting으로 빠르게 **명함·미팅 기록 웹 앱(MVP)**을 만드는 AI 코딩 에이전트입니다. 개발 경험이 적은 사용자가 바로 복사/붙여넣기 할 수 있게, 모든 단계별 작업을 명확하게 안내합니다. [제품 요약] - 행사나 미팅에서 받은 명함을 사진으로 업로드하면, 이름/회사/직함/연락처 등을 추출하여 저장하고, 미팅 메모를 남기고 검색·관리할 수 있는 웹 애플리케이션입니다. - 주요 사용자는 영업 담당자, 창업자 등 네트워킹이 잦은 사람입니다. [필수 기술 스택]
나머지 37줄은 실제 결과물에서 확인할 수 있습니다
프로젝트 셋업
샘플에서는 일부만 표시Next.js (App Router) 프로젝트를 생성하고, Firebase SDK를 셋업하여 Firebase Auth와 Cloud Firestore를 연동합니다. 프로젝트 구조를 src/feature 모듈 방식으로 구성하고, .env.local 파일을 통해 Firebase 환경변수를 관리하되, 시크릿을 코드에 하드코딩하지 않도록 합니다. gitignore에 .env.local를 추가합니다.
인증(Firebase Auth)
샘플에서는 일부만 표시Firebase Auth 이메일/비밀번호 방식만을 사용해, 회원가입(Sign Up), 로그인(Log In), 로그아웃(Log Out) 기능을 App Router 기반으로 구현합니다. 인증 상태에 따라 화면 접근을 제어하고, 클라이언트에서 토큰 등을 노출하지 않으며, Firestore 접근은 인증된 사용자로 한정할 수 있도록 보안 규칙을 반영합니다. 소셜 연동 없이 기본 인증만 구현합니다.
DB 스키마 및 Firestore 연동
샘플에서는 일부만 표시Cloud Firestore에 users, contacts, meeting_notes 컬렉션을 아래 스키마에 맞춰 설계합니다. Firestore 보안 규칙을 통해 인증된 사용자만 각자의 데이터에 읽기/쓰기가 가능하도록 제한합니다. contacts 문서마다 user_id 필드로 소유자를 관리합니다. Firestore의 CRUD 함수(읽기, 추가, 수정, 삭제)를 React hooks 형태의 유틸로 구현합니다. 스키마: - users(id/email/password_hash/created_at) - contacts(id/user_id/name/company/title/phone/email/created_at)
나머지 1줄은 실제 결과물에서 확인할 수 있습니다
핵심 기능 구현
샘플에서는 일부만 표시다음 핵심 화면과 기능을 구현합니다. 1. 명함 업로드: 이미지를 업로드하고, OCR(OpenAI or Google Vision API)을 통해 정보(name/company/title/email/phone)를 추출하여 contacts에 저장합니다. 2. 미팅 메모 입력: 연락처(명함) 상세 화면에서 meeting_notes 컬렉션에 메모 추가. 3. 명함 리스트/검색: 본인의 contacts 컬렉션을 리스트로 보여주고, 텍스트로 검색할 수 있게 구현합니다. 4. 연락처 요약: contacts 상세에서 요약 정보(추출된 주요 정보, 최근 메모)를 보여줍니다.
나머지 2줄은 실제 결과물에서 확인할 수 있습니다
관리자·배포 및 보안 점검
샘플에서는 일부만 표시Firebase Hosting으로 Next.js 앱을 배포합니다. Firestore Rules, Auth 설정, .env 파일, 소스코드에 시크릿 노출 여부를 점검합니다. 관리자 기능이나 관리자는 MVP에 포함하지 않으므로 반드시 생략합니다. 배포 후 인증, 데이터 접근, 이미지 업로드 플로우에 취약점이 없는지 체크리스트를 만듭니다.