풀스택 바이브 코딩 올인원 패키지: Cursor & Windsurf

50%89,500원

179,000원

권장 수강 대상

스타트업, 프로그래밍 입문자, 현업 개발자, 취업 준비생, 대학생, 이직 준비자, 창업 준비자, 프리랜서

카테고리

개발

수강시간

12시간 25분

강의수

34개

강의 소개

커리큘럼

수강후기

단 하나의 패키지로 입문부터 실전까지 완성하세요!

Windsurf로 웹 개발의 기초를 다지고, Cursor로 실제 운영 가능한 AI 챗봇 서비스를 완성하는 올인원 코스입니다.

아이디어 하나, 클릭 몇 번이면 포트폴리오 웹사이트부터 회원 관리가 가능한 AI 서비스까지, 모두 여러분의 손으로 만들 수 있습니다 🖐️

바이브 코딩 로드맵

어떤 강의를 들어야 할지 고민되시나요?

지금 나의 수준과 앞으로 목표하는 방향에 맞춰 학습 경로를 선택할 수 있도록 로드맵을 준비했어요.

현재 나의 레벨 → 다음 단계로 성장하기 위한 추천 코스까지 한눈에 살펴보세요!

과정 구성 안내

본 과정은 아래의 인기 강의들을 기반으로,

처음 시작하는 분도 8주 만에 바이브 코딩을 직접 구현할 수 있도록

가장 실용적인 커리큘럼으로 재구성한 패키지 과정입니다.

[왕초보] 비개발자도 할 수 있는 바이브 코딩 웹 개발
[AI 능력자] 바이브 코딩 with Cursor: 챗봇, DB 배포까지
Vibe Coding Start: AI로 만드는 나의 첫 웹서비스
Vibe Coding Pro: Cursor로 완성하는 AI 챗봇 서비스

이런 고민이 있나요?

코딩은 배우고 싶은데, 어디서 시작해야 할지 막막해요

비전공자

김**

토이 프로젝트는 해봤지만 실제 서비스를 만들어본 적이 없어요

부트캠프 수강생

수**

내 아이디어를 직접 구현하고 싶은데 개발 지식이 부족해요

창업 준비자

박**

AI 코딩 툴을 제대로 활용하는 방법을 모르겠어요

현업 개발자

계**

이렇게 성장할 수 있어요!

AI 코딩 툴로 코드 작성 장벽 없이 웹 개발을 시작할 수 있어요

비전공자

김**

SvelteKit, Supabase, Vercel로 풀스택 서비스 개발부터 배포까지 경험해요

부트캠프 수강생

수**

포트폴리오 웹사이트부터 AI 챗봇 서비스까지 실제 배포 경험을 쌓아요

창업 준비자

박**

GitHub 버전 관리, 클라우드 배포, DB 연동 등 실무 협업 프로세스를 익혀요

현업 개발자

계**

이런 스킬을 배울 수 있어요

Cursor

Vercel

Windsurf

Supabase

GitHub

실습 도구 안내

본 강의에서는 다양한 AI 도구 활용 사례를 제공하고 있습니다.

이에 따라 일부 실습 도구는 유료 구독이 필요하지만,

무료 도구들로도 충분히 실습이 가능하도록 안내하고 있습니다.

당장 유료 도구 결제가 어렵다면, 무료 도구를 활용하는 것으로도 충분한 도움이 되니 참고해주세요.

일부 실습 도구는 유료 구독이 필요하지만, 무료 도구들로도 충분히 실습이 가능하도록 안내하고 있습니다.
Windsurf는 Free Plan과 2주 간 15$ 상당의 Pro Plan 무료 체험 기간을 제공합니다.
OpenAI api 사용을 위한 충전이 필요합니다. (최대 5$ 이내로 실습 가능)
Cursor 유료 모델 구독을 권장합니다. (1주 간 유료 모델 체험 가능)

강의 맛보기

바이브 코딩, 2분 만에 이해하기

AI 코딩 도구 Windsurf를 활용한 포트폴리오 웹페이지 제작

프로젝트 맛보기

영어회화 AI 챗봇 만들기

OpenAI API와 Cursor를 활용한 챗봇 웹앱 제작

직접 운영하는 나만의 백오피스 대시보드

사용자 관리, API 사용량, 비용 모니터링이 가능한 백오피스 관리자 대시보드 구축

3D 쇼핑몰 웹 페이지 만들기

3D 에셋 생성부터 회전, 색상 변경 등 인터랙션 기능까지 AI와 함께 나만의 3D 쇼핑몰 웹앱 완성

