<바이브 코딩 입문> 가이드

VS Code + Claude Code · OpenAI Codex · Gemini, 세 가지 AI 코딩 도구를 한 번에

대상: 코딩을 거의 해본 적 없는 완전 초보
준비물: 노트북(Windows / macOS), 인터넷, 각 서비스 계정
목표: "코드를 외워서 타이핑하는" 시대에서 벗어나, AI에게 말로 시켜서 프로그램을 만드는 경험을 직접 해본다.
기준일: 2026년 6월 — 도구 버전·모델명·요금은 빠르게 바뀌므로, 마지막 절의 참고문헌 링크에서 항상 최신 정보를 확인하세요.

사전 준비. 파이썬(Python) 설치하기

바이브 코딩으로 만든 프로그램을 실행하거나 데이터를 다루려면 파이썬이 필요할 수 있습니다. 강의 시작 전에 미리 설치해 두면 좋습니다. (VS Code·Node.js 설치는 1부에서 이어집니다.)

브라우저에서 python.org 에 접속 → 상단 메뉴의 Downloads.
내 컴퓨터 사양에 맞는 버전을 내려받습니다. - Windows: 노란 버튼 "Download Python 3.x.x" 를 누르면 대부분 64비트 설치 파일이 받아집니다. 설치 첫 화면에서 "Add python.exe to PATH" 를 꼭 체크한 뒤 "Install Now" 를 누릅니다. - macOS: "macOS 64-bit universal2 installer" 를 받아 실행합니다. - 내 PC가 32/64비트인지 모를 때: (Windows) 설정 → 시스템 → 정보 → "시스템 종류" 를 확인합니다. 요즘 컴퓨터는 대부분 64비트입니다. 아주 오래된 32비트 PC라면 다운로드 페이지 아래쪽에서 32비트(x86) 설치 파일을 고르세요.
설치 확인 — VS Code 터미널(또는 명령 프롬프트)에 입력합니다.

python --version

macOS에서는 python3 --version 으로 확인합니다. Python 3.x.x 처럼 버전이 보이면 완료입니다.

팁: 설치 중 "Add to PATH" 를 빠뜨리면 터미널에서 python 을 못 찾을 수 있습니다. 그때는 설치 파일을 다시 실행해 "Modify" 에서 PATH를 추가하면 됩니다.

0부. 바이브 코딩이란?

0-1. 한 문장 정의

바이브 코딩(Vibe Coding) = 프로그래밍 언어 대신 자연어(우리말)로 AI에게 시켜서 소프트웨어를 만드는 방식.

직접 for문을 외우지 않아도, "할 일을 추가·삭제할 수 있는 웹페이지 만들어 줘"라고 말로 요청하면 AI가 코드를 써 줍니다. 우리는 결과를 보고 "이렇게 고쳐 줘"라고 대화하며 완성도를 높입니다.

0-2. 초보가 꼭 기억할 3가지 마인드셋

나는 '감독', AI는 '배우' — 코드를 한 줄씩 쓰는 사람이 아니라, 무엇을 만들지 결정하고 검수하는 사람입니다.
작게 시작해 한 번에 한 단계씩 — "쇼핑몰 만들어 줘"보다 "할 일을 입력하는 칸 하나 만들어 줘"가 훨씬 잘 됩니다.
AI는 가끔 틀린다(할루시네이션) — 그럴듯하지만 틀린 답을 줄 수 있습니다. 실행해 보고 확인하는 습관이 핵심입니다.

0-3. 사용할 도구(한가지만 사용하면 됨)

도구	만든 곳	이 강의에서 쓰는 모델 (2026.6)	핵심 한 줄
Claude Code	Anthropic	Claude Opus 4.8 (기본)	코딩 특화로 평이 가장 좋고, 문서가 많아 따라하기 쉬움
OpenAI Codex	OpenAI	GPT-5.5 (기본), GPT-5.3-Codex	대화에 강하고 무난
Gemini	Google	Gemini 3 / 3.1 Pro	멀티모달에 강하고 무료 사용량 풍부, 구글 연동.

