이 lesson 을 다 읽고 나면 아래 3가지를 자신 있게 할 수 있습니다.

• ▸✅ Cursor vs Copilot vs Claude Code 선택 기준
• ▸✅ MCP 서버 (filesystem · github · postgres) 설정
• ▸✅ 각 도구의 컨텍스트 윈도우 크기와 가격

학습 목표를 체크리스트로 두고 다 답할 수 있게 되면 lesson 을 닫으세요.

핵심 한 줄

"가장 좋은 도구" 가 아니라 "내 상황에 맞는 도구". 잘못 고르면 토큰 낭비 + 학습 시간 폭증.

5초 만에 결정하는 플로우차트

처음 시작?
   │
   ├─ YES → Cursor 무료 플랜 (월 $0, 14일 Pro 체험)
   │         └─ Tab 자동완성 익숙해지면 → Composer 도전
   │
   └─ NO ──┐
           │
           ├─ UI/디자인 빨리?
           │    └─ YES → v0.dev (Vercel) 또는 Lovable
           │
           ├─ 풀스택 MVP 1시간?
           │    └─ YES → Bolt.new (StackBlitz)
           │
           ├─ 터미널 익숙 + 자율 작업?
           │    └─ YES → Claude Code (npm 글로벌 설치)
           │
           ├─ 회사·엔터프라이즈?
           │    └─ YES → GitHub Copilot Business
           │              (법적 책임·IP indemnification)
           │
           └─ 오픈소스만?
                └─ Cody Free, Continue.dev

추천 조합 (월 비용 기준)

🟢 무료 — 학생·취준생

• ▸Cursor 무료 플랜 — Tab 자동완성 무제한
• ▸ChatGPT 무료 — 일반 대화·디버깅 도움
• ▸v0 무료 — 월 일정 횟수 UI 생성
• ▸GitHub Copilot — 학생 인증 시 무료

💚 $20/월 — 본격 학습

• ▸Cursor Pro $20 — Composer·고급 모델 무제한
• ▸또는 Claude API + Claude Code — 쓴 만큼 ($5-15/월 평균)

💎 $40-60/월 — 프로 개발자

• ▸Cursor Pro + Claude API + ChatGPT Plus
• ▸작업별 최적 도구 분산 사용

각 도구의 진짜 강점

한 번 정리

• ▸시작은 Cursor 무료 부터
• ▸UI = v0, 풀스택 MVP = Bolt
• ▸자율 에이전트 = Claude Code
• ▸엔터프라이즈 = Copilot

Cursor (Anysphere, 2023) — VS Code fork + AI 네이티브

• ▸Tab: 코드 자동 완성 (다음 줄 추측)
• ▸Cmd+K: 인라인 편집 (선택 영역 변경)
• ▸Composer: 다파일 편집·리팩토링
• ▸Chat: 우측 사이드바 대화
• ▸Rules: .cursorrules 로 프로젝트별 규칙
• ▸가격: $20/월, $400M ARR (2025), 개발자 100만+

Windsurf (Codeium, 2024) — Cursor 대안

• ▸Cascade: Composer 보다 더 자율적
• ▸Flow: 다파일 변경 추적
• ▸Cursor 보다 약간 더 적극적 (agentic)

GitHub Copilot (MS+OpenAI, 2021) — 엔터프라이즈 표준

• ▸VS Code·JetBrains·Vim·Neovim 통합
• ▸Copilot Chat (대화) + Workspace (다파일)
• ▸엔터프라이즈 라이센스·법적 보호 (IP indemnification)
• ▸가격: $10/월 개인, $19/월 기업

선택 기준:

Claude Code (Anthropic, 2024) — 터미널의 자율 에이전트

• ▸claude 명령 한 줄로 실행
• ▸프로젝트 전체 컨텍스트 자동 이해 (CLAUDE.md 읽기)
• ▸다파일 편집·실행·테스트·커밋까지 자율
• ▸MCP 통합: DB·Slack·GitHub 도구 호출
• ▸Skills: 도메인 특화 도구 (claude-api·gstack 등)
• ▸권한 모드: ask·acceptEdits·plan·bypassPermissions

Aider (오픈소스, 2023) — Claude/GPT 페어

• ▸CLI 도구, git 통합
• ▸변경마다 자동 커밋 (rollback 쉬움)
• ▸repo-map 자동 생성

Cursor vs Claude Code:

> 💡 2025 트렌드: 둘 다 사용. 작성 은 Cursor (Tab 빠름), 복잡한 작업 은 Claude Code.

v0 (Vercel, 2024) — UI 컴포넌트 생성

• ▸프롬프트 → React + Tailwind 컴포넌트 즉시
• ▸shadcn/ui 기반 (디자인 시스템 일관)
• ▸바로 배포 (Vercel 통합)
• ▸가격: $20/월

