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

237,000원

90%23,700원

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

권장 수강 대상

프로그래밍 입문자

카테고리

개발

훈련 시간

18시간 40분

강의수

23개

강의 소개

커리큘럼

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

🎁 수강하면 얻을 수 있는 것

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

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

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

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

이런 고민이 있나요?

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

비전공자

김**

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

서비스 기획자 / PM

홍**

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

창업 준비자

박**

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

커리어 업스킬러

하**

이렇게 성장할 수 있어요!

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

비전공자

김**

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

서비스 기획자 / PM

홍**

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

창업 준비자

박**

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

커리어 업스킬러

하**

프로젝트 맛보기

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

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

강의 맛보기

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

크리에이터

배인진(아이비)

원밀리언라인즈코딩 CEO

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

커리큘럼

입문

18시간 40분

노드 01

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

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

1-1

바이브코딩이란?

5분

1-2

Windsurf 설치 및 설정

20분

1-3

Windsurf와 Cursor 요금제

10분

1-4

Windsurf에서 사용 가능한 모델

15분

노드 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

프로젝트 1: 나의 첫 Git

Git과 GitHub의 기본 개념을 이해하고, 내가 만든 웹페이지를 처음으로 저장소에 업로드하며 버전 관리의 첫걸음을 뗍니다.

8-1

프로젝트 1: 나의 첫 Git

1시간

노드 09

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

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

9-1

Windsurf 저장소 초기화

10분

9-2

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

5분

9-3

GitHub 계정 인증

5분

9-4

원격 저장소 연동

5분

노드 10

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

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

10-1

Gemini와 함께 이력서 수정

5분

10-2

자기소개 섹션 수정

20분

10-3

Gemini 이미지 생성 기능 활용

10분

10-4

Windsurf 이미지 업로드 기능

10분

10-5

오류 해결

10분

10-6

커밋 추가

20분

노드 11

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

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

11-1

Claude 웹페이지 개발

20분

11-2

Figma 디자인 초안 생성

20분

11-3

ChatGPT 활용

5분

11-4

Figma 디자인 수정

10분

노드 12

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

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

12-1

Rule 수정

5분

12-2

GitHub Pull Request

20분

12-3

원격저장소 동기화 및 새 브랜치 생성

15분

노드 13

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

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

13-1

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

25분

노드 14

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

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

14-1

개선 1 - 타임라인 디자인 반영

20분

14-2

경력사항 수정

10분

노드 15

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

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

15-1

개선 2 - 컬러 팔레트

20분

15-2

커밋 추가

5분

15-3

프로젝트 컬러 팔레트 수정

15분

15-4

커밋 추가 및 브랜치 병합

15분

노드 16

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

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

16-1

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

10분

16-2

반응형 웹 만들기

5분

16-3

오류 해결 및 Revert

15분

16-4

브랜치 병합

15분

노드 17

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

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

17-1

개선 4 - 통합 블럭 디자인 및 반응형 웹 만들기

10분

17-2

커밋 추가

20분

노드 18

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

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

18-1

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

1시간

노드 19

3D 웹도 할 수 있다! AI와 시작하기

Three.js와 Tripo3D 같은 도구를 활용해, 코드 몰라도 3D 모델을 만들고 웹에 불러오는 방법을 배웁니다.

19-1

Threejs와 인터랙티브 웹

15분

19-2

TRELLIS 소개

10분

19-3

Tripo3D

10분

노드 20

쇼핑몰 웹페이지에 3D View를 구현해보자

3D 가방 이미지를 웹페이지에 배치하고, AI의 도움을 받아 제품 상세 보기처럼 구성된 쇼핑몰 페이지를 만들어봅니다.

20-1

가방 쇼핑몰 웹페이지 기획

10분

20-2

가방 쇼핑몰 프로젝트 생성

15분

20-3

3D 가방 애셋 생성

15분

20-4

커밋 추가

15분

노드 21

가방이 빙글빙글! 3D 기능 구현하기

클릭하면 가방이 회전하고, 버튼으로 색도 바꾸는 기능을 추가하며 3D 인터랙션의 기초를 체험합니다.

21-1

3D 가방 회전 기능

10분

21-2

3D 가방 캐러셀

15분

21-3

3D 가방 색상 변경 기능

15분

노드 22

나의 개발 여정 마무리: 배포 및 회고

완성한 웹앱을 Netlify로 배포하고, 프로젝트 소개글과 회고를 정리하며 나만의 3D 개발 여정을 마무리합니다.

22-1

웹 배포

15분

22-2

프로젝트 소개글 작성

15분

22-3

나의 개발 여정 마무리

10분

노드 23

최종 프로젝트: 3D 웹앱 만들기

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

23-1

최종 프로젝트: 3D 웹앱 만들기

2시간

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

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

이런 고민이 있나요?

이렇게 성장할 수 있어요!

프로젝트 맛보기

크리에이터

커리큘럼

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