hero-section-background
hero-section-image

[왕초보] 비개발자도 할 수 있는 바이브 코딩 웹 개발

🚨 이번 달 마감될 예정이니, 서둘러 신청해 주세요.

90%23,700
237,000

이 과정은 고용24에 먼저 신청 후, 내일배움카드로 결제해야 최종 신청이 완료됩니다.

훈련과정 탐색표 보기

권장 수강 대상

프로그래밍 입문자

카테고리

🪙 국비지원

수강시간

17시간 40분

강의수

23개

강의 소개

커리큘럼

📢2026.08 업데이트 안내

본 과정은 학습자분들의 피드백과 AI 도구의 최신 업데이트를 반영하여 실습 도구 개편을 진행하였습니다.

기존 강의에서 사용하던 Windsurf(Devin) 대신 Cursor를 활용하는 방식으로 실습 도구가 변경되었으며,

2026년 8월 11일 ~ 9월 30일까지는 변경 전·후 영상을 모두 제공해 드립니다.

  1. 8월 11일 이전부터 수강 중이신 분: 9월 30일 이전까지 변경 전 과정 수강을 완료해 주세요.
  2. 8월 11일 이후 수강을 시작하신 분: 변경 후 [업데이트 영상]으로 수강해 주시면 됩니다.
  3. 변경 전 과정을 수강하셔도 무방하나, 사용 도구와 실습 내용이 다르니 참고 부탁드립니다.

🛠️Cursor 실습 도구 안내

주 실습 도구가 Windsurf(Devin)에서 Cursor로 변경되었으며,

두 도구는 사용 방식이 유사하여 기존에 학습하신 내용을 그대로 이어가실 수 있습니다.

새로 학습을 시작하시는 분들은 Cursor 사용을 권장드립니다.

또한 Windsurf, Cursor 등 바이브 코딩 도구는 무료로 제공되지 않으므로,

기본 플랜(20$ 상당) 유료 구독이 과정 수강을 위해 필수적입니다.

90% 국비지원으로 부담 없이 시작하세요!

🎁 수강하면 얻을 수 있는 것

- 강의 및 자료 평생 소장 - 완강 시 언제든 복습할 수 있어요. - 1:1 Q&A 지원 - 담당 멘토가 직접 답변해 드려요. - 수료증 발급 - 이력서, 포트폴리오에 활용할 수 있어요. - 실무 프로젝트 실습 - 업무, 일상에 빠르게 적용할 수 있어요. - AI 학습 프로젝트 교안 제공- 수료하신 분들은 추가 학습을 위한 교안을 받을 수 있어요.

코딩이 '나와는 먼 이야기' 같으셨나요? 🤔

이제는 AI에게 요청하고 함께 수정해 나가며, 나만의 웹서비스를 직접 만들 수 있습니다.

개발 경험이 없어도 괜찮아요. AI와 함께 아이디어를 구현하며,

"나도 웹사이트를 만들 수 있네!"라는 첫 성공 경험을 만들어 보세요.

왜 지금, 이 과정이어야 할까요?


1️⃣ AI와 함께하는 첫 웹서비스 개발

AI 코드 에디터 Windsurf를 활용해 웹페이지 제작부터 수정까지, AI와 협업하는 바이브 코딩 방식을 익힙니다.



2️⃣ 결과물 중심의 실습 프로젝트

웹 포트폴리오 제작부터 3D 웹앱 구현, 배포까지 직접 만들며 눈에 보이는 결과물을 완성합니다.



3️⃣ 아이디어를 서비스로 만드는 개발 경험

GitHub를 활용한 프로젝트 관리, AI를 통한 디자인 개선, 3D 기능 구현, 배포까지 웹서비스 제작의 전 과정을 경험할 수 있습니다.

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

국비지원 AI 기초 학습 추천 로드맵

TIP. 바이브 코딩이나 웹 개발이 처음이라면 순차적인 수강을 권장드립니다.

