AI 페어 개발
바이브코딩 지형도

Session 0 · 바이브코딩 지형도

Claude Code · Codex · Cursor · Devin Desktop 4종 지형도 · 실무 사례 · 도구 선택 매트릭스

강사 박수현 · 🚀 젠아이랩스(GenAI Labs)

🎨 이미지 프롬프트: "Editorial illustration on dark navy #0f1722 background showing a terminal prompt window with a bright blinking caret. Three thin luminous lines flow out of the caret and branch to three destinations: a laptop icon labeled 'Claude Code', a server rack labeled 'Codex', and a GitHub octocat silhouette labeled 'MCP'. Clean editorial illustration style, teal #00b894 and purple #6c5ce7 accents with a hint of warm orange, 16:9. CRITICAL: All visible text MUST be in English ONLY (no Korean characters). Each label appears EXACTLY ONCE — no duplicates. No mirrored or reversed text."

Session 0 · 바이브코딩 지형도

PART 1

OT — 강사·로드맵·정체성

강사 소개 · 2일 로드맵 · 코스 정체성.

강사 소개 — 박수현

🎨 이미지 프롬프트: "Editorial illustration on dark navy #0f1722 background showing a stylized laptop screen split into three vertical panes as a desktop workspace mockup. Left pane is a terminal window with a bright caret and a short command line labeled 'Terminal'. Middle pane is a code editor with a file tree sidebar labeled 'VS Code'. Right pane is a browser window with a documentation page labeled 'Browser'. Clean editorial illustration style, teal #00b894 and purple #6c5ce7 accents, 16:9. CRITICAL: All visible text MUST be in English ONLY (no Korean characters). Each label appears EXACTLY ONCE — no duplicates. No mirrored or reversed text."

코스 정체성 — AI 로 코딩한다

이 코스는 "AI 로 코딩한다" 에 집중한다. 30·31 과 나란히 놓여 있고 서로 선수 관계가 아니다.

2일 로드맵 — Day 1 · Day 2

🎨 이미지 프롬프트: "Editorial illustration on dark navy #0f1722 background — two horizontal rows of session cards. Top row 'Day 1' with 7 cards left to right: S0 Landscape, S1 Setup, S2 Prompting, S3 Context, S4 Harness, S5 Dashboard, S6 MCP Bot. Bottom row 'Day 2' with 5 cards: S7 Codex, S8 CI, S9 Methodology, S10 PR Reviewer, S11 RAG Indexer. Clean editorial style, teal #00b894 for Day 1, purple #6c5ce7 for Day 2, 16:9. English only, each label EXACTLY ONCE, correct spelling."

PART 2

바이브코딩이란 — 용어·기원·현재

카파시 트윗에서 출발해 왜 지금인지, 무엇을 바꾸는지, 어떤 우려가 있는지까지 짚는다.

용어의 기원 — Karpathy, 2025-02-02

🎨 이미지 프롬프트: "Editorial illustration on dark navy #0f1722 background of a stylized social media post card floating in space. The card shows a short quoted sentence in English about 'vibe coding' and a small profile avatar. Around the card, soft glowing particles suggest viral spread. Clean editorial illustration style, teal #00b894 and purple #6c5ce7 accents, 16:9. CRITICAL: All visible text MUST be in English ONLY (no Korean characters). Each label appears EXACTLY ONCE — no duplicates. No mirrored or reversed text."

카파시가 붙인 단서 조항

같은 트윗 안에서 카파시는 이 방식을 "주말에 던져 두는 프로젝트(throwaway weekend projects)" 로 한정했다.

그 자신도 "LLM 이 못 고치는 버그가 있고, 결국 코드가 내 이해 범위를 넘어간다" 고 인정했다.

왜 하필 지금인가 — 3축이 동시에 성숙

🎨 이미지 프롬프트: "Editorial illustration on dark navy #0f1722 background — three overlapping circles forming a Venn diagram. Circle 1 (top, teal #00b894) labeled 'Model quality' EXACTLY ONCE inside the top of that circle. Circle 2 (left, purple #6c5ce7) labeled 'Context window' EXACTLY ONCE. Circle 3 (right, warm orange) labeled 'Agent framework' EXACTLY ONCE. Central overlap area small caption 'Vibe coding'. 16:9. English only, no duplicate labels."

"무엇을" 과 "어떻게" — 새 분업 구도

바이브코딩은 개발자의 역할을 "어떻게 짤까" 에서 "무엇을 시킬까" 로 옮긴다. 이 강의 전체가 그 재분업을 전제로 한다.

