Next.js 15로 완성하는 실전 YouTube 클론 개발
antonio
이 24시간 튜토리얼에서는 자신만의 유튜브 클론을 만드는 방법을 배우게 됩니다. Next 15와 React 19(tRPC 포함), 서버 컴포넌트에서의 프리페칭, 클라이언트 컴포넌트에서의 서스펜스 활용, 비디오 처리, 백그라운드 작업, AI 기능 등 고급 주제들을 다룰 것입니다.
초급
Next.js, React, PostgreSQL
실시간 AI 에이전트, 회의 내용 요약, 그리고 통화 후 기능이 있는 AI 기반의 화상 회의 애플리케이션을 만들어요.





신한DS
임직원들도 이 강의를 듣고 있어요!





신한DS
임직원들도 이 강의를 듣고 있어요!
하나의 완성형 AI 서비스를 엔드투엔드로 완성
Next.js 15 기반의 AI × SaaS 서비스 구조 설계
실시간 대화형 AI 에이전트 구현
실시간 음성·영상 처리 파이프라인 구축 (화상통화 포함)
이벤트 기반의 AI 요약 파이프라인 구축
인증·구독·사용량 기반 과금 등 SaaS 전체 흐름 구현 (Polar + Better Auth)
Inngest로 백그라운드 작업 자동화 구성
CodeRabbit AI 리뷰를 통한 코드 품질 개선
AI 서비스, 한 번 만들어보고 싶은데
어디서부터 어떻게 시작해야 할지 막막하신가요?
AI 기능을 구현해보는 강의는 많지만
“제대로 된 AI 서비스를 만드는 강의”는 많지 않습니다.
이번 강의에서는
실시간 음성·영상 처리, 자동 요약·정리, 회의 Q&A 같은 AI 기능부터
인증·구독·사용량 기반 과금 구조까지 SaaS 서비스가 갖춰야 하는
전체 흐름을 하나의 앱 안에서 직접 구현해봅니다.
포트폴리오 그 이상의 경험,
Point 1
실시간 대화, 자동 요약, Q&A까지 서비스에 바로 적용할 수 있는 3가지 AI 기능을 구현합니다.
스트리밍 응답
통화가 시작되면 바로 참여해 스트리밍으로 응답하는 Real-time AI agent 구현
멀티모달 처리
음성·텍스트 입력을 모두 처리하고, 음성으로 응답하는 멀티모달 대화 흐름을 설계
AI 페르소나 설정
프롬프트(instructions)로 말투와 역할을 정의해 상황에 맞는 캐릭터형 AI 응답 생성
이벤트 기반의 AI파이프라인 자동화
회의 종료 이벤트를 트리거로
스크립트 생성 → 요약 → DB 저장까지
한 번에 처리되는 자동화 파이프라인
비동기 처리 구조로 빠르게 결과물 생성
사용자 요청과 분리된
비동기 작업으로 지연을 줄이고,
요약 결과를 빠르게 제공하는 백엔드 설계
GPT스타일의 인터페이스 구현
Stream Chat SDK로 구현하는
ChatGPT 스타일의
Q&A 인터페이스
회의 전용 어시스턴트
회의 요약·전사본을 기반으로,
회의 맥락을 이해하고
후속 질문에 답하는 AI 비서 역할
로그인·구독 결제·사용량 기반 업그레이드 등
구독형 SaaS 서비스의 기본 흐름을 경험할 수 있습니다.
Stripe/Clerk 조합보다 더 가볍고 개발자 친화적인
오픈소스 Polar + Better Auth 조합으로
인증부터 구독 결제까지의 전체 흐름을 설계합니다.
여기에, 사용량을 기준으로 무료 체험 한도를 체크하고
초과 시 요금제 업그레이드를 유도하는
일반적인 SaaS 과금 체계까지 함께 구현해봅니다.
실무에서 자주 쓰는 GitHub Flow에 AI 코드 리뷰를 더했습니다.
강의는 GitHub Flow 기반으로 실습을 진행하며,
PR마다 CodeRabbit AI가 어떤 리뷰를 남기는지
확인할 수 있도록 설정합니다.
이 과정에서
코드 스타일, 잠재 버그, 개선 포인트까지
AI와 협업하는 코드리뷰 과정을 경험할 수 있습니다.
CodeRabbit AI란?
CodeRabbit AI는 GitHub Pull Request에 자동으로 참여해, 코드 스타일과 버그, 리팩토링 아이디어까지 실시간으로 제안해주는 AI 기반 코드 리뷰 도구입니다.
• AI 기반 실시간 화상 통화
• 실시간 커스텀 에이전트
• 회의 내용에 대한 AI Q&A
• OpenAI 연동
• 실시간 화상 SDK(Stream Video)
• 실시간 채팅 SDK(Stream Chat)
• 요약, 전체스크립트, 녹화본 생성
• 영상 재생 기능
• 검색 및 키워드 하이라이트
• 회의 기록 및 상태 관리
• 구독 결제 (Polar 연동)
• 로그인/인증 시스템 (Better Auth)
• 모바일 대응(UI 반응형 디자인)
• Next.js 15 + React 19
• Tailwind CSS v4 + Shadcn UI
• Inngest 기반 백그라운드 작업
• CodeRabbit AI 코드 리뷰 자동화
이 강의는 Code with Antonio 유튜브 채널에도 공개되어 있지만,
실제로 클론코딩을 완성하려면 유료 학습자료가 꼭 필요합니다.
(전체 코드베이스, 설정 파일, 구조화된 컴포넌트 포함)
💬 오직, 인프런 강의에서만 제공됩니다!
13시간의 긴 영상을 체계적인 커리큘럼으로 나누었습니다. 원하는 부분을 빠르게 찾아 학습하고 언제든 편하게 복습할 수 있어요.
영어가 낯설어도 걱정 마세요!
한국어 더빙이 제공돼서 편하게 들을 수 있어요.
배운 내용, 그냥 넘기지 마세요 🙂
중간중간 AI 퀴즈로 재미있게 복습해볼 수 있어요!
학습 대상은
누구일까요?
AI 기능을 실제 서비스에 적용해보고 싶은 분
Next.js 15 기반의 AI × SaaS 흐름을 경험하고 싶은 분
완성형 AI 프로젝트로 포트폴리오를 강화하고 싶은 분
AI 코드리뷰(CodeRabbit) 환경을 경험해보고 싶은 분
선수 지식,
필요할까요?
JavaScript와 React에 대한 기본 지식
654
명
수강생
18
개
수강평
4
개
답변
4.1
점
강의 평점
2
개
강의
안녕하세요, 저는 소프트웨어 엔지니어 Antonio입니다. 7년 이상의 개발 경력을 가지고 있으며, 프로그래밍 세계에 매료되어 이 분야에서 일할 수 있다는 것을 큰 행운으로 생각합니다.
그동안 다양한 프로그래밍 언어와 기술을 다루는 경험을 통해 개발자로서 많은 성장을 이룰 수 있었습니다. 지금까지 쌓은 지식과 경험도 소중하지만, 저는 여전히 배우고 성장하는 데에 큰 열정을 가지고 있습니다.
이러한 경험과 열정을 바탕으로, 프로그래밍에 대한 애정을 나누고 함께 배우며 성장하기 위해 "Code With Antonio" 유튜브 채널과 학습 플랫폼을 운영하고 있습니다. 제가 만든 튜토리얼과 인사이트가 많은 분들께 도움이 되고, 프로그래밍 커뮤니티에 긍정적인 기여를 할 수 있기를 바랍니다.
전체
30개 ∙ (13시간 23분)
해당 강의에서 제공:
지식공유자님의 다른 강의를 만나보세요!
같은 분야의 다른 강의를 만나보세요!