AI 편집기부터
CLI까지

뭐가 달라지나요?

핵심 차이는 단순히 "AI 성능이 좋아지는 것"이 아닙니다. AI가 내 프로젝트 파일을 직접 보고, 읽고, 수정할 수 있다는 것입니다. 복붙 없이 대화만으로 파일이 바뀝니다.

바이브코딩 스택 한 눈에 보기

Intermediate 트랙에서 사용하는 세 가지 핵심 도구가 어떻게 연결되는지 파악하면 환경 설정이 훨씬 쉬워집니다.

어떤 도구를 쓸까요?

AI가 파일을 직접 수정하는 도구는 크게 두 가지 유형입니다. GUI 편집기와 CLI 도구. 처음에는 GUI 편집기로 시작하고, 익숙해지면 CLI 도구를 추가합니다.

Cursor 설치 방법

1. 1
   cursor.com 접속 → Download for [OS] 클릭

   Windows/Mac 모두 지원합니다.

2. 2
   설치 후 실행 → GitHub 계정으로 로그인
3. 3
   File → Open Folder → 작업할 프로젝트 폴더 선택

   폴더를 열면 AI가 프로젝트의 모든 파일을 볼 수 있게 됩니다.

4. 4
   Node.js가 없다면 먼저 설치합니다

   nodejs.org → LTS 버전 다운로드 후 설치. 터미널에서 node -v로 확인합니다.

코드보다 설계 먼저

가장 많이 하는 실수: 처음부터 "코드 짜줘"로 시작하는 것. 방향 없이 코드를 쌓다 보면 나중에 기능 추가가 어려워집니다.

대신 이렇게 시작하세요. 먼저 설계를 받고, 그 다음에 코드를 요청합니다.

4단계 루프 반복하기

어떤 AI 도구를 쓰든 이 루프를 반복합니다. 도구가 달라져도 흐름은 동일합니다.

Cursor에서 AI에게 요청하는 두 가지 방식

맥락을 잘 전달하기

오류 로그를 AI에게 잘 전달하는 법

Intermediate 트랙에서 가장 많이 막히는 순간은 AI가 코드를 수정한 뒤 새로운 오류가 생겼을 때입니다. 아래 3단계 루프를 반복하면 대부분의 오류를 해결할 수 있습니다.

이것만 알면 시작할 수 있어요

CLI 도구를 쓰려면 터미널이 필요합니다. 처음에 필요한 명령어는 딱 6개입니다. 외우려 하지 말고, 참고하면서 쓰다 보면 자연스럽게 익혀집니다.

터미널 여는 방법

Vite + React 프로젝트 만들기

# 원하는 위치로 이동
cd Desktop

# Vite + React 프로젝트 생성
npm create vite@latest my-app
# Framework: React / Variant: JavaScript 선택

cd my-app
npm install
npm run dev
# localhost:5173 에서 열립니다

Claude CLI / Codex CLI 사용하기

CLI AI 도구는 터미널에서 실행하는 AI입니다. 프로젝트 폴더 안에서 실행하면 AI가 그 폴더의 파일을 읽고 직접 수정할 수 있습니다. GUI 편집기보다 더 빠르고 강력하게 동작합니다.

Claude CLI 설치 (Claude Code)

1. 1
   Node.js 18 이상 설치 확인

   node -v로 버전 확인. v18 미만이면 nodejs.org에서 최신 LTS 재설치.

2. 2
   아래 명령어를 터미널에서 실행합니다

# Claude CLI 설치
npm install -g @anthropic-ai/claude-code

# 설치 확인
claude --version

# 처음 실행 (Anthropic 계정으로 로그인)
claude

Codex CLI 설치 (OpenAI)

# Codex CLI 설치
npm install -g @openai/codex

# OpenAI API 키 설정
# platform.openai.com → API Keys → Create new key
export OPENAI_API_KEY="sk-..."
# Windows: set OPENAI_API_KEY=sk-...

# 실행
codex

CLI에서 AI와 개발하는 흐름

프로젝트 폴더 안에서 CLI를 실행하면, AI가 그 폴더를 자동으로 읽기 시작합니다. 이후에는 대화하듯 요청하면 됩니다.

# 프로젝트 폴더로 이동
cd my-app

# Claude CLI 실행
claude

# AI가 현재 폴더를 자동으로 읽기 시작합니다
# 이제 대화하듯 요청하면 됩니다

비용과 품질을 함께 지키는 법

AI에게 많은 정보를 제공하는 것이 항상 좋지는 않을 수 있습니다.
필요한 맥락만 전달하는 것이 더 빠르고, 비용 효율적입니다.

토큰이 쌓이는 실제 구조

많은 사람이 "내 질문 길이 = 토큰 비용"이라고 생각하지만, 실제로는 다릅니다.
Claude는 매 응답마다 대화 시작부터 지금까지의 모든 내용을, 처음부터 다시 읽습니다.

그렇기에 대화가 길어지면 길어질수록, 사용되는 토큰이 폭발적으로 늘어납니다. 이 증가는 지수함수처럼 느껴지지만, 실제로는 2차 함수(quadratic) 구조입니다. 출력 토큰은 턴 수에 비례하지만, 입력 토큰은 턴 수의 제곱에 비례해 쌓이기 때문에 전체 비용이 가파르게 올라갑니다.

아래 시뮬레이터에서 모델과 설정을 바꾸며 비용이 어떻게 쌓이는지 직접 확인해보세요.

비용만이 아닙니다 — 품질도 함께 흐려집니다

