학생 워크북
코드 안 짜고
5분 만에 내 사이트
바이브코딩 워크숍
3시간 · 동아리 트랙
v1.0 · 2026-05-18
p.01
목차
CONTENTS
- 표지 & 학생 정보p.01
- 목차 & 사용법p.02
- 사전 준비 체크리스트p.03
- 1교시 — 4개 도구 비교 노트p.04-05
- 1교시 — 내 상황 진단 & 도구 선택p.06
- 2교시 — 내 도구 확정p.07
- 2교시 — 콘텐츠 청사진 (내 페이지 설계)p.08-09
- 2교시 — 실습 진행 메모p.10
- 3교시 — 배포 체크리스트p.11
- 3교시 — 도메인·SEO 메모p.12
- 3교시 — 다음 4주 계획p.13
- 강의 회고 · 한 줄 정리p.14
- 부록 A — 자주 쓰는 프롬프트 12개p.15-16
- 부록 B — 트러블슈팅 10가지p.17
- 부록 C — 다음 단계 자료 모음p.18
📓 이 워크북 사용법
각 페이지 빈칸은 강의 중 손글씨로 채워주세요. 강사가 슬라이드에서 "워크북 p.X" 안내할 때 그 페이지를 펴면 돼요. 강의 끝나고 4주 동안 자기 코치로 쓰세요.
p.02
사전 준비 체크리스트
BEFORE WE START
강의 시작 전 5분 동안 모두 ✅ 체크해주세요.
💻 환경 준비
- 노트북 충전 + 충전기 휴대
- 크롬 또는 사파리 최신 버전
- 안정적인 와이파이 연결
🔑 도구 계정 준비 (최소 2개)
- Vercel 계정 (v0와 통합) — vercel.com
- Anthropic 계정 + Claude Code 설치 — claude.com
- ChatGPT Plus 또는 Pro 계정 (Codex 사용 시)
- Google 계정 (Antigravity 시도 시)
- (선택) 깃허브 계정 — 배포에 편리
🧠 마음의 준비
- 오늘 만든 사이트가 완벽 아니어도 OK — 80%면 성공
- 막히면 옆 사람한테 먼저, 그 다음 강사
- 다른 사람 아이디어 끌리면 메모 → 끝나고 따라 만들기
- 오늘은 결과보다 패턴을 머리에 새기는 게 목표
🎯 오늘 끝났을 때 가져가고 싶은 것
예: "내 이름이 들어간 사이트 URL을 친구한테 보내고 싶어요"
p.03
1교시 · 4개 도구 비교 노트
P1 · TOUR · 40분
각 도구 시연을 보면서 — 인상·강점·아쉬운 점 한 줄씩 메모.
🌐 v0 by Vercel
첫 인상
강점 1
아쉬움 1
⌨️ Claude Code
첫 인상
강점 1
아쉬움 1
p.04
1교시 · 4개 도구 비교 노트 (계속)
P1 · TOUR
🤖 ChatGPT Codex
첫 인상
강점 1
아쉬움 1
🛸 Antigravity
첫 인상
강점 1
아쉬움 1
🏆 한 줄 요약
4개를 다 만져본 후, 한 줄로 본인 느낌:
"___은(는) 빠르고, ___은(는) 강력하고, ___은(는) 신기하고, ___은(는) 어려웠다"
p.05
1교시 · 내 도구 선택
P1 · CHOICE
🎯 2교시에 본격적으로 쓸 도구 1개 정하기
🤔 내 상황 진단
아래 질문에 솔직히 ✓ 해보세요. 답이 자연스럽게 나옵니다.
| 질문 | 예 | 아니오 |
|---|
| 코드 파일을 직접 다뤄본 적이 있다 | ☐ | ☐ |
| 터미널 또는 명령어가 익숙하다 | ☐ | ☐ |
| 나중에 페이지를 깃에 올려서 관리할 거다 | ☐ | ☐ |
| "즉시 결과를 봐야 동기부여가 된다" | ☐ | ☐ |
| "여러 작업 한꺼번에 시키고 비교"가 끌린다 | ☐ | ☐ |
• 1·2번이 "아니오"면 → v0가 부담 적어요
• 1·2·3번이 "예"면 → Claude Code가 강해요
• 5번이 "예"면 → Antigravity가 잘 맞아요
• 4번이 "예"지만 옆에서 결과 봐도 OK면 → Codex도 OK
🎯 내 결정
선택 이유
p.06
2교시 · 내 도구 확정
P2 · 결정
🎯 2교시 35분 동안 쓸 도구 한 번 더 확인
📌 최종 도구
예: v0
🌐 도구 접속 URL / 명령어
예: v0.dev / 또는 터미널 'claude' / chatgpt.com
💡 다음에 다른 도구도 써볼 거
예: 다음 주에 Claude Code로 같은 페이지 다시 만들어볼 거예요
⏰ 35분 안에 끝낼 1가지 약속
완벽주의 금지. 80%면 OK.
예: "이름 + 한 줄 소개 + 프로젝트 카드 1개 + SNS 링크 3개. 디자인은 따뜻한 톤. 모바일 OK."
p.07
2교시 · 콘텐츠 청사진 ①
P2 · BLUEPRINT
📝 내 페이지에 들어갈 내용 — 손글씨로
① 이름·한 줄 소개
이름
예: "사이드 프로젝트로 도구를 만들고, 그 과정을 글로 쓰는 1인 창업자"
② 프로필 표현
- 이미지 URL 사용 (예: 자기 사진 또는 Unsplash 인물 사진)
- 이모지 큰 원 (예: 🐱 🌱 🚀)
- 이니셜 큰 원 (예: "S")
선택한 거
③ SNS 링크 (최대 4개)
SNS 1
SNS 2
SNS 3
SNS 4
p.08
2교시 · 콘텐츠 청사진 ②
P2 · BLUEPRINT
④ 프로젝트 3개 (자랑할 만한 것)
프로젝트 ①
제목
한 줄 설명
링크
프로젝트 ②
제목
한 줄 설명
링크
프로젝트 ③
제목
한 줄 설명
링크
⑤ 디자인 톤 (체크)
- ☐ 따뜻 (코랄·앰버·베이지)
- ☐ 미니멀 (블랙·화이트·그레이)
- ☐ 발랄 (핑크·하늘·노랑)
- ☐ 모노톤 (한 색만)
- ☐ 컬러풀 (여러 색 조합)
p.09
2교시 · 실습 진행 메모
P2 · 35분 실습
⏱ 5단계 진행 체크
- ① 큰 그림 요청 — 첫 페이지 생성됨
- ② 평가 — 좋은 점·아쉬운 점 확인
- ③ 부분 수정 — 색·폰트·여백 등
- ④ 내용 추가 — 프로젝트·CTA·다크모드 등
- ⑤ 마무리 다듬기 — 모바일·맞춤법·링크 점검
🔧 시도한 수정 요청 메모
"이렇게 시켰더니 이렇게 됐다" — 다음에 비슷한 거 만들 때 참고됩니다.
😅 가장 막혔던 부분
예: "모바일에서 폰트가 너무 작게 나와서 한참 헤맸어요"
p.10
3교시 · 배포 체크리스트
P3 · GO LIVE · 15분
🚀 내 페이지를 진짜 인터넷에 띄우기
📋 배포 단계 체크
- 배포 서비스 선택 (Vercel 추천)
- 계정 로그인 / 가입
- 프로젝트 이름 정하기
- 배포 버튼 클릭 → 1~2분 대기
- 발급된 URL 확인 + 새 탭에서 열어보기
- 모바일에서도 접속 확인 (QR 등으로)
- 다른 사람한테 한 번 보내보기
🌐 내 사이트 URL
예: https://my-portfolio-xyz.vercel.app
📱 모바일 접속 확인
- 전체 레이아웃이 안 깨지는가
- 이미지가 잘 로드되는가
- 버튼·링크가 손가락으로 누를 만한 크기인가
- 가로 스크롤 안 생기는가
p.11
3교시 · 도메인·SEO 메모
P3 · POLISH · 15분
🌐 커스텀 도메인 계획
원하는 도메인
대체 후보 1
대체 후보 2
구매 예정 사이트
가비아·카페24·Namecheap에서 1~2만원/년 정도.
🔍 SEO 기본 — 적용 체크
- title 태그: "내 이름 — 한 줄 소개" 식
- meta description: 150자 이내 미리보기
- OG 태그 (카톡 공유 시 카드)
- favicon (이모지 1개로 충분)
📊 방문자 분석 도구
- Vercel Analytics (가장 쉬움, 무료)
- Google Analytics 4
- Plausible (유료, 프라이버시 친화)
- (나중에) Cloudflare Web Analytics
p.12
다음 4주 계획
AFTER WORKSHOP
🗓 강의 끝나고 혼자 발전시키기
오늘 만든 사이트를 진짜 자기 것으로 만들기 위한 4주 일정.
| 주차 | 할 일 | 완료 |
|---|
| 1주차 |
콘텐츠 채우기 — placeholder 빈칸 → 진짜 프로젝트·진짜 사진. 친구한테 보여주고 의견 듣기. |
☐ |
| 2주차 |
도메인 연결 — 본인 이름 도메인 구매 (가비아 등). Vercel에 연결. 진짜 주소 만들기. |
☐ |
| 3주차 |
기능 1개 추가 — 블로그 / 방문자 카운터 / 연락 폼 / 다국어 등 욕심내본 기능 1개. |
☐ |
| 4주차 |
다른 도구로 시도 — 오늘 안 쓴 도구 중 하나로 같은 페이지 다시. 비교해보기. |
☐ |
🎯 한 달 후 목표
예: "내 이름 도메인 + 자기소개 + 프로젝트 5개 + 블로그 첫 글 발행"
p.13
강의 회고
REFLECTION
🤝 동아리 멤버에게 추천하고 싶은 도구·아이디어는?
p.14
부록 A — 자주 쓰는 프롬프트
APPENDIX · CHEATSHEET
상황별 12가지 — 복사해서 변수만 바꿔 쓰세요
🎨 페이지 생성
1. 첫 랜딩페이지 요청
개인 랜딩페이지 artifact로 만들어줘.
이름: {이름}, 한 줄 소개: {소개}
SNS {N}개, 프로젝트 카드 {N}개.
디자인: {톤}. 모바일 반응형.
2. 톤 완전히 바꾸기
디자인 톤을 {새 톤}로 완전히 바꿔줘.
색·폰트·간격 모두 재구성.
3. 참고 사이트 보여주며 요청
이런 느낌으로 만들어줘: {참고 URL}
특히 {어떤 부분}을 차용. 내 내용 유지.
🔧 수정·개선
4. 부분 수정 (한 번에 1-2가지)
{요소}를 {어떻게} 바꿔줘.
나머지는 그대로 유지.
5. 모바일 반응형 강화
화면 폭 600px 이하에서 깨지지 않게.
폰트 살짝 줄이고 패딩 줄여줘.
6. 다크 모드 추가
다크 모드 토글 추가.
시스템 설정 따라가는 옵션도. 색은 {색 톤} 유지하면서 톤 다운.
p.15
부록 A — 프롬프트 (계속)
APPENDIX
➕ 추가·확장
7. 프로젝트 갤러리
프로젝트 카드 그리드 섹션 추가.
각 카드: 썸네일·제목·한 줄 설명·외부 링크.
호버 시 살짝 떠오르는 효과.
8. 연락 CTA
맨 아래에 큰 CTA 섹션.
"함께 일해요" 버튼 → mailto:{이메일}
배경은 그라데이션, 글자 큼지막하게.
9. 다국어 토글
우상단에 한국어/영어 토글.
모든 텍스트 두 언어로.
기본은 {기본 언어}.
🚀 배포·SEO
10. SEO 메타 태그
SEO 메타 태그 추가:
- title: {이름 + 한 줄 소개}
- meta description (150자)
- OG 태그 (카톡·트위터 공유 카드)
- favicon (이모지로)
11. 배포 준비 (정적 HTML로)
이 페이지를 정적 HTML 1개 파일로 정리.
모든 CSS·JS 인라인. 외부 의존 최소화.
Vercel/Netlify에 그대로 올릴 수 있게.
12. 깃에 푸시 (Claude Code 전용)
깃 저장소 초기화 후 깃허브에 푸시해줘.
저장소 이름: {이름}
README 자동 생성 포함.
p.16
부록 B — 트러블슈팅
APPENDIX · TROUBLES
자주 만나는 벽 10가지
| 증상 | 해결 |
|---|
| 같은 결과만 반복 | "다른 방향으로", "스타일 완전히 바꿔" 추가. 참고 사이트 URL 첨부도 효과적. |
| 코드가 망가짐 | 한 번에 너무 많이 시킴. "이전 버전으로" 또는 새 채팅에서 마지막 잘 된 코드 복붙으로 시작. |
| 모바일에서 깨짐 | "모바일 반응형 강화. 화면 폭 600px 이하 안 깨지게" 명시. |
| 이미지 안 뜸 | 이미지 URL을 본인이 직접 지정 (Unsplash photo-XXX). AI 자체 생성 URL은 깨지기 쉬움. |
| 한글 폰트 이상 | "Pretendard 또는 Noto Sans KR 사용" 명시. |
| 너무 길고 부담스러움 | "한 화면 안에" "섹션 4개로 압축" 식으로 단순화 요청. |
| 배포 후 404 | 파일명 확인 (index.html이어야 함). 또는 Vercel 빌드 로그 보고 에러 메시지를 그대로 AI에 붙여넣고 도움 요청. |
| SNS 링크 안 작동 | URL 앞에 https:// 빠졌는지 확인. AI가 종종 빼먹어요. |
| 도메인 연결 후 안 보임 | DNS 전파 시간 5분~24시간 걸림. 또는 Vercel 도메인 설정에서 verification 누락. |
| 속도 느림 | 이미지 너무 큼. "이미지 크기 줄여" 또는 외부 CDN (Cloudinary 등) 사용 요청. |
p.17
부록 C — 더 배우고 싶다면
APPENDIX · NEXT
📚 도구별 공식 자료
- v0 — v0.dev/docs (Vercel 공식)
- Claude Code — docs.claude.com (CLI 사용법, MCP 등)
- ChatGPT Codex — openai.com 문서 또는 ChatGPT 내 도움말
- Antigravity — Google 공식 사이트 (검색 "Google Antigravity")
🌐 배포·인프라
- Vercel — vercel.com/docs
- Netlify — docs.netlify.com
- Cloudflare Pages — 무료 빠름 (cloudflare.com)
👥 한국 커뮤니티
- OpenAI 한국 커뮤니티
- Anthropic Discord 한국 채널
- 유튜브 "바이브코딩" 키워드
- 이 동아리 — 단톡방에서 다음 사례 공유
🎯 다음 코스 아이디어
- 중급: API 연결 — 폼·DB·인증
- 중급: 디자인 시스템 — 일관된 컴포넌트 라이브러리
- 고급: 풀스택 SaaS — 결제·구독까지
- 연계: Claude Cowork 코스 (자동화 + 도구화)
오늘 워크숍에 함께해주셔서 감사합니다 🙏
한 달 뒤 — 본인 도메인에서 본인 사이트가 떠 있길 응원해요!
p.18