인프런 영문 브랜드 로고
인프런 영문 브랜드 로고
개발 · 프로그래밍

/

프론트엔드

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

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

(3.8) 수강평 4개

수강생 70명

whisperFastAPINext.jsopenai-whisper

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

이런 걸 배울 수 있어요

  • nextjs

  • whisper

  • fastapi

  • 바이브코딩

주말 프로젝트! Whisper & FastAPI로 음성 인식 웹 앱 빠르게 완성하기

이 강의를 통해 Whisper를 로컬에서 실행하는 방법을 배우고, FastAPI와 Next.js를 활용해 AI 음성 인식 웹 앱을 개발할 수 있습니다.

이 기술은 음성 메모 앱, 실시간 회의 기록 시스템, 자동 자막 생성, 음성 기반 챗봇 등 다양한 분야에서 활용될 수 있습니다.

이런 내용을 배워요

Faster-Whisper

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

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

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

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

1

바이브코딩

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

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

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

2
3

수강 전 참고 사항

실습 환경

  • CPU: Intel Core i7-12700K 또는 동급 이상 권장

  • RAM: 최소 8GB (권장 16GB 이상)

  • 디스크 공간: Whisper 모델 다운로드 및 캐싱을 위해 최소 5GB 이상 필요

학습 자료

  • GitHub 저장소 링크 (소스 코드 및 프로젝트 파일 제공)

  • 텍스트 문서 및 코드 샘플


선수 지식 및 유의사항

  • Python 기본 문법 및 FastAPI 사용 경험이 있으면 이해가 빠름

  • JavaScript 및 Next.js의 기본 개념이 있으면 프론트엔드 연동이 쉬움

  • REST API 및 WebSocket 개념을 알고 있으면 도움이 됨

이런 분들께
추천드려요!

학습 대상은
누구일까요?

  • Whisper 모델을 로컬에서 직접 실행해보고 싶은 분

  • FastAPI와 Next.js를 활용해 AI 기반 프로젝트를 개발하고 싶은 분

  • 실시간 음성 인식 기능을 구현해 보고 싶은 초보 개발자

  • 개인 포트폴리오로 활용할 AI 음성 인식 프로젝트초안을 만들어보고 싶은 분

  • 짧은 시간 안에 프로젝트를 완성하고 싶은 분

선수 지식,
필요할까요?

  • Python 기본 문법 (FastAPI 활용을 위해)

  • JavaScript 및 React 기본 개념 (Next.js 활용을 위해)

  • REST API 및 WebSocket 개념 (백엔드-프론트엔드 연동을 위해)

안녕하세요
ludgi입니다.

366

명

수강생

12

개

수강평

7

개

답변

4.3

점

강의 평점

6

개

강의

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


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

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

 

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


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

 

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

더보기

커리큘럼

전체

11개 ∙ (1시간 13분)

해당 강의에서 제공:

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

수강평

전체

4개

3.8

