월 정기결제로 강의를 무제한 수강하고 진도를 관리하는 서비스
어떻게 만드나?
AI 빌드 기획 패키지 · 49,000원
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 코드 생성을 위한 시니어 개발자 AI 에이전트] 제품 요약: 온라인 클래스 구독 서비스. 강사가 강의를 개별 판매 대신 구독으로 제공, 수강생은 정기 구독 후 진도 추적 및 다양한 강좌를 편리하게 학습. 필수 스택: Next.js (App Router) · Supabase Auth · Supabase (PostgreSQL) · Vercel …
모듈 구현 — 프로젝트 셋업 (Next.js, Supabase, Vercel 연동)
앞 단계 결과 위에서 이 프롬프트를 실행해 기능을 채웁니다.
Next.js (App Router) 기반의 프로젝트를 생성하고, Supabase 연동(공개키 등 클라이언트 권한으로 안전하게) 및 환경변수 관리를 .env.local 파일로 분리하세요. Vercel에 배포 가능한 기본 셋팅을 적용하세요. 불필요한 샘플코드는 제거하고, TypeScript 를 사용하세요.
모듈 구현 — 인증 모듈 (Supabase Auth)
앞 단계 결과 위에서 이 프롬프트를 실행해 기능을 채웁니다.
수강생(UserType=수강생)과 강사(UserType=강사) 모두 가입 및 로그인이 가능한 인증 로직을 구현하세요. Supabase Auth를 사용하고, 사용자 상태(로그인/아웃, 권한)에 따라 라우팅을 제어하세요. 인증정보는 React Context (or AuthProvider)로 관리하고, 이메일/비밀번호 방식만 지원하세요.
모듈 구현 — DB 스키마 설계 및 Supabase 연동
앞 단계 결과 위에서 이 프롬프트를 실행해 기능을 채웁니다.
다음 논리 데이터 모델에 따라 Supabase PostgreSQL 테이블을 생성하는 SQL 및 Supabase dashboard로 연동하세요: Users(UserID/Name/Email/PasswordHash/UserType/SignupDate), Courses(CourseID/InstructorID/Title/Description/ContentURL/CreatedDate), Subscriptions(SubscriptionID/UserID/StartDate/Status), Progress(ProgressID/UserID/CourseID/LastWatchedTimestamp). DB 쓰기 작업은 반드시 서버 컴포넌트(api route 또는 server action)에서만 처리하고, 권한(강사/수강생) 체크도 서버에서 하세요.
모듈 구현 — 핵심 기능 개발 (강의 구독/수강/진도 관리)
앞 단계 결과 위에서 이 프롬프트를 실행해 기능을 채웁니다.
수강생이 강의 목록을 조회, 개별 강의를 구독(Subscription 생성), 현재 진도를 실시간으로 저장할 수 있는 기능을 구현하세요. 각 화면(강의 목록/구독, 강의 수강, 내 진도)에 맞는 UI 컴포넌트와, Supabase DB 연동 코드를 Next.js server actions 또는 api routes 에 구현하세요. 강사는 본인 강의의 수강생/매출 현황을 확인하는 대시보드 UI를 갖추세요. 클라이언트에서 DB 쓰기 작업은 불허하며, 서버에서만 처리하세요.
모듈 구현 — 관리자 및 배포, 보안 설정
앞 단계 결과 위에서 이 프롬프트를 실행해 기능을 채웁니다.
관리자(=강사) 전용 페이지 접근 권한 제어를 server component에서 구현하고, Supabase RBAC/Row Level Security로 외부 DB 접근을 보호하세요. 서비스 키 또는 시크릿이 클라이언트에 노출되지 않게 하며, 최종적으로 Vercel에 배포하세요. .env 및 보안 환경변수는 코드로 노출하지 않고 안전하게 관리하세요.
배포하기
# 배포 — 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 에 운영 도메인 추가.검증 — 핵심 시나리오 테스트
아래 체크리스트로 핵심 기능이 동작하는지 확인하세요.
### 수용 테스트 체크리스트 - [ ] 사용자는 회원가입 및 로그인(이메일/패스워드) 가능 - [ ] 회원가입 시 userType(강사/수강생)에 따라 권한이 구분된다 - [ ] 로그인 상태에서만 강의 목록, 상세, 구독 가능 - [ ] 권한이 없는 사용자가 강사 또는 수강생 전용 페이지/API 접근 시 오류/리다이렉트된다 - [ ] 수강생은 강의 구독 가능하고, 구독 목록에서 진도를 확인/저장할 수 있다 - [ ] 강의 진도(마지막 시청 위치) 저장 및 조회가 정상 동작한다 - [ ] 강의별 구독, 진도가 올바르게 집계되어 강사 대시보드에서 보인다 - [ ] 로그아웃이 정상 동작하고, 이후 보호 리소스 접근 시 거부된다 - [ ] 서버 환경변수 및 Supabase 시크릿이 외부에 노출되지 않는다 - [ ] 테스트 환경에서 DB Row Level Security가 반드시 활성화되어, 본인만 데이터 접근 가능함이 확인된다 #### 부가 테스트 - [ ] 잘못된 입력(없는 강의, 유효하지 않은 토큰 등)에 에러가 명확히 반환된다 - [ ] 브라우저 직접 새로고침/뒤로가기 등 UX 케이스에서 인증 상태 유지가 잘 동작한다
막혔을 때 — 트러블슈팅
에이전트가 에러로 막히면 아래 대응을 참고하세요.
### 자주 막히는 문제 & 해결법 1. 증상: 빌드/배포 시 .env 관련 에러 (API 시크릿/프로젝트 URL이 undefined) → 원인: 환경변수를 Vercel/로컬에 세팅 안 함, .env 파일명 오타, export 누락 → 해결: .env.local/.env.production에 환경변수(SUPABASE_URL, SUPABASE_ANON_KEY 등) 작성/확인, Vercel Dashboard에서 environment variables 정확 입력. 코드에 하드코딩 X 2. 증상: 인증 리다이렉트 안 됨, 로그인 안 풀리거나 API에서 401 오류 연발 → 원인: Supabase Auth 세션이 Next.js 서버(SSR)와 클라이언트 측에 불일치하거나 Route Handler에서 쿠키/토큰 전달 누락 → 해결: Supabase Auth 공식 예제(Next.js App Router)에서 cookies()로 액세스 토큰 받아 검증, context 없는 곳(클라이언트 컴포넌트)에서 민감 로직 처리 금지. /api 보호 미들웨어 꼭 적용 3. 증상: 클라이언트에서 DB Row에 바로 insert/update하는 코드 작성 후 보안 경고(서비스키 노출) 혹은 RLS 정책 적용 안 됨 → 원인: Supabase client를 브라우저에서 서비스키(서버용)로 초기화했거나, RLS(행수준권한) 미설정 → 해결: supabase-js 클라이언트는 브라우저에서는 public(anon) 키만과 읽기 권한만, 모든 쓰기는 서버 함수/API 경유. Supabase Table마다 RLS 정책 직접 생성(예: progress는 user_id=auth.uid()만 업데이트 가능) 4. 증상: 배포 후 API CORS 오류 (특히 API 호출 시 preflight 실패) → 원인: Vercel/Next.js API Route에서 CORS 설정 누락 또는 오동작 → 해결: 개발환경·배포환경(api 경로/도메인 확인) 일치 필요. Route Handler에 Access-Control-Allow-Origin 헤더 추가 필요시 명시 5. 증상: Supabase Table/Policy 업데이트 했는데, 실제 쿼리 권한 에러 또는 데이터 보임/누락 → 원인: 정책-롤(사용자 타입) 조건 미반영, Policy 미선언, Supabase 콘솔/CLI에서 apply 안함 → 해결: Supabase 콘솔에서 Table별 정책 직접 점검(테스트 쿼리로 검증), 적용 직후 모든 시나리오(본인, 타인, 미인증)로 재점검. 정책 변경 후 supabase db push/refresh 권장
막히거나 시간이 없다면? 전문가가 이 빌드킷 그대로 제작해드립니다.
전문가에게 맡기기 →온라인 강좌를 구독 형태로 제공하는 웹 서비스입니다. 수강생은 한 번 결제하면 원하는 강의를 골라 들으며, 본인 진도가 자동으로 기록되어 어디까지 들었는지 쉽게 알 수 있습니다. 강사는 자신의 강의를 한 곳에서 관리하고, 구독 매출 및 수강생 현황을 확인할 수 있습니다.
수강생 회원가입/로그인/로그아웃
나는 수강생으로 이메일/비밀번호로 가입하거나 로그인할 수 있다.
강의 목록 조회/정기 구독 결제 연동
나는 강의 전체 목록을 확인하고, 구독(결제) 후 수강을 시작할 수 있다.
강의 수강 및 진도 자동 저장
나는 수강 중인 강좌에서 마지막 시청 위치가 저장되어, 다음에 이어서 볼 수 있다.
강사 대시보드(강의/수강생/매출 관리)
나는 강사로서 내 강의별 구독자 현황, 수강생 리스트, 매출 추이를 볼 수 있다.
마이페이지(수강생 개인 진도 및 구독 내역)
나는 내 구독 내역, 각 강의별 진도, 결제 정보를 마이페이지에서 확인할 수 있다.
backend/schema.sql
샘플에서는 일부만 표시-- 확장 설치 CREATE EXTENSION IF NOT EXISTS pgcrypto; -- 유저 테이블 CREATE TABLE users ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), name TEXT NOT NULL, email TEXT NOT NULL UNIQUE,
나머지 60줄은 실제 결과물에서 확인할 수 있습니다
backend/rls.sql
샘플에서는 일부만 표시-- 모든 테이블에 RLS 활성화 ALTER TABLE users ENABLE ROW LEVEL SECURITY; ALTER TABLE courses ENABLE ROW LEVEL SECURITY; ALTER TABLE subscriptions ENABLE ROW LEVEL SECURITY; ALTER TABLE progress ENABLE ROW LEVEL SECURITY; -- 각 테이블별 최소한의 row-level security 정책 예시 및 보안 메모
나머지 25줄은 실제 결과물에서 확인할 수 있습니다
backend/seed.sql
샘플에서는 일부만 표시-- 유저 예시(강사 1, 수강생 2)
INSERT INTO users (id, name, email, user_type) VALUES
('11111111-1111-1111-1111-111111111111', '홍길동', 'hong@instructor.com', '강사'),
('22222222-2222-2222-2222-222222222222', '김수강', 'kim@learner.com', '수강생'),
('33333333-3333-3333-3333-333333333333', '이수강', 'lee@learner.com', '수강생');
-- 강의 예시
INSERT INTO courses (id, instructor_id, title, description, content_url) VALUES나머지 11줄은 실제 결과물에서 확인할 수 있습니다
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-background text-foreground min-h-screen font-sans">
<header className="p-4 border-b bg-white mb-8">나머지 7줄은 실제 결과물에서 확인할 수 있습니다
frontend/tailwind.config.js
샘플에서는 일부만 표시module.exports = {
content: [
"./app/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {
colors: {나머지 9줄은 실제 결과물에서 확인할 수 있습니다
frontend/globals.css
샘플에서는 일부만 표시@tailwind base;
@tailwind components;
@tailwind utilities;
body {
font-family: 'Noto Sans KR', sans-serif;
}frontend/components/Button.tsx
샘플에서는 일부만 표시import { ButtonHTMLAttributes } from 'react';
export function Button({ className = '', ...props }: ButtonHTMLAttributes<HTMLButtonElement>) {
return (
<button
className={`py-2 px-4 rounded-md bg-primary text-white hover:bg-blue-700 font-medium transition ${className}`}
{...props}
/>나머지 2줄은 실제 결과물에서 확인할 수 있습니다
frontend/app/courses/page.tsx
샘플에서는 일부만 표시"use client";
// 화면용 스텁. 실제 데이터 fetching 미구현
import { Button } from '../../components/Button';
export default function CourseListPage() {
// 예시 데이터
const courses = [나머지 22줄은 실제 결과물에서 확인할 수 있습니다
M0. 초기 환경 세팅과 핵심 데이터모델
세부 태스크 4개
M1. 프론트엔드 기본 골격 구축
세부 태스크 4개
M2. 기본 기능 연동
세부 태스크 4개
[역할: 최적의 프로덕션-준비 MVP 코드 생성을 위한 시니어 개발자 AI 에이전트] 제품 요약: 온라인 클래스 구독 서비스. 강사가 강의를 개별 판매 대신 구독으로 제공, 수강생은 정기 구독 후 진도 추적 및 다양한 강좌를 편리하게 학습. 필수 스택: Next.js (App Router) · Supabase Auth · Supabase (PostgreSQL) · Vercel 문제: 강사는 매달 불규칙한 매출 발생/관리 어려움, 수강생은 강의 진도 관리 및 환불 문제.
나머지 51줄은 실제 결과물에서 확인할 수 있습니다
프로젝트 셋업 (Next.js, Supabase, Vercel 연동)
샘플에서는 일부만 표시Next.js (App Router) 기반의 프로젝트를 생성하고, Supabase 연동(공개키 등 클라이언트 권한으로 안전하게) 및 환경변수 관리를 .env.local 파일로 분리하세요. Vercel에 배포 가능한 기본 셋팅을 적용하세요. 불필요한 샘플코드는 제거하고, TypeScript 를 사용하세요.
인증 모듈 (Supabase Auth)
샘플에서는 일부만 표시수강생(UserType=수강생)과 강사(UserType=강사) 모두 가입 및 로그인이 가능한 인증 로직을 구현하세요. Supabase Auth를 사용하고, 사용자 상태(로그인/아웃, 권한)에 따라 라우팅을 제어하세요. 인증정보는 React Context (or AuthProvider)로 관리하고, 이메일/비밀번호 방식만 지원하세요.
DB 스키마 설계 및 Supabase 연동
샘플에서는 일부만 표시다음 논리 데이터 모델에 따라 Supabase PostgreSQL 테이블을 생성하는 SQL 및 Supabase dashboard로 연동하세요: Users(UserID/Name/Email/PasswordHash/UserType/SignupDate), Courses(CourseID/InstructorID/Title/Description/ContentURL/CreatedDate), Subscriptions(SubscriptionID/UserID/StartDate/Status), Progress(ProgressID/UserID/CourseID/LastWatchedTimestamp). DB 쓰기 작업은 반드시 서버 컴포넌트(api route 또는 server action)에서만 처리하고, 권한(강사/수강생) 체크도 서버에서 하세요.
핵심 기능 개발 (강의 구독/수강/진도 관리)
샘플에서는 일부만 표시수강생이 강의 목록을 조회, 개별 강의를 구독(Subscription 생성), 현재 진도를 실시간으로 저장할 수 있는 기능을 구현하세요. 각 화면(강의 목록/구독, 강의 수강, 내 진도)에 맞는 UI 컴포넌트와, Supabase DB 연동 코드를 Next.js server actions 또는 api routes 에 구현하세요. 강사는 본인 강의의 수강생/매출 현황을 확인하는 대시보드 UI를 갖추세요. 클라이언트에서 DB 쓰기 작업은 불허하며, 서버에서만 처리하세요.
관리자 및 배포, 보안 설정
샘플에서는 일부만 표시관리자(=강사) 전용 페이지 접근 권한 제어를 server component에서 구현하고, Supabase RBAC/Row Level Security로 외부 DB 접근을 보호하세요. 서비스 키 또는 시크릿이 클라이언트에 노출되지 않게 하며, 최종적으로 Vercel에 배포하세요. .env 및 보안 환경변수는 코드로 노출하지 않고 안전하게 관리하세요.