초급

12차시 완벽 마스터! 실전 바이브코딩

코딩 몰라도 AI로,

수강 신청하기 >
12차시
온라인
이종우 강사 3개월 / 6개월

요즘 이런 고민, 한 번쯤 해보지 않으셨나요?
외주 견적이 너무 비싸서 상담 문의 페이지 하나도 못 만들고 있어요.
노션·인스타로 버티는데, 제대로 된 브랜드 랜딩페이지 가 필요해요.
AI에게 코드를 받아도 어디에 붙이고 어떻게 배포하는지 모르겠어요.
플랫폼·템플릿에 의존하다 보니 작은 수정도 자유롭지 않아요.
AI 강의를 들어봐도 결국 실제 결과물로 이어지지 가 않아요.

해당된다면, 집중!
?
?
?
그래서 준비했습니다!

아래 항목을 확인해 보세요

직장인·창업자
비개발자이지만 직접 웹사이트를 만들고 싶은 직장인·1인 사업자
강사·마케터
강사, 마케터, 교육 운영자, 브랜드 담당자
기획·실무자
소개·상담·브랜드형 랜딩페이지, 행사 페이지가 필요한 실무자
공인중개사·1인
공인중개사·교육 운영자·개인 브랜딩 등 온라인 페이지가 꼭 필요한 분
AI 실전 입문
AI를 공부만으로 끝내지 않고 실생활에 사용하고 싶은 입문자

POINT 1
바이브코딩 실전 마스터: 강의 흐름을 한눈에!

결과물을 먼저 만들고, 원리를 이해하는 방식으로 비개발자도 현업 수준의 AI 결과물을 빠르게 마스터합니다.

바이브코딩 AI 실전 활용
STEP 01. Codex 실전 활용

강사가 제공하는 엄선된 프롬프트와 완성형 템플릿을 통해 코딩을 전혀 몰라도 나만의 첫 웹사이트 결과물을 빠르게 완성합니다.

| 주요 학습 내용 |
  • 비개발자 맞춤형 AI 코딩 프롬프트 실습
  • 완성형 웹사이트 템플릿 기반 빠른 결과물 도출
  • Codex AI를 활용한 실시간 오류 디버깅 및 수정
  • 최신 AI 코딩 도구의 핵심 워크플로우 마스터
STEP 02. Google Antigravity 디자인

완성된 뼈대 위에 세련된 색감과 레이아웃을 입힙니다. Antigravity의 가이드를 따라 시선을 사로잡는 프리미엄 UI 디자인을 완성합니다.

| 주요 학습 내용 |
  • Antigravity를 활용한 고급 디자인 레이아웃 튜닝
  • 브랜드 정체성을 담은 맞춤형 컬러 팔레트 구축
  • 모바일/태블릿/PC 어디서나 완벽한 반응형 레이아웃
  • 사용자 경험(UX) 극대화를 위한 화면 흐름 설계
STEP 03. Skills + MCP 작업 흐름

강사가 엄선한 Skills·MCP 조합으로 실습 흐름을 단순화하고 응용 범위를 넓힙니다.

| 주요 학습 내용 |
  • Skills·MCP 기반 실무 자동화 워크플로우
  • 다양한 비즈니스 툴과의 유기적인 연동 실습
  • 프롬프트 고도화를 통한 고품질 아웃풋 도출
  • AI 에이전트를 활용한 문제 해결 능력 배양
STEP 04. 3D 인터랙티브 + 배포

3D·모션 결과물을 만들고 GitHub·Vercel·SEO까지 연결해 공개 가능한 사이트로 마무리합니다.

| 주요 학습 내용 |
  • Three.js 및 3D 그래픽스를 활용한 인터랙티브 연출
  • Vercel을 이용한 초고속 웹 호스팅 및 배포
  • 검색 엔진 최적화(SEO) 및 사이트 노출 환경 세팅
  • 모바일 및 PC 디바이스 반응형 최적화 마무리
POINT 2
우리 강의가 특별한 5가지 핵심 POINT

바이브코딩으로 완성하는 압도적인 비주얼의 웹사이트와 실무 적용 로드맵을 선사합니다.

5대 핵심 강점 비개발자 최적화
업무자동화부터
프로덕트까지 웹사이트 결과물 3종 제작 (비개발자가 직접 만드는
실습 중심의 아웃풋형 강의)
강의 핵심 요약으로 개발 풀사이클 경험 (바이브코딩 강의의 기본)
Codex와
Antigravity의 핵심 작업 흐름 정리
막힘없이 술술 따라갈 수 있도록 강의 교안 제공 (누구나 완강 가능!)
나만의 압도적 비주얼 랜딩 페이지 제작 가능

