[AI코딩.04.01] GitHub Copilot - VSCODE 에서 MCP 연결

 AI코딩 활용을 위한 개발자 가이드

[AI코딩.04] GitHub Copilot - VS Code 통합 개발 환경

MCP(Model Context Protocol)란 무엇인가?

Model Context Protocol(MCP)은 AI 애플리케이션이 외부 도구와 데이터 소스(Visual Studio CodeMedium) 에 안전하게 연결할 수 있게 해주는 개방형 표준입니다. MCP는 AI 모델과 다양한 외부 시스템 간의 통신을 표준화하여, 개발자들이 각각의 데이터 소스마다 별도의 커스텀 통합을 구축할 필요가 없도록 해줍니다. GitHub Copilot과 VS Code에서 MCP를 사용하면 에이전트 모드에서 추가 도구들을 활용할 수 있어 데이터베이스 연결, API 호출, 전문화된 작업 수행이 가능해집니다. Use MCP servers in VS Code (Preview) MCP 지원은 현재 공개 미리보기 상태이며 Visual Studio Code, JetBrains, Eclipse, Xcode에서 GitHub Copilot Chat과 함께 사용할 수 있습니다. Extending Copilot Chat with the Model Context Protocol (MCP) - GitHub Docs VS Code에서 MCP 서버를 설정하고 에이전트 모드와 함께 도구를 사용하는 방법을 안내하며, MCP 서버는 로컬 머신에서 실행하거나 원격으로 호스팅할 수 있고 VS Code는 두 구성을 모두 지원합니다. Use MCP servers in VS Code (Preview)

Use MCP servers in VS Code (Preview)

---

VS Code에서 MCP 설정 기본 방법

 

VS Code에서 MCP 서버를 구성하려면 사용하고자 하는 MCP 서버의 세부 사항을 지정하는 구성 스크립트를 설정해야 합니다. Extending Copilot Chat with the Model Context Protocol (MCP) - GitHub Docs 특정 리포지토리용으로 구성하려면 리포지토리 루트에 .vscode/mcp.json 파일을 생성하면 되고, 개인 VS Code 인스턴스용으로 구성하려면 VS Code의 settings.json 파일에 구성을 추가하면 됩니다. Extending Copilot Chat with the Model Context Protocol (MCP) - GitHub Docs MCP 서버는 standard input/output(stdio), server-sent events(sse), streamable HTTP(http) 등의 전송 방식을 지원합니다. Use MCP servers in VS Code (Preview) 에이전트 모드에서 MCP 도구를 사용하려면 Chat 뷰를 열고 드롭다운에서 에이전트 모드를 선택한 후, Tools 버튼을 선택하여 사용 가능한 도구 목록을 확인하고 사용하고자 하는 도구를 선택하거나 해제할 수 있습니다. Use MCP servers in VS Code (Preview) VS Code 1.99 이상 버전이 필요하며, GitHub Copilot 액세스 권한이 있어야 합니다.

1. 예시 : Figma MCP 서버 설치 및 연결

Figma의 Dev Mode MCP 서버는 베타 버전으로 출시되어 디자인에서 코드로의 워크플로우를 향상시킵니다. 이 서버는 개발자가 Figma의 컨텍스트를 VS Code의 Copilot, Cursor, Windsurf, Claude Code 같은 에이전틱 코딩 도구로 가져와 디자인 기반 코드 생성을 가능하게 합니다. FigmaFigma Help Center Figma Dev Mode MCP 서버는 SSE 프로토콜을 통해 통신하며, http://localhost:3845/sse URL을 사용합니다. Guide to the Dev Mode MCP Server – Figma Learn - Help Center 이 서버를 사용하면 원자적 컴포넌트를 적절한 변수와 스타일링으로 생성하거나 다층 애플리케이션 플로우를 구축할 수 있으며, 디자인 의도를 이해하기 위한 다양한 정보를 고려하여 보다 효율적이고 정확한 디자인-코드 워크플로우를 제공합니다. FigmaFigma Help Center LLM이 디자인을 Figma에서 번역하는 데 도움이 되는 도구 세트를 제공하며, 연결되면 특정 디자인 노드에 액세스하도록 MCP 클라이언트에 프롬프트할 수 있습니다. Guide to the Dev Mode MCP Server – Figma Learn - Help Center

GitHub Copilot과 Figma MCP 서버 통신 아키텍처  :

GitHub Copilot과 Figma MCP 통신 아키텍처 / Claude AI

Figma MCP 서버 설정 단계 :

 

Figma Desktop 앱 설정:

• Figma Desktop 앱을 최신 버전으로 업데이트
• 디자인 파일을 생성하거나 열기
• 왼쪽 상단 Figma 메뉴에서 Preferences 선택
• "Enable Dev Mode MCP Server" 활성화

Figma > File Open > Preference > Enable Dev Mode MCP Server

 

VS Code MCP 구성 (.vscode/mcp.json):

{
  "mcp": {
    "servers": {
      "figma": {
        "type": "sse",
        "url": "http://localhost:3845/sse"
      }
    }
  }
}

 

사용 방법 :

• Figma에서 프레임이나 레이어 선택
• VS Code에서 에이전트 모드로 전환
• "현재 선택된 Figma 디자인을 구현해주세요" 같은 프롬프트 사용

2. MySQL MCP 서버 설치 및 연결

