3시간 · 3교시 · 4개 도구 비교 + 실습

코드 안 짜고 5분 만에
랜딩페이지가 인터넷에 뜬다

바이브코딩 — AI 도구로 코딩을 협업처럼. 동아리 멤버를 위한 실전 워크숍.
오늘 끝나면 내 사이트가 진짜로 인터넷에 떠 있어요.

총 3시간 (60분 × 3교시) 👥 동아리·소규모 · 실습 100% 💻 준비물: 노트북 + 각 도구 계정 🎯 결과물: 내 랜딩페이지 + 배포 URL

오늘 만져볼 4가지 도구

🌐
v0 by Vercel
웹에서 채팅 → 즉석
React 컴포넌트 생성
웹 생성기
⌨️
Claude Code
터미널에서 코드베이스
전체와 함께 대화
CLI
🤖
ChatGPT Codex
에이전트가 샌드박스에서
코드 실행·결과 회신
에이전트
🛸
Antigravity
에이전트 중심 IDE.
여러 작업 동시 위임
에이전트 IDE

※ Lovable, Bolt.new도 v0와 비슷한 카테고리. 1교시에서 1분씩 짧게 언급.

PERIOD 01 · 60분 🎨

코드 안 짜고 만든다

4개 도구로 같은 미션(한 줄 소개 페이지)을 만들어 비교. 차이가 한눈에 보여요.

10분컨셉: 바이브코딩이란?
10분🔥 v0 시연·실습
10분🔥 Claude Code 시연
10분🔥 ChatGPT Codex 시연
10분🔥 Antigravity 시연
10분도구 선택 가이드
슬라이드 열기 →
PERIOD 02 · 60분 ✍️

내 랜딩페이지 본격 제작

자기에게 맞는 도구 1개 정하고 — 소개·프로젝트·연락처가 들어있는 페이지를 본격 작성.

05분내 도구 선택
05분콘텐츠 준비
35분🔥 본격 실습 — 내 페이지
15분옆 사람 보여주기 + 피드백
슬라이드 열기 →
PERIOD 03 · 60분 🚀

세상에 내보내기

진짜 인터넷에 띄우기. 도메인·SEO·자랑까지. 오늘 끝나면 친구한테 URL 보낼 수 있어요.

10분배포 옵션 비교
15분🔥 진짜로 인터넷에 띄우기
15분도메인·SEO·다듬기
15분🎉 발표·자랑 (1인 1분)
05분다음 단계
슬라이드 열기 →

📓 학생 워크북

도구 비교표 · 내 페이지 설계 · 배포 체크리스트가 들어있어요.
강의 시작 전 출력해서 옆에 두고 따라하면 좋아요.

🎯 강의 진행 팁

슬라이드는 또는 마우스 스크롤로 넘겨요.
실습 슬라이드는 분홍·주황 배경 — 학생이 따라할 시간.