프로그래머 개발동생3 Details

혼자서도 SaaS 개발 완성! 풀스택 역량 키우기
내 손으로 직접 완성하는 SaaS 프로젝트! Next.js, Supabase, Vercel 조합을 기반으로 프론트엔드, 백엔드, 데브옵스 등 전 과정을 다루며, 혼자서도 SaaS를 완성할 수 있는 역량을 가진 풀스택 개발자로 성장해 봅니다.

핵심만 한 번에 익히는 SaaS 필수 개념 모음집
회원 인증, DB 설계, 파일 저장, 결제 연동, 웹훅, 이메일 발송, 배포 등 전 과정을 통합적으로 학습하고, SaaS 운영의 핵심 기능들을 한 번에 체화해 보세요.

개발부터 수익화까지, SaaS 비즈니스 전체 워크플로우
단순히 따라 하는 클론 코딩이 아닌, 실제 결과를 만드는 서비스 제작으로! 나만의 아이디어를 기반으로 실제 유료 서비스를 만들고, 실전 매출을 키워보세요. 개발, 수익화, 운영, 성장의 전체 과정을 함께 다뤄봅니다.

개발 생산성 부스터! AI Agent & MCP 활용법
MCP 서버 연동으로 개발 생산성 200% 향상까지! QR코드 생성기, 링크 단축기, 디지털 상품 판매, LLM 활용 문서 요약 등 4가지 SaaS 프로젝트를 엔드투엔드로 진행하며 AI와 MCP 기반의 고효율 개발법을 익혀봅니다.

반복 학습으로 제대로 익히는 AI 주도 개발 방법론
단순 코드 작성을 넘어, 자연스럽게 체득하는 풀 사이클 개발 방법론! AI와 함께 다양한 실전 프로젝트를 순환하며 개발 과정을 반복적으로 훈련해 보세요. 바이브 코딩, AI 주도 개발 등 기획·설계·구현 방식을 모두 익혀봅니다.

