PERIOD 01 · 60분 VIBE CODING · TOUR

01 / 14

🔥 4개 도구 시연·실습

코드 안 짜고도 진짜 만들 수 있다

바이브코딩 — AI에게 시키면 페이지·앱·도구가 만들어지는 시대

오늘 1교시에 — v0 · Claude Code · ChatGPT Codex · Antigravity 4개 도구를 다 만져봐요. 같은 미션을 4가지 방식으로 해보면 어떤 게 나한테 맞는지 보여요.

P1 · 컨셉 바이브코딩 한 줄 정의

02 / 14

바이브코딩 = 감각으로 시킨다

이전엔 문법·자료구조·디버깅을 다 알아야 만들었어요. 지금은 "이런 거 하나 만들어줘" 한 문장으로 시작할 수 있어요.

💡 "감각(vibe)"이 핵심 — 정확한 명령보다, 원하는 결과를 묘사하는 게 더 중요해요.

🌊 바이브코딩이 가능해진 이유

LLM이 코드를 잘 씀 — 자연어 → 코드 번역 정확도 ↑
샌드박스 실행 환경 — AI가 결과 확인하며 수정
즉시 배포 인프라 — Vercel·Netlify로 1클릭 배포

코드 = 마우스로 그리는 그림 — 사진: Markus Spiske / Unsplash

P1 · 한눈에 4개 도구 비교

03 / 14

같은 미션 — "한 줄 소개 페이지" — 도구별 만드는 방식 비교

도구	입력 방식	결과물	강점	약점
🌐 v0 by Vercel	웹 채팅창에 자연어	React 컴포넌트 + 즉시 미리보기	✓ 가장 직관적 · 디자인 깔끔	✗ React에 집중됨
⌨️ Claude Code by Anthropic	터미널 CLI에서 대화	실제 코드 파일 (어떤 언어든)	✓ 코드베이스 전체 다룸 · 강력	✗ 터미널 친숙해야
🤖 ChatGPT Codex by OpenAI	ChatGPT 채팅에서 위임	샌드박스 안 코드 실행·PR 생성	✓ 비동기 위임 · 익숙한 ChatGPT UI	✗ 결과 확인까지 시간
🛸 Antigravity by Google	에이전트 중심 IDE	여러 작업 동시 진행	✓ 멀티에이전트 · 신세대	✗ 신상이라 자료 적음

💡 결론 미리 흘리기 — 정답은 없어요. 어떤 결과물·어떤 작업 스타일이냐에 따라 달라요. 다음 5개 슬라이드에서 하나씩 만나봅니다.

P1 · 도구 ① · 10분 🔥 v0 시연·실습

04 / 14

🌐 도구 ① v0

웹 채팅 한 줄에 페이지가 등장

v0.dev 접속 → 채팅창에 "내 한 줄 소개 페이지 만들어줘" → 오른쪽에 React로 만든 페이지가 즉석 등장. 클릭으로 수정·재생성. 가장 입문 친화적인 도구.

v0.dev 접속 (Vercel 계정 필요)

워크북 p.4 — v0 실습 칸 펴기

아래 슬라이드 프롬프트 따라하기

P1 · 도구 ① v0 프롬프트 · 결과

05 / 14

v0에 이렇게 시켜보세요

📝 v0 프롬프트 예시내 한 줄 소개 페이지 만들어줘. 내용: - 이름: [본인 이름] - 한 줄 소개: "[취미·역할·관심사 한 문장]" - 프로필 이모지 또는 이니셜 큰 원 - SNS 링크 3개 (인스타·트위터·이메일) 디자인: - 한 페이지에 다 들어가게 - 모바일에서도 잘 보이게 - 컬러는 따뜻한 톤 (코랄·앰버) - 폰트는 모던 산세리프

⚡ 채팅창에 붙여넣고 엔터 — 30초~1분 안에 오른쪽 패널에 페이지가 등장해요. 클릭 한 번에 다시 생성, 한 문장으로 디자인 수정.

💪 v0의 진짜 강점
Vercel 계정만 있으면 "배포" 버튼 1클릭에 진짜 URL 생성. 3교시에 활용.

🔄 개선 요청 예시
"프로필 이미지 영역에 그라데이션 추가"
"다크 모드 토글 버튼"
"프로젝트 카드 3개 섹션 추가"

P1 · 도구 ② · 10분 🔥 Claude Code 시연

06 / 14

⌨️ 도구 ② Claude Code

터미널에서 진짜 코드와 대화한다

터미널 띄우고 claude 한 번이면 시작. 파일을 보고·수정하고·실행까지. v0가 결과 위주라면, Claude Code는 과정을 같이 만드는 도구.

💡 이 강의 노트도 Claude Code로 만들어졌어요. 코드베이스 통째로 다루는 게 강점.

P1 · 도구 ② Claude Code 터미널 시연

07 / 14

터미널에서 이렇게 작동해요

~/projects/my-portfolio — claude

$ claude

# Claude Code 실행 → 대화 시작

> 안녕하세요! 어떻게 도와드릴까요?

내 한 줄 소개 페이지 만들어줘. index.html 하나로.

이름은 "민수", 한 줄: "사이드 프로젝트 좋아하는 1인 창업자",

SNS 링크 3개. 따뜻한 톤으로.

