바이브 코딩: Next.js + FastAPI + Faster-Whisper로 음성 메모 앱 만들기

Name: 바이브 코딩: Next.js + FastAPI + Faster-Whisper로 음성 메모 앱 만들기
Price: 5500 KRW

Whisper를 로컬에서 실행하고, FastAPI와 Next.js를 활용해 AI 음성 인식 앱을 빠르게 개발하는 실전 프로젝트 강의입니다. 실시간 음성 인식까지 구현하며, 짧은 시간 안에 간단한 포트폴리오로 활용할 수 있는 결과물을 완성할 수 있습니다.

(3.8) 수강평 4개

수강생 70명

ludgi

whisper FastAPI Next.js openai-whisper

초급자를 위해 준비한
[프론트엔드, 백엔드] 강의입니다.

이런 걸 배울 수 있어요

nextjs
whisper
fastapi
바이브코딩

Faster-Whisper

✅ Faster-Whisper의 로컬 실행 방법
Whisper 모델을 API 호출 없이 로컬에서 실행하는 방법을 배웁니다.

✅ CPU 환경에서 Whisper 실행
일반적으로 Whisper는 GPU 환경에서 실행되지만, 이 강의에서는 CPU 전용으로 설정하여 실행하는 방법을 다룹니다. CUDA 설정 없이도 Whisper를 활용할 수 있도록 최적화하는 과정을 학습합니다.

✅ FastAPI를 활용한 음성 변환 API 개발
FastAPI를 이용해 음성을 텍스트로 변환하는 API를 개발하고, 이를 Next.js와 연동하여 실제 서비스처럼 동작하는 음성 메모 웹 앱을 구축하는 방법을 배웁니다.

이 강의를 통해 Whisper 모델을 로컬에서 실행하고, CPU에서도 효율적으로 동작할 수 있도록 구성하는 방법을 익힐 수 있습니다. 🚀

바이브코딩

✅ 바이브 코딩을 통한 Next.js 구현
이 강의에서는 바이브 코딩 방식으로 Next.js 프론트엔드를 전부 구현할 예정입니다. 짧은 이론과 짧은 설명으로, cursor ai을 통해 구현하는 방식입니다. 즉, 강의에서 바로 프로젝트를 완성해 가는 방식으로 진행됩니다.

✅ FastAPI와 Next.js 연동
FastAPI로 구현한 faster-Whisper 음성 변환 API를 Next.js 프론트엔드와 연동하는 과정을 실습합니다. 이를 통해 실제로 음성을 업로드하고 변환된 텍스트를 UI에 출력하는 기능을 완성할 수 있습니다.

✅ 포트폴리오 초안 프로젝트를 빠르게 완성
이론보다는 바로바로 기능을 구현하는 데 집중하여 강의가 끝나면 하나의 간단한 음성 인식 웹 앱을 갖게 됩니다. 짧은 시간 안에 경험을 쌓을 수 있으며, 이를 본인만의 포트폴리오 프로젝트로 고도화 하여 활용할 수 있습니다.

이런 분들께
추천드려요!

학습 대상은
누구일까요?

Whisper 모델을 로컬에서 직접 실행해보고 싶은 분
FastAPI와 Next.js를 활용해 AI 기반 프로젝트를 개발하고 싶은 분
실시간 음성 인식 기능을 구현해 보고 싶은 초보 개발자
개인 포트폴리오로 활용할 AI 음성 인식 프로젝트초안을 만들어보고 싶은 분
짧은 시간 안에 프로젝트를 완성하고 싶은 분

선수 지식,
필요할까요?

Python 기본 문법 (FastAPI 활용을 위해)
JavaScript 및 React 기본 개념 (Next.js 활용을 위해)
REST API 및 WebSocket 개념 (백엔드-프론트엔드 연동을 위해)

안녕하세요
ludgi입니다.

364

명

수강생

개

수강평

개

답변

4.3

점

강의 평점

개

강의

안녕하세요, 주식회사 럿지의 대표입니다.

저는 스타트업, 금융권, 공공기관 등 다양한 분야에서 프로젝트를 진행하며,

개발뿐만 아니라 서비스를 직접 운영하는 경험을 쌓아왔습니다.

이 과정에서 팀원 및 프리랜서들과 협업하며 문제를 해결하고 프로젝트를 완성하는 능력을 길렀습니다.

특히, 단순히 개발자로서의 역할을 넘어서 자신의 서비스를 운영하고자 하는 꿈을 가진 분들께 더 많은 도움을 드릴 수 있다고 생각합니다.

완성의 즐거움과 성취감을 함께 경험하며 성장해 나가길 기대합니다. 감사합니다.

커리큘럼

전체

11개 ∙ (1시간 13분)

해당 강의에서 제공:

수업자료

섹션 1. 개발 환경 설정

4개 ∙ (19분)

1. 환영합니다
03:34
2. anaconda 설치 및 간단 사용방법 안내
02:18
3. FastAPI서버 실행 및 필수 패키지 설치
02:32
4. 바이브 코딩이란
10:38

섹션 2. Faster-Whisper 설치 및 테스트 (백엔드)