세 도구 모두 "에이전트형 CLI" 입니다. 즉, 단순히 코드를 추천만 하는 게 아니라 파일을 직접 만들고 고치고 명령어까지 실행합니다. 그래서 항상 "실행해도 될까요?"라고 물으면 내용을 보고 승인하는 절차를 거칩니다.

1부. 공통 준비 — 모든 도구의 출발선

세 도구 모두 ① VS Code(편집기) + ② 터미널 + ③ Node.js 위에서 돌아갑니다. 이 셋만 깔아두면 나머지는 거의 똑같습니다.

1-1. VS Code 설치 (편집기)

브라우저에서 code.visualstudio.com 접속 → Download.
설치 후 실행. (한글 메뉴 원하면 확장 탭에서 Korean Language Pack 설치)

1-2. 터미널 열기 (AI에게 말 거는 창구)

VS Code 상단 메뉴 → Terminal → New Terminal (단축키 `Ctrl + `` / 백틱). 화면 아래쪽에 까만 입력창이 나타나면 성공입니다. 앞으로 여기에 명령어를 입력합니다.

1-3. Node.js 설치 (엔진)

세 CLI 모두 설치에 npm(Node.js에 포함)을 씁니다.

nodejs.org 접속 → LTS 버전 다운로드·설치.
설치 확인 — 터미널에 입력:

node -v
npm -v

v20.x.x 처럼 버전 번호가 나오면 준비 끝입니다.

macOS 팁: Homebrew가 있으면 brew install node 한 줄로 끝납니다.
Windows 팁: 설치 중 "Add to PATH" 체크하거나 유지해 두세요.

1-4. 작업 폴더 만들기 (집 짓기 전 '땅' 고르기)

컴퓨터 공간 중 원하는 곳에 빈 폴더를 하나 만들고, VS Code에서 File → Open Folder로 엽니다.

# 터미널에서 직접 만들어도 됩니다
mkdir my-first-vibe
cd my-first-vibe

여기까지가 공통 준비입니다. 지금부터 같은 폴더 안에서 도구만 바꿔 가며 똑같은 앱을 만들어 봅니다.

실습 과제

"오늘의 할 일(To-Do) 웹앱" 할 일을 입력해 추가하고, 완료하면 체크하고, 삭제할 수 있는 한 페이지짜리 웹앱. 별도 설치 없이 브라우저로 바로 열어 볼 수 있게 HTML 파일 하나로 만든다.

2부. Claude Code 실습 — 가장 쉬운 출발점

이 부분은 조태호 저 『혼자 공부하는 바이브코딩 with 클로드코드』(한빛미디어) 참조했습니다. 더 깊이 배우려면 책과 공식 깃허브(참고문헌 [1])를 추천합니다.

2-1. Claude Code란?

Anthropic이 만든 터미널 기반 AI 코딩 에이전트입니다. 2026년 6월 기준 기본 모델은 Claude Opus 4.8(코딩·대규모 코드베이스에 강함), 더 빠른 작업엔 Sonnet 4.6, 가벼운 작업엔 Haiku 4.5를 고를 수 있습니다.

2-2. 설치 (택1)

방법 A — npm (모든 OS 공통, 권장)

npm install -g @anthropic-ai/claude-code

방법 B — 네이티브 설치 프로그램

macOS/Linux: curl -fsSL https://claude.ai/install.sh | bash
Windows: 공식 문서의 WinGet/CMD 방법 참고 (참고문헌 [2])

설치 확인:

claude --version

2-3. 실행 & 로그인

작업 폴더 안에서:

claude

처음 실행하면 브라우저가 열리며 Anthropic 계정 로그인을 요청합니다. (구독: Pro 약 $20 / Max $100·$200 — 사용량에 따라 선택)

VS Code 안에서 쓰기: VS Code 확장 탭에서 "Claude Code for VS Code"(제작사 anthropic) 설치 → 사이드 패널에서 인라인 diff(바뀐 부분 미리보기), @파일명 멘션, /model·/context 슬래시 명령을 GUI로 쓸 수 있습니다.

2-4. 첫 바이브 코딩 — "할 일 웹앱" 만들기

claude가 실행된 상태에서, 우리말로 그대로 입력합니다.

초보자도 이해하기 쉽게, 할 일을 추가·완료체크·삭제할 수 있는 '오늘의 할 일' 웹앱을 만들어 줘.
조건:
1) 설치 없이 브라우저로 바로 열리도록 index.html 파일 하나로 만들 것
2) 디자인은 깔끔하고 모바일에서도 보기 좋게
3) 할 일 목록은 새로고침해도 남아 있도록 브라우저에 저장

Claude Code는 계획을 먼저 보여주고, 동의하면 index.html을 생성합니다. 파일이 생기면 더블클릭하거나 다음으로 엽니다.

# macOS
open index.html
# Windows
start index.html

Claude Code가 만들어 줄 결과물의 뼈대 예시(이런 코드가 나오는지 눈으로 확인용):

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>오늘의 할 일</title>
  <style>
    body { font-family: sans-serif; max-width: 480px; margin: 40px auto; padding: 0 16px; }
    .done { text-decoration: line-through; color: #aaa; }
    li { display: flex; justify-content: space-between; padding: 8px 0; }
  </style>
</head>
<body>
  <h1>오늘의 할 일</h1>
  <input id="todoInput" placeholder="할 일을 입력하세요" />
  <button onclick="addTodo()">추가</button>
  <ul id="todoList"></ul>
  <script>
    // 브라우저 저장소(localStorage)에서 목록 불러오기
    let todos = JSON.parse(localStorage.getItem('todos') || '[]');
    function save() { localStorage.setItem('todos', JSON.stringify(todos)); render(); }
    function addTodo() {
      const v = document.getElementById('todoInput').value.trim();
      if (!v) return;
      todos.push({ text: v, done: false });
      document.getElementById('todoInput').value = '';
      save();
    }
    function render() {
      const ul = document.getElementById('todoList');
      ul.innerHTML = '';
      todos.forEach((t, i) => {
        const li = document.createElement('li');
        li.innerHTML = `<span class="${t.done ? 'done' : ''}"
          onclick="toggle(${i})">${t.text}</span>
          <button onclick="remove(${i})">삭제</button>`;
        ul.appendChild(li);
      });
    }
    function toggle(i) { todos[i].done = !todos[i].done; save(); }
    function remove(i) { todos.splice(i, 1); save(); }
    render();
  </script>
</body>
</html>

2-5. 대화로 고치기 (바이브 코딩의 핵심)

결과를 보고, 그대로 말로 수정 요청합니다.

완료한 항목이 자동으로 목록 맨 아래로 내려가게 해 줘. 그리고 상단에 '남은 할 일 N개'를 표시해 줘.

다크 모드 켜고 끄는 버튼을 오른쪽 위에 추가해 줘.

2-6. 두 번째 바이브 코딩 — 파이썬 프로그램 만들고 실행하기

웹페이지(HTML)는 브라우저로 열어 봤습니다. 이번에는 터미널에서 돌아가는 작은 파이썬 프로그램을 만들어, "AI가 코드를 쓰고 직접 실행해서 결과까지 보여주는" 경험을 합니다.

claude 실행 상태에서 우리말로 요청합니다.

글을 분석해 글자 수·단어 수·문장 수를 세어 주는 간단한 파이썬 프로그램을 만들어 줘.
조건:
1) 파일 이름은 wordcount.py
2) 분석할 예시 글을 코드 안에 넣어 두고, 결과를 보기 좋게 출력
3) 초보가 읽기 쉽게 한국어 주석을 충분히 달 것
그리고 그 프로그램을 실행해서 결과까지 보여줘.

Claude가 wordcount.py를 만들고 직접 실행해 결과를 보여줍니다. (Claude Code는 터미널에서 코드를 돌릴 수 있어, 초보가 실행 명령을 몰라도 됩니다.) 만들어질 코드의 예시:

# 분석할 글 (이 부분만 바꾸면 다른 글도 분석됩니다)
text = "오늘 시청에서 기자회견이 열렸다. 시장은 내년 예산을 발표했다. 질문도 이어졌다."

# 글자 수 (공백 포함 / 공백 제외)
char_with_space = len(text)
char_no_space = len(text.replace(" ", ""))

# 단어 수 (공백 기준으로 나눠 센다)
word_count = len(text.split())

# 문장 수 (마침표·물음표·느낌표 개수로 단순 계산)
sentence_count = text.count(".") + text.count("?") + text.count("!")

print("글자 수(공백 포함):", char_with_space)
print("글자 수(공백 제외):", char_no_space)
print("단어 수:", word_count)
print("문장 수:", sentence_count)

직접 실행해 보고 싶으면 터미널에 입력합니다.

python wordcount.py

파이썬을 안 깔았다면? uv를 쓰면 uv run wordcount.py 한 줄로 실행되고, 이때 uv가 파이썬을 알아서 받아 처리하므로 python.org에서 따로 내려받지 않아도 됩니다. uv 설치가 막히면 Claude Code에 "내 OS에 맞게 uv를 설치하고 uv --version으로 확인해줘"라고 부탁하면 됩니다.

웹앱 때와 똑같이, 결과를 보고 말로 고치면 됩니다.

평균 문장 길이(공백 제외 글자 수 ÷ 문장 수)도 함께 출력해 줘.

이렇게 HTML(웹페이지)과 파이썬(프로그램) 두 가지를 만들어 보면, 바이브 코딩이 웹뿐 아니라 일반 프로그램에도 똑같이 통한다는 걸 알 수 있습니다.

2-7. CLAUDE.md — 프로젝트에 '규칙' 심어주기

폴더에 CLAUDE.md 파일을 두면, Claude가 매번 그 규칙을 기억합니다. 초보에게 강력한 기능입니다.

# 프로젝트 규칙
- 모든 설명과 주석은 한국어로 작성한다.
- 초보자가 읽기 쉽게 변수명은 명확하게 짓는다.
- 외부 라이브러리는 꼭 필요할 때만 쓴다.

2부 요약: 설치 → claude 실행 → 우리말로 요청 → 결과 확인 → 대화로 수정 → CLAUDE.md로 규칙화. 웹앱이든 파이썬 프로그램이든 같은 사이클이며, 이게 바이브 코딩의 전부입니다.

3부. OpenAI Codex 실습 — 같은 앱, 다른 도구 (35분)

3-1. Codex란?

OpenAI의 에이전트형 코딩 시스템. 터미널 CLI·IDE 확장·클라우드·깃허브 봇이 하나의 계정·하나의 모델로 연결됩니다. 2026년 6월 기준 기본 모델은 GPT-5.5(2026.4 출시, 장시간 자율 작업에 강함), 코딩 특화 GPT-5.3-Codex도 사용됩니다.

3-2. 설치 & 실행

npm install -g @openai/codex
codex

처음 실행하면 ChatGPT 계정으로 로그인합니다. (요금: ChatGPT Plus $20 / Pro $200 — 사용량 한도가 다름)

VS Code 안에서 쓰기: 확장 탭에서 "OpenAI Codex" 확장 설치 → 사이드 패널 에이전트가 열려 있는 파일을 맥락으로 활용. CLI와 상태를 공유합니다.

3-3. Claude Code와 다른 점

구조화 명령어: /plan(계획) → /exec(실행) → /review(검토) 흐름으로 작업을 끊어서 시킬 수 있습니다.
설정 파일 이름이 다름: Claude는 CLAUDE.md, Codex는 AGENTS.md 를 프로젝트 규칙 파일로 읽습니다.
주의점: 변경 전 diff(미리보기)가 약하고 승인 흐름이 거칠다는 평이 있습니다. 바뀐 파일을 꼭 직접 확인하세요.

3-4. 똑같은 과제 실습

/plan
할 일을 추가·완료체크·삭제할 수 있는 '오늘의 할 일' 웹앱을
index.html 한 파일로 만들고 싶어. 브라우저 저장 기능도 포함해 줘.

계획이 마음에 들면:

/exec

작업이 끝나면:

/review
방금 만든 코드에서 초보가 헷갈릴 만한 부분에 한국어 주석을 더 달아 줘.

비교 포인트(강의용 질문): "Claude Code와 결과물이 어떻게 다른가요? 어느 쪽 설명이 더 이해하기 쉬운가요?" — 정답은 없습니다. 도구마다 결과가 다르다는 걸 체감하는 게 목적입니다.

4부. Gemini 실습 — 무료로 넉넉하게

2026년 6월 가장 중요한 공지: 구글은 코딩 도구를 Antigravity라는 단일 플랫폼으로 통합 중입니다. 공식 안내에 따르면 개인용·Google AI Pro·Ultra 요금제에서 기존 "Gemini CLI"와 "Gemini Code Assist IDE 확장"은 2026년 6월 18일부터 요청 처리를 중단하고 Antigravity / Antigravity CLI로 이전해야 합니다. 강의일이 6월 중·후반이라면, 아래 ④에서 안내하는 Antigravity 경로를 우선 사용하세요. (참고문헌 [5])

4-1. Gemini 코딩 도구란?

Gemini CLI: 터미널에서 도는 오픈소스 AI 에이전트. 개인 구글 계정 무료 사용량(분당 60회·하루 1,000회) 이 넉넉하고, Gemini 3 모델(약 100만 토큰 컨텍스트)과 구글 검색 그라운딩을 기본 제공합니다.
Gemini Code Assist: VS Code/IntelliJ용 확장. 채팅·자동완성·에이전트 모드(내부적으로 Gemini CLI로 구동)를 제공하며, Gemini 3 Pro / 3.1 Pro / 3.x Flash 등을 선택할 수 있습니다.

4-2. 설치 & 실행 (Gemini CLI)

# 설치 없이 바로 실행
npx @google/gemini-cli

# 또는 전역 설치 후 실행
npm install -g @google/gemini-cli
gemini

처음 실행 시 구글 계정 로그인(무료 시작 가능).

VS Code 안에서 쓰기: 확장 탭에서 "Gemini Code Assist" + "Gemini CLI Companion" 설치 → 채팅의 Agent 탭에서 사용. 열린 파일·커서 위치가 자동으로 맥락에 포함됩니다.

4-3. 똑같은 과제 실습

'오늘의 할 일' 웹앱을 index.html 한 파일로 만들어 줘.
- 할 일 추가/완료체크/삭제
- 브라우저에 저장(localStorage)
- 무료 폰트만 사용하고, 한국어 주석을 충분히 달아 줘

Gemini만의 강점을 살린 추가 요청:

2026년 기준으로 모바일 접근성(a11y) 가이드를 구글에서 찾아보고,
그 권고에 맞춰 버튼과 입력창에 적절한 라벨을 붙여 줘.

(→ 구글 검색 그라운딩으로 근거를 찾아 반영하는 모습을 보여줄 수 있습니다.)

4-4. Gemini 설정 파일

Claude의 CLAUDE.md, Codex의 AGENTS.md처럼 Gemini는 GEMINI.md 를 프로젝트 규칙 파일로 읽습니다. MCP 서버는 ~/.gemini/settings.json에서 설정합니다.

4-5. (권장) Antigravity로 이전하기

6월 18일 이후 개인 요금제에서 위 경로가 막히면:

Antigravity 설치(공식 문서의 안내 따름, 참고문헌 [5]).
Antigravity CLI 로 터미널 작업을, Antigravity IDE/확장으로 GUI 작업을 이어갑니다.
프롬프트 방식과 GEMINI.md 개념은 거의 그대로 유지됩니다 — 명령 도구만 바뀌고 바이브 코딩 원리는 동일합니다.

5부. 도구 비교

5-1. 한눈에 비교 (2026년 6월 기준)

항목	Claude Code	OpenAI Codex	Gemini (CLI/Code Assist)
설치	`npm i -g @anthropic-ai/claude-code`	`npm i -g @openai/codex`	`npm i -g @google/gemini-cli`
실행	`claude`	`codex`	`gemini`
기본 모델	Claude Opus 4.8	GPT-5.5	Gemini 3 / 3.1 Pro
로그인	Anthropic 계정	ChatGPT 계정	구글 계정
무료 시작	제한적(구독 권장)	제한적(Plus 권장)	넉넉(개인 무료 사용량)
프로젝트 규칙 파일	`CLAUDE.md`	`AGENTS.md`	`GEMINI.md`
VS Code 확장	Claude Code for VS Code	OpenAI Codex	Gemini Code Assist (+Companion)
강점	코딩 품질·입문 자료 풍부	장시간 자율 작업·생태계	무료 사용량·검색 근거 활용
주의	구독 비용	diff 미리보기 약함	6/18 Antigravity 전환

초보 추천 동선: ① Claude Code로 감을 잡고(자료가 가장 많음) → ② Gemini로 무료로 많이 연습 → ③ Codex로 큰 자동 작업을 맡겨 본다.

5-2. 어떤 도구든 통하는 공통 원칙 5가지

작게 쪼개서 시킨다 — "앱 전체"가 아니라 "기능 하나"씩.
조건을 구체적으로 적는다 — 파일 형식, 디자인, 저장 방식까지 명시.
계획을 먼저 보고 승인한다 — 실행 전 무엇을 할지 확인.
항상 실행해서 확인한다 — AI는 틀릴 수 있다(할루시네이션).
규칙은 .md 파일로 고정한다 — CLAUDE.md/AGENTS.md/GEMINI.md.

5-3. 좋은 프롬프트 vs 아쉬운 프롬프트

아쉬움	좋음
"할 일 앱 만들어 줘"	"할 일을 추가·삭제·완료체크할 수 있는 웹앱을, index.html 한 파일로, 브라우저 저장 기능 포함해서 만들어 줘"
"예쁘게 해 줘"	"배경은 흰색, 버튼은 파란색, 모바일에서도 한 줄로 보이게 해 줘"
"안 돼"	"추가 버튼을 눌러도 목록에 안 나타나. 콘솔에 무슨 오류가 있는지 확인하고 고쳐 줘"

부록. 자주 나오는 오류 해결

증상	해결
`command not found: claude/codex/gemini`	설치가 안 됐거나 PATH 문제. 터미널을 껐다 켜고, `npm i -g ...` 재실행
`npm: command not found`	Node.js 미설치 → `nodejs.org`에서 LTS 설치
한글이 깨짐	파일 인코딩을 UTF-8로 저장
권한/실행 승인 요청	내용을 읽고 이상 없으면 승인, 모르면 거절 후 질문
Gemini가 6/18 이후 응답 안 함	Antigravity / Antigravity CLI로 이전 (참고문헌 [5])

참고문헌

조태호, 『혼자 공부하는 바이브코딩 with 클로드코드』 공식 GitHub. https://github.com/taehojo/vibecoding
Claude Code 공식 문서(개요·설치·VS Code). https://code.claude.com/docs/en/vs-code · https://docs.claude.com/en/docs/claude-code/overview
Anthropic, "What's new in Claude Opus 4.8"(모델 사양). https://platform.claude.com/docs/en/about-claude/models/whats-new-claude-4-8
OpenAI Codex 공식 문서·체인지로그(설치·GPT-5.5). https://developers.openai.com/codex/changelog
Google, Gemini Code Assist 릴리스 노트 & Antigravity 전환 공지(2026.6.18). https://developers.google.com/gemini-code-assist/resources/release-notes
Google, Gemini CLI 오픈소스 저장소(설치·무료 한도·Gemini 3). https://github.com/google-gemini/gemini-cli
Visual Studio Code 공식 다운로드. https://code.visualstudio.com
Node.js 공식 다운로드(LTS). https://nodejs.org

본 강의안의 도구 버전·모델·요금·전환 일정은 2026년 6월 기준이며, 변경이 잦으므로 위 1차 출처에서 항상 최신 정보를 확인하세요.

바이브 코딩 입문 가이드 · 도구 버전·모델·요금은 2026년 6월 기준이며 자주 바뀝니다.