현장에서 체크리스트를 채우고 사진을 붙이면, 사무실에서 점검 보고서가 그대로 나오는 앱
‘MVP 기획’·‘AI 빌드 기획 패키지’·‘프로토타입 프롬프트’는 빌드 패키지 하나에 함께 들어갑니다 — 따로 결제하지 않습니다.
어떻게 만드나?
AI 빌드 기획 패키지 · 베타 무료
AI 코딩 에이전트가 바로 투입할 정밀 스펙 + 붙여넣기 프롬프트.
Next.js (App Router) · Supabase Auth · Supabase (PostgreSQL) · Vercel
샘플은 여기까지 공개합니다
파일 다운로드와 전문(全文) 복사는 실제 결과물에서만 제공됩니다. 내 아이디어를 입력하면 같은 형식의 결과물을 받아볼 수 있습니다.
AI 코딩 에이전트(Cursor · v0 · Claude Code 등)에 아래 순서대로 붙여넣으면 됩니다. 각 단계를 끝내면 체크하세요.
AI 코딩 에이전트 준비
Cursor · v0 · Claude Code · Bolt 중 편한 도구를 열고 새 프로젝트를 시작하세요. 스택은 Next.js (App Router) · Supabase (PostgreSQL) (Next.js · Supabase · Vercel) 기준입니다.
프로젝트 셋업 — 환경변수 · 인증
필요한 환경변수
NEXT_PUBLIC_SUPABASE_URL NEXT_PUBLIC_SUPABASE_ANON_KEY SUPABASE_SERVICE_ROLE_KEY
# 인증 설정 — Supabase Auth (Google OAuth) 1. Supabase 프로젝트 생성 → Project Settings > API 에서 URL / anon / service_role 키 확보 2. Authentication > Providers > Google 활성화 (Google Cloud Console 에서 OAuth Client ID/Secret 발급해 입력) 3. Authentication > URL Configuration: Site URL + Redirect URLs(`https://<도메인>/**`) 4. 패키지: `@supabase/ssr`, `@supabase/supabase-js` 5. 서버/클라이언트 Supabase client 분리. service_role 키는 서버 전용(브라우저 노출 금지). 6. App Router 미들웨어로 세션 갱신.
전체 골격 만들기 — 마스터 프롬프트 실행
아래 프롬프트를 통째로 복사해 에이전트에 붙여넣으면 프로젝트 뼈대가 만들어집니다.
역할: 당신은 현장 점검·보고서 앱의 MVP를 Next.js (App Router) · Supabase Auth · Supabase (PostgreSQL) · Vercel을 활용해 신속하게 구현하는 AI 코딩 에이전트다. 사용자(비개발자)가 그대로 실행 가능한 코드와 설정을 산출하며, 과설계 없이 핵심 기능에 집중한다. 제품 요약: 시설관리 업체 현장 담당자가 모바일·웹 브라우저에서 로그인 후 체크리스트 기반으로 현장 점검을 입력·사진을 첨부한다. 데이터는 지연 동기화(오프라인/온라인), 자동 보고서로 정리된다. 사용자는 로그인, 점검 리스트/작성, 보고서 보기를 가능하다. 필수 스택: - Next.js (App Router) — 프론트엔드 및 Routing …
모듈 구현 — 프로젝트 셋업 (Next.js + Supabase)
앞 단계 결과 위에서 이 프롬프트를 실행해 기능을 채웁니다.
Next.js(App Router)과 Supabase(PostgreSQL)를 사용하는 환경에서 신규 프로젝트를 셋업하세요. Vercel 배포와 Supabase 연동을 위해 기본 설정을 마치고, 환경변수(.env.local)에는 Supabase URL, Supabase anon 키만 사용합니다. 모든 secret 키나 서비스 키는 노출하지 마세요.
모듈 구현 — 인증 (Supabase Auth 연동)
앞 단계 결과 위에서 이 프롬프트를 실행해 기능을 채웁니다.
Supabase Auth를 이용해 사용자 회원가입, 로그인, 로그아웃 기능을 구현하세요. 권한별 role(예: 직원, 관리자) 필드가 Users 테이블에 있으므로 회원가입 시 이를 고려해 사용자를 생성하세요. 인증 상태에 따라 접근 가능한 페이지(로그인 화면/점검 리스트 등)를 Next.js App Router에서 라우팅 제어하세요. 로그인 없이 접근 가능한 경로는 최소화하세요.
모듈 구현 — DB 스키마 설계 및 연동
앞 단계 결과 위에서 이 프롬프트를 실행해 기능을 채웁니다.
Supabase PostgreSQL에서 아래 데이터 모델을 사용해 DB 스키마를 설계하세요. Users(user_id, name, email, password_hash, role), Checklists(checklist_id, title, description, created_at), ChecklistItems(item_id, checklist_id, description, order), Inspections(inspection_id, user_id, checklist_id, site_name, inspection_date, status, created_at, synced), InspectionItems(inspection_item_id, inspection_id, item_id, status, notes, photo_url). Next.js에서 Supabase client를 이용해 이 테이블들에 CRUD 할 수 있도록 연결하세요. 모든 쓰기(write) 작업은 서버 컴포넌트 또는 API route에서만 처리하고, 클라이언트에 secret 키가 노출되지 않도록 하세요.
모듈 구현 — 핵심 기능: 점검 작성/사진 첨부/오프라인/보고서
앞 단계 결과 위에서 이 프롬프트를 실행해 기능을 채웁니다.
사용자가 로그인 후 보게 될 점검 리스트 화면(Inspections)을 만들고, 점검 작성 화면에서는 체크리스트 항목별로 status/notes를 입력하고, 사진을 항목별로 첨부(업로드)할 수 있게 하세요. 사진 파일은 Supabase Storage에 저장하고, 해당 파일의 URL을 InspectionItems.photo_url에 저장하세요. 신호가 약한 곳을 대비하여 클라이언트에 임시 저장(IndexedDB/localStorage 등)하고, 네트워크 회복시 서버로 동기화할 기능(간단하게, 일괄 업로드/동기화 버튼 등)을 추가하세요. 보고서 확인 화면에서는 점검 내용/사진이 자동으로 정리된 문서 스타일로 보여주세요.
모듈 구현 — 관리자 기능 및 배포
앞 단계 결과 위에서 이 프롬프트를 실행해 기능을 채웁니다.
관리자(관리소장/role=admin)는 전체 점검 현황을 보고, 특정 점검 보고서를 다운로드(PDF 등)할 수 있습니다. 관리자 권한 확인 후만 접근 가능하게 하세요. 전체 기능을 Vercel에 배포하는 가이드 커맨드를 함께 작성하세요.
배포하기
# 배포 — Vercel
1. Vercel 에 GitHub 저장소 Import (Framework Preset = Next.js)
2. 환경변수(NEXT_PUBLIC_SUPABASE_URL / ANON_KEY / SUPABASE_SERVICE_ROLE_KEY) 등록
3. `vercel.json` 에 `{ "framework": "nextjs" }` 명시(권장)
4. main 푸시 시 자동 배포. 배포 후 Supabase Redirect URLs 에 운영 도메인 추가.검증 — 핵심 시나리오 테스트
아래 체크리스트로 핵심 기능이 동작하는지 확인하세요.
## 수용 테스트 시나리오 체크리스트 ### 인증/권한 - [ ] 올바른 이메일/비번 입력시 로그인 성공 및 토큰 발급됨 - [ ] 잘못된 정보 입력시 로그인 실패 및 에러 메시지 노출됨 - [ ] 인증 없는 사용자가 보호 API 접근시 401/403 반환됨 - [ ] 점검 작성/수정 액션은 본인 또는 소장 등 권한 보유자만 가능 ### 점검/보고서 - [ ] 로그인 후 점검 목록이 정상 조회됨(내/소관 점검만 노출) - [ ] 점검 신규 작성이 가능하고 저장이 DB에 반영됨 - [ ] 점검 중 항목별 사진 업로드/첨부가 동작함(텍스트-사진 매칭) - [ ] 오프라인 입력 후(네트워크 off) 재접속시 동기화됨 - [ ] 점검 완료 후 자동으로 보고서가 생성되고, 지정 포맷으로 확인/다운로드 가능 - [ ] 체크리스트/항목 불러오기, 선택/입력/저장 정상 동작 ### 오류/보안 - [ ] 잘못된 데이터 전송시 서버가 오류 반환 및 무시 - [ ] 사진 최대 용량 초과, 비정상 포맷 업로드시 안내/차단됨 - [ ] 인증 토큰 만료/위조시 재인증 유도
막혔을 때 — 트러블슈팅
에이전트가 에러로 막히면 아래 대응을 참고하세요.
## Next.js + Supabase (Vercel) 빌드시 자주 막히는 문제와 해결
1. **증상:** 빌드시 "Environment variable not defined" 또는 undefined 오류
- **원인:** Vercel/로컬 환경에서 .env 및 환경변수 미설정, .env 파일 누락
- **해결:**
- .env.local에 SUPABASE_URL, SUPABASE_ANON_KEY 등 필수 값 빠짐없는지 확인
- Vercel 배포시 "Project Settings > Environment Variables"에도 동일하게 설정
2. **증상:** 인증된 API에서 항상 401/403 (수정/쓰기가 안 돼요)
- **원인:**
- JWT 전달 누락(클라→서버 액션 호출 시)
- Supabase RLS(행 단위 보안)가 미설정 또는 허술
- **해결:**
- 클라이언트에서 습관적으로 supabase.auth.getSession() → JWT 포함 요청
- Supabase Console > 정책에서 "해당 user_id만" 허용하는 RLS 작성했는지 체크
3. **증상:** 사진 업로드 후 DB엔 URL 있는데 이미지 미노출/404
- **원인:**
- Supabase Storage에 Public 설정 누락 또는 권한(Policy) 미설정
- **해결:**
- Storage Bucket "public"이거나, 인증된 user만 read grant
- presigned URL 방식 활용, Storage Policy 명확히 점검
4. **증상:** 배포(Deploy)시 API 라우터가 500에러, Not Found 또는 Supabase 연결 안 됨
- **원인:**
- 서버와 클라에서 supabase client/init 방식 혼동
- 환경변수 서버/클라(object) 각각 맞는지 혼동
- **해결:**
- Next.js 서버핸들러에서는 server-side supabase client로, client-side/브라우저에선 client용 공개키만 사용
- .env에서 "_SERVICE_KEY"는 절대 브라우저에 노출X
- 경로나 project 구조상 app/api/
5. **증상:** 오프라인에서 점검/저장 후 재접속시 데이터 유실(동기화X)
- **원인:**
- PWA/IndexedDB/localStorage 미구현 또는 sync 로직 누락
- **해결:**
- 오프라인시 입력값 임시저장(IndexedDB 권장), 온라인 감지 즉시 서버 동기화 처리 추가
- 수기 입력 데이터와 파일(사진)은 즉시 동기화 처리 로직 분리
막히거나 시간이 없다면? 전문가가 이 빌드킷 그대로 제작해드립니다.
전문가에게 맡기기 →시설 점검 담당자가 모바일 웹에서 체크리스트를 따라 점검하고, 각 항목별로 사진과 메모를 남긴 뒤, 자동으로 보고서를 생성해 관리자에게 전달할 수 있는 앱입니다. 반복적인 자료 입력과 사진 정리를 손쉽게 하며, 현장 오프라인 상황에서도 점검 내용을 안전히 저장할 수 있습니다.
사용자 인증 및 권한 관리
나는 시설 점검자 또는 관리자(소장)로, 내 역할에 따라 앱에 로그인해 점검/보고기능을 이용하고 싶다.
점검 체크리스트 조회 및 점검 시작
나는 시설 담당자로, 할당된(또는 선택한) 점검 체크리스트를 확인하고 새 점검을 시작하고 싶다.
점검 항목별 상태/메모/사진 기록
나는 현장 점검에서 각 체크리스트 항목별 문제점, 메모, 사진을 빠르게 기록하고 싶다.
오프라인 입력/저장·동기화
나는 현장 신호가 약할 때도 입력한 점검 내역과 사진이 유실되지 않기를 원한다.
점검 보고서 자동 생성 및 관리 기능
나는 사무실 관리자(소장)로, 단일/여러 점검에 대한 결과 보고서를 손쉽게 확인하고 파일로 저장받고 싶다.
backend/schema.sql
샘플에서는 일부만 표시CREATE EXTENSION IF NOT EXISTS pgcrypto;
-- 사용자 테이블
CREATE TABLE users (
user_id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
name TEXT NOT NULL,
email TEXT UNIQUE NOT NULL,
password_hash TEXT NOT NULL,나머지 86줄은 실제 결과물에서 확인할 수 있습니다
backend/rls.sql
샘플에서는 일부만 표시-- Supabase row level security 활성화 및 정책 예시 ALTER TABLE users ENABLE ROW LEVEL SECURITY; ALTER TABLE checklists ENABLE ROW LEVEL SECURITY; ALTER TABLE checklist_items ENABLE ROW LEVEL SECURITY; ALTER TABLE inspections ENABLE ROW LEVEL SECURITY; ALTER TABLE inspection_items ENABLE ROW LEVEL SECURITY; -- [중요] 실제 정책 설계시 supabase auth.uid()에 기반한 검증 필요(슈퍼유저 서비스키 노출 X)
나머지 23줄은 실제 결과물에서 확인할 수 있습니다
backend/seed.sql
샘플에서는 일부만 표시-- 데모 사용자 (암호는 실제론 hash여야 함, 예: 'hashed_pw')
INSERT INTO users (user_id, name, email, password_hash, role) VALUES
('123e4567-e89b-12d3-a456-426614174000', '박철수', 'cspark@test.com', 'hashed_pw1', 'staff'),
('223e4567-e89b-12d3-a456-426614174001', '김관리', 'kimsm@test.com', 'hashed_pw2', 'manager');
-- 체크리스트 템플릿
INSERT INTO checklists (checklist_id, title, description) VALUES
('a1bb1111-1111-1111-1111-111111111111', '기계실 점검', '기계실 기본 점검 체크리스트');나머지 15줄은 실제 결과물에서 확인할 수 있습니다
frontend/tailwind.config.js
샘플에서는 일부만 표시module.exports = {
content: ['./app/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
theme: {
extend: {
colors: {
primary: '#183153',
accent: '#53B1FD',
surface: '#F4F6FB',나머지 6줄은 실제 결과물에서 확인할 수 있습니다
frontend/app/layout.tsx
샘플에서는 일부만 표시import './globals.css';
import type { ReactNode } from 'react';
export const metadata = {
title: '현장 점검 관리',
description: '시설 점검/보고서 앱',
};
나머지 10줄은 실제 결과물에서 확인할 수 있습니다
frontend/components/Button.tsx
샘플에서는 일부만 표시import { ButtonHTMLAttributes } from 'react';
export default function Button({children, ...props}: ButtonHTMLAttributes<HTMLButtonElement>) {
return (
<button
className="px-4 py-2 bg-primary text-white rounded hover:bg-accent transition disabled:opacity-50"
{...props}
>나머지 5줄은 실제 결과물에서 확인할 수 있습니다
frontend/app/login/page.tsx
샘플에서는 일부만 표시export default function LoginPage() {
return (
<section className="flex flex-col gap-4 items-center mt-20">
<h1 className="text-2xl font-bold mb-4">로그인</h1>
{/* 실제 로그인 폼은 이후 확장 */}
<form className="flex flex-col gap-2 w-full max-w-xs">
<input className="border rounded p-2" placeholder="이메일" type="email" required />
<input className="border rounded p-2" placeholder="비밀번호" type="password" required />나머지 6줄은 실제 결과물에서 확인할 수 있습니다
M0. 초기 세팅 및 데이터베이스 구조
세부 태스크 5개
M1. 핵심 인증 및 로그인
세부 태스크 2개
M2. 점검 리스트 및 점검/보고서 진입
세부 태스크 2개
M3. 점검 상세/작성(사진첨부 제외)
세부 태스크 2개
M4. 사진 첨부 – 업로드/객체 URL 저장
세부 태스크 2개
M5. 오프라인 동기화 및 패널티케이스 테스트
세부 태스크 2개
M6. 보고서(리스트 및 단건 View) 및 배포
세부 태스크 2개
역할: 당신은 현장 점검·보고서 앱의 MVP를 Next.js (App Router) · Supabase Auth · Supabase (PostgreSQL) · Vercel을 활용해 신속하게 구현하는 AI 코딩 에이전트다. 사용자(비개발자)가 그대로 실행 가능한 코드와 설정을 산출하며, 과설계 없이 핵심 기능에 집중한다. 제품 요약: 시설관리 업체 현장 담당자가 모바일·웹 브라우저에서 로그인 후 체크리스트 기반으로 현장 점검을 입력·사진을 첨부한다. 데이터는 지연 동기화(오프라인/온라인), 자동 보고서로 정리된다. 사용자는 로그인, 점검 리스트/작성, 보고서 보기를 가능하다. 필수 스택: - Next.js (App Router) — 프론트엔드 및 Routing - Supabase Auth — 사용자 인증 및 로그인/권한 - Supabase (PostgreSQL) — 백엔드 데이터 저장
나머지 32줄은 실제 결과물에서 확인할 수 있습니다
프로젝트 셋업 (Next.js + Supabase)
샘플에서는 일부만 표시Next.js(App Router)과 Supabase(PostgreSQL)를 사용하는 환경에서 신규 프로젝트를 셋업하세요. Vercel 배포와 Supabase 연동을 위해 기본 설정을 마치고, 환경변수(.env.local)에는 Supabase URL, Supabase anon 키만 사용합니다. 모든 secret 키나 서비스 키는 노출하지 마세요.
인증 (Supabase Auth 연동)
샘플에서는 일부만 표시Supabase Auth를 이용해 사용자 회원가입, 로그인, 로그아웃 기능을 구현하세요. 권한별 role(예: 직원, 관리자) 필드가 Users 테이블에 있으므로 회원가입 시 이를 고려해 사용자를 생성하세요. 인증 상태에 따라 접근 가능한 페이지(로그인 화면/점검 리스트 등)를 Next.js App Router에서 라우팅 제어하세요. 로그인 없이 접근 가능한 경로는 최소화하세요.
DB 스키마 설계 및 연동
샘플에서는 일부만 표시Supabase PostgreSQL에서 아래 데이터 모델을 사용해 DB 스키마를 설계하세요. Users(user_id, name, email, password_hash, role), Checklists(checklist_id, title, description, created_at), ChecklistItems(item_id, checklist_id, description, order), Inspections(inspection_id, user_id, checklist_id, site_name, inspection_date, status, created_at, synced), InspectionItems(inspection_item_id, inspection_id, item_id, status, notes, photo_url). Next.js에서 Supabase client를 이용해 이 테이블들에 CRUD 할 수 있도록 연결하세요. 모든 쓰기(write) 작업은 서버 컴포넌트 또는 API route에서만 처리하고, 클라이언트에 secret 키가 노출되지 않도록 하세요.
핵심 기능: 점검 작성/사진 첨부/오프라인/보고서
샘플에서는 일부만 표시사용자가 로그인 후 보게 될 점검 리스트 화면(Inspections)을 만들고, 점검 작성 화면에서는 체크리스트 항목별로 status/notes를 입력하고, 사진을 항목별로 첨부(업로드)할 수 있게 하세요. 사진 파일은 Supabase Storage에 저장하고, 해당 파일의 URL을 InspectionItems.photo_url에 저장하세요. 신호가 약한 곳을 대비하여 클라이언트에 임시 저장(IndexedDB/localStorage 등)하고, 네트워크 회복시 서버로 동기화할 기능(간단하게, 일괄 업로드/동기화 버튼 등)을 추가하세요. 보고서 확인 화면에서는 점검 내용/사진이 자동으로 정리된 문서 스타일로 보여주세요.
관리자 기능 및 배포
샘플에서는 일부만 표시관리자(관리소장/role=admin)는 전체 점검 현황을 보고, 특정 점검 보고서를 다운로드(PDF 등)할 수 있습니다. 관리자 권한 확인 후만 접근 가능하게 하세요. 전체 기능을 Vercel에 배포하는 가이드 커맨드를 함께 작성하세요.