🎨 이미지 프롬프트: "Editorial illustration on dark navy #0f1722 background of a balance scale (seesaw). Left pan carries a human silhouette with a short English label 'What'. Right pan carries a robot silhouette with a short English label 'How'. The central fulcrum is labeled 'Prompt · Context · Harness' in English. Clean editorial illustration style, teal #00b894 and purple #6c5ce7 accents, 16:9. CRITICAL: All visible text MUST be in English ONLY (no Korean characters). Each label appears EXACTLY ONCE — no duplicates. No mirrored or reversed text."

"무엇을" 을 결정하고 "어떻게" 를 위임하는 새 분업 구도

반대편의 우려 — 정직하게 짚고 넘어간다

PART 3

도구 지형도 — 4대 도구 조감

Claude Code · Codex · Cursor · Devin Desktop(구 Windsurf) 네 도구의 정체 · 차이 · UX 축.

4대 도구 조감 — 2026 상반기 기준

Claude Code — Anthropic · CLI 기반

정체성. 브라우저 IDE 가 아니라 파일 시스템 · 셸 · git 을 직접 조작하는 CLI 에이전트. 2025-02 공개, 터미널에서 claude 로 실행한다.

🧩 핵심 개념 4가지

Claude Code — 구독·요금

🔄 API 종량제 병행

Sonnet 4.6 기준 (2026-06) — 입력 $3 / MTok · 출력 $15 / MTok ※ MTok = million tokens — 백만 토큰 단위 과금. 한글 산문 기준 대략 1 MTok ≈ 도서 3~4권 분량.

🎨 이미지 프롬프트: "Editorial illustration on dark navy #0f1722 background of a clean terminal window mockup. First line shows a monospace command '$ claude --model sonnet-4.6'. Below the command, four labeled nodes branch out with thin luminous lines: 'CLAUDE.md', 'Subagent', 'Hooks', 'Skill'. Clean editorial illustration style, teal #00b894 and purple #6c5ce7 accents, 16:9. CRITICAL: All visible text MUST be in English ONLY (no Korean characters). Each label appears EXACTLY ONCE — no duplicates. No mirrored or reversed text."

claude 셸 하나에서 뻗어 나가는 네 축 — S3·S4 로 이어진다

Codex — OpenAI · CLI + Web

OpenAI 가 Claude Code 를 뒤따라 내놓은 CLI 코딩 에이전트. 명령어 감각은 비슷하지만 정체성이 다르다 — 대표 차이 세 가지.

📄 컨텍스트 파일 — AGENTS.md

Codex 는 AGENTS.md 를 CLAUDE.md 자리에 둔다. 이름만 다를 뿐 역할은 같다 — 리포 규약·명령·팀 정책. Codex 저장소도 자기 AGENTS.md 를 공개한다.

Cursor — Anysphere · IDE 기반

정체성. 2022 년 창업한 Anysphere 의 VS Code fork IDE. 확장이 아니라 IDE 자체를 재설계해 AI 를 내장했다. 그래서 Copilot 이 못 하는 것을 한다 — 인라인 diff · 멀티파일 편집 · Shadow Workspace · Composer.

🎨 이미지 프롬프트: "Editorial illustration on dark navy #0f1722 background of a stylized IDE window mockup. On the left side, a slim file tree panel lists a few short English filenames. On the right side, a Composer chat pane shows a short user message and an inline code diff block with two lines highlighted — one in green labeled '+ added' and one in red labeled '- removed'. A small English label 'Cursor' sits at the top-left corner of the window. Clean editorial illustration style, teal #00b894 and purple #6c5ce7 accents, 16:9. CRITICAL: All visible text MUST be in English ONLY (no Korean characters). Each label appears EXACTLY ONCE — no duplicates. No mirrored or reversed text."

Cursor 의 정체 — VS Code fork 위에 인라인 diff · Composer 를 얹었다

Devin Desktop (구 Windsurf) — Cognition · IDE 기반

정체성. Codeium 이 2024 년 말 공개한 VS Code fork IDE. Cascade 에이전트를 중앙에 두고 코드베이스 인덱싱과 Supercomplete 자동완성을 결합한다.

📅 2026 년 6월의 정체 변화 (타임라인)

Anthropic 계열 확장 — Claude Code + Cowork

정체성. Anthropic 은 개발자용 Claude Code 옆에, 비개발자 지식노동자용 Cowork 를 나란히 내놓았다. 같은 엔진, 다른 표면.

Claude Code vs Cowork — 안전 · 효율 · 스킬 재사용

같은 엔진이라도 표면에 따라 안전 모델과 토큰 효율이 다르다. 스킬 자산은 양쪽에서 공유된다.

UX 축으로 다시 정렬 — CLI ↔ IDE × 대화형 ↔ 자율형

네 도구를 UX 두 축에 배치한다.

🎯 2×2 매트릭스

