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가 파일을 수정할 수 있는 환경에서는 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분 후 배포 완료.

빠지기 쉬운 함정들