개강일 지남
[왕초보] 비개발자도 할 수 있는 바이브 코딩 웹 개발
(주)모두의연구소 · 114회차 · 서울 강남구
LLM디자인K-디지털기초
프로그램 요약
코딩이 나와는 먼 이야기 같았다면? AI에게 요청하고 함께 수정해 나가며 나만의 웹서비스를 직접 만드는 바이브 코딩 입문 과정
- 수업일정
- 2026.08.04 ~ 2026.09.02약 1개월
- 모집정원
- 25명
- 총 시간
- 미표기
- 학습장소
- 서울서울특별시 강남구 강남대로 324 (역삼동 역삼디오슈페리움)온라인
- 강의장
- 2층
- 수강료
- 23,700원
출처 · 고용24 등록값 · 기관 표기분은 별도 표시
어떤 분이 수강하면 좋을지
- ✓전공·학력 무관 — K-디지털 기초역량은 제도상 전공을 보지 않습니다
- ✓웹개발에 관심 있는 코딩 입문자로서, 실습 중심 학습과 결과물 제작을 통해 개발의 기초를 쌓고자 하는 학습자
- ✓PM·기획자 등 비개발 직군 실무자로서, 개발 지식 기반의 직무 이해도 향상과 원활한 기술 협업 능력을 기르고자 하는 학습자
- ✓바이브코딩 등 AI 기반 개발 보조도구에 관심 있는 예비 개발자 또는 비전공자로서, 결과 중심 실습을 통해 개발 진입 장벽을 낮추고자 하는 학습자
출처 · 기관 랜딩페이지 · 제도 요건
커리큘럼
- 1노드01 바이브 코딩 첫걸음: Windsurf로 시작하기
바이브코딩이란? · Windsurf 설치 및 설정 · Windsurf와 Cursor 요금제 · Windsurf에서 사용 가능한 모델
고용24 등록 교과목 25개 보기
- 교과목단원명
- 바이브 코딩 첫걸음: Windsurf로 시작하기AI 코드 에디터 Windsurf를 설치하고 기본 사용법을 익히며, 바이브 코딩의 개념과 가능성을 이해합니다.
- Vibe Surfing을 시작해보자!웹페이지를 처음 만들어보고, AI가 자동으로 코드를 작성하고 수정하는 캐스케이드 구조의 원리를 체험합니다.
- 바이브 코딩을 위한 LLM 이해LLM(Large Language Model)의 개념을 익히고, 다양한 프롬프트 실험을 통해 AI의 답변 방식과 작동 원리를 이해합니다.
- 뭔가 마음에 들지 않는데? 프로젝트 개선하기결과물을 리뷰하고, 프롬프트와 룰을 수정해가며 나만의 스타일로 프로젝트를 개선해봅니다.
- 처음 써보는 Github, 어렵지 않아요GitHub에 가입하고 저장소를 만들며, 내 코드를 온라인에 안전하게 저장하고 관리하는 기본 과정을 배웁니다.
- Git으로 내 프로젝트를 관리해보자Windsurf와 GitHub를 연결해 커밋, 푸시, 풀 등 Git의 기본 기능을 사용해보고 버전 관리를 시작합니다.
- 협업과 버전 관리를 위한 Git Branch코딩 협업 시 사용하는 Git의 '브랜치' 개념을 배우고, 브랜치 생성, 이동, 병합 과정을 실습합니다.
- 프로젝트 1: 나의 첫 코드 저장소, GitGit과 GitHub의 기본 개념을 이해하고, 내가 만든 웹페이지를 처음으로 저장소에 업로드하며 버전 관리의 첫걸음을 뗍니다.
- 코딩은 몰라도 저장은 해야죠? GitHub 저장Windsurf에서 만든 웹페이지를 GitHub에 업로드하고, 원격 저장소와 연동하는 과정을 실습합니다.
- 포트폴리오도, 디자인도 AI에게 맡겨보자Gemini 등 AI 도구의 도움을 받아 포트폴리오 내용을 수정하고, 나만의 이력서를 쉽고 빠르게 개선합니다.
- 부족한 디자인 감각, AI가 채워줘요AI에게 웹페이지 색상, 레이아웃, 이미지 스타일을 추천받고 직접 반영하면서 웹 디자인을 한층 업그레이드해봅니다.
- 지금까지의 작업 내용을 업데이트해보자수정한 내용을 GitHub에 반영하고, 브랜치를 병합해 최종 결과물로 정리하는 Git 활용법을 익힙니다.
- 뭐부터 고칠까? AI를 활용한 개선 계획 세우기AI의 제안을 참고해 웹페이지에서 개선할 포인트를 정리하고, 디자인과 구조를 체계적으로 리팩토링할 계획을 세웁니다.
- 개선 1: 타임라인 디자인 반영하기이력서 섹션을 타임라인 형태로 변경하고, 개발자 도구를 활용해 경력 정보를 보기 좋게 배치해봅니다.
- 개선 2: 컬러 팔레트 수정하기웹페이지에 사용할 색상을 AI에게 추천받고, CSS 변수로 정의해 색상 톤을 일관성 있게 바꿔봅니다.
- 개선 3: 좌우 교차 레이아웃 반영하기프로젝트 섹션을 좌우 교차 레이아웃으로 구성하고, 반응형 웹 요소도 함께 적용해 실전 디자인 감각을 익힙니다.
- 개선 4: 통합 블럭 디자인 및 반응형 웹 만들기자기소개 섹션을 통합형 블럭으로 재구성하고, 다양한 화면 크기에서도 잘 보이도록 반응형 스타일을 적용해 마무리합니다.
- 프로젝트 2: AI와 만든 나만의 웹 포트폴리오Gemini, Claude 등의 AI 도구를 활용해 이력서와 자기소개를 포함한 웹 포트폴리오를 직접 만들고, 디자인도 개선해보는 실습 중심 프로젝트입니다.
- 3D 웹도 할 수 있다! AI와 시작하기Three.js와 Tripo3D 같은 도구를 활용해, 코드 몰라도 3D 모델을 만들고 웹에 불러오는 방법을 배웁니다.
- 쇼핑몰 웹페이지에 3D View를 구현해보자3D 가방 이미지를 웹페이지에 배치하고, AI의 도움을 받아 제품 상세 보기처럼 구성된 쇼핑몰 페이지를 만들어봅니다.
- 가방이 빙글빙글! 3D 기능 구현하기클릭하면 가방이 회전하고, 버튼으로 색도 바꾸는 기능을 추가하며 3D 인터랙션의 기초를 체험합니다.
- 나의 개발 여정 마무리: 배포 및 회고완성한 웹앱을 Netlify로 배포하고, 프로젝트 소개글과 회고를 정리하며 나만의 3D 개발 여정을 마무리합니다.
- 최종 프로젝트: AI와 만든 나만의 3D 웹 페이지3D 에셋 생성부터 회전, 색상 변경 등 인터랙션 기능까지 구현하며, AI와 함께 나만의 3D 쇼핑몰 웹앱을 완성하고 세상에 배포합니다.
- 총 훈련시간29 시간
출처 · 기관 랜딩페이지 · 접힘은 고용24 등록 교과목
지원 혜택
취업 연계
- ·1:1 Q&A 지원(담당 멘토)
학습 지원
- ·강의 및 자료 평생 소장(완강 시)
- ·수료증 발급
- ·실무 프로젝트 실습
출처 · 기관 랜딩페이지 · 훈련장려금은 제도
지원 절차
- 1고용24에 먼저 신청 후, 내일배움카드로 결제해야 최종 신청 완료
출처 · 기관 랜딩페이지 · 기관마다 다릅니다
자주 묻는 질문
비전공자도 지원할 수 있나요?
K-디지털 기초역량은 제도상 전공·학력을 보지 않습니다. 다만 기관이 밝힌 훈련 대상이 있어 위 「어떤 분이 수강하면 좋을지」를 함께 확인하세요.
내일배움카드가 꼭 있어야 하나요?
지원 시점에 없어도 됩니다. 상담 단계에서 발급을 진행합니다. 다만 수강신청은 카드가 있어야 마칠 수 있습니다.
실제로 얼마를 내나요?
23,700원입니다. 정가 237,000원 중 213,300원을 정부가 지원합니다. 90% 국비지원, 수강료 237,000원 → 23,700원(본인부담, 10%)
선발 절차가 있나요?
기관이 공개한 절차에서 별도 시험·전형은 확인되지 않았습니다. 상담 후 수강신청으로 이어집니다.
예전에 국비 교육을 들었는데 또 되나요?
중복수강 제한이 있을 수 있습니다. 최근 수료 이력이 있으면 상담 단계에서 먼저 확인해야 합니다.
출처 · 제도 요건 · 과정 데이터로 답이 채워지는 질문만
기관 랜딩페이지 https://service.modulabs.co.kr/r/zgC8BpCa
고용24 2026-08-14 기준 · 매일 갱신
