← 템플릿 목록
교육중급🌍 Teachable 모델

온라인 코스 플랫폼

내 30년 경력을 온라인 코스로 판매. 영상 + 텍스트 + 과제 구조. 한 번 만들면 자는 동안에도 수익.

🌍 해외 실제 검증 사례

Teachable / Kajabi

창업자: 1인 강사/전문가

Kajabi $2B 밸류 · 1인 강사 연 수억

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
```

💡 사용 방법

  1. ① 위 프롬프트를 복사하세요
  2. Claude Code · Cursor (한국어) 또는 Lovable · Bolt · v0 (영어)에 붙여넣기
  3. [업종] 부분을 내 업종으로 교체하세요
  4. ④ 실행하면 강력한 MVP 완성!
수강 상담 카톡하기