월 정기결제로 강의를 무제한 수강하고 진도를 관리하는 서비스
무엇을 만드나?
MVP 기획 · 19,000원
PRD·기능정의·화면목록·DB·API 계약까지, 개발자에게 바로 넘기는 기획서.
샘플은 여기까지 공개합니다
파일 다운로드와 전문(全文) 복사는 실제 결과물에서만 제공됩니다. 내 아이디어를 입력하면 같은 형식의 결과물을 받아볼 수 있습니다.
한 번 결제해 여러 강의를 수강하고, 진도가 자동으로 기록되는 구독형 온라인 강의 웹사이트입니다. 수강생은 강의별로 어디까지 들었는지 쉽게 확인하며, 강사는 강의와 매출을 간단히 관리할 수 있습니다. 실시간 채팅, AI 추천은 제외하고 꼭 필요한 구독·진도 관리만 구현하는 MVP입니다.
온라인 강좌를 구독 형태로 제공하는 웹 서비스입니다. 수강생은 한 번 결제하면 원하는 강의를 골라 들으며, 본인 진도가 자동으로 기록되어 어디까지 들었는지 쉽게 알 수 있습니다. 강사는 자신의 강의를 한 곳에서 관리하고, 구독 매출 및 수강생 현황을 확인할 수 있습니다.
목표
비목표(1차 제외)
수강생 회원가입/로그인/로그아웃
“나는 수강생으로 이메일/비밀번호로 가입하거나 로그인할 수 있다.”
강의 목록 조회/정기 구독 결제 연동
“나는 강의 전체 목록을 확인하고, 구독(결제) 후 수강을 시작할 수 있다.”
강의 수강 및 진도 자동 저장
“나는 수강 중인 강좌에서 마지막 시청 위치가 저장되어, 다음에 이어서 볼 수 있다.”
강사 대시보드(강의/수강생/매출 관리)
“나는 강사로서 내 강의별 구독자 현황, 수강생 리스트, 매출 추이를 볼 수 있다.”
마이페이지(수강생 개인 진도 및 구독 내역)
“나는 내 구독 내역, 각 강의별 진도, 결제 정보를 마이페이지에서 확인할 수 있다.”
전체 MVP 범위는 구독형 온라인 강의 플랫폼의 필수 기능(회원 관리, 강의/구독/진도, 강사 대시보드) 개발입니다.
1단계 — 인증/회원 관리/강의정보 기본
기본 회원가입·로그인(수강생/강사 유형), 강의 등록/목록/상세 조회, Supabase Auth/DB 설계 및 연결, 마이페이지 기본
2단계 — 구독 플로우·진도 저장·수강화면
강의 구독 플로우(더미 결제/결제 API 연결), 강의 수강 시 진도 자동 저장(영상 위치), 내 구독 현황·진도 UI, 수강생/강사 권한 분리
3단계 — 강사 대시보드/매출·통계/최종 검증
강사용 대시보드(강의별 구독자·매출 집계, 수강생 리스트, 간단 차트 및 조회), 보안 규칙 점검, 예외 처리, 사용자 테스트 후 배포
견적 참고 · MVP 검증에 꼭 필요한 범위만 포함. 결제 시스템은 단순화 또는 모의/외부 결제 API 연동, 모든 인증·DB 쓰기 보호는 Supabase 권한 사용. 프론트엔드/백엔드 모두 Next.js(Supabase), Vercel 배포 기준.
랜딩페이지 /
강의 소개 Hero · 회원가입/로그인 버튼 · 강의 미리보기 목록
상태: 로그인 여부(미로그인 시 회원가입/로그인 유도, 로그인 시 강의 추천)
강의 목록 및 상세/구독화면 /courses, /courses/[id]
강의 목록 리스트 · 강의 상세(설명, 강사 등) · 구독하기 버튼(구독 전)/수강하기 버튼(구독 후)
상태: 강의 리스트 fetch 상태(로딩/완료), 구독 상태(구독 전/후별 UI 변경)
강의 수강화면 /courses/[id]/watch
영상 플레이어 · 진도 Bar(현재 시청 위치)
상태: 영상 현재 위치/재생 상태, 진도 저장 여부
강사 대시보드 /dashboard/instructor
내 강의 현황 테이블 · 수강생 리스트 · 매출 요약/차트
상태: 내 강의 불러오기, 구독자/매출 데이터 fetch 및 그래프 상태
마이페이지(수강생) /mypage
내 구독 강의 리스트 · 진도/상태 표시
상태: 내 구독 리스트 로딩, 강의별 진도 fetch
Users
Courses
Subscriptions
Progress
### API/서버액션 명세
#### 1. 회원가입/로그인
- POST /api/signup
입력: { name, email, password, userType }
출력: { user }
인증: X (비로그인 전용)
- POST /api/login
입력: { email, password }
출력: { user } 나머지 49줄은 실제 결과물에서 확인할 수 있습니다
### 의사결정 & 리스크/대응 - Supabase Auth만 사용 (OAuth/Magic Link 등 도입 X): MVP 복잡성 최소화, 비밀번호 분실 이슈는 Supabase Auth 기능(비밀번호 재설정)으로만 대응 - 모든 DB 쓰기는 서버 액션/Route Handler(Next.js API Route)에서만 실행, 클라이언트에서 DB 직접 쓰기 금지: 시크릿/서비스키 노출 위험 방지, RLS를 항상 설정 - Row Level Security(RLS) 반드시 활성화: 본인 것 외 데이터 보호, 테이블별 Supabase Policy 작성(예: progress는 본인만 읽고/쓸 수 있음) - 결제/환불 등 상거래 로직은 MVP에서 최소 구현, 추후 Stripe 등 도입 고려 - 실시간(채팅/커뮤니티), 모바일, 추천/AI 기능은 개발범위에서 명확히 제외 - 환경변수 관리(Vercel/Supabase): 서버 시크릿 코드 하드코딩 절대 금지, .env.local 또는 Vercel/CLI에만 입력 - Supabase Side에서 DB 스키마 마이그레이션, 정책변경 등이 누락/중복될 수 있어, 개발-배포 간 일관성 주의
### 수용 테스트 체크리스트 - [ ] 사용자는 회원가입 및 로그인(이메일/패스워드) 가능 - [ ] 회원가입 시 userType(강사/수강생)에 따라 권한이 구분된다 - [ ] 로그인 상태에서만 강의 목록, 상세, 구독 가능 - [ ] 권한이 없는 사용자가 강사 또는 수강생 전용 페이지/API 접근 시 오류/리다이렉트된다 - [ ] 수강생은 강의 구독 가능하고, 구독 목록에서 진도를 확인/저장할 수 있다 - [ ] 강의 진도(마지막 시청 위치) 저장 및 조회가 정상 동작한다 - [ ] 강의별 구독, 진도가 올바르게 집계되어 강사 대시보드에서 보인다 - [ ] 로그아웃이 정상 동작하고, 이후 보호 리소스 접근 시 거부된다
나머지 6줄은 실제 결과물에서 확인할 수 있습니다
M0초기 환경 세팅과 핵심 데이터모델
M1프론트엔드 기본 골격 구축
M2기본 기능 연동
이 문서는 개발자에게 그대로 전달할 수 있는 기획서입니다.