바이브코딩 10회차 과정
수업 자료 · 차시별 교재
각 차시 카드를 누르면 핸즈온 교재가 열립니다. 새 창에서 열거나 ⌘P(Mac) · Ctrl+P(Windows)로 PDF 출력도 됩니다.
1교재 보기 2교재 보기 3교재 보기 4교재 보기 5교재 보기 6교재 보기 7교재 보기 8교재 보기 9교재 보기 10교재 보기 11교재 보기 12교재 보기
1차시 · 바이브코딩이란?
비유로 이해하고 내 서비스를 한 문장으로 기획하기
2차시 · 안티그래비티 설치 · 첫 페이지
AI에게 권한을 주고 "안녕하세요" 한 줄 띄우기
3차시 · 페이지 다듬기
사진 · 색 · 글꼴로 내 페이지 꾸미기
4차시 · git과 GitHub
작업을 저장하고 인터넷 금고(GitHub)에 올리기
5차시 · 한 사이클 천천히
폴더부터 배포까지 한 바퀴를 천천히 두 번
6차시 · API와 비밀의 방
내 사이트에 AI 심장 달기 · .env로 키 숨기기
7차시 · 도메인 붙이기
vercel.app 꼬리표를 떼고 진짜 내 주소 달기
8차시 · 검색 등록과 공유
구글·네이버에 내 사이트 등록 + sitemap·카톡 미리보기
9차시 · 구글 애널리틱스 — 방문자 분석
GA4 연결 + 실시간 대시보드 + 애드센스 맛보기
10차시 · 갤러리 워크 · 마무리
서로 보여주고 발표·수료, 다음 단계 계획
11차시 · 심화 · 프로급 디자인 5원칙
AI가 만든 티 나는 사이트를 나만의 사이트로 — 조사·히어로·와우 모먼트 (한 사이클 끝낸 분용)
12차시 · 심화 · CLI 3종 연동 (gh · Vercel · Supabase)
웹 클릭을 명령어 한 줄로 — 편집기 안에서 push·배포·DB 반영까지 (한 사이클 끝낸 분용)
부록 · 개념 사전
헷갈리는 개념을 옆에 두고 보는 한 장짜리 카드. 실습 중 막힐 때 펼쳐 보세요.
웹개발 기초
git과 GitHub
세이브 포인트와 인터넷 금고
마크다운
기호 몇 개로 글 꾸미기
도메인·DNS
간판 이름과 전화번호부
API·.env
식당 주문과 비밀의 방
터미널·명령어
겁내지 않아도 되는 까만 화면
서버·호스팅·배포
내 집 시제품에서 진짜 오픈까지
AI 도구 확장
‘준비 중’인 차시는 수업이 진행되며 차차 열립니다.