VS Code 통합: 원활한 AI 기반 개발

Claude Code는 터미널에서 실행되지만 VS Code와 통합하면 강력한 개발 환경이 만들어집니다. 이 가이드는 최고의 AI 기반 워크플로우를 설정하는 방법을 보여줍니다.

터미널 통합

VS Code의 통합 터미널 사용

가장 간단한 통합은 VS Code의 터미널에서 Claude Code를 실행하는 것입니다:

1. VS Code 열기
2. Ctrl+` 눌러 터미널 열기
3. claude 또는 ccjk 실행

분할 터미널 워크플로우

생산적인 분할 화면 설정 만들기:

┌─────────────────────────────────────────────────────────┐
│                    VS Code 편집기                        │
│  ┌─────────────────────────────────────────────────────┐│
│  │                                                      ││
│  │              코드 파일                               ││
│  │                                                      ││
│  └─────────────────────────────────────────────────────┘│
│  ┌──────────────────────┬──────────────────────────────┐│
│  │   Claude Code        │    일반 터미널               ││
│  │   (AI 어시스턴트)    │    (npm, git 등)             ││
│  └──────────────────────┴──────────────────────────────┘│
└─────────────────────────────────────────────────────────┘

키보드 단축키로 설정:

hljs json
// keybindings.json
{
  "key": "ctrl+shift+c",
  "command": "workbench.action.terminal.newWithProfile",
  "args": {
    "profileName": "Claude Code"
  }
}

VS Code 설정

권장 설정

hljs json
// settings.json
{
  // Claude Code를 위한 터미널 설정
  "terminal.integrated.profiles.linux": {
    "Claude Code": {
      "path": "bash",
      "args": ["-c", "ccjk"],
      "icon": "robot"
    }
  },

  // 실시간 AI 인식을 위한 자동 저장
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 1000,

  // 파일 변경 사항 즉시 표시
  "files.watcherExclude": {
    "**/.git/objects/**": true,
    "**/node_modules/**": true
  },

  // AI 협업을 위한 편집기 설정
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,

  // Git 통합
  "git.enableSmartCommit": true,
  "git.autofetch": true
}

워크스페이스 설정

프로젝트별 설정 생성:

hljs json
// .vscode/settings.json
{
  "terminal.integrated.defaultProfile.linux": "Claude Code",

  // 프로젝트별 제외
  "files.exclude": {
    "**/.claude": false,  // .claude 폴더 표시
    "**/node_modules": true
  },

  // 검색 제외 (.claudeignore와 일치)
  "search.exclude": {
    "**/node_modules": true,
    "**/dist": true,
    "**/.next": true
  }
}

키보드 단축키

필수 키바인딩

hljs json
// keybindings.json
[
  // Claude Code 터미널에 빠른 액세스
  {
    "key": "ctrl+alt+c",
    "command": "workbench.action.terminal.focus"
  },

  // 편집기와 터미널 간 토글
  {
    "key": "ctrl+`",
    "command": "workbench.action.terminal.toggleTerminal"
  },

  // 선택 영역을 클립보드에 복사 (Claude에 붙여넣기용)
  {
    "key": "ctrl+shift+y",
    "command": "editor.action.clipboardCopyAction"
  },

  // 커서 위치의 파일 열기 (Claude가 파일을 언급할 때)
  {
    "key": "ctrl+shift+o",
    "command": "workbench.action.quickOpen"
  }
]

작업 통합

VS Code 작업 생성

hljs json
// .vscode/tasks.json
{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "AI: 현재 파일 리뷰",
      "type": "shell",
      "command": "ccjk review ${file}",
      "presentation": {
        "reveal": "always",
        "panel": "dedicated"
      },
      "problemMatcher": []
    },
    {
      "label": "AI: 테스트 생성",
      "type": "shell",
      "command": "ccjk test generate ${file}",
      "presentation": {
        "reveal": "always"
      }
    },
    {
      "label": "AI: 함수 문서화",
      "type": "shell",
      "command": "ccjk docs function ${file}:${lineNumber}",
      "presentation": {
        "reveal": "always"
      }
    },
    {
      "label": "AI: 선택 영역 설명",
      "type": "shell",
      "command": "echo '${selectedText}' | ccjk explain",
      "presentation": {
        "reveal": "always"
      }
    }
  ]
}

단축키로 작업 실행

hljs json
// keybindings.json
[
  {
    "key": "ctrl+shift+r",
    "command": "workbench.action.tasks.runTask",
    "args": "AI: 현재 파일 리뷰"
  },
  {
    "key": "ctrl+shift+t",
    "command": "workbench.action.tasks.runTask",
    "args": "AI: 테스트 생성"
  }
]

AI 프롬프트용 스니펫

프롬프트 스니펫 생성

