← 템플릿 목록
교육중급🌍 Teachable 모델
온라인 코스 플랫폼
내 30년 경력을 온라인 코스로 판매. 영상 + 텍스트 + 과제 구조. 한 번 만들면 자는 동안에도 수익.
Claude Code · Cursor · ChatGPT 에 붙여넣기
# 온라인 코스 플랫폼 MVP 만들기 ## 프로젝트 개요 1인 강사가 온라인 코스를 만들고 판매하는 플랫폼. 참고 모델: Teachable / Kajabi — Kajabi $2B 밸류 ## 기술스택 - Next.js 14 (App Router) + TypeScript - Supabase (DB + Auth + Storage) - Tailwind CSS + shadcn/ui - 토스페이먼츠 (단건 결제) - 한국어 UI ## 필수 기능 ### 1. 코스 목록 페이지 (/) - 코스 카드 (썸네일, 제목, 강사, 가격, 수강생 수, 별점) - 카테고리 필터 - 베스트 코스 섹션 ### 2. 코스 상세 페이지 (/courses/[slug]) - 코스 소개 영상 (유튜브 embed 또는 업로드) - 커리큘럼 목록 (섹션 > 레슨 구조) - 무료 맛보기 레슨 1~2개 - 강사 소개 - 수강생 후기 - 구매 버튼 (토스페이먼츠) ### 3. 수강생 학습 페이지 (/learn/[courseSlug]/[lessonId]) - 비디오 플레이어 (Supabase Storage 또는 유튜브) - 강의 노트 (텍스트 + 이미지) - 첨부파일 다운로드 - 진도율 자동 저장 - 이전/다음 레슨 이동 ### 4. 수료증 자동 발급 - 전체 레슨 완료 시 → 수료증 PDF 자동 생성 - 수료증 공유 링크 (LinkedIn용) ### 5. 강사 어드민 (/admin) - 코스 생성/수정/삭제 - 레슨 업로드 (영상 + 텍스트 + 첨부파일) - 수강생 목록 + 진도율 - 매출 현황 ## DB 스키마 ```sql courses: id, slug, title, description, thumbnail_url, price, instructor_id, is_published, student_count, rating lessons: id, course_id, section, title, video_url, content, attachment_url, order_index, is_free_preview enrollments: id, user_id, course_id, completed_lessons(text[]), enrolled_at, completed_at ```
💡 사용 방법
- ① 위 프롬프트를 복사하세요
- ② Claude Code · Cursor (한국어) 또는 Lovable · Bolt · v0 (영어)에 붙여넣기
- ③
[업종]부분을 내 업종으로 교체하세요 - ④ 실행하면 강력한 MVP 완성!