강의 소개
커리큘럼
수강후기
단 하나의 패키지로 입문부터 실전까지 완성하세요!
Windsurf로 웹 개발의 기초를 다지고, Cursor로 실제 운영 가능한 AI 챗봇 서비스를 완성하는 올인원 코스입니다. 아이디어 하나, 클릭 몇 번이면 포트폴리오 웹사이트부터 회원 관리가 가능한 AI 서비스까지, 모두 여러분의 손으로 만들 수 있습니다 🖐️
이런 고민이 있나요?
코딩은 배우고 싶은데, 어디서 시작해야 할지 막막해요
비전공자
김**
토이 프로젝트는 해봤지만 실제 서비스를 만들어본 적이 없어요
부트캠프 수강생
수**
내 아이디어를 직접 구현하고 싶은데 개발 지식이 부족해요
창업 준비자
박**
AI 코딩 툴을 제대로 활용하는 방법을 모르겠어요
현업 개발자
계**
이렇게 성장할 수 있어요!
AI 코딩 툴로 코드 작성 장벽 없이 웹 개발을 시작할 수 있어요
비전공자
김**
SvelteKit, Supabase, Vercel로 풀스택 서비스 개발부터 배포까지 경험해요
부트캠프 수강생
수**
포트폴리오 웹사이트부터 AI 챗봇 서비스까지 실제 배포 경험을 쌓아요
창업 준비자
박**
GitHub 버전 관리, 클라우드 배포, DB 연동 등 실무 협업 프로세스를 익혀요
현업 개발자
계**
이런 스킬을 배울 수 있어요
Cursor
Vercel
Windsurf
Supabase
GitHub
강의 맛보기
프로젝트 맛보기
직접 운영하는 나만의 백오피스 대시보드
사용자 관리, 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 개발자
커리큘럼
중급
26시간 3분
노드 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에 관심이 있었지만 에러를 해결하지 못해 포기했었는데, 오늘 강의를 통해 다시 도전할 용기가 생겼어요.
김**
강사님의 설명이 명확해서 이해가 잘됐고, 끝까지 집중할 수 있었어요!