hljs json
// .vscode/claude.code-snippets
{
  "AI 리뷰 요청": {
    "prefix": "aireview",
    "body": [
      "// AI 리뷰 요청:",
      "// 다음 항목에 대해 이 코드를 검토해주세요:",
      "// - ${1:정확성}",
      "// - ${2:성능}",
      "// - ${3:보안}",
      "// - ${4:모범 사례}",
      "$0"
    ],
    "description": "AI 코드 리뷰 요청 템플릿"
  },

  "AI 구현 요청": {
    "prefix": "aiimpl",
    "body": [
      "// AI 구현 요청:",
      "// 작업: ${1:설명}",
      "// 요구 사항:",
      "// - ${2:요구 사항 1}",
      "// - ${3:요구 사항 2}",
      "// 제약 조건:",
      "// - ${4:제약 조건}",
      "$0"
    ],
    "description": "AI 구현 요청 템플릿"
  },

  "AI 디버그 요청": {
    "prefix": "aidebug",
    "body": [
      "// AI 디버그 요청:",
      "// 예상: ${1:예상 동작}",
      "// 실제: ${2:실제 동작}",
      "// 재현 단계:",
      "// 1. ${3:단계}",
      "$0"
    ],
    "description": "AI 디버깅 요청 템플릿"
  }
}

확장 프로그램 권장 사항

권장 확장 프로그램

확장 프로그램 파일 생성:

hljs json
// .vscode/extensions.json
{
  "recommendations": [
    // 필수
    "esbenp.prettier-vscode",
    "dbaeumer.vscode-eslint",
    "ms-vscode.vscode-typescript-next",

    // Git 통합
    "eamodio.gitlens",
    "mhutchie.git-graph",

    // 생산성
    "streetsidesoftware.code-spell-checker",
    "usernamehw.errorlens",
    "gruntfuggly.todo-tree",

    // 터미널 향상
    "tyriar.sort-lines",

    // Markdown (AI 응답용)
    "yzhang.markdown-all-in-one",
    "bierner.markdown-mermaid"
  ]
}

워크플로우 예제

워크플로우 1: AI 기반 기능 개발

1. 계획 (Claude Code 터미널에서):

   사용자: 사용자 인증을 추가해야 합니다. 접근 방식을 계획해봅시다.
   

2. 구현 (Claude가 파일을 편집하고 VS Code에서 확인):

   사용자: 먼저 로그인 엔드포인트를 구현하세요.
   

3. 검토 (VS Code의 diff 뷰 사용):

   • Git 변경 사항이 소스 제어 패널에 나타남
   • 각 파일의 변경 사항 검토

4. 테스트 (분할 터미널):

   # 터미널 1: Claude Code
   사용자: 인증 모듈에 대한 테스트를 생성하세요
   
   # 터미널 2: 테스트 실행
   npm test
   

워크플로우 2: 디버깅 세션

1. 재현 (VS Code에서):

   • 중단점 설정
   • 디버거 실행

2. 분석 (Claude Code에서):

   사용자: userService.js의 45번 줄에서 앱이 충돌합니다.
   스택 추적은 다음과 같습니다: [붙여넣기]
   

3. 수정 (Claude가 제안하고 확인):

   • Claude가 수정 제안
   • VS Code에서 검토
   • 수락 또는 수정

워크플로우 3: 코드 리뷰

1. PR diff 열기 VS Code에서 (GitLens)

2. 리뷰 요청 Claude Code에서:

   사용자: 보안에 중점을 두고 이 PR의 변경 사항을 검토하세요
   

3. 제안 적용:

   • Claude가 문제 식별
   • VS Code에서 파일로 이동
   • 수정 수행

팁과 트릭

1. 빠른 파일 탐색

Claude가 파일을 언급할 때:

• Ctrl+P → 파일 이름 입력
• 터미널에서 파일 경로 클릭 (지원되는 경우)

2. 효율적으로 코드 복사

VS Code에서 코드 선택:

• Ctrl+Shift+Y → 포맷팅과 함께 복사
• Claude Code 대화에 붙여넣기

3. 나란히 비교

Claude가 코드를 생성할 때:

1. 클립보드에 복사
2. 새 파일을 위해 Ctrl+N
3. 붙여넣고 원본과 비교

4. 터미널 기록

Claude Code 기록 탐색:

• ↑ / ↓ 이전 명령
• Ctrl+R 검색

문제 해결

터미널이 응답하지 않음

hljs bash
# 터미널 재설정
Ctrl+C  # 현재 작업 취소
clear   # 화면 지우기

파일 변경 사항이 감지되지 않음

hljs json
// settings.json
{
  "files.watcherExclude": {
    // 문제가 있는 제외 항목 제거
  }
}

성능 문제

hljs json
// settings.json
{
  "files.exclude": {
    "**/node_modules": true,
    "**/.git": true
  },
  "search.followSymlinks": false
}

결론

VS Code와 Claude Code를 함께 사용하면 강력한 개발 환경이 만들어집니다. 핵심은 다음을 가능하게 하는 효율적인 워크플로우를 설정하는 것입니다:

• 코딩과 AI 대화 간 빠른 전환
• AI 생성 변경 사항을 쉽게 검토
• AI 지원과 함께 테스트 및 명령 실행

기본 터미널 통합으로 시작한 다음 워크플로우를 개발하면서 점차 작업, 스니펫 및 단축키를 추가하세요.

다음: CCJK와 함께 다양한 AI 모델을 사용하기 위한 멀티 프로바이더 지원을 탐색하세요.