2개 ∙ (13분)

5. Faster-Whisper 설치 및 기본 사용법 적용
04:46
6. WebSocket을 활용한 실시간 음성 인식 API 구현
08:44

섹션 3. nextjs로 프론트엔드 기능 구현

2개 ∙ (19분)

7. Next.js로 음성 메모 UI 구성 및 FastAPI 연동
16:37
8. 프로젝트 구조 변경
02:35

섹션 4. 그냥 계속 배포하기

3개 ∙ (21분)

강의 게시일: 2025. 03. 30.

마지막 업데이트일: 2025. 05. 13.

수강평

전체

4개

3.8

4개의 수강평

김성욱
수강평 2
∙
평균 평점 5.0
2025. 05. 29.
5
36% 수강 후 작성
beom_yoon94
수강평 4
∙
평균 평점 5.0
2025. 05. 30.
5
36% 수강 후 작성
무능한아기
수강평 2
∙
평균 평점 4.0
2025. 04. 20.
3
36% 수강 후 작성
처음 배우는 개념이면서 Vibe Coding에 대한 개념에 대해서 알고 관심 갖기 좋은데 환경 구축부터 전체적으로 조금 더 자세히 설명해주셨으면 좋겠습니다.
pudici1
수강평 3
∙
평균 평점 1.7
2025. 06. 04.
2
82% 수강 후 작성

ludgi님의 다른 강의

지식공유자님의 다른 강의를 만나보세요!

AI로 기획부터 개발까지! LLM 주도 Next.js 쇼핑몰 제작

ludgi

v0, cursor AI 및 각종 LLM과 함께 PRD부터 AI 상품 추천까지! 실전 프로젝트로 Next.js 쇼핑몰을 완성하세요

초급

nextjs, ChatGPT, LLM

찍어먹는 Next.js 풀코스 (영어 음성 & 한글 자막)

ludgi

찍어먹는 Next.js 풀코스! GraphQL, Redis, RabbitMQ, Prisma, TailwindCSS, Docker Compose, Cypress, Prometheus, grafana 등 최신 기술로 실전 프로젝트를 완성하며, App Router와 Page Router까지 모두 경험합니다.

중급이상

Next.js, React, GraphQL

찍어먹는 Next.js 풀코스 (한국어 더빙)

ludgi

중급이상

Next.js, React, GraphQL

Next.js와 yolov11로 화재감지 시스템 구축하기

ludgi

Next.js, YOLOv11, FastAPI를 활용하여 실시간 화재 감지 시스템을 구축하는 방법을 배웁니다.

초급

Next.js, yolo, Python

React와 Next.js로 배우는 입문용 프론트엔드 프로젝트: Tailwind CSS와 정적 배포까지 완성하기

ludgi

Next.js와 Tailwind CSS를 활용한 프론트엔드 입문 강의입니다. 백엔드 없이 정적 배포까지 완료하며, 초보자도 완성의 성취감을 느낄 수 있도록 설계되었습니다

입문

Next.js, TailwindCSS, aws-s3

비슷한 강의

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

Next + React Query로 SNS 서비스 만들기

제로초(조현영)

리액트19 & 넥스트15 & 리액트쿼리5 & Next Auth5 & MSW2 & socket.io4 & zustand 스택으로 트위터(X.com)와 유사한 SNS 서비스를 만들어봅니다. 끝으로 검색엔진 최적화를 위한 SSR까지!

중급이상

Next.js, React, react-query

[국내 최초] 인프런 풀스택 클론코딩 Part 1 - Next.js x NestJS

로펀

🔥 국내 최초! Next.js 15와 NestJS를 활용한 국내 최초의 풀스택 강의입니다. Node.js 생태계 안에서 프론트부터 백엔드, 배포까지 언어 전환 없이 진짜 풀스택 흐름을 하나로 체험할 수 있는 강의입니다. 인프런을 똑 닮은 강의 플랫폼을 직접 만들며, 실무 수준 구조를 익히고 완성형 포트폴리오도 함께 가져가세요!

초급

AWS, Docker, Next.js

찍어먹는 Next.js 풀코스 (한국어 더빙)

ludgi

중급이상

Next.js, React, GraphQL

FastAPI 찍어먹기 (FastAPI + React.js + AWS LightSail)

신용민

이 강의를 통하여 러프하게 FastAPI를 통한 백엔드 기초와 더불어 React.js AWS 배포까지하여 실제 배포까지 빠르게 경험해볼 수 있어요

초급

FastAPI, react.js, AWS

따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)

John Ahn

이 강의를 통해서 레딧 웹사이트를 처음부터 하나하나 만들어 보실 수 있습니다.

초급

클론코딩, Node.js, React

[리뉴얼] React로 NodeBird SNS 만들기

제로초(조현영)

리액트 & 넥스트 & 리덕스 & 리덕스사가 & 익스프레스 스택으로 트위터와 유사한 SNS 서비스를 만들어봅니다. 끝으로 검색엔진 최적화 후 AWS에 배포합니다.

중급이상

React, Redux, Node.js

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

antonio

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

초급

Next.js, React, PostgreSQL