[국비지원] 바이브 코딩 과정 확인하기

비개발자도 할 수 있는  바이브 코딩 업무 자동화

비개발자도 할 수 있는 바이브 코딩 업무 자동화

업무에 활용하는 모든 바이브 코딩을 한번에! Python, GAS, VBA, 웹 스크랩핑까지

AI와 함께 코딩하자!  인공지능/데이터 커리어 첫걸음

AI와 함께 코딩하자! 인공지능/데이터 커리어 첫걸음

Python 기초부터 머신러닝/딥러닝까지 AI 직무 전체 흐름을 한번에!

비개발자도 할 수 있는  바이브 코딩 웹 개발

비개발자도 할 수 있는 바이브 코딩 웹 개발

나만의 웹 페이지를 만들고 싶다면? 바이브 코딩으로 개발 입문하기!

바이브 코딩 with Cursor:  챗봇, DB 배포까지

바이브 코딩 with Cursor: 챗봇, DB 배포까지

실시간 영어 회화 챗봇, DB , 회원 가입 등 실제 서비스를 바이브 코딩으로 구현해요

이런 고민이 있나요?

코딩을 배우고 싶지만 어디서부터 시작해야 할지 막막해요

이미지
비전공자

김**

기획자, PM으로 개발팀 소통할 때 웹 지식이 부족해 답답해요

이미지
서비스 기획자 / PM

홍**

내 아이디어를 웹사이트로 만들고 싶은데 개발자가 아니라 어려워요

이미지
창업 준비자

박**

AI 코딩 툴을 제대로 활용해본 적이 없어요

이미지
커리어 업스킬러

하**

이렇게 성장할 수 있어요!

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

이미지
비전공자

김**

HTML, CSS, JavaScript 기본기를 자연스럽게 습득할 수 있어요

이미지
서비스 기획자 / PM

홍**

3D 인터랙티브 웹앱을 직접 배포하는 경험을 할 수 있어요

이미지
창업 준비자

박**

GitHub 버전 관리와 협업 프로세스를 실습으로 익혀요

이미지
커리어 업스킬러

하**

프로젝트 맛보기

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

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

강의 맛보기

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

과정 구성 안내

본 과정은 아래의 강의를 기반으로 재구성한 과정입니다.

Vibe Coding Start: AI로 만드는 나의 첫 웹서비스

이런 스킬을 배울 수 있어요

Windsurf

GitHub

Gemini

Netlify

Claude

Three.js

Tripo3D

크리에이터

배인진(아이비)

원밀리언라인즈코딩 CEO

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

강의에 대해 질문이 있어요!

강의에 대해 질문이 있어요!강의에 대해 질문이 있어요!

커리큘럼

입문

17시간 40분