남들이 외주 비용으로 고민할 때
당신은 프롬프트 한 줄로

일상에 변화가 찾아옵니다

BEFORE 수강 전
INPUT
"내 홈페이지에 넣을 예쁜 3D 그래픽 이미지 좀 만들어줘.
근데 이거 웹사이트에 올리면 마우스 따라 움직이게 할 수 있어? 코드는 몰라"
OUTPUT
모호한 지시와 수동 작업으로
낮은 품질의 결과물 & 시간 낭비
AFTER 수강 후
INPUT
"내가 구상한 서비스 기획서 토대로 바이브 코딩 시작할게.
메인 화면에 들어갈 3D 오브젝트 인터랙션을 매끄럽게 연동하고, 배포 가능한 고성능 랜딩페이지 완전판으로 빌드해줘."
OUTPUT
업무 맥락을 완벽히 이해한
실제 사용 가능한 결과물 생성!

당신이 만들어 내는 아웃풋!

다른 사람 화면이 아닌, 수강 후 여러분들이 완성하게 될 화면입니다

Project 01
디자인형 브랜딩 랜딩페이지

3D 에셋과 오픈소스 디자인을 활용해 브랜드형 랜딩페이지를 만들고, Git 저장, GitHub 업로드, Vercel 배포, 메타데이터 점검까지 진행합니다.

Project 02
상담문의 · 전환형 랜딩페이지

사용자가 상담 신청을 남길 수 있는 전환형 페이지를 만들고, Google Apps Script를 활용해 Google Sheets와 Gmail로 문의가 자동 접수되는 흐름을 구현합니다.

Project 03
3D 인터랙티브 웹사이트(1)

웹캠으로 손동작을 인식해 제스처에 따라 번개 효과와 3D 파티클이 반응하는 인터랙티브 웹사이트를 만듭니다. MediaPipe·Three.js로 복잡한 인터랙션까지 직접 구현해봅니다.

Project 03-1
3D 인터랙티브 웹사이트(2)

마우스·스크롤에 반응하는 3D 오브젝트와 카메라 연출을 더한 몰입형 웹사이트를 완성하고, GitHub·Vercel 배포까지 연결해 공개 가능한 결과물로 마무리합니다.

수강신청
코딩 몰라도 AI로,
랜딩페이지와 3D 웹사이트 만들기

여러분의 페이스에 맞춘 체계적인 학습으로 빠르게 성장하는 여정을 시작해보세요

3개월 수강
단기 집중형 - 빠르게 시스템 구축
[실습 자료 무료 제공]
  • 왕초보 빠른 시작 가이드북 (Notion, PDF)
  • 결과물 유형별 제작 가이드북 3종 (Notion, PDF)
  • 실전 웹사이트 템플릿 + 프롬프트 세트 (GitHub, ZIP, Notion)
월 35,760 원
3개월 할부 시 ⓘ
권장 소비자 가격 214,000원
할인 금액 -106,720원
할인 판매가 107,280원
3개월 수강 신청 바로가기
추천
6개월 수강
실무 적용 + 반복 학습형
[실습 자료 무료 제공]
  • 왕초보 빠른 시작 가이드북 (Notion, PDF)
  • 결과물 유형별 제작 가이드북 3종 (Notion, PDF)
  • 실전 웹사이트 템플릿 + 프롬프트 세트 (GitHub, ZIP, Notion)
  • 6개월 수강 혜택 BONUS
  • 엄선 Skills, MCP, 참고사이트 모음 (Notion, PDF)
  • 디스코드 질문 채널 지원
월 29,800 원
6개월 할부 시 ⓘ
권장 소비자 가격 298,000원
할인 금액 -119,200원
할인 판매가 178,800원
6개월 수강 신청 바로가기

커리큘럼
5단계 학습 로드맵

성공적인 완강을 향한 스마트한 흐름

STEP 01

AI 웹제작 입문과 실습 환경 세팅

1~2차시
실습 환경 구축 완료
  • 1차시 왜 지금 AI로 결과물을 만들어야 하는지 / 바이브·에이전틱 코딩 / 위임과 통제력 / 최소 개발 교양
  • 2차시 Node.js, Codex, Antigravity, Git, GitHub, Vercel 세팅 / Skills와 MCP 기본 개념
STEP 02

브랜드 디자인형 랜딩페이지 제작

3~5차시
브랜드형 랜딩페이지 완성
  • 3차시 Next.js 초안 생성 / Antigravity와 Codex 활용 브랜드형 랜딩페이지 제작
  • 4차시 21st.dev 등 오픈소스 디자인 에셋 활용 / 원하는 부분을 집어서 수정하는 방법
  • 5차시 Git 중간 저장 / GitHub 업로드와 Vercel 배포 / OG 메타데이터 점검 및 수정
