강의

멘토링

로드맵

Inflearn brand logo image
개발 · 프로그래밍

/

웹 개발

Next.js 15로 완성하는 실전 YouTube 클론 개발

이 24시간 튜토리얼에서는 자신만의 유튜브 클론을 만드는 방법을 배우게 됩니다. Next 15와 React 19(tRPC 포함), 서버 컴포넌트에서의 프리페칭, 클라이언트 컴포넌트에서의 서스펜스 활용, 비디오 처리, 백그라운드 작업, AI 기능 등 고급 주제들을 다룰 것입니다.

(3.8) 수강평 12개

수강생 569명

  • antonio

먼저 경험한 수강생들의 후기

이런 걸 배울 수 있어요

  • YouTube 와 같은 영상 플랫폼을 직접 설계하고 구축하는 경험

  • Next.js 15(App Router) 와 TypeScript, tRPC 기반의 최신 풀스택 프레임워크와 React 19를 활용한 현대적 풀스택 웹 개발 기술 습득

  • PostgreSQL + Drizzle ORM을 활용한 타입 안정한 데이터베이스 관리 기술 습득

  • Bun 런타임을 활용한 빠르고 효율적인 서버 사이드 환경 구성 경험

  • Clerk 인증 시스템 기반의 사용자 인증 및 안정성 확보 방법 학습

  • AI 자동화 기능과 비동기 처리 설계로 실전 서비스 수준 기능 구현

  • 무한 스크롤과 데이터 흐름 최적화를 통한 실전 성능 개선

클론코딩, 실전 개발을 익히는 최적의 학습법!

클론코딩은 실제 서비스의 구조와 흐름을 몸으로 익히는 가장 빠른 방법이에요. 단순한 예제가 아닌, 우리가 잘 아는 실제 앱을 구현하다 보면 기술이 어떻게 조합되고 동작하는지 자연스럽게 이해하게 됩니다.

기능 하나하나가 왜 필요한지, 어떤 순서로 만들어야 효율적인지 직접 부딪히며 배우기 때문에, 실전 감각과 설계력까지 동시에 키울 수 있습니다.

이번 강의에서는 YouTube 스타일의 영상 플랫폼을 만들며 Next.js 15, tRPC, Drizzle, Clerk, Bun 등 최신 웹 기술로 구성된 현업 수준의 풀스택 애플리케이션을 직접 구축해봅니다.

실제 서비스 수준
유튜브를 만들 수 있습니다.

실시간 영상 처리 & AI 콘텐츠 생성

  • 🎥 화질 선택이 가능한 비디오 플레이어

  • 🎬 Mux를 활용한 실시간 영상 처리


  • 🖼 AI로 썸네일/제목/설명 자동 생성

  • 📝 자막 자동 생성


개인화 피드 & 반응형 UI 설계

  • 🗂 사용자 맞춤 재생목록 관리 기능

  • 🔄 여러 개의 콘텐츠 피드 구성

  • 🎯 개인별 시청 기록 추적

  • 📱 모든 기기에 최적화된 반응형 디자인

댓글·좋아요·대시보드 구현

  • 💬 인터랙티브한 댓글/답글 시스템

  • 👍 좋아요 및 구독 시스템

  • 📊 크리에이터 스튜디오
    (조회수, 좋아요, 트래픽 관리)

구현에 사용한 핵심 기술

  • 📦 모듈 기반의 구조적 설계

  • 🗄 DrizzleORM 기반 PostgreSQL 연동

  • 🚀 Next.js 15 & React 19 기반 최신 스택

  • 🔄 tRPC로 구현하는 타입 안정 API

  • 💅 TailwindCSS와 ShadcnUI 활용

최종 결과물을 직접 확인해보세요!

전 세계 38만+ 구독자가 선택한
클론코딩 전문가, 안토니오!

클론코딩 교육의 최강자가 만든 2025년 최신 강의

38만 구독자, 1,440만 조회수! 실무형 클론코딩 교육 최강자!
25개 이상의 클론코딩 강의를 설계한 안토니오의 노하우를 담은 2025년 최신 강의를 만나보세요.
완성도 있는 기능 설계와 구현 과정을 따라가며, 실전 프로젝트를 처음부터 끝까지 경험할 수 있습니다.

Next.js 15 등 요즘 개발자들이 쓰는 기술 조합 그대로

Next.js 15(App Router), React 19, Drizzle ORM 등 요즘 실무에서 가장 주목받는 풀스택 조합을 담았습니다. 인증, DB, API, 영상 처리, AI 자동화, 피드, 플레이리스트, 댓글 시스템, 검색, 구독, 배포까지 YouTube 스타일의 풀스택 서비스를 하나하나 직접 만들어봅니다.

서비스에 생성형 AI 기능을 더하다