Bolt (StackBlitz, 2024) — 풀스택 앱 생성

• ▸프롬프트 → Next.js·React·Vue 전체 앱
• ▸브라우저에서 실행 (WebContainer)
• ▸DB·인증 통합 (Supabase·Neon)

Lovable (스웨덴, 2024) — 비개발자 친화

• ▸풀스택 앱 생성 + 자연어 수정
• ▸GitHub 자동 push·배포 (Netlify)
• ▸"Wix 같은 AI 버전"

3 도구 비교:

활용 패턴:
1. 아이디어 검증: Bolt 로 30분 만에 동작하는 MVP
2. UI 시안: v0 로 다양한 컴포넌트 변형
3. 사내 도구: Lovable 로 비개발자도 제작

> 💡 완성 코드는 아님. 프로토타입·시안·시작점. 진짜 production 은 Cursor/Claude Code 로 보강.

MCP (Anthropic, 2024 표준화) — LLM ↔ 외부 도구 표준 프로토콜.

왜 표준화? 모든 도구·DB·서비스를 각각 통합하는 N×M 문제 → MCP 가 공통 인터페이스 제공.

3 가지 기능:

Transport:

• ▸stdio — 로컬 프로세스 (Claude Desktop·Claude Code)
• ▸HTTP/SSE — 원격 서버 (팀 공유)
• ▸WebSocket — 양방향 실시간

기존 MCP 서버:

• ▸@modelcontextprotocol/server-filesystem — 로컬 파일
• ▸@modelcontextprotocol/server-postgres — DB 쿼리
• ▸@modelcontextprotocol/server-github — Issues·PR
• ▸Slack·Notion·Linear·Figma 등 다수

직접 만들기 (Python · Node 양쪽 SDK):

# server.py
from mcp.server import Server
app = Server("my-tools")

@app.tool()
async def get_user(id: str) -> dict:
    return await db.users.find(id)

claude_desktop_config.json 에 등록 → Claude 가 도구처럼 사용.

> 💡 2025 표준: VS Code·JetBrains·Cursor 모두 MCP 채택. LSP(2016) 처럼 AI 도구의 공통 인터페이스.

왜 필요한가

매 대화에서 "내 프로젝트는 Next.js 15·TypeScript·Drizzle·Postgres 쓰고..." 반복하면 토큰 낭비 + 시간 낭비. 프로젝트 루트의 파일 1개 가 모든 대화에 자동 적용.

파일 위치

