hero-section-background
hero-section-image

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

90%23,700
237,000

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

훈련과정 탐색표 보기

권장 수강 대상

프로그래밍 입문자

카테고리

개발

훈련 시간

18시간 40분

강의수

23개

강의 소개

커리큘럼

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

🎁 수강하면 얻을 수 있는 것

• 강의 및 자료 평생 소장 - 언제든 복습할 수 있어요. • 1:1 Q&A 지원 - 담당 멘토가 직접 답변해 드려요. • 수료증 발급 - 이력서, 포트폴리오에 활용할 수 있어요. • 실무 프로젝트 실습 - 업무, 일상에 빠르게 적용할 수 있어요.

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

이제는 AI에게 요청하고 지켜보기만 하면 웹사이트가 뚝딱 완성돼요!

개발자가 아니어도 괜찮아요. 아이디어 하나, 클릭 몇 번이면 충분하니까요. 무섭고 막연했던 코딩, AI와 함께 쉽고 편하게 시작해 보세요.

바이브 코딩 로드맵

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

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

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



  1. [노코드] Bolt.new로 하루 만에 MVP 만들기
  2. Cursor & GPT로 시작하는 바이브 코딩
  3. [AI 능력자] 비개발자도 할 수 있는 바이브 코딩 업무 자동화
  4. [왕초보] 비개발자도 할 수 있는 바이브 코딩 웹 개발
  5. [AI 능력자] 바이브 코딩 with Cursor: 챗봇, DB 배포까지


이런 고민이 있나요?

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

이미지
비전공자

김**

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

이미지
서비스 기획자 / PM

홍**

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

이미지
창업 준비자

박**

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

이미지
커리어 업스킬러

하**

이렇게 성장할 수 있어요!

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

이미지
비전공자

김**

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

이미지
서비스 기획자 / PM

홍**

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

이미지
창업 준비자

박**

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

이미지
커리어 업스킬러

하**

프로젝트 맛보기

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

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

강의 맛보기

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

과정 구성 안내

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

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

실습 도구 안내

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

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

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

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


  1. Windsurf는 기본적으로 Free Plan이 제공되며,
  2. 2주 간 15$ 상당의 Pro Plan 무료 체험 기간을 제공합니다.

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

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

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

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

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


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

크리에이터

배인진(아이비)

원밀리언라인즈코딩 CEO

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

커리큘럼

입문

18시간 40분

1-1
바이브코딩이란?
5분
1-2
Windsurf 설치 및 설정
20분
1-3
Windsurf와 Cursor 요금제
10분
1-4
Windsurf에서 사용 가능한 모델
15분
2-1
포트폴리오 웹페이지 생성, 캐스케이드 활용
20분
2-2
모델의 답변 리뷰하기
10분
2-3
Rule: 캐스케이드가 따르는 규칙 선언 방법
15분
2-4
Rule 정의 및 새 프로젝트 생성
20분
3-1
LLM이란?
10분
3-2
OpenAI Playground에서 파라미터 조정하기
20분
3-3
다양한 프롬프트 예시와 기법
20분
4-1
Rule 업데이트: 역할 및 구체적 지시사항 부여
5분
4-2
프로젝트 개선 계획 세우기
5분
4-3
섹션 크기 수정
15분
4-4
콘텐츠 영역을 바꾸는 프롬프트
15분
4-5
섹션 위치 이동
15분
5-1
GitHub 소개
10분
5-2
GitHub Desktop 설치
10분
5-3
GitHub 저장소 생성
10분
5-4
GitHub 저장소 복제
5분
6-1
Git 설치하기
10분
6-2
커밋 추가
10분
6-3
GitHub 저장소로 push
5분
6-4
로컬 저장소에서 fetch & pull
10분
6-5
Windsurf와 GitHub Desktop
10분
7-1
브랜치 생성
10분
7-2
브랜치 이동
10분
7-3
브랜치 병합
10분
8-1
프로젝트: 나의 첫 Git
1시간
9-1
Windsurf 저장소 초기화
10분
9-2
포트폴리오 웹페이지 원격 저장소 생성
5분
9-3
GitHub 계정 인증
5분
9-4
원격 저장소 연동
5분
10-1
Gemini와 함께 이력서 수정
5분
10-2
자기소개 섹션 수정
20분
10-3
Gemini 이미지 생성 기능 활용
10분
10-4
Windsurf 이미지 업로드 기능
10분
10-5
오류 해결
10분
10-6
커밋 추가
20분
11-1
Claude 웹페이지 개발
20분
11-2
Figma 디자인 초안 생성
20분
11-3
ChatGPT 활용
5분
11-4
Figma 디자인 수정
10분
12-1
Rule 수정
5분
12-2
GitHub Pull Request
20분
12-3
원격저장소 동기화 및 새 브랜치 생성
15분
13-1
다양한 AI 어시스턴트 답변 참고
25분
14-1
개선 1 - 타임라인 디자인 반영
20분
14-2
경력사항 수정
10분
15-1
개선 2 - 컬러 팔레트
20분
15-2
커밋 추가
5분
15-3
프로젝트 컬러 팔레트 수정
15분
15-4
커밋 추가 및 브랜치 병합
15분
16-1
개선 3 - 좌우 교차 레이아웃 반영
10분
16-2
반응형 웹 만들기
5분
16-3
오류 해결 및 Revert
15분
16-4
브랜치 병합
15분
17-1
개선 4 - 통합 블럭 디자인 및 반응형 웹 만들기
10분
17-2
커밋 추가
20분
18-1
프로젝트: 내가 만든 웹 포트폴리오
1시간
19-1
Threejs와 인터랙티브 웹
15분
19-2
TRELLIS 소개
10분
19-3
Tripo3D
10분
20-1
가방 쇼핑몰 웹페이지 기획
10분
20-2
가방 쇼핑몰 프로젝트 생성
15분
20-3
3D 가방 애셋 생성
15분
20-4
커밋 추가
15분
21-1
3D 가방 회전 기능
10분
21-2
3D 가방 캐러셀
15분
21-3
3D 가방 색상 변경 기능
15분
22-1
웹 배포
15분
22-2
프로젝트 소개글 작성
15분
22-3
나의 개발 여정 마무리
10분
23-1
최종 프로젝트: 3D 웹앱 만들기
2시간

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