YouTube처럼 생성형 AI를 활용해 썸네일과 제목·설명(description)을 자동 생성하는 기능을 구현합니다. 단순히 AI 기능을 얹는 수준이 아닌, 지연이나 오류를 자동으로 처리하는 백그라운드 작업 흐름까지 설계하며, 실제 서비스 수준에서 안정적으로 동작하는 AI 시스템을 만들어봅니다.

11가지 최신 기술
하나의 서비스를 완성합니다.

가장 실무적인 최신 풀스택 조합

Next.js 15 + React 19 + TypeScript

Next.js 15(App Router)의 파일 기반 라우팅과 React 19는 최신 웹 트렌드를 반영한 강력한 조합입니다. 여기에 TypeScript까지 더하면 에러를 줄이고 유지보수가 쉬워져, 실무 투입에도 바로 활용할 수 있습니다. 요즘 가장 많이 쓰이는 조합인 만큼, 기본기와 함께 실전 설계 감각까지 함께 익힐 수 있습니다.

타입 안전 API 통신

tRPC

API 명세 없이도 프론트와 백엔드를 자동으로 연결할 수 있는 타입 기반 프레임워크입니다.
타입스크립트의 강점을 극대화하며, 프론트와 백엔드 간 코드 일관성을 보장해 유지보수가 쉬워집니다. 빠른 속도와 생산성을 동시에 챙길 수 있어 최근 실무 프로젝트에서 각광받고 있는 트렌디한 기술입니다.

디자인까지 코드처럼 빠르게
TailwindCSS + Shadcn UI

CSS를 고민하지 않아도 되도록 도와주는 Tailwind와, 세련된 컴포넌트를 갖춘 Shadcn UI의 조합은 빠르게 높은 퀄리티의 UI를 구현하는 데 최적화되어 있습니다. 스타일 가이드를 지키면서도 유연한 커스터마이징이 가능해, 개발과 디자인의 경계를 자연스럽게 넘나들 수 있는 실전 경험을 제공합니다.

안전성과 생산성을 모두 갖춘 DB설계
PostgreSQL + Drizzle ORM

검증된 오픈소스 DB인 PostgreSQL의 안정성과, 타입 기반으로 코드를 설계할 수 있는 Drizzle ORM의 생산성이 만나 데이터 계층을 보다 안전하고 효율적으로 구성할 수 있습니다. SQL과 코드 간 불일치 없이 관리할 수 있어, 데이터 중심의 서비스에 꼭 필요한 설계 역량을 쌓을 수 있습니다.

복잡한 인증을 쉽게 구현
Clerk

소셜 로그인, 이메일 인증, 세션 관리까지 포함한 실제 서비스용 인증 시스템을 단 몇 줄의 코드로 구현할 수 있습니다. 직접 구현하면 복잡하고 보안 이슈도 많은 인증 로직을 SaaS로 간편하게 대체할 수 있어, 빠른 MVP 개발이나 안정성을 중요시하는 서비스에서 점점 더 널리 쓰이고 있습니다.

Youtube급 영상 처리 경험
Mux

영상을 업로드하면 자동으로 트랜스코딩되고, 각 디바이스에 맞춰 스트리밍까지 처리되는 강력한 미디어 플랫폼입니다. YouTube와 같은 서비스에서 필요한 핵심 기능을 클론하면서 영상 처리 전반을 직접 설계·구축해보는 경험은, 실무에서 미디어 서비스를 다룰 때 강력한 경쟁력이 됩니다.

요즘 주목받는 런타임, Bun도 만나볼 수 있어요!

Bun은 빠른 실행 속도와 빌드 성능으로, 요즘 최신 프로젝트에서 주목받고 있는 JavaScript 런타임입니다.

수강 전 확인해주세요! 📢

이 강의는 Code with Antonio 유튜브 채널에도 공개되어 있지만,
실제로 클론코딩을 완성하려면 유료 학습자료가 꼭 필요합니다.
(전체 코드베이스, 설정 파일, 구조화된 컴포넌트 포함)

💬 오직, 인프런 강의에서만 제공됩니다!

  • 23시간의 긴 영상을 체계적인 커리큘럼으로 나누었습니다. 원하는 부분을 빠르게 찾아 학습하고 언제든 편하게 복습할 수 있어요.

  • 영어가 낯설어도 걱정 마세요!

    한국어 더빙이 제공돼서 편하게 들을 수 있어요.

  • 배운 내용, 그냥 넘기지 마세요 🙂

    중간중간 AI 퀴즈로 재미있게 복습해볼 수 있어요!


이런 분들께
추천드려요

학습 대상은
누구일까요?

  • 최신 웹 개발 트렌드를 학습하고 실제 프로젝트에 적용하고 싶은 개발자

  • Next.js 15, React 19, tRPC 기반의 모던 앱 설계를 경험하고 싶은 개발자

  • 유튜브 클론 프로젝트를 직접 완성해보고 싶은 개발자

  • 포트폴리오를 강화하고 싶은 주니어 개발자

선수 지식,
필요할까요?

  • JavaScript와 React에 대한 기본 지식