수강생 전용 커뮤니티 입장하기

모두의연구소 바이브 코딩 소통방에서

다른 수강생들과 자유롭게 콘텐츠를 공유하고,

수강 중 어려운 점도 함께 질문하며 해결해보세요!

함께 배우고 성장하는 커뮤니티가 여러분을 기다리고 있어요 🙌

👉 카카오톡 소통방 입장하기

이런 혜택을 얻을 수 있어요

무제한 온라인 수강

언제 어디서든 편하게 학습해요

실무 템플릿 제공

오늘 배운 내용, 내일 바로 적용해요

전문 멘토의 Q&A

막히는 부분을 빠르게 해결해 드려요

수료 특전

수료 시 원하는 강의 1개 추가 무료 제공

크리에이터

김정현

풀스택 프로덕트 개발자 & AI/ML 엔지니어

아이디어를 빠르게 실현하고, 실제로 서비스로 운영할 수 있도록 돕는 것이 제 목표입니다. 이번 강의에서는 여러분이 실전 서비스 개발의 전 과정을 경험할 수 있도록 안내하겠습니다.

• LLM 기반 서비스 기획·개발, 챗봇·RAG 시스템 구축 경험
• 클라우드·DevOps·데이터베이스 설계 및 운영 전문가
• 교육청·교과서 프로젝트 등 공공·B2B AI 솔루션 다수 개발

배인진(아이비)

원밀리언라인즈코딩 CEO & 풀스택 교육 전문가

• 현재 원밀리언라인즈코딩 CEO
• 현재 네이버 부스트캠프 안드로이드·AI 교육 (2021~현재)
• 모두의연구소·현대자동차·우아한테크캠프 등 다수 강의
• 'Azure OpenAI로 ChatGPT와 LLM 시스템 쉽고 빠르게 구축하기' 감수 (제이펍, 2025)
• YouTube '에이전트민수', LinkedIn 그룹 'Microsoft AI Agent Korea User Group' 운영
• 전 카카오엔터테인먼트, ProtoPie, NBT 개발자

커리큘럼

중급

12시간 25분

노드 01

바이브 코딩 첫걸음: Windsurf로 시작하기

AI 코드 에디터 Windsurf를 설치하고 기본 사용법을 익히며, 바이브 코딩의 개념과 가능성을 이해합니다.

1-1

바이브코딩이란?

30분

1-2

Windsurf 설치 및 설정

30분

1-3

Windsurf와 Cursor 요금제

30분

1-4

Windsurf에서 사용 가능한 모델

30분

노드 02

Vibe Surfing을 시작해보자!

웹페이지를 처음 만들어보고, AI가 자동으로 코드를 작성하고 수정하는 캐스케이드 구조의 원리를 체험합니다.

2-1

포트폴리오 웹페이지 생성, 캐스케이드 활용

20분

2-2

모델의 답변 리뷰하기

10분

2-3

Rule: 캐스케이드가 따르는 규칙 선언 방법

15분

2-4

Rule 정의 및 새 프로젝트 생성

20분

노드 03

바이브 코딩을 위한 LLM 이해

LLM(Large Language Model)의 개념을 익히고, 다양한 프롬프트 실험을 통해 AI의 답변 방식과 작동 원리를 이해합니다.

3-1

LLM이란?

10분

3-2

OpenAI Playground에서 파라미터 조정하기

20분

3-3

다양한 프롬프트 예시와 기법

20분

노드 04

뭔가 마음에 들지 않는데? 프로젝트 개선하기

결과물을 리뷰하고, 프롬프트와 룰을 수정해가며 나만의 스타일로 프로젝트를 개선해봅니다.

4-1

Rule 업데이트: 역할 및 구체적 지시사항 부여

5분

4-2

프로젝트 개선 계획 세우기

5분

4-3

섹션 크기 수정

15분

4-4

콘텐츠 영역을 바꾸는 프롬프트

15분

4-5

섹션 위치 이동

15분

노드 05

처음 써보는 Github, 어렵지 않아요

GitHub에 가입하고 저장소를 만들며, 내 코드를 온라인에 안전하게 저장하고 관리하는 기본 과정을 배웁니다.

5-1

GitHub 소개

10분

5-2

GitHub Desktop 설치

10분

5-3

GitHub 저장소 생성

10분

5-4

GitHub 저장소 복제

5분

노드 06

Git으로 내 프로젝트를 관리해보자

Windsurf와 GitHub를 연결해 커밋, 푸시, 풀 등 Git의 기본 기능을 사용해보고 버전 관리를 시작합니다.