MySQL MCP 서버는 AI 애플리케이션과 MySQL 데이터베이스 간의 안전한 상호작용을 가능하게 하는 Model Context Protocol 구현체입니다. 이 서버 컴포넌트는 호스트/클라이언트와 MySQL 데이터베이스 간의 통신을 촉진하여 제어된 인터페이스를 통해 데이터베이스 탐색과 분석을 더 안전하고 구조화된 방식으로 만듭니다. GitHubGitHub MySQL MCP 서버는 LLM이 데이터베이스 스키마를 검사하고 읽기 전용 쿼리를 실행할 수 있게 해주며, 보안상의 이유로 모든 쓰기 작업은 기본적으로 비활성화되어 있습니다. GitHub - benborla/mcp-server-mysql: A Model Context Protocol server that provides read-only access to MySQL databases. This server enables LLMs to inspect database schemas and execute read-only queries. 다중 데이터베이스 모드를 지원하여 MYSQL_DB 환경 변수를 비워두면 MySQL 사용자가 액세스할 수 있는 모든 데이터베이스를 쿼리할 수 있습니다. GitHub - benborla/mcp-server-mysql: A Model Context Protocol server that provides read-only access to MySQL databases. This server enables LLMs to inspect database schemas and execute read-only queries. 스키마별 권한을 지원하여 서로 다른 데이터베이스가 서로 다른 액세스 수준(읽기 전용, 읽기-쓰기 등)을 가질 수 있도록 세밀한 제어가 가능합니다. GitHub - benborla/mcp-server-mysql: A Model Context Protocol server that provides read-only access to MySQL databases. This server enables LLMs to inspect database schemas and execute read-only queries.

MySQL MCP 서버 설정 단계 :

패키지 설치 : Mysql-MCP

 

# bash
npm install -g @benborla29/mcp-server-mysql

 

환경 변수 설정:

 

export MYSQL_HOST=localhost
export MYSQL_PORT=3306
export MYSQL_USER=your_username
export MYSQL_PASSWORD=your_password
export MYSQL_DATABASE=your_database

 

VS Code MCP 구성:

 

{
  "mcp": {
    "servers": {
      "mysql": {
        "command": "npx",
        "args": ["-y", "@benborla29/mcp-server-mysql"],
        "env": {
          "MYSQL_HOST": "localhost",
          "MYSQL_PORT": "3306",
          "MYSQL_USER": "your_username",
          "MYSQL_PASSWORD": "your_password",
          "MYSQL_DATABASE": "your_database"
        }
      }
    }
  }
}

 

보안 설정 (권장):

• 읽기 전용 권한만 부여
• 강력한 패스워드 사용
• 환경 변수를 통한 자격 증명 관리

3. Windsurf MCP 서버 설치 및 연결

Windsurf(이전 Codeium)는 MCP(Model Context Protocol)를 기본적으로 통합하여 Cascade AI 어시스턴트가 커스텀 도구와 서비스에 연결할 수 있게 해줍니다. How to set up a Windsurf MCP - MCP Config MCP 클라이언트인 Cascade가 MCP 서버에 요청을 보내 제공하는 도구에 액세스할 수 있으며, 새로운 MCP 플러그인은 플러그인 스토어에서 추가할 수 있습니다. How to set up a Windsurf MCP - MCP Config Cascade는 MCP 서버에 대해 stdio와 SSE라는 두 가지 전송 유형을 지원하며, SSE 서버의 경우 URL이 엔드포인트를 반영해야 하고 https://<your-server-url>/sse와 같은 형태여야 합니다. 엔터프라이즈 사용자는 설정을 통해 수동으로 MCP를 활성화해야 하며, 팀 관리자는 팀의 MCP 액세스를 토글하고 팀이 사용할 승인된 MCP 서버를 화이트리스트에 추가할 수 있습니다. How to set up a Windsurf MCP - MCP Config 현재 MCP 서버의 도구와 리소스를 지원하지만 프롬프트는 지원하지 않습니다.

Windsurf에서 MCP 설정 단계:

Windsurf 설치 및 업데이트:

• 최신 버전의 Windsurf 다운로드 및 설치
• MCP 지원이 포함된 버전인지 확인

MCP 서버 구성:

• Windsurf 설정에서 Tools > Windsurf Settings > Add Server 섹션으로 이동
• 또는 View Raw Config 버튼을 클릭하여 mcp_config.json 파일 직접 편집

GitHub MCP 서버 예시 구성:

 

{
  "mcpServers": {
    "github": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-github"],
      "env": {
        "GITHUB_PERSONAL_ACCESS_TOKEN": "<YOUR_PERSONAL_ACCESS_TOKEN>"
      }
    }
  }
}

 

SSE 서버 구성 예시:

 

{
  "mcpServers": {
    "remote-server": {
      "serverUrl": "https://your-server-url/sse",
      "headers": {
        "Authorization": "Bearer your_token"
      }
    }
  }
}

---

마무리

MCP를 통해 GitHub Copilot과 VS Code의 기능을 확장하면 외부 도구와 데이터 소스에 안전하게 연결할 수 있어 AI 어시스턴트의 역량을 크게 향상시킬 수 있습니다. Use MCP servers in VS Code (Preview) Figma에서는 디자인-코드 워크플로우를 효율화하고, MySQL에서는 데이터베이스와의 안전한 상호작용을 가능하게 하며, Windsurf에서는 AI 기반 개발 환경의 확장성을 제공합니다. 각 MCP 서버는 고유한 설정 방법과 보안 고려사항이 있으므로, 프로덕션 환경에서 사용할 때는 적절한 권한 관리와 보안 설정을 반드시 적용해야 합니다. MCP는 지속적으로 발전하고 있는 개방형 표준이므로, 정기적으로 업데이트와 새로운 기능을 확인하여 최신 상태를 유지하는 것이 중요합니다.

---