안녕하세요
입니다.

569

수강생

12

수강평

4

답변

3.8

강의 평점

1

강의

안녕하세요, 저는 소프트웨어 엔지니어 Antonio입니다. 7년 이상의 개발 경력을 가지고 있으며, 프로그래밍 세계에 매료되어 이 분야에서 일할 수 있다는 것을 큰 행운으로 생각합니다.

그동안 다양한 프로그래밍 언어와 기술을 다루는 경험을 통해 개발자로서 많은 성장을 이룰 수 있었습니다. 지금까지 쌓은 지식과 경험도 소중하지만, 저는 여전히 배우고 성장하는 데에 큰 열정을 가지고 있습니다.

이러한 경험과 열정을 바탕으로, 프로그래밍에 대한 애정을 나누고 함께 배우며 성장하기 위해 "Code With Antonio" 유튜브 채널과 학습 플랫폼을 운영하고 있습니다. 제가 만든 튜토리얼과 인사이트가 많은 분들께 도움이 되고, 프로그래밍 커뮤니티에 긍정적인 기여를 할 수 있기를 바랍니다.

 

커리큘럼

전체

40개 ∙ (23시간 41분)

해당 강의에서 제공:

수업자료
강의 게시일: 
마지막 업데이트일: 

수강평

전체

12개

3.8

12개의 수강평

  • goodsosbva4133님의 프로필 이미지
    goodsosbva4133

    수강평 5

    평균 평점 3.6

    수정됨

    3

    20% 수강 후 작성

    Poor Korean description

    • jojoldu2inflab

      Hello Hyunseong This is Hyangro from Inflab. We are truly sorry for the inconvenience. If you could tell us what you mean by the Korean explanation being insufficient, we will try to improve it. Regarding the quality issues with translation and dubbing, we have thoroughly reviewed everything again and improved the deficient system issues, resulting in several improvements being applied. We will continue to keep your feedback in mind and work to create a better system. Thank you very much for using Inflearn, and we will repay you with better service.

  • ej90611066님의 프로필 이미지
    ej90611066

    수강평 2

    평균 평점 5.0

    수정됨

    5

    10% 수강 후 작성

    It's hard to call it 'clone coding' because it has such diverse features and explains well why each tech is used, allowing you to grasp design principles too. Among YouTube clone coding courses, this one is personally meaningful as it lets you utilize AI and various stacks in diverse ways!

    • codewithantonio
      지식공유자

      Thank you so much for the thoughtful review! I’m really glad you found the explanations helpful and meaningful, especially around architecture and AI usage. Hope the course continues to inspire you as you explore different stacks 🙏 Translation (I used ChatGPT): 정성스러운 리뷰 정말 감사합니다! 설계나 AI 활용 부분에서 설명이 도움이 되셨다니 너무 기쁩니다. 앞으로도 다양한 스택을 탐색하실 때 이 강의가 좋은 영감이 되길 바랍니다 🙏

  • divdivdivv님의 프로필 이미지
    divdivdivv

    수강평 4

    평균 평점 5.0

    5

    30% 수강 후 작성

    I'm enjoying the lecture!

    • codewithantonio
      지식공유자

      Thank you so much! I'm really glad to hear you're enjoying the lecture 🙏 Translation (I used ChatGPT): 정말 감사합니다! 강의를 즐기고 계시다니 저도 정말 기쁩니다 🙏

  • dydals34402231님의 프로필 이미지
    dydals34402231

    수강평 6

    평균 평점 5.0

    수정됨

    5

    30% 수강 후 작성

    Listening to the lectures I had only encountered on YouTube, translated into Korean through Inflearn, felt much newer and different. Thanks to that, I feel like my understanding has also increased! In the future, I'm curious if you have plans to create lectures that proceed not only with the method of handling both front and server solely with Next.js but also by building a monorepo environment with server frameworks like NestJS, Express, and Hono!

    • codewithantonio
      지식공유자

      Thank you so much for the thoughtful feedback! I'm really happy to hear that the Korean-translated lectures helped deepen your understanding. I also appreciate your suggestion. Lectures covering monorepo environments and frameworks like NestJS, Express, and Hono sound like a great idea. I’ll definitely keep that in mind for future content. Translation (I used ChatGPT): 정성스러운 피드백 정말 감사합니다! 한국어로 번역된 강의가 이해에 도움이 되었다니 저도 정말 기쁩니다. 또한 제안해 주신 내용도 정말 좋네요. NestJS, Express, Hono 같은 서버 프레임워크를 활용한 모노레포 환경에 대한 강의는 확실히 가치 있는 주제라고 생각합니다. 앞으로 콘텐츠 제작 시 꼭 참고하겠습니다!

  • haeyul님의 프로필 이미지
    haeyul

    수강평 19

    평균 평점 4.6

    5

    18% 수강 후 작성

    ₩55,000

    비슷한 강의

    같은 분야의 다른 강의를 만나보세요!