STEP 03

상담문의 · 전환형 랜딩페이지 제작

6~8차시
전환형 랜딩페이지 완성
  • 6차시 계획서.md 기반 전환형 페이지 기획 / UI/UX Pro Max Skill 활용 / 상담 신청 폼 제작
  • 7차시 Google Apps Script 설정 / Google Sheets와 Gmail 연동 자동 접수 구현
  • 8차시 .env.local 환경변수 설정 / Vercel 배포 시 환경변수 등록 및 커스텀 도메인 연결
STEP 04

3D 인터랙티브 웹사이트 제작

9~11차시
3D 인터랙티브 웹 완성
  • 9차시 카메라 API / MediaPipe / Hand Landmarker 및 WebGL / Three.js / Fiber 기초
  • 10차시 웹캠 손동작 인식 연동 및 제스처에 반응하는 번개 효과 제어 웹사이트 제작
  • 11차시 3D 파티클 및 손가락 카운트 예제 제작 / 직접 만든 Skill 활용 및 수정 흐름
STEP 05

검색 등록, SEO, 전체 정리

12차시
최종 결과물과 실무 배포 완료
  • 12차시 Google Search Console · Naver Search Advisor 등록 및 SEO 기본 점검 / AI 협업 태도와 확장 정리

수강혜택
수강하시면 아낌없이 드립니다

강의와 함께 제공되는 실습 자료 패키지

왕초보 빠른 시작 가이드북 (Notion, PDF)

Codex·Antigravity·GitHub·Node 설치부터 첫 실행까지 단계별 친절 안내

결과물 유형별 제작 가이드북 3종 (Notion, PDF)

상담문의형, 브랜드디자인형, 3D 인터랙티브형 각 상세 제작 가이드 제공

실전 웹사이트 템플릿 + 프롬프트 세트 (GitHub, ZIP, Notion)

바로 수정하여 활용 가능한 템플릿과 상황별 프롬프트 모음

+
6개월 학습 시 추가 제공
엄선 Skills, MCP, 참고사이트 모음 (Notion, PDF)

실습에 바로 활용 가능한 추천 기술과 엄선 참고 사이트 모음집

디스코드 질문 채널 지원

1:1 질문과 커뮤니티 학습 지원을 위한 실시간 디스코드 채널 제공

여러분도 충분히 가능해집니다

학습이 끝난 뒤에는, 누구나 자신감 있게

기존 툴로는 표현할 수 없었던
엔터·뷰티 업계의 감도를

AI를 통해 빠르게 시각적으로 구현합니다

외주 비용과 마감 시간에
시달리던 비주얼을

4주 안에 내 손으로 직접 제작합니다

일방향 수업만 듣고
막막한 채 끝나던 학습이

코칭을 통해 완성됩니다

이종우 강사님
♥
좋아요 1,204개
#바이브코딩 #AI #웹사이트제작 #이종우 #EDUWILL

주요 경력

  • 현) 이지워크 B2B 업무자동화 구축 및 컨설팅 회사 CTO
  • 현) LG CNS 전자 업무자동화 구축 파트너사
  • 전) 앱테크 스타트업 엔스페이스 서비스 기획 및 프론트엔드 개발
  • 전) 멋쟁이사자처럼 스타트업 국비지원교육 보조강사
  • 전) 홍익대학교 개발 교육 동아리 LaunchForge 운영 및 AI 실습 진행

대표 프로젝트

  • 글로벌 메모 서비스 Memossage 기획·개발·운영 (16개 언어 지원, 1.5만 다운로드)
  • 식사 인증 모바일 앱 Digin 기획 및 프론트엔드 개발
  • PDF 기반 AI 학습 도구 KeepUpClass 기획·개발
  • KOSIS 데이터 기반 종합소득 기준 계산 웹서비스 paytier 개발

안녕하세요.
B2B 업무자동화 구축 전문가이자
실전형 AI 강사 이종우 입니다.

" AI 에게 충분히 맡기되, 내가 무엇을 만들고 있는지는 끝까지 놓치지 않는 것."

이 강의는 코딩 문법을 외우는 강의가 아닙니다. 개발을 처음 해보는 분들이 AI와 협업해 실제로 동작하는 웹 결과물을 직접 만들어보는 실전 입문 강의입니다. 그래서 제가 가장 중요하게 생각하는 것은 두 가지, 위임과 통제력 입니다.

