바이브코딩 워크숍

기본 개념 설명

시작하기 전에 알아둘 기본 개념들이에요.

클로드 코드와 코덱스, 무엇을 쓸까

이 워크숍에서 쓰는 건 에이전틱 코딩 도구예요. 채팅창에서 코드를 받아다 복사해 붙여넣는 게 아니라, AI가 내 컴퓨터의 폴더에 직접 파일을 만들고 고치는 방식입니다.

대표적인 게 두 개예요. 앤스로픽의 클로드 코드와 오픈AI의 코덱스. 하는 일은 거의 같고, 둘 다 각자의 유료 구독이 있어야 씁니다. 그래서 고르는 기준은 간단해요.

새로 결제할 필요 없이 이미 갖고 있는 걸 쓰는 게 제일 좋아요. 이 가이드의 본문은 클로드 코드를 기준으로 쓰여 있고, 코덱스 사용자를 위한 안내는 필요한 자리마다 따로 표시해 뒀습니다.

클로드 계정 하나, 여러 개의 창구

클로드 계정 하나로 여러 방식으로 접근할 수 있어요. claude.ai는 채팅창에서 쓰는 웹 인터페이스고, 클로드 코드는 내 컴퓨터의 파일을 직접 읽고 쓰는 방식이에요. 같은 계정, 같은 모델이지만 사용하는 '창구'가 다른 거예요. 웹은 대화 중심, 코드는 파일과 코드 작업 중심이라고 생각하면 돼요.

클로드 코드를 부르는 창구는 세 가지가 있어요. VS Code 확장, 클로드 데스크톱 앱, 터미널이에요. 셋 다 같은 클로드 코드고 기능도 같아요. 이 가이드는 VS Code 확장을 기준으로 안내합니다. 만든 파일이 왼쪽 목록에 그대로 보여서, 내가 뭘 만들고 있는지 눈으로 확인하면서 갈 수 있거든요.

IDE, Terminal, Claude Extension

IDE는 코드를 쓰는 편집기예요. VS Code가 대표적이고, 우리가 주로 쓰는 환경이에요. Terminal(터미널)은 컴퓨터에 명령을 직접 입력하는 창인데, VS Code 안에 이미 들어 있어요. 따로 열 일은 거의 없습니다. Claude Extension은 VS Code 안에 클로드를 붙여놓은 플러그인이에요. 이걸 설치하면 클로드 코드가 함께 따라오기 때문에, 명령어를 칠 일 없이 설치가 끝나요.

세팅하기

설치부터 첫 대화까지, 네 단계면 끝나요. 터미널에 명령어를 칠 일은 없습니다.

클로드 코드 설치하기

코덱스 설치하기 (챗지피티를 쓴다면)

클로드 코드 대신 코덱스를 쓰는 경우예요. VS Code를 설치하는 것까지는 똑같고, 확장만 다른 걸 깔면 됩니다.

설치는 여기까지예요. API 키를 발급받거나 따로 결제를 설정할 필요 없이, 쓰던 챗지피티 구독이 그대로 적용됩니다.

설치가 잘 됐는지 확인하기

Claude 탭(코덱스라면 Codex 탭)에 아래 문장을 그대로 붙여넣어 보세요. 첫 프롬프트이자 환경 점검입니다.

내 컴퓨터에 git이 설치돼 있는지 확인해줘.
없으면 어떻게 설치하는지 알려줘.copy

AI가 직접 확인해서 알려줄 거예요. git은 만든 것을 인터넷에 올릴 때 꼭 필요한 도구인데, 맥은 대부분 이미 있고 윈도우는 따로 설치해야 하는 경우가 많아요. 알려주는 대로 미리 설치해두면 당일에 막히지 않습니다.

다른 방법으로 설치하기

위 방법이 어렵거나 이미 익숙한 환경이 있다면 아래도 가능해요. 셋 다 같은 클로드 코드입니다.

설치 트러블슈팅

기본 사용법

슬래시 명령어, 단축키를 익혀봅시다.

핵심 슬래시 명령어

아래는 클로드 코드 기준이에요. 코덱스에도 슬래시 명령어가 있지만 목록이 조금 달라서, 코덱스를 쓰신다면 /help를 입력해 쓸 수 있는 명령어를 확인해 보세요.

키보드 단축키

컨텍스트 관리 원칙

AI 모델은 대화를 '기억'하지 않아요. 매번 전체 내용을 다시 읽어요. 대화가 길어지면 느려지고 비용이 올라갑니다.

Git 안전망

코드의 타임머신. 바이브코딩의 필수 안전장치.

왜 Git이 필요한가?

"보고서_최종.docx, 보고서_최최종.docx, 보고서_진짜최종.docx..." — Git은 이 문제를 해결해요. 게임의 세이브 포인트처럼, 큰 작업 전에 현재 상태를 저장해두면 언제든 돌아갈 수 있어요.

