Claude AI 시작부터 끝까지 End-toEnd 가이드!
🚀 Claude Code 완벽 가이드
설치부터 MCP, Skills, Hooks, GitHub 연동까지 — AI 코딩 어시스턴트의 모든 것
Claude Code는 Anthropic이 개발한 터미널 기반 AI 코딩 어시스턴트입니다. 단순한 코드 생성을 넘어 파일 시스템 접근, 명령어 실행, Git 작업까지 수행하는 진정한 '에이전트'로서 개발 생산성을 혁신적으로 높여줍니다. 이 가이드에서는 설치부터 고급 활용법까지 모든 것을 다룹니다.
⚡ 1. 설치 및 초기 설정
Claude Code는 npm 또는 Homebrew를 통해 설치할 수 있습니다. Node.js 18 이상이 필요합니다.
📦 설치 방법
npm (권장)
# 전역 설치 npm install -g @anthropic-ai/claude-code # 설치 확인 claude --version
Homebrew (macOS)
# Homebrew로 설치 brew install claude-code # 또는 cask 사용 brew install --cask claude
🔄 업데이트
# npm으로 최신 버전 업데이트 npm update -g @anthropic-ai/claude-code # 특정 버전 설치 npm install -g @anthropic-ai/claude-code@latest
• Node.js: 18.0 이상
• OS: macOS, Linux, Windows (WSL2 권장)
• 메모리: 최소 4GB RAM 권장
• 네트워크: Anthropic API 접근 필요
🔑 2. API 키 설정
Claude Code를 사용하려면 Anthropic API 키가 필요합니다.
🔐 환경 변수 설정 방법
방법 1: 터미널에서 직접 설정
# macOS/Linux - 현재 세션 export ANTHROPIC_API_KEY="sk-ant-api03-xxxxx..." # 영구 설정 (~/.bashrc 또는 ~/.zshrc에 추가) echo 'export ANTHROPIC_API_KEY="sk-ant-api03-xxxxx..."' >> ~/.zshrc source ~/.zshrc
방법 2: .env 파일 사용 (프로젝트별)
# 프로젝트 루트에 .env 파일 생성 ANTHROPIC_API_KEY=sk-ant-api03-xxxxx... # ⚠️ 중요: .gitignore에 반드시 추가! echo ".env" >> .gitignore
Python에서 API 키 사용
import os from dotenv import load_dotenv from anthropic import Anthropic # .env 파일 로드 load_dotenv() # 클라이언트 초기화 (자동으로 환경변수 감지) client = Anthropic() # 또는 명시적으로 전달 client = Anthropic(api_key=os.getenv("ANTHROPIC_API_KEY"))
• API 키를 절대로 코드에 하드코딩하지 마세요
• .env 파일은 반드시 .gitignore에 추가
• 키가 노출되면 즉시 Console에서 폐기하고 새로 발급
💻 3. 기본 사용법
🚀 Claude Code 시작하기
# 현재 디렉토리에서 Claude Code 시작 claude # 특정 디렉토리에서 시작 claude /path/to/project # 대화형 모드 시작 claude chat # 단일 명령 실행 후 종료 claude -p "이 프로젝트의 구조를 설명해줘"
📝 자주 쓰는 명령어
| 명령어 | 설명 |
|---|---|
/help |
사용 가능한 명령어 목록 표시 |
/clear |
현재 대화 컨텍스트 초기화 |
/compact |
대화 요약하여 컨텍스트 절약 |
/cost |
현재 세션의 토큰 사용량/비용 확인 |
/model |
사용 중인 모델 확인/변경 |
/hooks |
Hooks 관리 인터페이스 |
/permissions |
권한 설정 확인/변경 |
/exit 또는 Ctrl+C |
Claude Code 종료 |
💬 실제 사용 예시
# 코드 리뷰 요청 > src/utils.js 파일을 리뷰해주고 개선점을 알려줘 # 버그 수정 > login 함수에서 발생하는 null 에러를 찾아서 수정해줘 # 새 기능 구현 > 사용자 인증을 위한 JWT 미들웨어를 만들어줘 # 테스트 코드 생성 > UserService 클래스에 대한 단위 테스트를 작성해줘 # 리팩토링 > 이 컴포넌트를 React hooks를 사용하도록 리팩토링해줘
📄 4. CLAUDE.md 설정
CLAUDE.md는 프로젝트의 컨텍스트와 규칙을 Claude에게 알려주는 설정 파일입니다. 프로젝트 루트에 위치하며, Claude Code가 자동으로 인식합니다.
📁 파일 위치
✍️ CLAUDE.md 작성 예시
# 프로젝트: MyApp E-commerce Platform ## 프로젝트 개요 React + TypeScript 기반 이커머스 플랫폼입니다. 백엔드는 Node.js + Express + PostgreSQL을 사용합니다. ## 기술 스택 - Frontend: React 18, TypeScript 5, TailwindCSS, Zustand - Backend: Node.js 20, Express 4, Prisma ORM - Database: PostgreSQL 15 - Testing: Jest, React Testing Library ## 코딩 컨벤션 - 함수형 컴포넌트와 React Hooks 사용 - 변수명은 camelCase, 컴포넌트는 PascalCase - 모든 함수에 JSDoc 주석 필수 - 에러 핸들링은 try-catch로 감싸기 ## 파일 구조 ``` src/ ├── components/ # 재사용 가능한 UI 컴포넌트 ├── pages/ # 페이지 컴포넌트 ├── hooks/ # 커스텀 훅 ├── services/ # API 호출 로직 ├── utils/ # 유틸리티 함수 └── types/ # TypeScript 타입 정의 ``` ## 주의사항 - `console.log`는 프로덕션 코드에서 사용 금지 - API 키는 반드시 환경 변수로 관리 - 커밋 전 `npm run lint` 실행 필수 ## 자주 사용하는 명령어 - `npm run dev` - 개발 서버 실행 - `npm run build` - 프로덕션 빌드 - `npm run test` - 테스트 실행 - `npm run lint` - 린트 검사
🚫 .claudeignore 설정
Claude가 읽지 않을 파일/폴더를 지정합니다. .gitignore와 문법이 동일합니다.
# .claudeignore 예시 # 의존성 node_modules/ vendor/ # 빌드 결과물 dist/ build/ .next/ # 환경 설정 .env* *.local # 대용량 파일 *.log *.zip *.tar.gz # 민감한 정보 secrets/ credentials/
🔌 5. MCP (Model Context Protocol)
NEW MCP는 Claude가 외부 도구, 데이터 소스, 서비스와 표준화된 방식으로 연결할 수 있게 해주는 프로토콜입니다. 데이터베이스, API, 로컬 파일 시스템 등 다양한 리소스에 접근할 수 있습니다.
🎯 MCP의 핵심 개념
특정 기능을 제공하는 서버. 파일 시스템, GitHub, Slack, 데이터베이스 등의 서버가 있음
Claude Code가 MCP 클라이언트 역할. 서버에 연결하여 도구와 리소스 사용
⚙️ MCP 설정하기
MCP 서버 설정은 ~/.claude/mcp_settings.json 파일에서 관리합니다.
{
"mcpServers": {
// 파일 시스템 접근
"filesystem": {
"command": "npx",
"args": ["-y", "@modelcontextprotocol/server-filesystem", "/Users/me/projects"]
},
// GitHub 연동
"github": {
"command": "npx",
"args": ["-y", "@modelcontextprotocol/server-github"],
"env": {
"GITHUB_TOKEN": "ghp_xxxxxxxxxxxx"
}
},
// PostgreSQL 데이터베이스
"postgres": {
"command": "npx",
"args": ["-y", "@modelcontextprotocol/server-postgres"],
"env": {
"DATABASE_URL": "postgresql://user:pass@localhost:5432/mydb"
}
},
// Slack 연동
"slack": {
"command": "npx",
"args": ["-y", "@modelcontextprotocol/server-slack"],
"env": {
"SLACK_BOT_TOKEN": "xoxb-xxxx"
}
}
}
}
📚 주요 MCP 서버 목록
| 서버 | 기능 | 패키지 |
|---|---|---|
| Filesystem | 로컬 파일 읽기/쓰기 | @mcp/server-filesystem |
| GitHub | 이슈, PR, 코드 관리 | @mcp/server-github |
| PostgreSQL | DB 쿼리 실행 | @mcp/server-postgres |
| Slack | 메시지 전송/검색 | @mcp/server-slack |
| Google Drive | 문서 접근 | @mcp/server-gdrive |
| Puppeteer | 웹 브라우저 자동화 | @mcp/server-puppeteer |
🛠️ 커스텀 MCP 서버 만들기
# my_mcp_server.py - 간단한 MCP 서버 예시 from mcp.server import Server from mcp.types import Tool, TextContent server = Server("my-custom-server") @server.tool() async def get_weather(city: str) -> str: """지정된 도시의 날씨 정보를 가져옵니다.""" # 실제로는 날씨 API 호출 return f"{city}의 현재 날씨: 맑음, 22°C" @server.tool() async def calculate(expression: str) -> str: """수학 표현식을 계산합니다.""" result = eval(expression) # 주의: 실제 프로덕션에서는 안전한 파서 사용 return str(result) if __name__ == "__main__": server.run()
🎯 6. Skills 시스템
Skills는 특정 작업이나 도메인에 대한 지식과 절차를 패키지화한 것입니다. 재사용 가능한 지침과 코드 스니펫을 Markdown으로 정의합니다.
📁 Skills 파일 구조
✍️ Skill 파일 작성 예시
# react-component.md # React 컴포넌트 생성 스킬 이 스킬은 프로젝트의 컨벤션에 맞는 React 컴포넌트를 생성합니다. ## 컴포넌트 구조 모든 컴포넌트는 다음 구조를 따릅니다: ```typescript // components/[ComponentName]/index.tsx import { FC } from 'react'; import styles from './styles.module.css'; import { ComponentNameProps } from './types'; export const ComponentName: FC<ComponentNameProps> = ({ children, className, ...props }) => { return ( <div className={`${styles.container} ${className}`} {...props}> {children} </div> ); }; ``` ## 파일 생성 규칙 1. `components/[Name]/index.tsx` - 메인 컴포넌트 2. `components/[Name]/types.ts` - TypeScript 타입 3. `components/[Name]/styles.module.css` - CSS 모듈 4. `components/[Name]/[Name].test.tsx` - 테스트 ## 네이밍 규칙 - 컴포넌트: PascalCase (예: `UserProfile`) - Props: `[ComponentName]Props` - 이벤트 핸들러: `handle[Event]` (예: `handleClick`) ## 예시 "Button 컴포넌트 생성"이라고 요청하면: - `components/Button/index.tsx` - `components/Button/types.ts` - `components/Button/styles.module.css` - `components/Button/Button.test.tsx` 를 생성합니다.
🔄 Skill 활성화/사용
# Claude Code에서 스킬 사용하기 > /skills # 사용 가능한 스킬 목록 > /skills load react-component # 특정 스킬 로드 # 스킬 적용하여 작업 요청 > react-component 스킬을 사용해서 LoginForm 컴포넌트를 만들어줘
🪝 7. Hooks 자동화
Hooks는 Claude Code의 특정 라이프사이클 이벤트에서 자동으로 실행되는 셸 명령어입니다. 코드 포맷팅, 테스트 실행 등을 자동화할 수 있습니다.
📌 Hook 이벤트 종류
| 이벤트 | 실행 시점 | 활용 예시 |
|---|---|---|
PreToolUse |
도구 실행 전 | 위험한 작업 차단, 확인 요청 |
PostToolUse |
도구 실행 후 | 자동 포맷팅, 린트, 테스트 |
UserPromptSubmit |
사용자 입력 시 | 컨텍스트 주입, 스킬 로드 |
SessionStart |
세션 시작 시 | 프로젝트 컨텍스트 로드 |
Notification |
알림 발생 시 | Slack/이메일 알림 |
⚙️ Hooks 설정 파일
Hooks는 .claude/hooks.json에서 설정합니다.
{
"hooks": {
// 파일 수정 후 자동 포맷팅
"PostToolUse": [
{
"name": "Auto Format",
"match": {
"tool": "file_write",
"pattern": "\\.(ts|tsx|js|jsx)$"
},
"command": "npx prettier --write \"$FILE_PATH\""
},
{
"name": "Run ESLint",
"match": {
"tool": "file_write",
"pattern": "\\.(ts|tsx)$"
},
"command": "npx eslint --fix \"$FILE_PATH\""
}
],
// 위험한 명령어 실행 전 확인
"PreToolUse": [
{
"name": "Block rm -rf",
"match": {
"tool": "shell",
"pattern": "rm\\s+-rf"
},
"action": "block",
"message": "rm -rf 명령어는 허용되지 않습니다."
}
],
// 세션 시작 시 프로젝트 정보 로드
"SessionStart": [
{
"name": "Load Project Context",
"command": "cat CLAUDE.md && git status --short"
}
],
// 테스트 파일 수정 후 자동 테스트
"PostToolUse": [
{
"name": "Run Tests",
"match": {
"tool": "file_write",
"pattern": "\\.test\\.(ts|tsx)$"
},
"command": "npm test -- --findRelatedTests \"$FILE_PATH\""
}
]
}
}
🖥️ CLI에서 Hooks 관리
# 현재 설정된 hooks 확인 > /hooks # hook 추가 > /hooks add PostToolUse "npx prettier --write $FILE_PATH" # hook 비활성화 > /hooks disable "Auto Format" # hook 삭제 > /hooks remove "Auto Format"
🐙 8. GitHub 연동
Claude Code는 GitHub와 긴밀하게 통합되어 이슈 관리, PR 리뷰, 코드 수정 등을 자동화할 수 있습니다.
🔧 설정 방법
1. GitHub CLI (gh) 설치 및 인증
# macOS brew install gh # Ubuntu/Debian sudo apt install gh # GitHub 로그인 gh auth login # 인증 상태 확인 gh auth status
2. MCP GitHub 서버 설정
// ~/.claude/mcp_settings.json { "mcpServers": { "github": { "command": "npx", "args": ["-y", "@modelcontextprotocol/server-github"], "env": { "GITHUB_TOKEN": "ghp_your_personal_access_token" } } } }
💡 활용 예시
# 이슈 생성 > 로그인 페이지 버그에 대한 GitHub 이슈를 생성해줘 # PR 생성 > 현재 브랜치의 변경사항으로 PR을 만들어줘. 제목은 "feat: 사용자 인증 기능 추가" # 코드 리뷰 > PR #42의 변경사항을 리뷰하고 피드백을 달아줘 # 이슈 기반 작업 > 이슈 #15를 확인하고 해당 버그를 수정해줘 # 보안 분석 > 이 PR의 보안 취약점을 분석해줘
🤖 GitHub Actions 연동
# .github/workflows/claude-review.yml name: Claude Code Review on: pull_request: types: [opened, synchronize] jobs: review: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - name: Setup Node.js uses: actions/setup-node@v4 with: node-version: '20' - name: Install Claude Code run: npm install -g @anthropic-ai/claude-code - name: Run Claude Review env: ANTHROPIC_API_KEY: ${{ secrets.ANTHROPIC_API_KEY }} GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} run: | claude -p "이 PR의 변경사항을 리뷰하고 코멘트를 남겨줘"
• 자동화된 코드 리뷰
• 보안 취약점 사전 탐지
• 이슈 기반 개발 효율화
• 반복 작업 자동화
• AI 리뷰는 참고용, 최종 검토는 사람이
• 민감한 정보 노출 주의
• API 비용 발생 고려
• 자동 머지는 신중하게
🌐 9. Chrome 확장 프로그램
Pro+ Claude for Chrome은 웹 브라우저에서 직접 Claude를 사용할 수 있는 확장 프로그램입니다. 웹페이지 요약, 폼 작성, 자동화 등이 가능합니다.
📥 설치 방법
🎯 주요 기능
긴 문서나 기사를 빠르게 요약
반복적인 양식 입력 자동화
작업을 녹화하여 나중에 자동 실행
웹페이지에서 구조화된 데이터 추출
여러 탭에 걸친 복합 작업 수행
• 고위험 작업(결제, 게시 등)은 사전 확인 요청
• 금융, 성인 사이트 등 민감한 사이트 자동 차단
• 비밀번호, 신용카드 등 민감 정보 자동입력 제한
• 호환 브라우저: Chrome, Brave, Opera (Firefox, Safari 미지원)
💳 10. 구독 플랜 & 토큰 정책
📊 구독 플랜 비교
| 플랜 | 가격 | 주요 특징 |
|---|---|---|
| Free | 무료 |
• 하루 ~100 메시지 • 기본 모델만 사용 • 컨텍스트 동적 제한 |
| Pro | $20/월 |
• 하루 ~500 메시지 (5시간당 ~45개) • Claude 3.5 Sonnet, Opus 사용 • 200K 토큰 컨텍스트 • Projects, Claude Code 사용 |
| Max | $100/월 |
• Pro 대비 20배 사용량 • 최우선 접근권 • 확장된 컨텍스트 |
| Team | $30/유저/월 |
• 5명 이상 팀 • 중앙 관리, 분석 대시보드 • 200K 컨텍스트 |
| Enterprise | 문의 |
• 최대 500K 컨텍스트 • SSO, 감사 로그 • 전용 지원, 커스텀 제한 |
🔢 토큰 제한 정책
• 일반: 200,000 토큰 (약 500페이지)
• Enterprise: 500,000 토큰 (Claude Sonnet 4.5)
• API Beta: 최대 1,000,000 토큰
• Free: 약 100 메시지/일
• Pro: 약 500 메시지/일, 5시간당 약 45개
• API: 티어별 RPM/TPM 제한 (Tier 1: 50 RPM, Tier 2: 1000 RPM)
• 초과 시 429 Too Many Requests 에러 + retry-after 헤더
💰 API 가격 (Claude 3.5 Sonnet 기준)
| 구분 | 가격 |
|---|---|
| Input (입력) | $3 / 1M 토큰 |
| Output (출력) | $15 / 1M 토큰 |
| Prompt Caching (캐싱) | $0.30 / 1M 토큰 (90% 절감) |
🧠 11. 컨텍스트 관리 팁
효율적인 컨텍스트 관리는 비용 절감과 성능 향상의 핵심입니다.
✨ 핵심 원칙
불필요한 파일이나 정보는 컨텍스트를 낭비하고 품질을 떨어뜨림
node_modules, dist, 로그 파일 등 불필요한 파일 제외
다른 주제는 새 세션에서 시작. /clear로 컨텍스트 초기화
긴 대화를 요약하여 컨텍스트 절약
XML 태그나 마크다운으로 정보를 명확하게 구분
📝 효과적인 프롬프트 구조
<!-- 좋은 예시: 구조화된 프롬프트 --> <context> React + TypeScript 프로젝트입니다. 현재 UserProfile 컴포넌트를 수정 중입니다. </context> <current_code> ```tsx // 현재 코드 붙여넣기 ``` </current_code> <task> 1. 프로필 이미지 업로드 기능 추가 2. 이미지 미리보기 구현 3. 파일 크기 제한 (5MB) 검증 </task> <constraints> - 기존 스타일 유지 - react-dropzone 라이브러리 사용 - 에러 핸들링 필수 </constraints>
💡 비용 절감 팁
# 현재 세션의 토큰 사용량 확인 > /cost # 컨텍스트 요약으로 토큰 절약 > /compact # 새 주제 시작 시 초기화 > /clear # 특정 파일만 컨텍스트에 추가 > src/components/Header.tsx 파일만 확인하고 버그를 찾아줘
🎯 12. 실전 활용 팁
🚀 생산성 극대화 패턴
# 이슈 확인 → 브랜치 생성 → 구현 → PR 생성 한 번에
> GitHub 이슈 #42를 확인하고, 해당 기능을 구현해서 PR까지 만들어줘
# 테스트 먼저 작성 후 구현
> UserService의 createUser 메서드에 대한 테스트를 먼저 작성하고,
> 그 테스트를 통과하는 구현체를 만들어줘
# 코드 개선과 문서화 동시에
> utils/ 폴더의 함수들을 리팩토링하고, 각 함수에 JSDoc 주석을 추가해줘.
> 그리고 README.md에 사용법도 추가해줘
⚡ 자주 사용하는 명령어 조합
# 프로젝트 분석 → 개선점 제안 > 이 프로젝트의 구조를 분석하고, 코드 품질 개선점을 알려줘 # 에러 디버깅 > npm run build 실행 시 발생하는 에러를 분석하고 수정해줘 # API 문서 생성 > routes/ 폴더의 모든 API 엔드포인트를 분석해서 OpenAPI 스펙 문서를 만들어줘 # 성능 최적화 > 이 React 컴포넌트의 렌더링 성능을 분석하고 최적화해줘 # 보안 검토 > 이 인증 로직의 보안 취약점을 분석해줘
• 작은 단위로 요청: 한 번에 하나의 명확한 작업 요청
• 맥락 제공: 왜 이 작업이 필요한지 설명하면 더 좋은 결과
• 예시 제공: 원하는 출력 형태의 예시를 보여주면 정확도 ↑
• 피드백 반복: 결과물에 피드백을 주면서 점진적 개선
• CLAUDE.md 활용: 프로젝트 컨벤션을 미리 정의해두면 일관성 ↑
📌 핵심 요약
1. 설치: npm 또는 Homebrew로 간편 설치
2. API 키: 환경 변수로 안전하게 관리
3. CLAUDE.md: 프로젝트 컨텍스트 정의
4. MCP: 외부 도구/서비스 연결
5. Skills: 재사용 가능한 지침 패키지
6. Hooks: 자동화된 워크플로우
7. GitHub: 이슈, PR, 코드 리뷰 자동화
8. 컨텍스트: 효율적 관리로 비용 절감
댓글
댓글 쓰기