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

마감 O일전

[왕초보] 비개발자도 할 수 있는 바이브 코딩 웹 개발
대외활동
프론트엔드 개발
프로그래밍

분야
응모대상
주최사
주식회사 모두의연구소
접수기간
2025년 11월 18일(화)~2025년 11월 25일(화)
활동기간
2025년 11월 25일(화)~2025년 12월 25일(목)
혜택

상세내용

[국비지원 90%] 비개발자도 할 수 있는 바이브 코딩 웹 개발

📌 과정 개요

  • 과정명: [왕초보] 비개발자도 할 수 있는 바이브 코딩 웹 개발
  • 총 교육시간: 18시간 40분 (23개 강의)
  • 수강료: 237,000원 → 23,700원 (국비 90% 지원)
  • 카테고리: 개발
  • 난이도: 입문
  • 대상: 프로그래밍 입문자

💰 지원 혜택

  • 국비 90% 지원 (내일배움카드)
  • 강의 및 자료 평생 소장
  • 1:1 Q&A 멘토 지원
  • 수료증 발급
  • 실무 프로젝트 실습 포함

🎯 이런 분들께 추천해요

  • 코딩을 배우고 싶지만 어디서부터 시작해야 할지 막막한 비전공자
  • 개발팀과 소통할 때 웹 지식이 부족해 답답한 기획자/PM
  • 내 아이디어를 웹사이트로 만들고 싶은 창업 준비자
  • AI 코딩 툴을 제대로 활용해본 적이 없는 커리어 업스킬러
  • 코딩이 '나와는 먼 이야기' 같았던 모든 분

📚 무엇을 배우나요?

1단계: 바이브 코딩 시작

  • AI 코드 에디터 Windsurf로 웹페이지 첫 제작
  • LLM(대규모 언어 모델) 이해 및 프롬프트 활용
  • AI가 자동으로 코드 작성하고 수정하는 캐스케이드 원리 체험

2단계: Git & GitHub 협업

  • GitHub 가입 및 저장소 생성
  • Git으로 버전 관리 시작 (커밋, 푸시, 풀)
  • Git Branch로 협업 프로세스 실습
  • 코드를 온라인에 안전하게 저장하고 관리

3단계: 웹 포트폴리오 제작

  • AI 도구(Gemini, Claude)로 포트폴리오 내용 수정
  • AI에게 색상, 레이아웃, 이미지 스타일 추천받기
  • 타임라인 디자인, 컬러 팔레트 적용
  • 좌우 교차 레이아웃 및 반응형 웹 구현
  • HTML, CSS, JavaScript 기본기 자연스럽게 습득

4단계: 3D 인터랙티브 웹앱

  • Three.js와 Tripo3D로 3D 모델 생성
  • 쇼핑몰 웹페이지에 3D View 구현
  • 클릭으로 회전, 버튼으로 색상 변경 기능 추가
  • 3D 인터랙션 기초 체험

5단계: 배포 및 완성

  • Netlify로 웹앱 배포
  • 프로젝트 소개글 및 회고 작성
  • 나만의 3D 쇼핑몰 웹앱 완성

👨‍🏫 강사 소개

배인진(아이비) | 원밀리언라인즈코딩 CEO

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

📋 커리큘럼 (총 23개 노드)

  1. 바이브 코딩 첫걸음: Windsurf로 시작하기
  2. Vibe Surfing을 시작해보자!
  3. 바이브 코딩을 위한 LLM 이해
  4. 뭔가 마음에 들지 않는데? 프로젝트 개선하기
  5. 처음 써보는 Github, 어렵지 않아요
  6. Git으로 내 프로젝트를 관리해보자
  7. 협업과 버전 관리를 위한 Git Branch
  8. 프로젝트: 나의 첫 Git
  9. 코딩은 몰라도 저장은 해야죠? GitHub 저장
  10. 포트폴리오도, 디자인도 AI에게 맡겨보자
  11. 부족한 디자인 감각, AI가 채워줘요
  12. 지금까지의 작업 내용을 업데이트해보자
  13. 뭐부터 고칠까? AI를 활용한 개선 계획 세우기
  14. 개선 1: 타임라인 디자인 반영하기
  15. 개선 2: 컬러 팔레트 수정하기
  16. 개선 3: 좌우 교차 레이아웃 반영하기
  17. 개선 4: 통합 블럭 디자인 및 반응형 웹 만들기
  18. 프로젝트: 내가 만든 웹 포트폴리오
  19. 3D 웹도 할 수 있다! AI와 시작하기
  20. 쇼핑몰 웹페이지에 3D View를 구현해보자
  21. 가방이 빙글빙글! 3D 기능 구현하기
  22. 나의 개발 여정 마무리: 배포 및 회고
  23. 최종 프로젝트: 3D 웹앱 만들기

✅ 수강 후 할 수 있어요

  • AI 코딩 툴로 코드 작성 장벽 없이 웹 개발 시작
  • HTML, CSS, JavaScript 기본기 자연스럽게 습득
  • 3D 인터랙티브 웹앱을 직접 배포하는 경험
  • GitHub 버전 관리와 협업 프로세스 실전 활용
  • 아이디어만 있으면 웹사이트를 뚝딱 완성

🎯 핵심 실습 프로젝트

  • 프로젝트 1: 나의 첫 Git - 버전 관리 시작
  • 프로젝트 2: 웹 포트폴리오 - AI로 이력서 웹사이트 제작
  • 최종 프로젝트: 3D 쇼핑몰 웹앱 - 3D 에셋 생성부터 인터랙션까지

🛠️ 실습 도구 안내

  • Windsurf: Free Plan 제공, 2주 간 15$ 상당의 Pro Plan 무료 체험 가능
  • 일부 실습 도구는 유료 구독 필요하지만, 무료 도구로도 충분히 실습 가능

📝 신청 방법

  1. 고용24에서 과정 신청
  2. 내일배움카드로 결제
  3. 최종 신청 완료

코딩이 '나와는 먼 이야기' 같으셨나요?
이제는 AI에게 요청하고 지켜보기만 하면 웹사이트가 뚝딱 완성됩니다!
개발자가 아니어도 괜찮아요. 아이디어 하나, 클릭 몇 번이면 충분하니까요.

자세한 내용은 반드시 주최사/주관사 홈페이지 또는 직접 문의를 통해 안내 받으세요.

AD


강아지분양, 품종 정보 확인, 서리펫

기업문화 엿볼 때, 더팀스

로그인

/