출시 후 운영부터 지속 성장까지! 개발 이후 짚어보기
서비스 개발은 물론, 출시 후 운영 단계까지 짚어보는 실무형 프로젝트 가이드! 개발 이후 필요한 SEO 전략, 모니터링, 자동화 테스트 과정을 모두 다뤄보며 나만의 서비스를 안정적인 성장 궤도로 이끌어 보세요.
- Section 01
시간이 지나도 변하지 않는 AI 개발 방법론
01. 강의 소개 및 학습 로드맵- 수강 대상 - 강의 진행 방식 - 타 강의와 차별화된 포인트
02. 어떤 도구를 사용해야 할까?- 주요 AI 코딩 도구 사용법 및 각 장단점 소개 : Cursor, Claude Code, Codex - 강의 메인 툴 소개
03. 바이브 코딩으로 개발하는 토이 프로젝트- To-Do 앱 - 테트리스 게임 - Snake 게임 - 칸반 보드
04. 특정 도구에 한정되지 않는 AI 개발 방법론- 현 시점 바이브 코딩 & AI 주도 개발 트렌드 - 컨텍스트 엔지니어링 - 도구는 도구일 뿐 - 근본적인 동작 원리 - 큰 그림 그리기
05. 필수 개발 환경 세팅- Git SCM - Github CLI - Node.js - pnpm
06. 모든 SaaS 개발을 가능하게 하는 필수 개념 소개- Frontend vs Backend - API - Error - Framework vs Library - Database - Storage - Auth - Email - Deploy - Monitoring
07. 모든 SaaS 개발을 가능하게 하는 서비스 소개- Supabase - Toss Payments - Stripe - Lemonsqueezy - Resend - Google AI Studio - Vercel - Netlify
- Section 02
첫인상으로 설득하기 : SaaS 랜딩 페이지 한 장 전략
08. 랜딩페이지 최적화를 위한 7가지 핵심 법칙- 랜딩페이지의 중요성 (첫인상, 가설 검증) - 랜딩 페이지 구조 (Hero/Social Proof/Problem/Solution/Pricing/FAQ/CTA) - 프로젝트 초기화 (npx shadcn@latest init) - 참고하면 좋은 랜딩 페이지 관련 사이트
09. ShadCN UI로 디자인 시스템 완성하기- Components - Theming - ShadCN MCP Server - TweakCN - 21st.dev
10. 한 번에 끝내는 SaaS SEO 기초- Meta - OG(Open Graph) - Sitemap
- Section 03
시작이 반이다 : QR 코드 생성기 SaaS 서비스 개발
11. QR Code 생성기 요구사항 설계- QR 코드 생성 서비스 미리보기 - 기술스택 선택 - 프로젝트 구조 설계 - 주요 기능 정의하기 - 주요 구현사항 (이메일 인증, 스토리지, API Route, UI Component, QR 코드 생성 로직, 배포)
12. 프로젝트 초기화 및 라이브러리 설치- Vite로 React + TypeScript 프로젝트 초기화 및 기본 패키지 설치 - ShadCN UI 설정 및 필요 컴포넌트 설치
13. Supabase Auth로 이메일 인증 연동하기- Supabase 회원가입 및 프로젝트 생성 - Supabase Client 설정 및 환경변수 구성 - 이메일 회원가입/로그인 플로우 구현
14. QR 코드 생성 및 다운로드 기능 구현- QR 코드 생성 로직 구현 및 라이브러리 통합 - 실시간 미리보기 업데이트 - PNG/SVG 다운로드 기능 추가 - 색상/크기 커스터마이징 기능 추가 - 커스텀 로고 기능 추가
15. 생성된 QR 코드 스토리지에 저장하기- 생성된 QR 코드 이미지 Supabase Storage에 저장하기
16. Netlify 배포 및 서비스 확인: 도메인⋅리다이렉션까지 점검- Netlify 배포를 위한 Github Repository 생성하기 - Netlify 회원가입 및 Github 연동 및 배포하기 - 도메인, 리다이렉션 점검
- Section 04
수익화로 확장하기 : 링크 단축 SaaS 서비스 URL Shortener 개발 (국내 결제)
17. 링크 단축 서비스 요구사항 설계- 링크 단축 서비스 미리보기 - 기술스택 선택 - 프로젝트 구조 설계 - 주요 기능 정의하기 (URL 단축, 리다이렉션) - 주요 구현사항 (인증, 국내 결제, 데이터베이스, 소셜 로그인, API Route, UI Component, 배포)
18. 프로젝트 초기화 및 라이브러리 설치- Next.js 프로젝트 초기화 및 기본 패키지 설치 - 데이터베이스 ORM 설정
19. 카카오 소셜 로그인 연동 (Better Auth)- Kakao OAuth 앱 설정 및 Redirect URI 구성 - Better Auth 활용해서 Kakao Provider 연동
20. 단축 링크 생성과 리다이렉션: 짧게 만들고 빠르게 이동시키기- 데이터베이스 스키마 정의 - 짧은 코드 생성 유틸리티 함수 구현 - URL 단축 API 엔드포인트 구현 - 리다이렉션 페이지 구현 - 메인 페이지 UI 구현 (URL 입력 폼 및 결과 표시)
21. 토스 페이먼츠 결제 연동: 구독형 플랜으로 수익화하기 (Toss MCP)- 상품/플랜 설계(Free/Pro): 제한 정책 (월 링크 수) - 결제 페이지/결제 요청 API 구현 - Toss Payments MCP로 빠르게 결제 연동하기 - Vercel Cron으로 정기 구독 처리하기
22. Vercel 배포 및 서비스 확인: 도메인⋅환경변수 점검- Vercel 배포를 위한 Github Repository 생성하기 - Vercel 회원가입 및 Github 연동 및 배포하기 - 도메인, 환경변수, CronJob 점검
- Section 05
디지털 제품 판매 실전: 전자책, 구독 상품 등 Lemonsqueezy로 스토어 BookWise 구축 (해외 결제)
23. Lemonsqueezy 대시보드 세팅 및 상품 등록하기- 디지털 상품 판매 플랫폼 미리보기 - Lemonseueezy 회원가입 및 로그인 - 대시보드 설정하기 - 상품(Product) 등록하기 - API Key 생성하기 - Lemon Squeezy 개발 방식 (REST API vs SDK) - 주요 구현 사항 (해외 결제, Lemonsqueezy 스토어, 디지털 상품 판매 플랫폼, 배포)
24. Lemonsqueezy JavaScript SDK 활용 스토어 구축하기- Lemonsqueezy 환경변수 설정 - 상품 목록 페이지 구현하기 - 상품 상세 모달 구현하기 - 가격/설명/파일 크기 등 메타 표시 - 결제 URL 생성 및 연동 - 성공/취소 리다이렉트 구현
25. 결제 테스트 및 Lemonsqueezy 대시보드 확인 방법- 직접 구축한 스토어에서 결제 진행 - Lemonsqueezy 결제 플로우 이해하기
26. Vercel 배포 및 서비스 확인: 도메인⋅환경변수 점검- Vercel 배포를 위한 Github Repository 생성하기 - Vercel 회원가입 및 Github 연동 및 배포하기 - 도메인, 환경변수 점검
- Section 06
LLM 문서 요약 SaaS DocuSumm 개발: 서비스 구축과 해외 결제 연동 및 이메일 발송
27. 문서 요약 서비스 요구사항 설계- 문서 요약 서비스 미리보기 - 기술스택 선택 - 프로젝트 구조 설계 - 주요 구현사항 (LLM API, 텍스트 요약, 유튜브 영상 요약, 소셜 로그인, 해외 결제, 이메일 발송, UI Component, 배포)
28. 프로젝트 초기화 및 라이브러리 설치- Next.js 프로젝트 초기화 - ShadCN UI 설정 및 필요 컴포넌트 설치 - Gemini SDK 라이브러리 및 파일 파싱 라이브러리 설치
29. API Route 설계 및 프론트엔드 연동- UI/UX 프레임워크 개발 - Gemini API 활용 텍스트 요약 + 유튜브 영상 요약 기능 구현 - 요약 결과 스키마 설계 및 Supabase DB 저장
30. 구글 소셜 로그인 연동 (Supabase Auth)- Google OAuth 설정 - 프론트엔드 인증 관련 컴포넌트 구현
31. Stripe 결제 연동- 크레딧 충전(Pay-as-you-go) 방식의 결제 연동 - 결제 페이지 구현
32. 요약 완료 후 이메일 발송하기 (Resend)- 요약 작업 완료 시 이메일 발송하기 (Resend)
33. Vercel 배포 및 서비스 확인: 도메인⋅환경변수 점검- Vercel 배포를 위한 Github Repository 생성하기 - Vercel 회원가입 및 Github 연동 및 배포하기 - Stripe Webhook URL 설정하기 - 도메인, 환경변수 점검
- Section 07
SaaS 서비스 운영 기본기 : 모니터링, 테스트, SEO를 통한 지속 성장
34. 전체 프로젝트 리뷰 및 배운 내용 정리- 네 가지 SaaS 회고: QR 생성기, 링크 단축, 전자책 등 디지털 상품 판매, 문서 요약 - 공통 패턴: Auth/데이터베이스/결제/웹훅/배포
35. 모니터링과 테스트 유지보수 전략 (Sentry & Playwright MCP)- Sentry 설정: 에러/성능 트레이싱, 사용자 피드백 수집 - Playwright MCP E2E 테스트: 핵심 플로우 시나리오 도출 및 테스트 코드 작성 팁
36. SEO 전략 및 SaaS 운영 개요- SEO 전략: 메타/OG/사이트맵/구조화 데이터 - 콘텐츠 제품 SEO: 랜딩 카피 개선, SNS 가이드
본 강의는 Cursor, Claude Code, Next.js, React, Supabase, Vercel, Toss Payments, Stripe, Lemonsqueezy, ShadCN UI, Sentry 등 다양한 AI·개발·운영 툴로 진행되며, 원활한 수강을 위해 각 프로그램의 최신 버전 설치 및 계정 등록을 권장드립니다.
[참고사항]
1. Cursor는 강의 실습 과정에서 적극 활용되는 핵심 AI 개발 도구이며, 원활한 사용을 위해 Pro 구독(최소 월 $20) 이 필요합니다.
Pro 구독은 직접 결제/구독해 주셔야 하며, 강의에서 별도 제공되지는 않습니다.
2. Claude Code는 선택 사항이며, 원하시는 경우 각자 별도로 구독하여 사용할 수 있습니다.
강의 차원에서 구독 지원은 제공되지 않습니다.