6-1

Git 설치하기

10분

6-2

커밋 추가

10분

6-3

GitHub 저장소로 push

5분

6-4

로컬 저장소에서 fetch & pull

10분

6-5

Windsurf와 GitHub Desktop

10분

노드 07

협업과 버전 관리를 위한 Git Branch

코딩 협업 시 사용하는 Git의 '브랜치' 개념을 배우고, 브랜치 생성, 이동, 병합 과정을 실습합니다.

7-1

브랜치 생성

10분

7-2

브랜치 이동

10분

7-3

브랜치 병합

10분

노드 08

코딩은 몰라도 저장은 해야죠? GitHub 저장

Windsurf에서 만든 웹페이지를 GitHub에 업로드하고, 원격 저장소와 연동하는 과정을 실습합니다.

8-1

Windsurf 저장소 초기화

10분

8-2

포트폴리오 웹페이지 원격 저장소 생성

5분

8-3

GitHub 계정 인증

5분

8-4

원격 저장소 연동

5분

노드 09

포트폴리오도, 디자인도 AI에게 맡겨보자

Gemini 등 AI 도구의 도움을 받아 포트폴리오 내용을 수정하고, 나만의 이력서를 쉽고 빠르게 개선합니다.

9-1

Gemini와 함께 이력서 수정

5분

9-2

자기소개 섹션 수정

20분

9-3

Gemini 이미지 생성 기능 활용

10분

9-4

Windsurf 이미지 업로드 기능

10분

9-5

오류 해결

10분

9-6

커밋 추가

20분

노드 10

부족한 디자인 감각, AI가 채워줘요

AI에게 웹페이지 색상, 레이아웃, 이미지 스타일을 추천받고 직접 반영하면서 웹 디자인을 한층 업그레이드해봅니다.

10-1

Claude 웹페이지 개발

20분

10-2

Figma 디자인 초안 생성

20분

10-3

ChatGPT 활용

5분

10-4

Figma 디자인 수정

10분

노드 11

지금까지의 작업 내용을 업데이트해보자

수정한 내용을 GitHub에 반영하고, 브랜치를 병합해 최종 결과물로 정리하는 Git 활용법을 익힙니다.

11-1

Rule 수정

5분

11-2

GitHub Pull Request

20분

11-3

원격저장소 동기화 및 새 브랜치 생성

15분

노드 12

뭐부터 고칠까? AI를 활용한 개선 계획 세우기

AI의 제안을 참고해 웹페이지에서 개선할 포인트를 정리하고, 디자인과 구조를 체계적으로 리팩토링할 계획을 세웁니다.

12-1

다양한 AI 어시스턴트 답변 참고

25분

노드 13

개선 1: 타임라인 디자인 반영하기

이력서 섹션을 타임라인 형태로 변경하고, 개발자 도구를 활용해 경력 정보를 보기 좋게 배치해봅니다.

13-1

개선 1 - 타임라인 디자인 반영

20분

13-2

경력사항 수정

10분

노드 14

개선 2: 컬러 팔레트 수정하기

웹페이지에 사용할 색상을 AI에게 추천받고, CSS 변수로 정의해 색상 톤을 일관성 있게 바꿔봅니다.

14-1

개선 2 - 컬러 팔레트

20분

14-2

커밋 추가

5분

14-3

프로젝트 컬러 팔레트 수정

15분

14-4

커밋 추가 및 브랜치 병합

15분

노드 15

개선 3: 좌우 교차 레이아웃 반영하기

프로젝트 섹션을 좌우 교차 레이아웃으로 구성하고, 반응형 웹 요소도 함께 적용해 실전 디자인 감각을 익힙니다.

15-1

개선 3 - 좌우 교차 레이아웃 반영

10분

15-2

반응형 웹 만들기

5분

15-3

오류 해결 및 Revert

15분

15-4

브랜치 병합

15분

노드 16

개선 4: 통합 블럭 디자인 및 반응형 웹 만들기

자기소개 섹션을 통합형 블럭으로 재구성하고, 다양한 화면 크기에서도 잘 보이도록 반응형 스타일을 적용해 마무리합니다.

16-1

개선 4 - 통합 블럭 디자인 및 반응형 웹 만들기

10분

16-2

커밋 추가

20분

노드 17

바이브 코딩 마무리: 배포 및 회고

17-1

웹 배포

15분

17-2

나의 개발 여정 마무리

10분

노드 18

프로젝트: 내가 만든 웹 포트폴리오