Git vs GitHub

핵심 명령어

Claude Code와 함께 쓰기

자연어로 말하면 Git 명령어를 알아서 실행해줘요.

# 이렇게 말하면
"현재 상태 저장해줘"          → git add + commit + push
"오늘 작업 내용 커밋해줘"     → commit 메시지도 Claude가 작성
"아까 작업 전 상태로 돌아가줘"  → git reset 또는 checkout

실습 — GitHub 연결

GitHub Pages — 내 사이트 주소 만들기

GitHub에 올린 폴더는 그대로 웹사이트가 될 수 있어요. github.io로 끝나는 주소가 생기고, 누구에게나 링크로 보낼 수 있습니다. 비용은 들지 않아요.

이 폴더를 GitHub Pages로 배포해줘.
배포된 주소도 알려줘.copy

CLAUDE.md 설정

새 직원에게 주는 업무 매뉴얼. Claude에게 주는 행동 지침.

CLAUDE.md란?

클로드 코드는 대화를 새로 시작할 때마다 그 폴더의 CLAUDE.md를 자동으로 읽어요. 매번 같은 설명을 반복할 필요가 없어져요.

코덱스에도 같은 개념이 있습니다. 파일 이름만 AGENTS.md로 다르고, 쓰는 방식은 똑같아요.

실제 사용 중인 CLAUDE.md 예시

# 나에 대해
- 이름: 민석 (업무 닉네임: 테일러)
- 소속: ○○ 조직 ○○팀
- 배경: 컴퓨터공학 + 철학 복수전공. 기술 기획

# 글쓰기 & 문서화
- 블로그 포스트 작성 시 콜론(:) 사용 금지
  — 한국어 문장에서 콜론은 부자연스럽고 AI 생성 티가 남
- 자연스러운 줄글 선호. 과도한 불렛 포인트 지양
- 마크다운 기반 기록. 옵시디언 호환 마크다운으로 작성
- 파일명 규칙: YYYY-MM-DD-제목.md

# 대화 스타일
- 한국어 반말로 대화. 친구처럼 편하게
- 간결하게. 장황한 설명 금지. 필요한 만큼만
- 단순 동의보다는 적절한 질문으로 사고 확장 유도
- 대안적 관점이나 놓친 부분이 있으면 짚어주기
- 학습에 도움 되는 설명은 환영하지만 매번 기초부터 설명할 필요 없음
- 감정/행동 묘사, 의미 없는 감탄사 금지copy

/init으로 자동 생성하기

Claude 탭에 /init을 입력하면 Claude가 폴더를 분석해서 CLAUDE.md를 자동으로 만들어줘요.

작성 원칙

바이브코딩 5단계 사이클

기획 → 플랜 → 액션 → 확인 → 반복. 이 리듬으로 만들어보세요.

무엇을 만들지 정하기

적어보면서 오늘 만들 것을 구체화해보세요.

핵심 능력 4가지

연동과 주의 사항

토큰 관리부터 외부 서비스 연동까지.

토큰 사용량

코딩 작업은 토큰을 많이 소모해요. Pro 플랜이면 하루치 작업은 대체로 감당됩니다. 리밋이 걸리면 잠시 쉬었다가 하면 돼요.

세션 관리

하나의 세션에서 너무 긴 작업을 할수록 토큰이 빨리 닳아요. 긴 대화를 하면 점점 앞의 말을 까먹는 거랑 같아요. /compact로 대화를 압축하거나, 새 대화를 열어 새로 시작하면 돼요.

권한 부여

Claude Code는 파일을 읽거나 수정하기 전에 항상 먼저 물어봐요. 접근을 열어두는 건 문을 열 수 있는 권한을 주는 거고, 문을 열기 전에 항상 노크를 해요. 허락하지 않으면 절대 멋대로 열고 들어오지 않아요.

'연동'이란?

두 서비스가 서로 데이터를 주고받을 수 있게 이어주는 거예요. 연동 방식에는 크게 API와 MCP가 있어요.

CLI 도구 연동

Google, GitHub 같은 서비스들은 터미널에서도 쓸 수 있게 전용 CLI 도구를 제공해요. gcloud, gh, gws 같은 것들이에요.

한 번 연동(로그인/인증)만 해두면, 그 다음부터는 터미널에서 바로 기능을 쓸 수 있어요. 클로드 코드는 이런 CLI 도구들을 직접 실행할 수 있어서, 자연어로 말하면 알맞은 명령어를 조합해서 실행해줘요. 각 CLI의 명령어를 외울 필요 없이, 클로드가 번역사 역할을 해주는 거예요.

연결 가능한 서비스들

자주 묻는 질문

궁금한 점들을 모았어요.