• ▸Claude Code → CLAUDE.md (프로젝트 루트)
• ▸Cursor → .cursorrules 또는 .cursor/rules/*.md (최신)
• ▸GitHub Copilot → .github/copilot-instructions.md
• ▸Aider → CONVENTIONS.md

실전 템플릿 (복붙해서 시작)

# 프로젝트 가이드

## 스택
- **프레임워크**: Next.js 15 (App Router)
- **언어**: TypeScript (strict mode)
- **스타일**: Tailwind CSS + shadcn/ui
- **DB**: PostgreSQL + Drizzle ORM
- **인증**: NextAuth.js v5 (OAuth: Google·Kakao)
- **배포**: Vercel
- **테스트**: Vitest + Playwright

## 폴더 구조
\\`\\`\\`
src/
├── app/              # App Router 페이지 + API
├── components/       # React 컴포넌트
│   ├── ui/           # shadcn 베이스
│   └── features/     # 도메인별
├── lib/              # 유틸·DB 클라이언트
├── hooks/            # 커스텀 훅
└── server/           # 서버 전용 (DB 액션)
\\`\\`\\`

## 코딩 컨벤션
- 컴포넌트: `function` 선언 (arrow function 금지)
- export: named export 권장 (default 는 page.tsx 만)
- import 순서: external → @/ → relative
- 주석: 한국어 OK. 복잡한 로직만
- 변수명: camelCase, 상수는 UPPER_CASE
- 타입: `type` 우선, 확장은 `interface`

## 금지 패턴
- ❌ `any` 타입 사용
- ❌ `var` (const/let 만)
- ❌ React `useEffect` 안에서 fetch (대신 server component 또는 react-query)
- ❌ 테스트 없는 신규 함수
- ❌ "TODO" 주석 (Linear/GitHub Issues 로)
- ❌ console.log production 코드에 (logger 사용)

## 도메인 용어
- 사용자 = User (회원·게스트 모두)
- 학습자 = Learner (User 의 하위)
- 레슨 = Lesson
- 진도 = Progress

## 환경 변수
- 모두 `.env.local` 에 (`.env.example` 동기화)
- 클라이언트는 `NEXT_PUBLIC_` 접두사만

## 작업 흐름
1. 새 기능 → spec.md 먼저 (간단해도)
2. 작은 단위 PR — 200줄 이내
3. 커밋 컨벤션: feat/fix/refactor/test/chore

이 파일 효과

이 파일 있을 때 vs 없을 때 같은 요청:

❌ 없을 때:
> 나: "로그인 API 만들어줘"
> AI: "어떤 프레임워크? DB? 인증 방식?" (질문 폭증)
> 나: 5번에 걸쳐 설명...
> 출력 토큰: ~5000

✅ 있을 때:
> 나: "로그인 API 만들어줘"
> AI: (CLAUDE.md 읽고 NextAuth + Drizzle + Postgres 로 정확히 구현)
> 출력 토큰: ~800

6배 절약 + 1번에 끝.

한 번 정리

• ▸CLAUDE.md = 프로젝트 모든 컨텍스트의 진실
• ▸한 번 작성 → 모든 대화에 자동 적용
• ▸토큰 5-10배 절약·정확도 향상
• ▸팀 합류한 사람도 AI 통해 빠르게 온보딩

MCP 가 뭐냐 — 다시 정리

MCP (Model Context Protocol) = Claude·Cursor·VS Code 등 LLM 에 외부 도구 를 표준 방식으로 연결. 한 번 설정하면 어디서나 같은 도구.

가장 단순한 설치 — 파일시스템 MCP

Claude Desktop 의 claude_desktop_config.json 파일 편집:

위치:

• ▸macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
• ▸Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-filesystem",
        "/Users/myname/projects"
      ]
    }
  }
}

→ Claude 가 내 projects 폴더 의 파일을 직접 읽고 쓸 수 있게 됨.

GitHub MCP 추가

{
  "mcpServers": {
    "github": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-github"],
      "env": {
        "GITHUB_PERSONAL_ACCESS_TOKEN": "ghp_xxxxxxxxxxxx"
      }
    }
  }
}

→ Claude 가 Issues 조회·PR 생성·코드 검색 가능. GitHub 토큰은 settings > Developer settings > Personal access tokens 에서.

Slack MCP 추가

{
  "mcpServers": {
    "slack": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-slack"],
      "env": {
        "SLACK_BOT_TOKEN": "xoxb-...",
        "SLACK_TEAM_ID": "T01ABCDEFGH"
      }
    }
  }
}

직접 만들기 — 가장 단순한 MCP 서버 (Python)

# server.py — 시간 알려주는 MCP
from mcp.server.fastmcp import FastMCP
from datetime import datetime

mcp = FastMCP("time-server")

@mcp.tool()
async def get_current_time(timezone: str = "Asia/Seoul") -> str:
    \"\"\"현재 시간 조회\"\"\"
    return datetime.now().isoformat()

if __name__ == "__main__":
    mcp.run()

pip install mcp
python server.py

설정 파일에 추가:

{
  "mcpServers": {
    "time": {
      "command": "python",
      "args": ["/path/to/server.py"]
    }
  }
}

→ Claude 에서 "지금 시간 알려줘" 하면 직접 호출.

흔한 함정

1. JSON 문법 오류 — comma 빠뜨림. VS Code 에서 .json 으로 열어 syntax 확인
2. command path — npx 가 PATH 에 없으면 절대 경로 (/usr/local/bin/npx)
3. 권한 부족 — filesystem MCP 에 root 폴더 지정 금지 — 보안 위험
4. 재시작 필요 — 설정 변경 후 Claude Desktop 완전 재시작
5. 로그 확인 — Claude Desktop > Developer > Open MCP Logs

토큰 관점에서 MCP 의 가치

• ▸반복 검색 X: "그 파일 어디 있어?" 매번 묻기 X. MCP 가 직접 찾음
• ▸컨텍스트 자동: 매번 코드 복붙 X. MCP 가 필요할 때 읽음
• ▸자동화: 같은 작업 (PR 만들기·이슈 닫기 등) 반복 설명 0번

한 번 정리

• ▸MCP = LLM ↔ 외부 도구 표준 프로토콜
• ▸5분 만에 filesystem · GitHub · Slack 연결
• ▸직접 MCP 서버 만들기 Python·Node 수십 줄
• ▸토큰 절약 + 자동화 효과

이 lesson 의 개념을 알면 AI 에게 구체적으로 지시할 수 있습니다. 막연한 "고쳐줘" 가 아니라 어휘를 가진 요청 — 그게 토큰 절약의 출발점입니다.

• ▸"Cursor + Claude Code 동시 활용 워크플로우 추천해줘"
• ▸"이 프로젝트에 어울리는 MCP 서버 5개 + 설정 파일 만들어줘"

왜 이게 토큰을 줄이나

개념을 모를 땐 AI 답변을 받고도 "그게 뭐예요?" 를 다시 물어야 합니다. 그 "다시 물음" 이 토큰을 잡아먹습니다. 개념 한 번 익혀두면 대화가 한 번에 끝납니다.