VSCode와 MCP (Model Context Provider) 연동하기

Visual Studio Code(VSCode)는 최근 Model Context Protocol(MCP) 지원을 도입하여 개발자들에게 더욱 향상된 코딩 경험을 제공하고 있습니다. 이 문서에서는 MCP의 도입 소식, MCP 연동의 이점, 그리고 VSCode와 MCP를 연동하는 방법을 단계별로 상세히 설명하겠습니다.

1. VSCode MCP 추가 소식

2025년 4월, VSCode는 GitHub Copilot의 에이전트 모드와 함께 MCP 지원을 도입하였습니다. 이로써 개발자들은 MCP 호환 서버를 VSCode에 통합하여 외부 도구 및 서비스와의 상호작용을 표준화할 수 있게 되었습니다. 이를 통해 코드 작성, 디버깅, 테스트 등의 작업을 보다 효율적으로 수행할 수 있습니다. 

2. VSCode에 MCP를 연동하면 좋은 점

VSCode에 MCP를 연동함으로써 얻을 수 있는 주요 이점은 다음과 같습니다:

• 외부 도구와의 통합 강화: MCP를 통해 파일 시스템, 데이터베이스, 웹 서비스 등 다양한 외부 도구와의 상호작용이 표준화되어 개발 워크플로우가 간소화됩니다. 
• 에이전트 모드의 기능 확장: GitHub Copilot의 에이전트 모드와 MCP의 결합으로, 다단계 코딩 작업을 자동화하고, 오류를 감지하여 수정하는 등의 작업을 수행할 수 있습니다.
• 유연한 서버 구성: MCP 서버는 로컬 또는 원격에서 실행될 수 있으며, 이를 통해 개발 환경에 맞는 유연한 구성이 가능합니다. 

3. VSCode와 MCP를 연동하는 방법

VSCode와 MCP를 연동하는 과정은 다음과 같습니다. 배경지식이 없는 분들도 이해할 수 있도록 단계별로 상세히 설명하겠습니다.

3.1. MCP 서버 추가하기

1. Command Palette 열기:
   • VSCode에서 Ctrl+Shift+P를 눌러 Command Palette를 엽니다.
2. MCP: Add Server 명령 실행:
   • Command Palette에서 MCP: Add Server를 입력하고 선택합니다.
3. 설정 위치 선택:
   • 팝업 창에서 설정을 저장할 위치를 선택합니다:
     • User Settings: 모든 워크스페이스에서 MCP 서버를 사용하려면 선택합니다.
     • Workspace Settings: 현재 워크스페이스에서만 MCP 서버를 사용하려면 선택합니다.
4. 서버 정보 입력:
   • 서버의 이름, 유형(stdio 또는 sse), 명령어, 인자, 환경 변수 등을 입력합니다. 예를 들어:

{
  "servers": {
    "MyMCPServer": {
      "type": "stdio",
      "command": "node",
      "args": ["server.js"],
      "env": {
        "API_KEY": "your_api_key"
      }
    }
  }
}

• type: 서버와의 통신 방식입니다. stdio는 표준 입출력을, sse는 서버-전송 이벤트를 사용합니다.
• command: 서버를 실행하는 명령어입니다.
• args: 명령어에 전달할 인자 목록입니다.
• env: 서버 실행 시 필요한 환경 변수입니다.

3.2. MCP 서버 관리하기

• 서버 목록 확인:
  • Command Palette에서 MCP: List Servers를 입력하여 설정된 MCP 서버 목록을 확인할 수 있습니다.
• 서버 시작 및 중지:
  • 서버 목록에서 원하는 서버를 선택하여 시작(Start), 중지(Stop), 재시작(Restart) 등의 작업을 수행할 수 있습니다.
• 서버 로그 확인:
  • 문제가 발생하면 서버의 로그를 확인하여 원인을 파악할 수 있습니다. 서버 목록에서 해당 서버를 선택하고 ‘Show Output’을 클릭하면 로그를 볼 수 있습니다.

3.3. MCP 서버와 에이전트 모드 활용하기

1. 에이전트 모드 활성화:
   • VSCode의 Chat 뷰에서 에이전트 모드를 선택합니다.
2. MCP 서버 도구 사용:
   • 에이전트 모드에서 MCP 서버와 연동된 도구를 활용하여 다양한 작업을 수행할 수 있습니다. 예를 들어, 파일 시스템 접근, 데이터베이스 쿼리 실행 등이 가능합니다.
3. 프롬프트에서 도구 직접 호출:
   • 프롬프트에서 #도구이름 형식으로 입력하여 특정 도구를 직접 호출할 수 있습니다.

4. 요약

VSCode에 MCP를 연동함으로써 외부 도구와의 통합이 강화되고, GitHub Copilot의 에이전트 모드를 통해 복잡한 코딩 작업을 자동화할 수 있습니다. 위에서 설명한 단계별 가이드를 따라 MCP 서버를 설정하고 활용하여 개발 생산성을 향상시킬 수 있습니다.

5. 출처

• Use MCP servers in VS Code (Preview)
• Agent mode: available to all users and supports MCP