4개의 수강평

  • beom_yoon94님의 프로필 이미지
    beom_yoon94

    수강평 4

    ∙

    평균 평점 5.0

    5

    36% 수강 후 작성

    • 무능한아기님의 프로필 이미지
      무능한아기

      수강평 2

      ∙

      평균 평점 4.0

      3

      36% 수강 후 작성

      처음 배우는 개념이면서 Vibe Coding에 대한 개념에 대해서 알고 관심 갖기 좋은데 환경 구축부터 전체적으로 조금 더 자세히 설명해주셨으면 좋겠습니다.

      • 김성욱님의 프로필 이미지
        김성욱

        수강평 2

        ∙

        평균 평점 5.0

        5

        36% 수강 후 작성

        • pudici1님의 프로필 이미지
          pudici1

          수강평 4

          ∙

          평균 평점 1.5

          2

          82% 수강 후 작성

          ludgi님의 다른 강의

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

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

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

          ludgi

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

          초급

          초급

          nextjs, ChatGPT, LLM

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

          찍어먹는 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 풀코스 (한국어 더빙)강의 썸네일

          찍어먹는 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와 yolov11로 화재감지 시스템 구축하기강의 썸네일

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

          ludgi

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

          초급

          초급

          Next.js, yolo, Python

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

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

          ludgi

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

          입문

          입문

          Next.js, TailwindCSS, aws-s3

          비슷한 강의

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

          FastAPI 찍어먹기 (FastAPI + React.js + AWS LightSail)강의 썸네일

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

          신용민

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

          초급

          초급

          FastAPI, react.js, AWS

          Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)강의 썸네일

          Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)

          도도(코딩루팡)

          Firebase의 SQL버전! Supabase를 통해 Next.js 풀 스택 기초를 마스터 할 수 있어요.!

          초급

          초급

          Next.js, supabase, React

          만들면서 배우는 프론트엔드 DO IT 코딩 (Next.js, Typescript)강의 썸네일

          만들면서 배우는 프론트엔드 DO IT 코딩 (Next.js, Typescript)

          totuworld

          겉만 멋진 서비스 말고 사용자를 만나서 피드백 받을 수 있는 서비스를 만들 수 있습니다. 웹 개발에 자신감을 얻을 수 있습니다.

          초급

          초급

          Next.js

          Next.js 시작하기강의 썸네일

          Next.js 시작하기

          장기효(캡틴판교)

          React를 시작할 때 꼭 알아야 하는 Next.js 프레임워크. 입문자 관점의 쉬운 설명과 실무자가 만족하는 심도 깊은 동작 원리 이해까지. Next.js를 한방에 해결합니다.

          초급

          초급

          Next.js, React, JavaScript

          [2025 신규] 어서와, Fast API는 처음이지?강의 썸네일

          [2025 신규] 어서와, Fast API는 처음이지?

          RAZOR

          ★PYTHON★ Fast API를 활용한 Server 개발 기초 강의입니다. Fast API, SQLAlchemy, Pydantic, Starlette 등 여러 Package를 활용해 쉽고, 빠르고, 간편하게 Server 개발하는 방법을 배워가세요! PostgreSQL과의 연동은 물론 DB Backup파일도 준비되어 있으니 걱정마세요! Dash와 Plotly를 활용한 UI Design "기초"를 알려드리고 강의에 사용된 Source Code도 제공해드립니다 :)

          초급

          초급

          FastAPI, Python, PostgreSQL

          FastAPI 실전편: JWT와 Redis로 완성하는 인증 시스템강의 썸네일

          FastAPI 실전편: JWT와 Redis로 완성하는 인증 시스템

          제주코딩베이스캠프

          토이 프로젝트는 이제 그만! 현업 개발자들이 실제로 사용하는 JWT와 Redis로 안전한 인증 시스템을 구축하는 모든 비밀을 공개합니다.

          초급

          초급

          FastAPI, Redis, JWT

          [풀스택 입문] Firebase보다 10배 좋은 Supabase강의 썸네일

          [풀스택 입문] Firebase보다 10배 좋은 Supabase

          로펀

          풀스택 개발에 날개를 달아줄 Supabase! Firebase의 상위호환인 Supabase로 풀스택 개발을 2시간만에 완성합니다.

          초급

          초급

          PostgreSQL, Next.js, TailwindCSS

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

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

          로펀

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

          초급

          초급

          AWS, Docker, Next.js

          자바 스프링 부트 프로젝트와 파이썬 AI 프로젝트 연결하기강의 썸네일

          자바 스프링 부트 프로젝트와 파이썬 AI 프로젝트 연결하기

          자바전문가그룹

          스프링 부트 프로젝트에서 Fast를 이용한 파이썬 기반 AI 웹서버와의 연결을 설명합니다.

          중급이상

          중급이상

          Spring Boot, FastAPI, yolo

          [바이브 코딩] 초간단 가족만의 단톡방 만들기 (Cursor + Firebase)강의 썸네일

          [바이브 코딩] 초간단 가족만의 단톡방 만들기 (Cursor + Firebase)

          체험코딩

          Cursor AI와 Firebase를 이용하여 가족만을 위한 프라이빗 메신저를 만들며, 코딩의 흐름을 자연스럽게 익혀보는 바이브코딩 입문 강의입니다. 개발자 계정이나 맥북 없이, 윈도우 환경만으로도 개발을 몰라도 누구나 쉽게 따라 할 수 있고, 직접 만든 웹사이트로 실제 사용도 해보세요.

          입문

          입문

          Firebase, Next.js, vercel

          웹 개발자의 연봉을 올려주는 하이브리드앱 with Expo 프레임워크강의 썸네일

          웹 개발자의 연봉을 올려주는 하이브리드앱 with Expo 프레임워크

          코드캠프

          웹 개발을 활용해서 Android와 IOS에 서비스 가능한 모바일앱 개발을 할 수 있도록 도와주는 강의입니다.

          초급

          초급

          React, Next.js, expo

          부트캠프에서 알려주지 않는 것들 (리액트 렌더링 최적화 편) 2편강의 썸네일

          부트캠프에서 알려주지 않는 것들 (리액트 렌더링 최적화 편) 2편

          애프터캠프

          React 렌더링 원리, 최적화를 마스터해서 실전 활용 및 면접 준비를 해보세요!

          중급이상

          중급이상

          React, react-usememo, 기술면접

          공식문서로 배우는 실전 타입스크립트강의 썸네일

          공식문서로 배우는 실전 타입스크립트

          어쩔코딩

          타입스크립트를 제대로 이해하려면 공식문서를 한번쯤 보셔야겠죠? 문서에서 중요한 부분들만 콕 집어서 알기 쉽게 전달해드리고 실전에 필요한 내용들도 같이 알려드리는 강의입니다!

          입문

          입문

          TypeScript, JavaScript, ES6

          ₩5,500