Turbine seu Copilot no VS Code com MCP (Model Context Protocol)
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
개발 툴
대상자
- VS Code 및 GitHub Copilot 사용자
- 중급~고급 개발자 (MCP 설정 및 CLI 도구 사용 경험이 필요)
핵심 요약
- MCP(모델 컨텍스트 프로토콜)는 Copilot이 외부 도구/라이브러리와 실시간으로 상호작용할 수 있도록 구조화된 통신 프로토콜 제공
- 설정 방법: VS Code의
settings.json에서"chat.mcp.enabled": true및"mcp.servers"구성 - 사용 예시:
@shadcn,@sequentialthinking,@context7등 명령어로 도구 호출 가능 - 핵심 기능: 자동 수정, CLI 명령 실행, 외부 데이터 검색
섹션별 세부 요약
1. MCP란 무엇인가?
- MCP는 Copilot이 CLI, 라이브러리, 문서 등 외부 자원과 통신하는 표준 프로토콜
- 기존 Copilot 한계: 라이브러리 최신 버전, CLI 명령 사용법 등 실시간 정보 부족
- MCP 장점: 외부 도구 실행, 실시간 문서 검색, 복잡한 작업 자동화
2. VS Code 설정 방법
- 설정 파일:
settings.json에서"chat.mcp.enabled": true활성화 - 필수 옵션:
"chat.mcp.discovery.enabled": true(자동 서버 탐지)"github.copilot.chat.agent.runTasks": true(자동 작업 실행 허용)- 예시 설정:
```json
{
"chat.mcp.enabled": true,
"mcp.servers": {
"shadcn": {
"command": "npx",
"args": ["-y", "shadcn@canary", "registry:mcp"],
"env": {"REGISTRY_URL": "https://example.com"}
}
}
}
```
3. 서버 구성 예시
- shadcn/ui:
- 목적: React UI 컴포넌트 라이브러리와 통합
- 명령어:
npx shadcn@canary registry:mcp - 사용 예:
@shadcn+ "Button 컴포넌트 추가" - sequentialthinking:
- 목적: 복잡한 작업을 단계별로 분해
- 명령어:
npx @modelcontextprotocol/server-sequential-thinking - 사용 예:
@sequentialthinking+ "Express API 모듈화 계획 생성" - context7:
- 목적: 외부 문서/지식 베이스 연결
- 명령어: HTTP URL을 통해
context7.com에 연결 - 사용 예:
@context7+ "React 최신 버전 변경사항 요약"
4. 사용 방법
- Chat 뷰 열기:
Ctrl + Alt + I - 프롬프트 작성:
@tool명+ 작업 요청 (예:@shadcn+ "Login 폼 생성") - 결과 확인: Copilot이 자동으로 작업 수행 후 결과 반환
결론
- MCP 활성화를 통해 Copilot이 CLI, 문서, 외부 도구와 실시간 통신 가능
settings.json에 서버 구성 후@tool명명령어로 작업 실행- 실무 적용 팁:
shadcn,sequentialthinking등 도구별 예시 프롬프트 활용하여 개발 효율성 극대화