1-1
바이브 코딩이란 무엇인가
5분
1-2
바이브 코딩에서 사람과 AI의 역할
20분
1-3
AI 시대에 필요한 학습 태도
10분
1-4
좋은 질문으로 AI 답변 발전시키기
15분
2-1
웹서비스의 구성과 개발 흐름
20분
2-2
프론트엔드·백엔드·API 이해하기
10분
2-3
Cursor 설치와 초기 설정
15분
2-4
Cursor로 첫 웹페이지 만들기
20분
3-1
Cursor Agent와 Plan 모드 활용하기
10분
3-2
Editor 모드와 AI 기반 코드 수정
20분
3-3
기획 정보를 반영해 웹페이지 확장하기
20분
4-1
게임 실습 준비와 프로젝트 환경 설정
5분
4-2
ChatGPT와 달리기 게임 기획안 작성
5분
4-3
기획안과 캐릭터로 게임 초안 구현
15분
4-4
Cursor 유료 요금제와 AI 모델 설정
15분
4-5
캐릭터 이미지와 달리기 애니메이션 만들기
15분
5-1
플레이 테스트와 게임 오류 수정
10분
5-2
배경음악과 효과음 적용
10분
5-3
GitHub 저장소에 게임 업로드
10분
5-4
Vercel로 게임 배포하기
5분
6-1
GitHub 저장소 복제와 작업 환경 이동
10분
6-2
복제한 프로젝트의 개선 사항 기획
10분
6-3
복제본에서 게임 기능 수정
5분
6-4
브랜치와 Pull Request로 변경 병합
10분
6-5
병합된 코드 재배포와 동기화
10분
7-1
캐릭터별 능력과 충돌 범위 고도화
10분
7-2
달리기 게임 개발 과정 회고
10분
7-3
AI와 후속 개선 아이디어 찾기
10분
8-1
프로젝트: 나의 첫 Git
1시간
9-1
명상 웹앱 프로젝트 이해하기
10분
9-2
국내외 명상 서비스 벤치마킹
5분
9-3
명상 웹앱 핵심 기능과 화면 구상
5분
9-4
명상 웹앱 기획안과 리소스 준비
5분
10-1
Plan 모드로 명상 웹앱 개발 계획 세우기
5분
10-2
명상 웹앱 구현과 로컬 서버 실행
20분
10-3
사용자 관점의 플레이 테스트
10분
10-4
UI와 기능 수정 후 배포 준비
10분
10-5
GitHub 업로드와 Vercel 배포
10분
10-6
명상 시간과 영상 재생 동기화
20분
11-1
웹서비스에서 데이터베이스가 필요한 이유
20분
11-2
Google Sheets로 문의 데이터 저장하기
20분
11-3
데이터 구조와 CRUD 이해하기
5분
11-4
기업 랜딩페이지 벤치마킹과 기획
10분
12-1
브랜드 비주얼 프롬프트 설계
5분
12-2
Google Flow로 제품과 모델 이미지 생성
20분
12-3
히어로 영상 생성과 편집
15분
13-1
브랜드 리소스로 기업 랜딩페이지 완성하기
25분
14-1
문의 폼을 Google Sheets와 연동해 배포하기
20분
14-2
문의 관리용 관리자 페이지 만들기
10분
15-1
API의 구조와 보안 원칙
20분
15-2
OpenAI API 키 발급과 사용 준비
5분
15-3
AI 사주 서비스 벤치마킹
15분
15-4
AI 사주 상담 서비스 기획
15분
16-1
OpenAI API 연동과 서비스 초안 구현
10분
16-2
상담 결과 화면 개선과 API 사용량 확인
5분
16-3
Google Flow로 사주 배경 영상 만들기
15분
16-4
배경 영상 적용과 반복 재생 개선
15분
17-1
GitHub Desktop으로 커밋과 푸시하기
10분
17-2
AI 사주 서비스를 Vercel에 직접 배포하기
20분
18-1
프로젝트 2: AI와 만든 나만의 웹 서비스
1시간
19-1
Supabase 도입과 프로젝트 설정
15분
19-2
Google Sheets 데이터를 Supabase로 이전
10분
19-3
관리자 인증과 배포 환경 연결
10분
20-1
회원가입·로그인·게시판 화면 구현
10분
20-2
이메일 인증과 게시글 데이터 저장
15분
20-3
관리자 답변과 게시글 관리 기능
15분
20-4
역할 기반 관리자 권한 설계
15분
21-1
관리자 대시보드에 AI 답변 기능 연동
10분
21-2
관리자 화면 개선과 최종 배포
15분
21-3
기업 웹서비스 구축 과정 정리
15분
22-1
달리기 게임과 명상 웹앱 확장 아이디어
15분
22-2
AI 사주와 기업 웹서비스의 운영·수익화
15분
22-3
나만의 서비스 개발 방향 세우기
10분
23-1
최종 프로젝트: AI와 함께 프로젝트 고도화하기
1시간

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

🚨 이번 달 마감될 예정이니, 서둘러 신청해 주세요.