AI에게 작업은 충분히 맡기되, 지금 내가 무엇을 만들고 있고 어느 단계에 와 있으며 무엇을 확인하고 수정해야 하는지는 스스로 판단할 수 있어야 합니다. AI가 끌고 가는 것이 아니라, 여러분이 방향키를 쥔 채 AI와 함께 결과물을 완성해 나가도록 돕는 것이 이 강의의 핵심 방향입니다.

  • 기획 → 요청 → 확인 → 수정 → 저장 → 배포
  • 여러 결과물에서 이 흐름을 직접 반복하며 AI와의 협업 감각을 체화
  • 코딩 지식 없이도 '실제로 배포되는 진짜 결과물'을 완성하는 경험

이 흐름을 반복하다 보면, 어느새 AI에게 무엇을 맡기고 무엇을 직접 챙겨야 하는지 자연스럽게 감이 잡히실 겁니다. 첫 웹 결과물을 직접 완성하는 그 순간까지, 제가 옆에서 차근차근 함께 하겠습니다.

수강생들이 직접 증명하는 솔직 후기

★★★★★
@킴-e5*** 님
기초부터 다 알려주시니 님 좋네여ㅠㅠ

학원 수업에선 이렇게 자세히 안알려줘서 하면서도 어려운 부분이 많았는데 기초부터 다 알려주시니 님 좋네여ㅠㅠ

★★★★★
@sky1*** 님
아~ 정말 댓글 안달고는 못 견디게 만드는 고퀄 강의네요.

댓글 안달고는 못 견디게 만드는 고퀄 강의네요. 한번 들었는데 앞으로 몇번 더 들을 계획입니다. 진심 도움 됩니다. 감동감동

★★★★★
@sohh*** 님
코딩을 처음 입문한 문과생인데 한 번에 이해가 잘 가도록 쉽게 만들어주셨네요!

덕분에 어렵지 않게 포기하지 않고 공부할 수 있을 것 같습니다. 좋은 영상 만들어 주셔서 감사드립니다. ?

★★★★★
@정정*** 님
중간중간 "이건 원래 어려운 거에요." 라고 해주시는 부분이 너무 감사해요 ㅠㅠ

학원을 가던 부트캠프를 가던 맨날 저만 뒤쳐지고 모르겠고 했는데 선생님이 용기를 주시니까 그나마 힘이 나서 끝까지 다 들을 수 있었습니다. ㅠㅠ

★★★★★
@전상*** 님
와...설명 개쩐다.. 진짜

진짜 시간 최대한 효율적으로 써서 설명하고 핵심과 요점만 딱딱 잡아서 설명하는데 할 말은 다하네.. 앞으로 자주 들리겠습니다.

★★★★★
@Blues*** 님
꼼꼼한 강의 님 감사드리고 구독하고 리플레이 하면서 배워 보겠습니다. 꾸벅^^

예전부터 코딩에 관심은 많았지만 발을 디디지 못했었는데.. 늦게나마 배워보려 도전중입니다. ...(생략) 끝까지 배워보겠습니다. 꾸벅!!! ^^

★★★★★
@킴-e5*** 님
기초부터 다 알려주시니 님 좋네여ㅠㅠ

학원 수업에선 이렇게 자세히 안알려줘서 하면서도 어려운 부분이 많았는데 기초부터 다 알려주시니 님 좋네여ㅠㅠ

★★★★★
@sky1*** 님
아~ 정말 댓글 안달고는 못 견디게 만드는 고퀄 강의네요.

댓글 안달고는 못 견디게 만드는 고퀄 강의네요. 한번 들었는데 앞으로 몇번 더 들을 계획입니다. 진심 도움 됩니다. 감동감동

★★★★★
@sohh*** 님
코딩을 처음 입문한 문과생인데 한 번에 이해가 잘 가도록 쉽게 만들어주셨네요!

덕분에 어렵지 않게 포기하지 않고 공부할 수 있을 것 같습니다. 좋은 영상 만들어 주셔서 감사드립니다. ?

FAQ
FAQ
VIBE CODING
A A 네, 이 강의는 비개발자 왕초보를 위해 설계되었습니다. 강사가 준비한 Skills·프롬프트·템플릿으로 결과물을 먼저 만들고, 그다음 원리를 이해하는 바이브코딩 방식이라 코딩 지식이 없어도 따라갈 수 있습니다.
A A Codex(AI 코딩), Google Antigravity(디자인 보강), Skills·MCP, GitHub, Vercel(배포), Google Search Console 등을 사용합니다. 문의 폼은 구글시트·지메일과 Apps Script로 연결합니다. 모든 도구의 설치·세팅 방법은 강의에서 안내합니다.
A A 네. Vercel 무료 플랜으로 사이트를 계속 운영할 수 있고, 외주 없이 직접 수정·배포할 수 있도록 운영·SEO 체크리스트도 함께 제공합니다.
54029 54029
S:158