[이제와서 시작하는 Claude AI 마스터하기 #14] IDE 통합 완벽 가이드
![[이제와서 시작하는 Claude AI 마스터하기 #14] IDE 통합 완벽 가이드](/assets/img/posts/claude/claude-master-14.png)
터미널만 고집할 필요 없습니다! VS Code, JetBrains IDE, 또는 Desktop 앱에서 Claude Code를 사용해보세요. 익숙한 개발 환경에서 AI의 도움을 받을 수 있습니다.
완독 시간: 25분 ⭐⭐⭐
🎯 이번에 배울 것
📚 사전 지식
- #07편: Claude Code 시작하기 - Claude Code 기본 사용법
💻 VS Code 확장 프로그램
VS Code에서 Claude Code를 네이티브하게 사용할 수 있습니다.
설치하기
방법 1: 마켓플레이스에서 설치
Cmd+Shift+X(Mac) /Ctrl+Shift+X(Windows/Linux)로 확장 프로그램 열기- “Claude Code” 검색
- Install 클릭
방법 2: 직접 링크
기본 사용법
Claude 패널 열기
flowchart LR
A[Spark 아이콘] --> B[Claude 패널]
C[Cmd+Shift+P] --> D[Claude Code 명령] --> B
E[상태바 클릭] --> B
- 에디터 툴바: 오른쪽 상단 Spark(✱) 아이콘 클릭
- 명령 팔레트:
Cmd+Shift+P→ “Claude Code” 입력 - 상태바: 하단 우측 “✱ Claude Code” 클릭
프롬프트 보내기
1
2
3
> 이 코드 어떻게 동작해?
> 로그인 함수의 버그 수정해줘
> 테스트 추가해줘
💡 팁: 에디터에서 텍스트를 선택하면 Claude가 자동으로 인식합니다!
파일 참조하기
@ 멘션으로 특정 파일이나 폴더를 참조:
1
2
> @auth.js 설명해줘
> @src/components/ 구조가 어떻게 돼?
라인 범위도 지정 가능:
1
> @app.ts#5-10 이 부분 리팩토링해줘
변경사항 검토
Claude가 파일을 수정하려 할 때:
- Diff 뷰로 변경사항 미리보기
- Accept/Reject 버튼으로 승인/거부
- 거부하면 Claude가 다른 방법 제안
권한 모드
프롬프트 박스 하단에서 모드 전환:
| 모드 | 설명 |
|---|---|
| Default | 매번 승인 요청 |
| Accept Edits | 파일 수정은 자동 승인, 명령 실행은 요청 |
| Plan | 계획만 세우고 실행 전 승인 요청 |
유용한 단축키
| 단축키 | 동작 |
|---|---|
Cmd+Esc / Ctrl+Esc | 에디터 ↔ Claude 포커스 전환 |
Cmd+Shift+Esc / Ctrl+Shift+Esc | 새 탭에서 대화 열기 |
Option+K / Alt+K | @멘션 참조 삽입 |
Cmd+N / Ctrl+N | 새 대화 시작 (Claude 포커스 시) |
Shift+Enter | 줄바꿈 (전송 안 함) |
대화 이어하기
상단 드롭다운에서 이전 대화 검색 및 재개:
- 키워드로 검색
- 브랜치명으로 검색 가능
- 시간별 정렬 (오늘, 어제, 지난 7일…)
- Git 브랜치와 메시지 수 표시
VS Code 최신 기능
| 기능 | 설명 |
|---|---|
| 원격 세션 | OAuth 사용자는 claude.ai의 세션을 VS Code에서 열람/재개 가능 |
| 플러그인 관리 | VS Code 내에서 Plugin 설치, 설치 수, 신뢰 경고 표시 |
| 세션 포킹/리와인드 | 대화를 특정 시점으로 되돌리거나 분기 가능 |
| Python 가상환경 | Python venv를 자동 감지하여 올바른 인터프리터 사용 |
| 사용량 확인 | /usage 명령으로 현재 플랜 사용량 확인 |
| 멀티라인 입력 | 질문 대화상자에서 Shift+Enter로 여러 줄 입력 |
터미널 모드 전환
GUI 대신 CLI 스타일을 선호한다면:
- Settings (
Cmd+,) 열기 - Extensions → Claude Code
- Use Terminal 체크
🧩 JetBrains 플러그인
IntelliJ, PyCharm, WebStorm 등 JetBrains IDE에서 Claude Code를 사용할 수 있습니다.
지원 IDE
- IntelliJ IDEA
- PyCharm
- Android Studio
- WebStorm
- PhpStorm
- GoLand
설치하기
- JetBrains 마켓플레이스에서 설치
- IDE 재시작
주요 기능
| 기능 | 설명 |
|---|---|
| 빠른 실행 | Cmd+Esc / Ctrl+Esc로 Claude 열기 |
| Diff 뷰어 | IDE 내장 diff 뷰어로 변경사항 확인 |
| 선택 컨텍스트 | 현재 선택/탭 자동 공유 |
| 파일 참조 | Cmd+Option+K / Alt+Ctrl+K로 참조 삽입 |
| 진단 공유 | 린트, 구문 오류 자동 공유 |
사용법
IDE 통합 터미널에서:
1
claude
외부 터미널에서:
1
2
claude
> /ide
설정
Settings → Tools → Claude Code [Beta]에서:
| 설정 | 설명 |
|---|---|
| Claude command | claude 실행 경로 지정 |
| Enable Option+Enter | Option+Enter로 줄바꿈 |
| Auto updates | 자동 업데이트 활성화 |
WSL 사용자
WSL에서 JetBrains를 사용한다면:
1
wsl -d Ubuntu -- bash -lic "claude"
(Ubuntu를 사용하는 배포판 이름으로 변경)
🖥️ Claude Desktop 앱
터미널 없이 그래픽 인터페이스로 Claude Code를 사용할 수 있습니다.
다운로드
- macOS: 다운로드 (Intel & Apple Silicon)
- Windows x64: 다운로드
- Windows ARM64: 다운로드
Desktop 앱 탭
| 탭 | 설명 |
|---|---|
| Chat | 일반 대화 (Claude.ai와 동일) |
| Cowork | 백그라운드에서 자율 작업 |
| Code | 코드 편집 (Claude Code) |
Code 탭 사용하기
- Code 탭 선택
- Local 또는 Remote 선택
- 프로젝트 폴더 선택
- 작업 요청!
1
2
3
> TODO 코멘트 찾아서 수정해줘
> main 함수에 테스트 추가해줘
> 이 코드베이스용 CLAUDE.md 만들어줘
권한 모드
| 모드 | 설명 |
|---|---|
| Ask | 매번 승인 요청 (초보자 권장) |
| Code | 파일 수정 자동 승인 |
| Plan | 계획 승인 후 실행 |
병렬 세션
+ New session으로 여러 작업을 병렬로 진행:
- Git 저장소는 worktree로 격리
- 각 세션이 독립적으로 파일 수정
~/.claude-worktrees/에 저장
원격 세션
오래 걸리는 작업은 Remote로 실행:
- 앱을 닫아도 클라우드에서 계속 실행
- 나중에 돌아와서 진행상황 확인
- 대규모 리팩토링, 테스트 실행에 적합
Connectors (외부 도구 연결)
세션 시작 전 … → Connectors에서:
- Google Calendar
- Slack
- GitHub
- Linear
- Notion
- 등등…
이들은 내장된 MCP 서버로, 별도 설정 없이 바로 사용 가능합니다.
🌐 웹에서 Claude Code
Claude.ai에서도 Claude Code를 사용할 수 있습니다.
원격 세션의 장점
- 설치 불필요: 브라우저만 있으면 됨
- 어디서든 접속: 다른 컴퓨터에서도 작업 계속
- 백그라운드 실행: 브라우저 닫아도 작업 지속
VS Code에서 원격 세션 이어하기
- Claude Code 패널 상단 드롭다운 클릭
- Remote 탭 선택
- claude.ai 세션 선택
- 로컬에서 작업 계속
참고: GitHub 저장소와 연결된 세션만 Remote 탭에 나타납니다.
⚖️ CLI vs IDE 비교
기능 비교
| 기능 | CLI | VS Code | JetBrains | Desktop |
|---|---|---|---|---|
| 모든 명령어 | ✅ | 일부 | 일부 | 일부 |
| MCP 서버 설정 | ✅ | ❌* | ❌* | ✅ |
| Checkpoints | ✅ | ✅ | ✅ | ✅ |
! bash 단축키 | ✅ | ❌ | ❌ | ❌ |
| Tab 자동완성 | ✅ | ❌ | ❌ | ❌ |
| GUI Diff 뷰 | ❌ | ✅ | ✅ | ✅ |
| 원격 세션 | ❌ | ✅ | ❌ | ✅ |
*CLI에서 설정 후 IDE에서 사용 가능
언제 무엇을 사용할까?
flowchart TD
A[작업 유형?] --> B{복잡한 설정<br>MCP, 스크립팅}
A --> C{시각적 diff<br>코드 리뷰}
A --> D{백그라운드<br>장시간 작업}
B --> E[CLI]
C --> F[VS Code / JetBrains]
D --> G[Desktop / Web]
CLI 추천:
- 고급 기능 (모든 명령어)
- 자동화 스크립트
- MCP 서버 설정
- 터미널 친화적 작업
IDE 추천:
- 시각적 코드 리뷰
- 파일 탐색과 연계
- 실시간 진단 공유
- 익숙한 환경 선호
Desktop/Web 추천:
- 설치 없이 사용
- 장시간 백그라운드 작업
- 여러 기기에서 접속
- GUI 선호
공유되는 설정
CLI와 IDE가 공유하는 것:
CLAUDE.md,CLAUDE.local.md- MCP 서버 설정 (
~/.claude.json) - Hooks와 Skills
- 설정 파일 (
~/.claude/settings.json) - 모델 선택 (Sonnet 4.5, Opus 4.6, Haiku 4.5)
🔧 문제 해결
VS Code 문제
확장 프로그램이 안 보여요
- VS Code 1.98.0 이상 확인
- “Developer: Reload Window” 실행
- 다른 AI 확장 프로그램 비활성화
Spark 아이콘이 안 보여요
- 파일을 열어야 표시됩니다
- 상태바의 “✱ Claude Code” 클릭으로 대체
JetBrains 문제
플러그인이 작동 안 해요
- 프로젝트 루트에서 claude 실행
- IDE 완전 재시작 (여러 번 필요할 수 있음)
- Remote Development는 원격 호스트에 플러그인 설치
ESC 키가 안 먹어요
- Settings → Tools → Terminal
- “Move focus to the editor with Escape” 체크 해제
Desktop 문제
세션 로드 실패
- 폴더가 존재하는지 확인
- Git LFS 필요 시 설치:
git lfs install - 파일 권한 확인
📝 오늘 배운 것 정리
✅ VS Code: 가장 완성도 높은 IDE 통합, Spark 아이콘으로 빠른 접근
✅ JetBrains: IntelliJ 계열 IDE 지원, Diff 뷰어 연동
✅ Desktop: GUI 기반, Connectors로 외부 도구 쉽게 연결
✅ 웹: 설치 없이 원격 세션, 백그라운드 실행
✅ 공유 설정: CLAUDE.md, MCP, Hooks 등 CLI와 IDE가 공유
🔗 다음 편 미리보기
#15편: GitHub Actions와 CI/CD 자동화
GitHub에서 Claude가 자동으로 작업하게 만들기:
@claude멘션으로 PR 생성- 자동 코드 리뷰
- 이슈 기반 기능 구현
🔗 시리즈 전체 보기
| # | 제목 | 상태 |
|---|---|---|
| 01 | Claude AI란? 첫 대화 시작하기 | ✅ 완료 |
| 02 | 프롬프트 엔지니어링 기초 | ✅ 완료 |
| 03 | Claude의 다양한 모델과 선택 가이드 | ✅ 완료 |
| 04 | API 활용 첫걸음 | ✅ 완료 |
| 05 | 고급 프롬프트 테크닉 | ✅ 완료 |
| 06 | Claude Projects 활용하기 | ✅ 완료 |
| 07 | Claude Code 시작하기 | ✅ 완료 |
| 08 | Claude Code 작동 원리 | ✅ 완료 |
| 09 | 실전 워크플로우 | ✅ 완료 |
| 10 | CLAUDE.md 완전 정복 | ✅ 완료 |
| 11 | Skills: 나만의 명령어 만들기 | ✅ 완료 |
| 12 | Subagents로 AI 분업하기 | ✅ 완료 |
| 13 | MCP로 외부 도구 연결하기 | ✅ 완료 |
| 14 | IDE 통합 완벽 가이드 | 📖 현재 글 |
| 15 | GitHub Actions와 CI/CD 자동화 | ✅ 완료 |
🔗 참고 자료
🚀 어디서든 Claude Code와 함께 개발하세요!