🎨 이미지 프롬프트: "Editorial illustration on dark navy #0f1722 background — 2x2 matrix. Top axis: 'CLI' (top), 'IDE' (bottom). Side axis: 'Interactive' (left), 'Autonomous' (right). Four cells with tool names: top-left 'Claude Code', top-right 'Codex', bottom-left 'Cursor', bottom-right 'Devin Desktop'. Clean editorial style, teal + purple accents, 16:9. English only, each label EXACTLY ONCE."

PART 4

실무 사례 3선 — 수치와 해석

이 파트의 수치는 원 출처가 공개된 것만 인용한다. 애매한 것은 뺐다.

사례 1 — Anthropic 내부 · Claude Code (2026-05)

Anthropic 이 2026-05 자사 엔지니어링 조직의 Claude Code 활용 지표를 공개했다. 요지는 세 가지다.

사례 2 — Rakuten · CRED · TELUS · Zapier (2026)

Anthropic 의 2026 Agentic Coding Trends Report 가 실은 도입 결과 4개다.

사례 3 — GitHub Copilot · 대규모 설문 (2022 ~ 2025)

가장 오래되고 표본이 큰 정량 연구. 규모가 크고 대조군이 있어 자주 인용된다.

🎨 이미지 프롬프트: "Editorial illustration on dark navy #0f1722 background showing three horizontal case-study cards side by side. Each card holds a stylized logo silhouette and a single big English number: 'Anthropic 80%', 'Rakuten 79% down', 'GitHub 55% faster'. Clean editorial illustration style, teal #00b894 and purple #6c5ce7 accents, 16:9. CRITICAL: All visible text MUST be in English ONLY (no Korean characters). Each label appears EXACTLY ONCE — no duplicates. No mirrored or reversed text."

반대 데이터 하나 — "delegation gap"

같은 Anthropic 2026 리포트가 정직하게 짚은 지점이다.

PART 5

도구 선택 매트릭스 — 3축 프레임 + 4×4 매트릭스

"어떤 도구를 쓸까" 에 답하는 3축 프레임과 실전 선택표.

3축 선택 프레임 — 워크플로 · 프로젝트 · 예산

"어떤 도구를 쓸까" 에 답하기 전에 세 축을 먼저 그려 본다.

🎨 이미지 프롬프트: "Editorial illustration on dark navy #0f1722 background of three horizontal slider tracks stacked vertically. Each slider has a small round handle sitting somewhere along the track and a short English axis label on the left and right ends. Top slider: 'CLI' on the left, 'IDE' on the right, axis title 'Workflow'. Middle slider: 'Solo script' on the left, 'Team repo' on the right, axis title 'Project'. Bottom slider: 'Personal $20' on the left, 'Team metered' on the right, axis title 'Budget'. Clean editorial illustration style, teal #00b894 and purple #6c5ce7 accents, 16:9. CRITICAL: All visible text MUST be in English ONLY (no Korean characters). Each label appears EXACTLY ONCE — no duplicates. No mirrored or reversed text."

도구 선택 매트릭스 ① — 개인 · 팀 리포 · 오픈소스 · 모노리포

"이럴 땐 이걸 쓴다." 참여자가 실제로 벽에 붙일 만한 표를 목표로 한다.

도구 선택 매트릭스 ② — 탐색 · 문서화 · 정책 · GUI 프론트

Claude Code + Codex — 두 도구를 축으로

Cursor · Devin Desktop 을 뺀 이유를 명시한다.

PART 6

첫 액션 아이템

지형도가 잡혔다. 첫 액션은 셋업 준비.

첫 액션 아이템 — S1 셋업 전 3가지 확인

S1 은 첫 20분을 로컬 환경 세팅에 쓴다. 아래 셋을 미리 확인해 두면 그 시간이 줄어든다.

설치 명령 — 미리 실행해 봐도 좋다

# npm 으로 설치 (가장 표준적인 경로)
npm install -g @anthropic-ai/claude-code

# 설치 확인
claude --version

# 첫 인증 (브라우저 로그인 창이 뜬다)
claude

🔍 실행 후 확인

# 로컬 디렉토리 생성 여부
ls -la ~/.claude

# 예상 결과: config.json · projects/ · statsig/ 등이 보이면 OK

마무리 — 한 문장으로

S0 이 끝났다. 지형도가 잡혔다.

지금부터의 세션은 각각 도구 · 개념 · 실습 에 집중한다.

🎨 이미지 프롬프트: "Editorial illustration on dark navy #0f1722 background of a stylized terminal prompt window with a blinking caret at the bottom. Above the caret, a short English phrase is displayed: 'Delegate to AI, but keep reading the code.' Clean editorial illustration style, teal #00b894 and purple #6c5ce7 accents, 16:9. CRITICAL: All visible text MUST be in English ONLY (no Korean characters). Each label appears EXACTLY ONCE — no duplicates. No mirrored or reversed text."

S0 이 남기는 한 문장