> 알겠습니다. index.html을 생성할게요...

> ✓ Created index.html (54 lines)

> 미리보기는 어떻게 보시겠어요?

브라우저로 열어줘

> ✓ open index.html — 브라우저에서 열렸습니다.

🛠 핵심 차이: v0는 "보여줘", Claude Code는 "같이 만들자". 코드 파일이 진짜로 컴퓨터에 생겨요. 깃·배포·테스트까지 다 가능.

P1 · 도구 ③ · 10분 🔥 ChatGPT Codex 시연

08 / 14

🤖 도구 ③ ChatGPT Codex

에이전트에게 위임하고 다른 일

ChatGPT의 Codex는 코드 작업을 비동기로 위임해요. "이거 만들어줘" 시키고 나서 다른 일 하다가 → 알림 와서 결과 확인 → 마음에 들면 적용.

P1 · 도구 ③ ChatGPT Codex 비동기 워크플로

09 / 14

Codex가 일하는 방식 — 맡기고 → 잠시 후 확인

ChatGPT에서 Codex 모드 진입 사이드바 또는 채팅창에서 "Codex" 또는 "코딩 작업 위임" 메뉴.

작업 묘사 (자연어로) 예: "내 한 줄 소개 페이지를 HTML/CSS로. 따뜻한 톤. SNS 3개 링크."

샌드박스에서 작업 진행 (1~5분) Codex가 가상 컴퓨터에서 코드 작성 + 실행 + 디버깅. 진행 상황 보여줘요.

결과 PR 또는 파일로 회신 마음에 들면 다운로드/머지. 아니면 "이 부분 다시" 한 줄로 재시작.

✅ Codex가 잘 맞는 경우
• 한 번에 여러 작업 동시 위임
• 결과 보고 골라서 채택
• 회의 중에도 백그라운드로 진행

⚠️ Codex가 안 맞는 경우
• 즉각 반응 원할 때
• 매 단계 같이 보면서 의사결정
• 매우 큰 코드베이스 (다른 도구가 나음)

P1 · 도구 ④ · 10분 🔥 Antigravity 시연

10 / 14

🛸 도구 ④ Antigravity

에이전트 여러 명이 동시에 일한다

Google의 신세대 IDE. 에이전트 중심 — 한 번에 여러 작업을 각자 다른 에이전트에게 맡기고, 결과가 도착하면 검토. 대형 작업 분할에 강점.

💡 신상 도구라 UI가 자주 바뀌어요. 컨셉만 보고 가기 — 정확한 메뉴는 공식 문서 참고.

P1 · 도구 ④ Antigravity 에이전트 IDE 컨셉

11 / 14

"한 명의 코더 + 여러 명의 AI 동료"가 같이 일한다

🎯

큰 작업 쪼개기

"랜딩페이지 + 블로그 + 연락 폼"
→ 3개 작업으로 자동 분할

👥

에이전트 동시 작동

각 에이전트가
자기 작업 병렬 진행

📋

결과 통합·검토

나는 검토자 역할
채택·수정 지시

🚀 대형 프로젝트일수록 유리. 1인 사이드 프로젝트에는 v0/Claude Code가 더 가볍게 맞을 수 있어요. 둘 다 손에 익혀두면 상황별로 골라 쓰면 됨.

P1 · 가이드 어떤 상황에 어떤 도구

12 / 14

상황별 — 내가 지금 골라야 할 도구는?

상황	추천 도구	이유
"코딩 처음, 일단 만들어보고 싶다"	🌐 v0	웹 UI · 즉각 미리보기 · 1클릭 배포
"내 폴더에 진짜 파일이 생겼으면"	⌨️ Claude Code	로컬 파일 시스템 직접 다룸 · 깃 통합
"맡기고 다른 일 하고 싶다"	🤖 ChatGPT Codex	비동기 위임 · 결과 받아서 채택
"한 번에 여러 기능 만들기"	🛸 Antigravity	멀티 에이전트 · 작업 자동 분할
"빠르게 디자인 시안만 보고 싶다"	🌐 v0 · Lovable · Bolt	웹 생성기들의 강점 영역
"본격 프로젝트 1개 깊이"	⌨️ Claude Code	코드베이스 전체 컨텍스트 유지

📓 워크북 p.5 — "내 상황 진단" 빈칸 채워보세요. 2교시에 본격 만들 때 골라야 할 도구가 자연스럽게 정해져요.

P1 · 회고 · 5분 짧은 공유

13 / 14

한 사람씩 30초 — "어떤 도구가 가장 끌렸나요?"

한 문장으로:

공유 양식"저는 ___ 도구가 끌렸어요. 이유는 ___ 때문이에요. 2교시에는 그걸로 ___ 만들어볼 거예요."

💡 듣는 사람도 메모 — 다른 사람이 고른 도구가 끌리면 점심 시간에 따라 만져볼 수 있어요.

함께 — 사진: Priscilla Du Preez / Unsplash

PERIOD 01 → 02 잠깐 휴식 후 계속

14 / 14

NEXT · 2교시

내 랜딩페이지 본격 제작

고른 도구로 30분 안에 내 사이트 완성

2교시 끝나면 — 본인 소개·프로젝트·연락처가 들어있는 진짜 페이지가 손에 들려요. 3교시에는 그걸 인터넷에 띄울 거예요.