STACK
웹·앱·클라우드가 한 번에 연결됩니다
Next.js, Flutter, Supabase, Prisma, Firebase FCM, AWS S3·CloudFront, Toss Payments를 하나의 LMS 흐름 안에서 다룹니다.
PORTFOLIO EVIDENCE CAMPAIGN
보여줄 수 있는 LMS를 만드세요
단순 화면 복제가 아니라 강의 판매, 결제, 수강 권한, HLS 재생, 알림, 다국어 더빙, 웹·앱 배포까지 이어지는 온라인 교육 플랫폼 MVP를 구현합니다. 결과물 화면과 구조가 남는 프로젝트라 포트폴리오와 실무 응용 모두에 강합니다.
44개 수업 · 9시간 11분 구성Next.js 웹 LMS와 Flutter 앱 흐름 동시 학습AWS S3·CloudFront 기반 HLS 스트리밍 실습Supabase·Prisma·Firebase FCM으로 데이터와 알림 연결토스페이먼츠 결제와 수강 권한 흐름 구현평점 5.0 · 수료증 제공
인프런 클론코딩 올인원 LMS 인프런 강의
OUTPUT
완성 화면이 남는 클론 프로젝트
홈, 강의 상세, 수강 화면, 관리자 영역, 판매자 흐름까지 온라인 강의 서비스처럼 설명 가능한 산출물을 만듭니다.
44개
수업 · 9시간 11분 구성
Next.js 웹 LMS와 Flutter 앱 흐름 동시 학습
AWS S3·CloudFront 기반 HLS 스트리밍 실습
Supabase·Prisma·Firebase FCM으로 데이터와 알림 연결
STREAMING
강의 플랫폼의 핵심인 HLS를 경험합니다
단순 영상 업로드가 아니라 강의 재생, 자막, 오디오 트랙 확장, CloudFront 배포까지 서비스 관점으로 정리합니다.
COMMERCE
결제 후 수강 권한까지 이어집니다
강의 구매, 결제 성공·실패, 웹훅, 수강 권한 부여처럼 실제 판매 플랫폼에서 필요한 흐름을 구현합니다.
PORTFOLIO
면접과 제안서에서 설명할 거리가 생깁니다
‘무엇을 만들었는가’보다 중요한 ‘어떤 서비스 문제를 어떻게 연결했는가’를 구조적으로 보여줄 수 있습니다.
Visual Proof
강의에서 보게 될 화면의 결
강의 커버와 참고 이미지를 바탕으로, 오늘 선택한 디자인 톤에 맞춘 광고용 화면 흐름을 보여줍니다.
LMS 홈 화면 레퍼런스
강의 검색, 카테고리, 시즌제 강의 카드, 판매자 CTA가 배치된 실제 교육 마켓형 화면입니다.
데스크톱 강의 플랫폼 화면
온라인 교육 플랫폼 MVP에서 필요한 탐색, 강의 카드, 상세 진입 구조를 포트폴리오 화면으로 확인할 수 있습니다.
모바일 대응 화면
웹만 만드는 프로젝트를 넘어 모바일 사용 흐름과 앱 확장 관점까지 함께 이해할 수 있습니다.
강의 상세와 콘텐츠 카드
강의 소개, 커리큘럼, 구매 판단 요소를 구성하는 상세 페이지 흐름을 실전 서비스처럼 다룹니다.
운영과 분석까지 확장되는 구조
검색 콘솔, 태그 매니저, 분석 화면처럼 배포 후 운영을 떠올릴 수 있는 요소까지 프로젝트 맥락에 포함됩니다.
WHY NOW
토이 프로젝트보다 강한 포트폴리오가 필요할 때
요즘 포트폴리오는 예쁜 UI 하나만으로 설득하기 어렵습니다. 채용 담당자, 클라이언트, 초기 팀이 보고 싶은 것은 사용자가 가입하고, 콘텐츠를 찾고, 결제하고, 권한을 얻고, 실제로 서비스를 이용하는 전체 흐름입니다.
이 강의는 인프런 클론코딩이라는 익숙한 출발점에서 시작하지만 목표는 단순 복제가 아닙니다. 온라인 교육 플랫폼이 갖춰야 할 핵심 기능을 MVP 범위로 연결하며, 결과물 자체가 ‘복합 서비스 구현 경험’의 증거가 되도록 설계되어 있습니다.
특히 프리랜서나 1인 개발자라면 강의 판매 사이트, 사내 교육 플랫폼, 크리에이터 강의몰 같은 제안 상황에서 바로 설명 가능한 레퍼런스를 확보할 수 있습니다.
- 단순 CRUD를 넘어 결제·권한·영상·알림까지 포함
- 웹 화면과 모바일 앱 흐름을 함께 경험
- 강의 플랫폼 개발 프로젝트로 설명 가능한 결과물
- MVP 제안과 프리랜서 포트폴리오에 활용하기 좋은 주제
SYSTEM MAP
강의 판매 서비스의 흐름을 끝까지 연결합니다
온라인 교육 플랫폼은 강의 카드 몇 개로 완성되지 않습니다. 수강생은 강의를 탐색하고, 상세 페이지에서 구매를 결정하고, 결제를 완료한 뒤 권한을 받아 강의를 재생합니다. 판매자는 강의를 등록하고, 운영자는 승인과 관리를 해야 합니다.
이 강의는 이 흐름을 하나의 서비스 시스템으로 바라봅니다. Next.js 기반 웹 LMS에서 핵심 화면을 구현하고, Flutter 앱 흐름까지 확장하며, Supabase와 Prisma로 데이터 구조를 다룹니다.
따라서 수강 후에는 ‘Next.js를 배웠다’가 아니라 ‘LMS MVP의 주요 도메인과 기능 연결을 구현해봤다’고 말할 수 있습니다.
- 강의 목록, 검색, 카테고리, 상세 페이지 구성
- 수강 신청, 결제, 수강 권한 부여 흐름
- 강사·판매자·관리자 운영 화면의 역할 분리
- Supabase와 Prisma를 활용한 데이터 설계
- Flutter 앱 배포 흐름까지 이어지는 학습
Decision Point
커리큘럼과 미리보기를 바로 확인하세요
랜딩은 강의의 핵심 판단 기준만 압축합니다. 가격, 섹션별 수업, 수강평, 미리보기는 인프런 상세 페이지에서 최종 확인하는 흐름이 가장 정확합니다.
VIDEO DELIVERY
HLS 스트리밍은 LMS 포트폴리오의 결정적 차이입니다
교육 플랫폼에서 영상 재생은 핵심 기능입니다. 하지만 많은 클론 프로젝트는 영상을 단순 파일 재생 수준으로 처리하고 끝납니다. 실제 서비스에서는 영상 저장, 전송, 재생 안정성, 자막, 다국어 오디오, 배포 전략까지 고려해야 합니다.
이 강의는 AWS S3와 CloudFront, Route53, HLS 기반 재생 구조를 다루며 강의 플랫폼다운 기술적 깊이를 더합니다. HLS.js, Shaka Player 같은 재생 관점도 함께 이해하면 결과물의 설득력이 달라집니다.
포트폴리오에서 ‘영상 강의 플랫폼을 만들었다’고 말하려면 이 지점이 중요합니다. 단순 페이지 구현이 아니라 콘텐츠 전달 인프라를 고려했다는 증거가 되기 때문입니다.
- AWS S3 기반 영상 및 정적 파일 관리
- CloudFront를 통한 콘텐츠 전송 구조
- HLS 스트리밍 재생 흐름 이해
- 자막과 다국어 오디오 확장 관점
- 온라인 교육 플랫폼의 실제 기술 요구사항 경험
PAYMENT & ACCESS
결제 버튼 다음의 서비스 로직까지 배웁니다
강의 판매 사이트에서 결제 연동은 시작일 뿐입니다. 결제가 성공했는지 확인하고, 실패했을 때 어떻게 처리할지 정하고, 구매한 사용자에게 수강 권한을 부여해야 합니다. 이 과정이 빠지면 포트폴리오는 실제 서비스보다 데모에 가까워집니다.
강의에서는 토스페이먼츠 연동을 통해 구매 흐름을 다루고, 결제 이후 수강 권한과 강의 접근 흐름까지 연결합니다. 결제, 사용자, 강의, 권한이 어떻게 맞물리는지 이해할 수 있습니다.
이 경험은 LMS 제작뿐 아니라 SaaS, 멤버십, 예약, 콘텐츠 커머스처럼 유료 권한이 필요한 서비스 전반에 응용할 수 있습니다.
- 토스페이먼츠 결제 성공·실패 흐름
- 구매 후 수강 권한 부여 구조
- 강의 접근 제어와 사용자 상태 관리
- 유료 콘텐츠 서비스에 재사용 가능한 패턴
- 웹훅과 서버 API 흐름의 실전 감각
MULTI PLATFORM
웹에서 끝내지 않고 앱 배포까지 봅니다
실제 교육 서비스는 웹만으로 끝나지 않는 경우가 많습니다. 수강생은 모바일에서 강의를 이어 보고, 알림을 받고, 앱을 통해 반복 접속합니다. 그래서 LMS 포트폴리오도 모바일 경험을 함께 설명할 수 있으면 훨씬 강해집니다.
이 강의는 Next.js 웹 구현에 더해 Flutter 앱 흐름을 함께 다룹니다. Xcode, Android Studio를 활용한 iOS App Store와 Google Play Store 배포 흐름까지 포함되어 있어, 앱 서비스 출시 과정을 처음부터 끝까지 조망할 수 있습니다.
Firebase FCM 알림까지 연결하면 단순 앱 화면이 아니라 사용자 재방문과 수강 지속을 고려한 제품 경험으로 확장됩니다.
- Next.js 웹 LMS와 Flutter 앱의 연결 관점
- iOS App Store 배포 흐름
- Google Play Store 배포 흐름
- Firebase FCM을 활용한 알림 기능
- 웹·앱 통합 프로젝트로 포트폴리오 확장
DIFFERENTIATION
다국어 더빙까지 넣으면 결과물이 달라집니다
강의 플랫폼 시장에서 차별화는 콘텐츠 수만으로 만들어지지 않습니다. 글로벌 수강생을 고려한 다국어 자막, 오디오 트랙, 더빙 같은 기능은 서비스의 방향성을 보여주는 강력한 요소입니다.
이 강의는 ElevenLabs를 활용한 다국어 자동 더빙 관점까지 LMS 프로젝트 안에 포함합니다. 단순히 기능을 추가하는 수준이 아니라, 교육 콘텐츠가 여러 언어로 확장될 수 있는 구조를 생각하게 만듭니다.
포트폴리오에서 이 요소는 좋은 대화 소재가 됩니다. ‘클론코딩을 했다’가 아니라 ‘교육 플랫폼의 확장성과 차별화 기능까지 고려했다’고 설명할 수 있기 때문입니다.
- ElevenLabs 기반 다국어 더빙 흐름
- 자막과 오디오 트랙 확장 관점
- 글로벌 교육 서비스로 확장 가능한 구조
- LMS 차별화 기능을 포트폴리오에 반영
- 콘텐츠 플랫폼 기획과 개발을 함께 이해
COURSE SPEC
중급 개발자를 위한 밀도 있는 9시간 11분
이 강의는 HTML, CSS, JavaScript 기초와 React 또는 Flutter 경험이 있는 학습자에게 특히 잘 맞습니다. Git, 데이터베이스, API 흐름을 알고 있다면 프로젝트 구조를 더 빠르게 흡수할 수 있습니다.
총 44개 수업으로 구성되어 있으며, 수강기한은 무제한이고 수료증이 제공됩니다. 난이도는 중급이상입니다. 단순 입문 강의라기보다 이미 기본기를 갖춘 개발자가 실전형 프로젝트를 통해 포트폴리오 밀도를 높이는 데 적합합니다.
강의 가격은 77,000원입니다. 웹, 앱, 결제, 스트리밍, 알림, 배포, 다국어 기능을 하나의 LMS 프로젝트에서 연결해보는 경험을 생각하면, 결과물 중심 학습에 투자하기 좋은 구성입니다.
- 수업 44개 · 총 9시간 11분
- 난이도 중급이상
- 수강기한 무제한
- 수료증 제공
- 지식공유자 ludgi
- 현재 평점 5.0
FAQ
수강 전 자주 묻는 질문
이 강의는 단순히 인프런 UI를 따라 만드는 강의인가요?
아닙니다. 인프런 클론코딩이라는 익숙한 형태를 출발점으로 삼지만, 실제 목표는 강의 판매, 결제, 수강 권한, HLS 스트리밍, 알림, 관리자 흐름, 웹·앱 배포까지 포함한 LMS MVP 구현입니다.
어느 정도 실력이 있어야 수강하기 좋나요?
난이도는 중급이상입니다. HTML, CSS, JavaScript 기초가 있고 React 또는 Flutter를 한 번이라도 다뤄본 경험이 있다면 더 수월합니다. Git/GitHub과 데이터베이스 기본 개념을 알고 있으면 프로젝트 흐름을 이해하기 좋습니다.
포트폴리오로 활용하기에 어떤 점이 강한가요?
단순 화면 구현이 아니라 사용자의 강의 탐색, 구매, 결제, 권한 부여, 영상 재생, 알림, 배포까지 이어지는 서비스 흐름을 설명할 수 있습니다. 프리랜서 제안, 취업 포트폴리오, 스타트업 MVP 검증 사례로 활용하기 좋습니다.
AWS나 Supabase 계정이 꼭 필요한가요?
프로젝트 흐름을 실습하려면 Supabase, Firebase, AWS, Vercel, 토스페이먼츠 등 관련 서비스 계정이 필요할 수 있습니다. 일부 서비스는 카드 등록이나 별도 설정이 필요할 수 있으므로 실습 전 준비하는 것이 좋습니다.
모바일 앱 배포까지 실제로 다루나요?
네. Flutter 앱 연계와 함께 Xcode, Android Studio를 활용한 iOS App Store 및 Google Play Store 배포 흐름을 다룹니다. 단, iOS 앱 빌드와 배포 과정에는 macOS와 Xcode 환경이 필요합니다.
강의 구매는 어디에서 하나요?
이 랜딩페이지의 ‘인프런에서 강의 보기’ 버튼을 통해 인프런 강의 페이지에서 확인하고 구매할 수 있습니다. 강의 정보, 수강평, 커리큘럼을 확인한 뒤 학습을 시작하세요.
Course CTA
지금 보는 페이지의 목적은 하나입니다.
강의를 듣고 손에 남을 결과물을 판단하게 하는 것.
가격, 커리큘럼, 수강평, 미리보기는 인프런 상세 페이지에서 최종 확인하세요. 광고용 링크는 항상 강의 상세로 연결됩니다.
https://www.ludgi.ai/landing/inflearn-ad-inflearn-lms-clone-nvidia-20260530-225051-5ccda7bb