클릭 한번으로 VS Code에서 MCP 서버 간단하게 설치 하기

인공지능 기반 개발의 생산성 향상을 위한 핵심 기술로 `Model Context Protocol (MCP) 서버`가 최근에 많은 주목을받고 있다. 복잡한 AI 모델의 컨텍스트를 효율적으로 관리하고 상호작용하는 데 필수적인 이 기술은, 개발 워크플로우를 혁신할 잠재력을 지니고 있다. 나 또한 이 기술의 가능성에 깊이 공감하며, Visual Studio Code (이하 VS Code) 환경에서 MCP 서버를 설치하고 활용하는 다양한 방법을 직접 경험하고 정리하여 공유하고자 한다. 이 글을 통해 MCP 서버 설치의 복잡함을 덜고, 보다 쉽게 이 강력한 도구를 활용할 수 있기를 바란다.

(출처-https://channel.io/ko/blog/articles/what-is-mcp-52c77e72)

MCP 서버, 대체 무엇인가?

MCP 서버는 쉽게 말해, 인공지능 모델의 컨텍스트를 효율적으로 관리하고 공유하기 위한 프로토콜을 구현한 서버다. 복잡한 AI 모델을 개발하거나 활용할 때, 모델이 이해해야 할 다양한 정보(코드, 문서, 데이터 등)를 일관된 방식으로 제공하고 상호작용할 수 있도록 돕는 역할을 한다. 이를 통해 개발자는 모델의 성능을 향상시키고, 더 빠르고 정확하게 원하는 결과를 얻을 수 있게 된다.

 

---

 

설치 전 준비

본격적인 설치에 앞서 몇 가지 준비물이 필요하다. 바로 `npx`와 `uvx`다. 이들은 JavaScript 및 Python 패키지를 관리하고 실행하는 데 사용되는 도구이다. 대부분의 경우 Node.js와 Python이 설치되어 있다면 함께 설치되어 있을 것이다. 혹시 설치되어 있지 않다면, 각 공식 사이트의 도움을 받아 설치를 진행하자.

아래 내용은 vscode `1.102` (June 2025) 기반으로 작성되어있다. 해당 버전보다 이전 버전이면 반드시 업데이트를 진행하자. MCP 서버 설치 과정이 이전버전에 비해 사용자 편의성이 크게 개선되었다. 

 

VS Code 공식 MCP Server 사이트를 이용한 설치 

드디어 VS Code 공식 사이트에서 MCP 탭 항목이 추가 되었다. 해당 사이트는 Microsoft 에서 선별된 MCP 서버 리스트 사이트라고 보면된다. 아직까지는 그 숫자가 많은건 아니지만 점차 늘어날 것으로 보인다. 

Discover and install MCP Servers in VS Code

vscode 공식 MCP Server 사이트

1. 해당 사이트에서 설치하고 싶은 MCP 서버를 고른후 `Install` 버튼을 클릭한다.
2. MCP 서버 확장을 설치할 것인지 팝업창이 나타난다.
3. 팝업창에서 `VS Code 로 열기` 버튼을 누르면 VS Code 로 화면전환된다.
4. MCP 확장탭이 오픈되면서 해당 서버 정보 및 readme 파일등을 확인할 수 있다.
5. `설치` 버튼을 누르면 MCP 서버가 설치 된다.
6. 설치된 서버는 사이드바의 `확장(Extentions)` 뷰의 하단에 `MCP Servers - Installed` 섹션에서 확인 가능하다.

mcp-vscode.mp4

5.99MB

설치 버튼을 이용한 간편한 설치 방법

 

---

 

Model Context Protocol Servers 사이트를 이용한 설치

MCP 서버 저장소인 Model Context Protocol servers는 다양한 MCP 서버들을 모아놓은 곳으로 이곳에서 제공하는 JSON 블록을 복사하여 VS Code 설정에 추가하는 것이 기본적인 MCP 서버 설치 방법이다.  여기서는 MCP 서버 저장소에 있는 Time MCP Server를 설치하고 실행하는 예제를 중심으로 설명한다. 다른 서버들도 동일한 방식으로 설치가 가능하다. Time MCP Server는 현재 시간을 컨텍스트로 제공하는 간단한 서버다.

GitHub - modelcontextprotocol/servers: Model Context Protocol Servers

 

---

 

One-Click Installation으로 간편하게 설치

공식 사이트에는 설치 배지 버튼이 제공된다. 이 방법은 복잡한 명령어 입력 없이 버튼 클릭만으로 VS Code에 MCP 서버를 설치하고 기본적인 설정을 완료해주는 가장 간편한 방법이다. 이전 섹션에서 언급한 VS Code 공식 MCP Server 사이트에서 `Install` 버튼을 클릭하는 것과 동일한 기능을 한다.

공식 GitHub 페이지 또는 관련 문서를 보면 아래와 유사한 형태의 버튼을 찾을 수 있을 것이다.

설치 배지

1. 해당 사이트에서 이 버튼을 클릭하면 MCP 서버 확장을 설치할 것인지 팝업창이 나타난다.
2. 팝업창에서 `VS Code 로 열기` 버튼을 누르면 VS Code 로 화면전환 된다.
3. MCP 확장탭이 오픈되면서 해당 서버 정보 및 readme 파일등을 확인할 수 있다.
4. `설치` 버튼을 누르면 MCP 서버가 설치 된다.

 

---

 

JSON 설정을 통한 수동 설치

One-Click 설치가 편리하지만, 때로는 더 세밀한 제어가 필요할 때가 있다. 이때는 VS Code의 `mcp.json` 파일을 직접 편집하여 MCP 서버를 설정할 수 있다. 전역적으로 설치하는 방법과 특정 워크스페이스에만 설치하는 방법 두 가지가 있다.

MCP : Open User Configuration 을 이용한 전역 설치

1. VS Code에서 `Ctrl + Shift + P` (macOS: `Cmd + Shift + P`)를 눌러 명령 팔레트를 오픈한다.
2. "Mcp: Open User Configuration"을 타이핑 검색하여 실행한다.
3. `mcp.json` 파일이 에디터에서 오픈된다.
4. 여기에 설치를 원하는 서버 정보의 JSON 블록을 추가한다.

만약 다른 MCP 서버를 추가하려면 `servers` 키 하위에 추가하면 된다.

{
    "servers": {
      "time": {
        "command": "uvx",
        "args": ["mcp-server-time"]
      }
    }
}

mcp-user-settings.mp4

5.36MB

User Settings (JSON)을 이용한 전역 설치

 

---

 

.vscode/mcp.json을 이용한 워크스페이스 설치

User Settings (사용자 설정)에 전역설치한 MCP 서버는 자동으로 모든 프로젝트에서 활성화된다. 특정 워크스페이스에서만 MCP 서버를 설치하여 사용하고 싶다면, 전역설치가 아닌 워크스페이스 설치를 진행해야 한다. 여러 프로젝트에서 각각 다른 MCP 서버 설정을 사용해야 할 때 유용하다.

1. 해당 워크스페이스의 `.vscode` 디렉토리 안에 `mcp.json` 파일을 생성한다. 
2. 다음과 같은 JSON 블록을 추가한다.

`.vscode` 폴더가 없다면 해당 폴더를 직접 생성하면 된다. 또한 명령 팔레트 메뉴에서 "MCP: Open Workspace Folder MCP Configuration" 메뉴를 찾아 실행해도 된다.

// .vscode/mcp.json 
{
  "servers": {
    "time": {
      "command": "uvx",
      "args": ["mcp-server-time"]
    }
  }
}

mcp-workspace.mp4

11.17MB

.vscode/mcp.json을 이용한 워크스페이스 설치

 

---

 

Smithery.ai 서비스를 이용한 스마트한 설치

MCP 서버를 로컬에 직접 설치하는 것이 부담스럽거나, 더 간편하고 유연한 방법으로 사용하고 싶다면 Smithery.ai 서비스를 이용하는 것을 추천한다. 해당 서비스는 Model Context Protocol servers 와 같은 collection 사이트라고 생각하면 된다.

Smithery - Model Context Protocol Registry

smithery.ai 서비스 화면

Generate URL로 원격 연결하기

이 기능은 MCP 서버가 실행될 특정 URL을 생성해주며, 사용자가 로컬에 서버를 설치하지 않아도 원격 서버를 이용하여 MCP 서버를 사용할 수 있다.

1. Smithery.ai 사이트에 접속한다.
2. 검색창에 Time MCP Server 를 검색하여 이동한다.
3. 우측 Connect 섹션에서 `Generate URL` 버튼을 찾아 클릭한다.
4. 생성된 URL을 복사한다.
5. VS Code에서 `Ctrl + Shift + P` (macOS: `Cmd + Shift + P`)를 눌러 명령 팔레트를 연다.
6. `MCP: 서버추가` 를 선택한다.
7. `HTTP (HTTP 또는 서버 전송 이벤트)` 를 선택한다.
8. 복사한 URL을 붙여넣고 연결을 진행한다.

 

---

 

Auto 설치하기

Smithery는 `Auto` 기능도 제공한다. 이는 이전에 설명한 One-Click Installation 기능과 동일하다. 직접 설정하는 것보다 훨씬 간편하며, 몇 번의 클릭만으로 모든 준비를 마칠 수 있다.

1. Smithery.ai 사이트에 접속한다.
2. 검색창에 Time MCP Server 를 검색하여 이동한다.
3. 우측 Connect 섹션에서 `Auto` 탭을 찾아 클릭한다.
4. 드롭다운 메뉴에서 `VS Code` 를 찾아 클릭한다.
5. 이후 과정은 One-Click Installation 과 동일하다.

 

---

 

마무리

지금까지 VS Code에서 MCP 서버를 설치하는 다양한 방법을 살펴보았다. 하지만 솔직히 말해서, 아직은 MCP 서버가 대중화되지 않은 탓인지 설치 과정이 매끄럽지 못한 부분이 많다. Claude Desktop, Cursor, 그리고 VS Code 등 각 IDE마다 MCP 서버를 설치하고 연동하는 방식이 조금씩 상이하다. 이는 다양한 환경에서 MCP 서버를 사용하고자 할 때 불필요한 학습 곡선을 만들고, 때로는 혼란을 야기하기도 한다. 아직은 표준화된 설치 가이드라인이 부재하여 발생하는 문제점으로 보인다.

개발자 외 일반 사용자의 접근성

현재 MCP 서버의 설치 과정은 기술적인 지식을 요구하는 부분이 많다. npx, uvx와 같은 도구에 대한 이해는 물론, JSON 파일 수정 등 개발자에게는 익숙한 작업이지만 일반 사용자에게는 진입 장벽으로 작용할 수 있다. 이러한 기술적인 난해함은 MCP 서버의 확산을 저해하는 요인이 된다.

앞으로의 MCP 서버 발전 방향

그럼에도 불구하고 MCP 서버는 인공지능 기반 개발의 생산성을 높일 수 있는 강력한 잠재력을 가지고 있다. 시간이 지남에 따라 더 사용자 친화적인 UI 환경이 제공되고, 설치 및 설정 과정이 자연스럽게 간소화 될 것이라고 기대한다.