Gemini, Claude 등의 AI 도구를 활용해 이력서와 자기소개를 포함한 웹 포트폴리오를 직접 만들고, 디자인도 개선해보는 실습 중심 프로젝트입니다.

18-1

프로젝트2: 내가 만든 웹 포트폴리오

1시간

노드 19

바이브 코딩이란?

AI 코딩 도구인 Cursor와 바이브 코딩 방식을 이해하고, 초보자도 자신만의 AI 웹앱을 만들 수 있도록 전체 개발 흐름을 확인합니다.

19-1

Hello! Vibekode?

5분

19-2

What's the vibe?

10분

19-3

Beware your vibe

10분

19-4

The vibe we're going to build

5분

노드 20

바이브 코딩을 위한 개발 환경 세팅

AI 기반 개발을 위한 기본 환경을 직접 구축해 봅니다. 초보자도 따라할 수 있는 Cursor, Node.js, Git 등의 설치 및 설정 과정을 실습하며, 운영체제별 환경 차이를 이해합니다.

20-1

개발환경 구성: Cursor 설치

10분

20-2

개발환경 구성: Node 설치

10분

20-3

개발환경 구성: Git 설치

10분

20-4

개발환경 구성: MacOS

10분

노드 21

바이브 코딩을 위한 클라우드 세팅

Google Cloud Platform과 네이버 클라우드를 활용해 가상 머신을 만들고, 원격 서버에 AI 개발 환경을 구축합니다.

21-1

개발환경 구성: 클라우드 VM - GCP

10분

21-2

개발환경 구성: 클라우드 VM II - NCP

10분

21-3

개발환경 구성: 클라우드 OS에서 node 설치하기

5분

21-4

강의 자료 소개

5분

노드 22

서비스 아키텍처 구축하기

Cursor를 활용한 Vibe Coding을 시작합니다. 챗봇을 직접 개발하고, SvelteKit과 Vercel을 이용한 배포까지 전체 개발 흐름을 실습합니다.

22-1

What vibe are we gonna be in?

10분

22-2

The vibe-ground

10분

22-3

Go further vibe

5분

22-4

스벨트 프로젝트 생성

3분

22-5

IDE 사용 세부 설정 설정

10분

22-6

나만의 영어회화 챗봇 서비스 아키텍처

10분

노드 23

UI 구현과 API 활용법

자연어 프롬프트, 이미지, 개발자 도구 등을 활용하여 챗봇 UI와 음성 기능을 구현하고, LLM을 통한 코딩 자동화 및 오류 해결 전략을 익힙니다.

23-1

첫 바이브 코드

5분

23-2

UI 다듬기

15분

23-3

파일 컨텍스트 사용법

10분

23-4

API 문서 활용법

15분

23-5

API 구현 및 연결

15분

23-6

Vibe Tactics: 정신일도 하사불성

5분

노드 24

바이브 코딩에서의 디버깅과 배포

ChatGPT API 연동부터 디버깅, 실시간 연결 상태 구현, Vercel을 활용한 배포까지 챗봇의 전 과정을 자동화하고 공개하는 실습을 수행합니다.

24-1

환경변수 정의

5분

24-2

디버거 구현

10분

24-3

API 연결과 챗봇 구현

5분

24-4

배포의 의미

10분

24-5

vercel 가입, 설치 및 배포

5분

노드 25

Git과 Supabase 활용

Supabase와 Git을 연동하여 사용자 정보 관리, AI 챗봇 기능 구현, 실시간 통신 기능을 갖춘 웹앱을 노코드로 개발하는 전 과정을 경험합니다.

25-1

전체 프로젝트 아키텍처 확장 설명

5분

25-2

git 커맨드라인 사용법 회고

15분

25-3

Supabase 가입부터 DB 테스트까지

30분

25-4

데이터베이스 저장 테스트해보기

10분

25-5

주석 달기, 테스트 페이지 삭제

5분

25-6

Vibe Tactics: 검색 기반 답변요청

5분

노드 26

회원 가입과 로그인 기능 구현

이메일/구글 로그인 기능을 구현하고, SMTP 설정을 통해 인증 메일 제한 문제를 해결하며 실시간 로그인 시스템을 완성합니다.

26-1

UI 구현하기

5분

26-2

UI 테스트하기

15분

26-3

리다이렉션 경로 설정하기

15분

26-4

확인 메일 테스트하기

10분

26-5

SMTP 설정하기

10분

노드 27

개인화된 대화 기록 구현

