집에서 가까운 단기 일자리를 조건만 보고 바로 지원하고, 사장은 지원자를 한 화면에서 확정하는 매칭 서비스
‘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 미들웨어로 세션 갱신.
전체 골격 만들기 — 마스터 프롬프트 실행
아래 프롬프트를 통째로 복사해 에이전트에 붙여넣으면 프로젝트 뼈대가 만들어집니다.
역할: 당신은 노코드/로우코드 사용자가 붙여넣어 동작시키는 AI 코딩 에이전트입니다. 협업 툴로 Cursor, Claude Code, v0, Bolt를 이용합니다. 요구 조건을 해석해 다음 명확한 구현 가이드를 따르고, 코드/설명/파일 구조 등을 단계별로 차례차례 Output합니다. 제품 요약: 동네 가게 사장과 60대 이상 시니어 구직자를 위한 동네 단기 일자리 매칭 MVP입니다. 사장은 즉시 구인 공고를 등록하고, 인근 구직자는 쉽고 빠르게 일자리 목록을 보고 바로 지원합니다. 복잡한 이력서/결제/채팅/추천 등은 제외합니다. 필수 스택: Next.js (App Router) · Supabase Auth · Supabase (PostgreSQL) · Vercel …
모듈 구현 — 프로젝트 셋업 및 기본 환경 설정
앞 단계 결과 위에서 이 프롬프트를 실행해 기능을 채웁니다.
Next.js (App Router) 프로젝트를 생성하고, TypeScript 및 ESLint 세팅을 합니다. Supabase 프로젝트 생성 후, Supabase JS 클라이언트를 Next.js에 연동합니다. 환경변수(.env.local)에는 Supabase URL, anon public key만 사용하며, 서버 전용 시크릿은 클라이언트에 노출하지 않습니다. Vercel로 배포 가능한 구조를 유지하세요.
모듈 구현 — Supabase Auth 기반 회원가입/로그인 구현
앞 단계 결과 위에서 이 프롬프트를 실행해 기능을 채웁니다.
Supabase Auth Email/Password 방식만 사용하여, 회원가입/로그인/로그아웃 기능을 만듭니다. 가입시 사용자 역할 (job_seeker/employer)와 전화번호, 이름, 거주지역을 추가 입력 받도록 하고, Auth user id와 users 테이블을 연동(회원정보 저장)하는 절차를 구현하세요. 권한 분리를 위해 role별로 접근 경로를 다르게 처리합니다.
모듈 구현 — DB 스키마 정의 및 migrations 적용
앞 단계 결과 위에서 이 프롬프트를 실행해 기능을 채웁니다.
Supabase (PostgreSQL)에 아래 세 테이블을 정의하세요: 1) users(id/name/phone/role (job_seeker or employer)/location/password_hash/created_at), 2) job_postings(id/employer_id/title/description/start_date/end_date/start_time/end_time/wage/location/created_at), 3) applications(id/job_posting_id/job_seeker_id/application_date/status (pending/confirmed/rejected)). 적절한 foreign key, 인덱싱 및 created_at의 자동 세팅을 포함하고, users.password_hash 필드는 Supabase Auth로 대체되어 사용하지 않으므로 생성하지 마세요. Supabase migration으로 적용.
모듈 구현 — 핵심 서비스 기능 (구인공고, 지원, 현황)
앞 단계 결과 위에서 이 프롬프트를 실행해 기능을 채웁니다.
1) 사장은 구인공고를 등록, 열람, 마감(삭제)할 수 있습니다. 2) 구직자는 근처 일자리(간단 위치 필터), 상세 보기, 즉시 지원, 내 지원 현황(공고별 상태값) 확인이 가능합니다. 3) 사장은 자신의 공고별 지원자 목록(이름, 전화, 지원일, 상태), '승인/거절' 처리 기능이 있습니다. 모든 쓰기 작업(공고 등록/지원/상태변경 등)은 Next.js API Route(서버)에서 인증확인 후 Supabase DB 쓰기로 보호하여 구현하세요.
모듈 구현 — 운영 및 배포 관리, 관리자 접근
앞 단계 결과 위에서 이 프롬프트를 실행해 기능을 채웁니다.
운영/배포 관리를 위해 Vercel에 배포 가능한 next.config.js, 환경변수 관리 가이드, Supabase 프로젝트 백업 가이드를 작성합니다. 별도의 관리자 UI는 MVP에서 생략하지만, admin role 계정에는 전 데이터 read access를 부여하는 정책(Policy)만 Supabase에서 적용합니다.
배포하기
# 배포 — 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 에 운영 도메인 추가.검증 — 핵심 시나리오 테스트
아래 체크리스트로 핵심 기능이 동작하는지 확인하세요.
### 수용 테스트 체크리스트 (핵심 시나리오별) #### 회원가입/로그인 - [ ] 올바른 양식 데이터로 회원가입 성공 후 자동 로그인 및 메인으로 이동되는가? - [ ] 이미 존재하는 이메일로 회원가입하면 오류 메시지를 뱉는가? - [ ] 올바른 정보로 로그인 시 쿠키에 JWT가 남는가? - [ ] 잘못된 정보/비밀번호로 로그인 시 거부되는가? #### 일자리 탐색/지원 - [ ] 위치(동네) 입력 없이도 전체 일자리 목록이 조회되는가? - [ ] 일자리 상세에서 지원하기 버튼이 보이고, 지원 시 즉시 현황에서 뜨는가? - [ ] 이미 지원한 공고엔 중복 지원 불가? #### 지원 현황/취소 - [ ] 내 지원 내역 화면에서 각 지원 결과(대기/확정/거절)가 노출되는가? #### 구인 등록/지원자 관리(사장) - [ ] 구인 공고를 필수항목(날짜, 시간, 급여, 위치) 포함해 등록/수정할 수 있는가? - [ ] 내가 올린 공고들의 리스트, 각각 지원자의 목록이 정상 노출되는가? - [ ] 지원자 상태(확정/거절) 변경이 즉시 반영되는가? #### 보안/인증 - [ ] 미로그인 사용자가 구인/지원하는 API 호출시 401이 뜨는가? - [ ] 내 소유가 아닌(타 사장의) 공고, 지원자 관리에 접근하면 403이 뜨는가? #### 예외/경계 - [ ] 과거 날짜 공고(끝난 알바)는 목록/지원 불가? - [ ] DB 테이블 필드 누락 또는 비정상 입력 시 서버가 400을 반환하는가?
막혔을 때 — 트러블슈팅
에이전트가 에러로 막히면 아래 대응을 참고하세요.
### Next.js+Supabase+Vercel 환경 실전 트러블슈팅 **1. 증상: 배포/로컬에서 환경변수(.env) 무시, 인증/DB 접속 에러** - 원인: .env.local 파일 누락, 잘못된 위치 또는 변수명 오타, Vercel/Supabase 대시보드에 값 안 넣음 - 해결: 1. .env.local에 SUPABASE_URL, SUPABASE_ANON_KEY 등 추가 2. git에는 절대 커밋하지 말고, 수동 입력만 3. Vercel Dashboard - Project Settings - Environment Variables에 정확히 입력했는지 재확인 **2. 증상: 클라이언트에서 서버키(서비스키) 노출/유출 경고, 빌드시 fail** - 원인: supabase 서비스키(service_role)나 DB connection string을 코드/환경변수로 FE/쿠키/JS에 노출 - 해결: 절대로 브라우저에서 서비스키 사용 X - Next.js API route/서버액션에서만 서비스키 사용, 클라이언트에선 오직 anon/public키로 Supabase client 생성 **3. 증상: 인증된 API 호출시 401/403, 또는 타인의 데이터가 보여짐** - 원인: Supabase RLS (Row Level Security) 미설정, 정책 오류/누락 - 해결: 각 테이블 생성 후 즉시 RECOMMENDED RLS 정책 수립! - 예시: applications row select는 해당 user만, job_postings row select는 owner만, insert/update도 마찬가지. - supabase dashboard에서 RLS 정책 시트로 확인/수정 **4. 증상: 로그인 후 리다이렉트 안 됨/인증 정보 누락 및 protected route 접근불가** - 원인: 서버액션에서 쿠키로부터 supabase auth 세션/JWT 추출이 누락 - 해결: next/server의 cookies(), supabase-auth-helpers/server 등 활용해서 서버사이드에서 토큰 파싱 후 API 보호 **5. 증상: Supabase DB 연결은 되나 CORS 관련 에러(특히 로컬 개발환경, 옵션 preflight 등)** - 원인: FE/BE origin 불일치, 로컬과 Vercel 환경 URI 불일치 - 해결: Supabase 프로젝트 API 설정에서 CORS 허용 도메인에 http://localhost:3000, Vercel 프로젝트 도메인 둘 다 등록
막히거나 시간이 없다면? 전문가가 이 빌드킷 그대로 제작해드립니다.
전문가에게 맡기기 →동네 상점 사장과, 집 근처에서 짧게 일하고 싶은 60대 이상 구직자를 연결하는 웹서비스입니다. 구직자는 복잡한 이력서 없이 쉽게 일자리를 찾고 즉시 지원할 수 있고, 사장도 필요한 인원을 간단히 모집·관리합니다.
회원가입/로그인(Supabase Auth)
나는 구직자나 사장으로, 내 정보를 보호받으며 서비스에 접근하고 싶다.
구인공고 등록(사장)
나는 사장으로, 하루~한달짜리 구인공고를 빠르게 올리고 인근 구직자에 노출하고 싶다.
근처 일자리 목록·상세 조회(구직자)
나는 60대 이상 구직자로, 우리 동네에 있는 단기 일자리를 한눈에 보고 관심있는 것만 상세보기 하고 싶다.
즉시 지원/지원 취소(구직자)
나는 관심 가는 일자리에 즉시 지원하고, 마음 바꿨을 땐 곧바로 지원 취소하고 싶다.
지원자 관리(사장)
나는 내 공고에 지원한 구직자 정보를 모아 보고, 채용 확정 및 거절 상태를 쉽게 표시하고 싶다.
내 지원 현황(구직자)
나는 지금까지 지원한 일자리 목록과, 채용 결과를 한눈에 보고 싶다.
backend/schema.sql
샘플에서는 일부만 표시-- 확장 기능: pgcrypto 설치 (UUID 지원) CREATE EXTENSION IF NOT EXISTS "pgcrypto"; -- 사용자(구직자/사장) 테이블 CREATE TABLE users ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), name TEXT NOT NULL, phone TEXT NOT NULL,
나머지 66줄은 실제 결과물에서 확인할 수 있습니다
backend/rls.sql
샘플에서는 일부만 표시-- 모든 테이블에 Row Level Security(RLS) 활성화 (Supabase Best Practice) ALTER TABLE users ENABLE ROW LEVEL SECURITY; ALTER TABLE job_postings ENABLE ROW LEVEL SECURITY; ALTER TABLE applications ENABLE ROW LEVEL SECURITY; -- 예시 정책들 -- 1. users: 본인만 본인 row select/update/delete 가능 CREATE POLICY "Users: Self read access"
나머지 39줄은 실제 결과물에서 확인할 수 있습니다
backend/seed.sql
샘플에서는 일부만 표시-- 데모 유저 (패스워드는 암호해시, 실제 운영 DB에서는 Supabase Auth 자체 사용)
INSERT INTO users (id, name, phone, role, location, password_hash) VALUES
('00000000-0000-0000-0000-000000000001', '이훈이', '010-1234-5678', 'job_seeker', '서울시 동작구', 'demo_hash'),
('00000000-0000-0000-0000-000000000002', '홍사장', '010-2222-3333', 'employer', '서울시 동작구', 'demo_hash');
-- 데모 일자리 공고
INSERT INTO job_postings (id, employer_id, title, description, start_date, end_date, start_time, end_time, wage, location) VALUES
('10000000-0000-0000-0000-000000000001', '00000000-0000-0000-0000-000000000002', '마트 하루 계산원', '계산대 단기 알바 (간단)', '2024-06-10', '2024-06-10', '09:00', '18:00', 100000, '서울시 동작구'),나머지 5줄은 실제 결과물에서 확인할 수 있습니다
frontend/tailwind.config.js
샘플에서는 일부만 표시/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./app/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}',
],
theme: {
extend: {},나머지 3줄은 실제 결과물에서 확인할 수 있습니다
frontend/app/layout.tsx
샘플에서는 일부만 표시import './globals.css'
import type { ReactNode } from 'react'
export default function RootLayout({ children }: { children: ReactNode }) {
return (
<html lang="ko">
<body className="bg-gray-50 min-h-screen">
<header className="bg-white shadow px-4 py-3 mb-4">나머지 8줄은 실제 결과물에서 확인할 수 있습니다
frontend/components/Button.tsx
샘플에서는 일부만 표시import { ButtonHTMLAttributes } from 'react';
export function Button({ className = '', ...props }: ButtonHTMLAttributes<HTMLButtonElement>) {
return (
<button
className={`px-4 py-2 rounded bg-blue-600 text-white hover:bg-blue-700 focus:outline-none ${className}`}
{...props}
/>나머지 3줄은 실제 결과물에서 확인할 수 있습니다
frontend/app/jobs/page.tsx
샘플에서는 일부만 표시// 일자리 목록 (Stub)
export default function JobListPage() {
// 실제에선 Supabase에서 불러옴. 초기엔 하드코딩
const jobs = [
{
id: '10000000-0000-0000-0000-000000000001',
title: '마트 하루 계산원',나머지 30줄은 실제 결과물에서 확인할 수 있습니다
frontend/app/globals.css
샘플에서는 일부만 표시@tailwind base; @tailwind components; @tailwind utilities;
M0. 환경설정/기초 데이터베이스 구조
세부 태스크 4개
M1. 일자리 목록 – MVP UI/Stub/기초구현
세부 태스크 3개
M2. 회원가입/로그인 – Supabase Auth 연동
세부 태스크 3개
M3. 공고 등록/지원 – MVP 플로우 실현
세부 태스크 3개
M4. 작성/수정/삭제/보안 – MVP 완성 및 QA
세부 태스크 3개
역할: 당신은 노코드/로우코드 사용자가 붙여넣어 동작시키는 AI 코딩 에이전트입니다. 협업 툴로 Cursor, Claude Code, v0, Bolt를 이용합니다. 요구 조건을 해석해 다음 명확한 구현 가이드를 따르고, 코드/설명/파일 구조 등을 단계별로 차례차례 Output합니다. 제품 요약: 동네 가게 사장과 60대 이상 시니어 구직자를 위한 동네 단기 일자리 매칭 MVP입니다. 사장은 즉시 구인 공고를 등록하고, 인근 구직자는 쉽고 빠르게 일자리 목록을 보고 바로 지원합니다. 복잡한 이력서/결제/채팅/추천 등은 제외합니다. 필수 스택: Next.js (App Router) · Supabase Auth · Supabase (PostgreSQL) · Vercel Hard Constraints (Do NOT) - 복잡한 이력서 등록 및 관리 은 MVP에서 구현하지 않는다
나머지 28줄은 실제 결과물에서 확인할 수 있습니다
프로젝트 셋업 및 기본 환경 설정
샘플에서는 일부만 표시Next.js (App Router) 프로젝트를 생성하고, TypeScript 및 ESLint 세팅을 합니다. Supabase 프로젝트 생성 후, Supabase JS 클라이언트를 Next.js에 연동합니다. 환경변수(.env.local)에는 Supabase URL, anon public key만 사용하며, 서버 전용 시크릿은 클라이언트에 노출하지 않습니다. Vercel로 배포 가능한 구조를 유지하세요.
Supabase Auth 기반 회원가입/로그인 구현
샘플에서는 일부만 표시Supabase Auth Email/Password 방식만 사용하여, 회원가입/로그인/로그아웃 기능을 만듭니다. 가입시 사용자 역할 (job_seeker/employer)와 전화번호, 이름, 거주지역을 추가 입력 받도록 하고, Auth user id와 users 테이블을 연동(회원정보 저장)하는 절차를 구현하세요. 권한 분리를 위해 role별로 접근 경로를 다르게 처리합니다.
DB 스키마 정의 및 migrations 적용
샘플에서는 일부만 표시Supabase (PostgreSQL)에 아래 세 테이블을 정의하세요: 1) users(id/name/phone/role (job_seeker or employer)/location/password_hash/created_at), 2) job_postings(id/employer_id/title/description/start_date/end_date/start_time/end_time/wage/location/created_at), 3) applications(id/job_posting_id/job_seeker_id/application_date/status (pending/confirmed/rejected)). 적절한 foreign key, 인덱싱 및 created_at의 자동 세팅을 포함하고, users.password_hash 필드는 Supabase Auth로 대체되어 사용하지 않으므로 생성하지 마세요. Supabase migration으로 적용.
핵심 서비스 기능 (구인공고, 지원, 현황)
샘플에서는 일부만 표시1) 사장은 구인공고를 등록, 열람, 마감(삭제)할 수 있습니다. 2) 구직자는 근처 일자리(간단 위치 필터), 상세 보기, 즉시 지원, 내 지원 현황(공고별 상태값) 확인이 가능합니다. 3) 사장은 자신의 공고별 지원자 목록(이름, 전화, 지원일, 상태), '승인/거절' 처리 기능이 있습니다. 모든 쓰기 작업(공고 등록/지원/상태변경 등)은 Next.js API Route(서버)에서 인증확인 후 Supabase DB 쓰기로 보호하여 구현하세요.
운영 및 배포 관리, 관리자 접근
샘플에서는 일부만 표시운영/배포 관리를 위해 Vercel에 배포 가능한 next.config.js, 환경변수 관리 가이드, Supabase 프로젝트 백업 가이드를 작성합니다. 별도의 관리자 UI는 MVP에서 생략하지만, admin role 계정에는 전 데이터 read access를 부여하는 정책(Policy)만 Supabase에서 적용합니다.