컨텍스트가 길어지면 Claude는 더 많은 텍스트를 처리해야 하고, 이 과정에서 무엇이 지금 중요한지 판단하는 능력이 흐려집니다.

컨텍스트를 구성하는 3가지 레이어

컨텍스트는 하나의 덩어리가 아닙니다. 세 가지 레이어로 나뉘고, 각각 다른 방식으로 관리합니다.

Claude Code 전용 컨텍스트 명령어

Claude Code(CLI)에는 컨텍스트를 직접 제어하는 전용 명령어가 있습니다. 이 세 가지가 가장 현실적인 비용·품질 관리 수단입니다.

/compact를 해야 할 타이밍

/compact는 "토큰이 많이 쌓이면 누르는" 명령이 아닙니다. 아래 신호 중 하나라도 보이면 즉시 압축하세요.

1. ①
   작업 주제가 바뀔 때

   하나의 기능 구현이 끝나고 새 기능으로 넘어가기 전. 지금까지의 탐색은 요약으로 남기고 새 주제를 깔끔하게 시작합니다.

2. ②
   같은 이슈를 오래 붙잡고 있을 때

   디버깅이 길어졌다면 이미 실패한 시도들이 많이 쌓인 상태입니다. 결론만 남기고 과정은 버리세요. 턴 수 기준으로는 짧은 대화(질문·답변이 짧은 경우) 8~10턴, 일반 대화 6~8턴, 파일을 자주 참조하는 긴 대화 4~5턴이 정리 기준입니다.

3. ③
   결정된 내용은 남기고, 탐색 과정은 버려도 될 때

   "React로 하기로 결정"은 남겨야 합니다. "Vue도 고려해봤는데…"는 버려도 됩니다. /compact가 이 판단을 자동으로 처리합니다.

4. ④
   응답이 느려지거나 엉뚱해지기 시작할 때

   Claude의 답변이 현재 맥락과 맞지 않거나 이전 내용을 자꾸 언급하면, 컨텍스트 과부하 신호입니다. 즉시 /compact 또는 /clear하세요.

/compact 직후에는 Claude가 맥락을 잃을 수 있습니다. 아래 4줄 템플릿으로 상태를 빠르게 재설정하세요.

무엇을 남기고 무엇을 버릴지

컨텍스트 관리의 핵심은 "삭제"가 아니라 압축 기준입니다. /compact를 쓸 때든 새 대화를 시작할 때든 이 기준으로 판단하세요.

새 대화를 시작해야 하는 경우

/clear와 /compact로도 해결이 안 될 때가 있습니다. 아래 경우는 명령어가 아니라 완전히 새 대화가 필요합니다.

도구별 지침 파일

반복 규칙을 저장하는 파일명은 도구마다 다릅니다. 아래 예시처럼 프로젝트 루트에 만들어두면 AI가 자동으로 읽고 적용합니다.

# 프로젝트 규칙
스택: React + Vite + TypeScript
스타일: Tailwind CSS만 사용 (인라인 스타일 금지)
컴포넌트: src/components/ 아래에 파일별로 분리
규칙: 새 기능 추가 시 기존 파일 구조 유지
금지: 불필요한 패키지 추가 금지

컨텍스트 친화적 요청 쓰는 법

요청 자체를 컨텍스트 친화적으로 쓰면 Claude가 불필요한 추측 없이 바로 작업에 들어갑니다. 아래 4가지 요소를 갖추면 됩니다.

긴 로그와 에러 출력 다루는 법

실제로 토큰을 가장 많이 잡아먹는 건 에러 로그 전문, 빌드 출력, 파일 전체 코드 붙여넣기입니다. 이 세 원칙을 지키세요.

컨텍스트 정리 체크리스트

막힐 때마다, 또는 새로운 작업을 시작하기 전에 이 체크리스트를 확인하세요.

• 지금 목표가 한 줄로 요약되는가
• 참조하는 파일이 꼭 필요한 것만 남아 있는가
• 오래된 요구사항이 현재 요청과 충돌하지 않는가
• 반복 규칙은 CLAUDE.md로 옮겼는가
• 작업 주제가 바뀌었다면 /clear 또는 새 대화를 시작했는가
• 응답이 이상하다면 /cost로 현재 토큰 부담을 확인했는가

변경사항 저장 & 배포

AI가 파일을 수정할 수 있는 환경에서는 Git이 필수입니다. AI가 이상하게 고쳐도 이전 상태로 되돌릴 수 있어야 합니다.

Git 기본 흐름

# 처음 한 번만: Git 저장소 초기화 + 이름/이메일 설정
git config --global user.name "내이름"
git config --global user.email "내이메일@example.com"
git init
git add .
git commit -m "initial commit"

# GitHub 저장소 연결 후 Push
git remote add origin https://github.com/내계정/내저장소.git
git branch -M main
git push -u origin main

# 이후 수정할 때마다
git add .
git commit -m "기능 추가: 중복 이름 방지"
git push
# → Vercel이 자동으로 재배포합니다

이상하게 바뀌었을 때 되돌리기

# 어떤 파일이 바뀌었는지 확인
git status

# 커밋 목록 보기
git log --oneline

# 특정 커밋으로 되돌아가기
git checkout 커밋ID

Vercel 배포 (처음 한 번)

1. 1
   vercel.com → GitHub 계정으로 로그인
2. 2
   Add New → Project → GitHub 저장소 Import
3. 3
   설정 기본값 그대로 → Deploy 클릭

   Vite 프로젝트는 자동 인식됩니다. 1~2분 후 배포 완료.

빠지기 쉬운 함정들