챗봇 서비스에 필요한 대화 데이터, 세션, 사용량 등을 효과적으로 저장하고, LLM 기반 챗봇의 구조와 효율적인 개발 전략을 설계합니다.

27-1

필요한 DB 목록과 내용 검토

10분

27-2

기록용 DB 테이블 생성

20분

27-3

대화 기록 UI 구현

10분

27-4

대화 기록 구현 돌아보기

10분

27-5

Vibe Tactics: 빅 스텝 스몰 스텝

5분

노드 28

챗봇 프롬프트 커스터마이징

AI 챗봇의 톤과 프롬프트를 사용자 맞춤형으로 저장하고, 대형 코드 베이스를 컴포넌트화하여 유지보수 효율을 높이는 리팩토링 전략을 배웁니다.

28-1

여러 톤 설정하기

5분

28-2

대화 기록에 프롬프트 톤 기록하기

15분

28-3

나만의 대화 프롬프트 저장해서 쓰기

15분

28-4

긴 코드 파일 리팩토링하기

10분

노드 29

개인 정보 보호 정책 구현 및 리팩토링

AI 서비스의 개인정보 처리, 요금 계산, 사용자 동의 처리 등 실 서비스에 필요한 기능을 추가하며 보안성과 완성도를 높입니다.

29-1

개인 정보 보호 정책 구현하기

5분

29-2

약관 동의 구현하기

15분

29-3

Vibe Tactics: 코드, 파일의 적절한 리팩토링

5분

노드 30

사용 화면 고도화

API 사용량, 토큰, 비용 데이터를 시각화하여 대시보드에서 실시간 확인하고, 오픈AI와 개인 기록을 비교하여 정확한 지출 관리를 실현합니다.

30-1

개인 정보 관리

10분

30-2

사용량 및 요금 계산

5분

30-3

API 사용량 관리하기

15분

30-4

API 데이터 추적하기

15분

노드 31

배포 및 프로젝트 클로닝

관리자 페이지를 구축하고, 사용자 접근 제한, 통계 기능, 버그 디버깅 등을 수행합니다.

31-1

배포 및 구현 마일스톤 점검

5분

31-2

관리자 페이지 프로젝트 클로닝 1

10분

31-3

관리자 페이지 프로젝트 클로닝 2

10분

31-4

Show your hidden vibe

10분

노드 32

관리 페이지 구현

DB 및 관리자 권한 설정을 통해, 보안 강화, 실시간 통계 컴포넌트 개발, 보안 취약점 분석 등 서비스 운영에 필요한 고급 기능을 구현합니다.

32-1

관리자 기능 구현하기

5분

32-2

사용량 조회 페이지 구현하기

10분

32-3

API 사용량 시각화하기

10분

32-4

서비스 보안 검증하기

10분

노드 33

전체 아키텍쳐 리뷰 및 마무리

AI 기반 음성 챗봇을 상용화하기 위한 기능 고도화, 사용자 분석 및 결제 연동을 실습하고, 바이브 코딩을 통해 미래 개발 흐름에 대비합니다.

33-1

전체 아키텍쳐 리뷰

10분

33-2

서비스 고도화 가이드

5분

33-3

바이브 코딩의 의미

10분

노드 34

최종 프로젝트 제출

지금까지 학습한 AI 코딩 도구(Curator, Vercel, Supabase 등)를 활용하여 직접 챗봇 웹 서비스를 제작하고 인터넷에 배포합니다. 단순히 동작하는 코드 수준을 넘어서, 실제 외부 사용자가 접근 가능한 서비스로 완성하는 것을 목표로 합니다.

34-1

최종 프로젝트 제출

1시간

수강생 후기

김**

강사님의 경험을 들으며, 바이브코딩할 때는 먼 길 돌아갈 일은 없겠다는 확신이 들었어요.

이**

Cursor에 관심이 있었지만 에러를 해결하지 못해 포기했었는데, 오늘 강의를 통해 다시 도전할 용기가 생겼어요.

김**

강사님의 설명이 명확해서 이해가 잘됐고, 끝까지 집중할 수 있었어요!

풀스택 바이브 코딩 올인원 패키지: Cursor & Windsurf

바이브 코딩 로드맵

과정 구성 안내

이런 고민이 있나요?

이렇게 성장할 수 있어요!

이런 스킬을 배울 수 있어요

실습 도구 안내

강의 맛보기

프로젝트 맛보기

수강생 전용 커뮤니티 입장하기

이런 혜택을 얻을 수 있어요

크리에이터

커리큘럼

수강생 후기

지금 50% 할인가에 시작하세요.