MCP를 사용하여 GitHub Copilot 에이전트 모드 향상

MCP(모델 컨텍스트 프로토콜)를 사용하여 에이전트 기능을 확장하는 방법을 알아봅니다 Copilot 채팅.

이 기사에서

참고

엔터프라이즈 및 조직을 위한 Copilot의 MCP 서버 정책은 기본적으로 비활성화되어 있으며 MCP 사용을 제어합니다.

          Copilot의 에이전트의 능력 및 MCP에 관한 정보

          Copilot에이전트 기능은 일정한 지침 없이 다단계 워크플로를 실행하여 **독립적으로 작업** 하고, 컨텍스트에 따라 적절한 도구 및 접근 방식을 선택하여 **결정을 내리고** , 피드백 및 결과에 따라 접근 방식을 조정하여 **반복하고 적응** 하는 기능을 나타냅니다. 에이전트 모드를 사용하여 이러한 기능을 access 수 있습니다.

MCP(모델 컨텍스트 프로토콜) 서버와 결합하면 에이전트 모드가 훨씬 더 강력 Copilot 해져 컨텍스트를 전환하지 않고 외부 리소스에 액세스할 수 있습니다. 이렇게 하면 Copilot 에이전트 "루프"를 완료할 수 있습니다. 이 경우 관련 정보를 자율적으로 찾고 피드백을 분석하고 정보에 입각한 결정을 내려 접근 방식을 동적으로 조정할 수 있습니다. MCP Copilot 를 사용하면 최소한의 사용자 개입으로 작업을 완료할 수 있으며 검색된 내용에 따라 전략을 지속적으로 조정할 수 있습니다.

MCP와 에이전트 모드를 결합할 경우의 이점

에이전트 모드에서 MCP 서버를 사용하는 경우 다음과 같은 몇 가지 주요 이점을 얻을 수 있습니다.

  •         **확장 컨텍스트**: MCP 서버는 외부 데이터 원본, API 및 도구에 대한 액세스를 제공합니다 Copilot .

  •         **수동 작업 감소**: Copilot 더 높은 가치의 작업에 집중하는 동안 문제 만들기 및 워크플로 실행과 같은 작업을 수행할 수 있습니다.

  •         **원활한 통합**: Copilot 컨텍스트를 전환하거나 사용자 지정 통합을 요구하지 않고도 여러 도구 및 플랫폼과 관련된 작업을 수행할 수 있습니다.

에이전트 모드에서 MCP를 사용하기 위한 모범 사례

MCP 서버를 에이전트 모드와 결합할 때의 이점을 최대한 활용하려면 다음 모범 사례를 따르세요.

프롬프트 전략

  •         **목표를 구체적으로 설정**: 프롬프트에서 달성하려는 목표와 원하는 결과를 명확히 명시합니다.

  •         **컨텍스트 제공**: 액세스할 수 있는 Copilot 외부 리소스에 대한 링크를 포함하여 프로젝트 및 요구 사항에 대한 관련 배경 정보를 포함합니다.

  •         **경계 설정**: 작업에 대한 제약 조건 또는 제한 사항을 지정합니다. 예를 들어 새 기능만 계획하고 아직 변경하지 않으려는 경우, 그것을 지정하십시오. 사용할 MCP 도구를 제한할 수도 있습니다.

  •         **요청 확인**: 중요한 변경을 진행하기 전에 이해를 확인하도록 요청 Copilot 합니다.

  •         **프롬프트 파일 또는 사용자 지정 지침 사용**: 프롬프트 파일 또는 사용자 지정 지침 파일을 만들어 다른 MCP 서버에 대해 동작하는 방법을 안내 Copilot 할 수 있습니다. 
        [AUTOTITLE](/copilot/concepts/about-customizing-github-copilot-chat-responses) 참조하세요.

MCP 서버 사용

  •         **관련 서버 선택**: 특정 워크플로 요구 사항에 맞는 MCP 서버를 선택하고 사용하도록 설정합니다.

  •         **간단하게 시작**: 더 복잡한 통합을 추가하기 전에 잘 설정된 몇 개의 MCP 서버로 시작합니다.

  •         **연결 테스트**: 에이전트 모드 작업을 시작하기 전에 모든 MCP 서버가 올바르게 구성되고 액세스할 수 있는지 확인합니다.

보안 고려 사항

  •         **OAuth가 가능할 때 사용**: MCP와 같은 GitHub MCP 서버의 경우 OAuth 인증을 우선 사용하십시오 personal access tokens. 
        [AUTOTITLE](/copilot/customizing-copilot/using-model-context-protocol/using-the-github-mcp-server#remote-mcp-server-configuration-with-oauth) 참조하세요.

  •         **권한 제한**: MCP 서버에 작업에 필요한 최소 권한만 부여합니다.

  •         **연결 검토**: 개발 환경에 액세스할 수 있는 MCP 서버를 정기적으로 감사하십시오.

  •         **활동 모니터링**: MCP 서버를 통해 수행되는 작업을 Copilot 추적합니다.

  •         **비밀 누출 방지**: 푸시 보호는 비밀이 AI 생성 응답에 포함되지 않도록 차단하고 MCP 서버를 사용하여 GitHub 수행하는 모든 작업을 통해 비밀을 노출하지 못하도록 차단합니다. 현재 퍼블릭 리포지토리에서만 사용할 수 있습니다. 
        [AUTOTITLE](/code-security/secret-scanning/introduction/about-push-protection) 참조하세요.

예제 시나리오: 접근성 규정 준수 구현

참고

다음 시나리오는 에이전트 모드 및 MCP 서버에서 처음부터 끝까지 작업을 완료하는 데 사용할 수 있는 패턴과 전략을 보여 주기 위한 것이며 시나리오, 프롬프트 및 응답은 예제일 뿐입니다.

팀에서 최신 접근성 표준을 준수하기 위해 고객 포털을 업데이트해야 한다는 피드백을 받았다고 가정해 보겠습니다. 사용자는 다음 지침에 따라 애플리케이션 전체의 접근성을 개선하는 임무를 맡았습니다.

  • 디자인 팀에서 정의한 사양 목록
  • 접근성 감사 후 project 리포지토리에서 생성된 문제입니다.

에이전트 모드를 사용하여 Copilot 여러 MCP 서버를 활용하여 접근성 향상을 효율적으로 구현할 수 있습니다.

아래 시나리오에서는 단계마다(리서치, 계획, 구현 및 유효성 검사) 별도의 프롬프트를 사용하여 소프트웨어 개발 수명 주기 단계에 맞춰 여러 에이전트 "루프"를 느슨하게 정렬하는 방법을 보여 줍니다. 이 접근 방식은 진행 상황을 검토하고 피드백을 제공하며 요구 사항을 조정한 후 Copilot가 다음 단계로 넘어가기 전에 자연스러운 검사점을 만듭니다.

  •         [필수 구성 요소](#prerequisites)

  •         [MCP 서버 설정](#setting-up-mcp-servers)

  •         [1단계: 연구 loop - 접근성 요구 사항 분석](#step-1-research-loop---analyzing-accessibility-requirements)

  •         [2단계: loop 계획 - 접근성 구현 전략](#step-2-planning-loop---accessibility-implementation-strategy)

  •         [3단계: 구현 반복 - 접근성 개선](#step-3-implementation-loop---making-accessibility-improvements)

  •         [4단계: 루프 테스트 - Playwright를 사용한 접근성 확인](#step-4-testing-loop---accessibility-verification-with-playwright)

  •         [5단계: 문제 업데이트 GitHub](#step-5-updating-github-issues)

  •         [추가 정보](#further-reading)

필수 조건

MCP에서 에이전트 모드를 사용하기 전에 다음이 준비되었는지 확인합니다.

  • 통합 및 MCP 지원을 사용하는 Copilot IDE(예: Visual Studio Code)
  • 에이전트 모드 설정
  • 사용하려는 필수 MCP 서버에 Access

MCP 서버 설정

먼저 필요할 것으로 예상되는 Copilot MCP 서버를 구성해야 합니다. 이 예제 시나리오에서는 다음을 사용합니다.

  •         **
        GitHub MCP 서버**: GitHub가 리포지토리에 액세스하고, 코드베이스를 검사하고, 기존 문제를 조사하며, 분기 및 끌어오기 요청을 관리할 수 있도록 MCP 서버를 구성합니다 Copilot. 
        [AUTOTITLE](/copilot/customizing-copilot/using-model-context-protocol/using-the-github-mcp-server) 참조하세요.

  •         **Figma MCP 서버**: 색 대비 요구 사항, 포커스 상태 및 상호 작용 패턴과 같은 접근성 사양을 포함하는 디자인 파일에 액세스할 수 있도록 Copilot Figma MCP 서버를 구성합니다. 
        [Figma-Context-MCP](https://github.com/GLips/Figma-Context-MCP)를 참조하거나 [Dev 모드 MCP 서버](https://help.figma.com/hc/en-us/articles/32132100833559-Guide-to-the-Dev-Mode-MCP-Server)를 사용해 보세요.

  •         **Playwright MCP 서버**: 화면 판독기 호환성 및 키보드 탐색 테스트를 포함하여 자동화된 접근성 테스트를 작성하고 실행할 수 있도록 Copilot Playwright MCP 서버를 설정합니다. 
        [mcp-playwright](https://github.com/executeautomation/mcp-playwright) 참조하세요.

1단계: 루프 연구 - 접근성 요구 사항 분석

프로젝트에서 접근성 요구 사항과 기존 접근성 관련 GitHub 문제를 모두 분석하도록 Copilot 합니다.

프롬프트에 Figma 파일에 대한 링크를 포함합니다. Copilot 디자인 사양을 성공적으로 읽고 분석하려면 노드 ID가 URL에 포함되도록 파일에서 특정 노드 또는 계층을 선택합니다.

예제 프롬프트 1

Copilot prompt
I need to make our customer portal WCAG 2.1 AA compliant. Use the Figma MCP to analyze our design specifications at https://figma.com/design/DESIGN-FILE-FOR-ACCESSIBILITY-SPECS?node-id=NODE_ID for accessibility requirements. Also use the GitHub MCP to find open GitHub issues with the labels accessibility or WCAG in the customer-portal repository. Then sort them into categories and list each issue that falls under the category with the issue title and number.

예제 응답 1

          Copilot Figma 및 GitHub MCP 서버에서 도구를 실행하도록 요청하여 먼저 응답해야 합니다. 허용하면 Copilot Figma 디자인 사양을 분석하고 GitHub 문제를 검색하고 범주로 구성합니다.

예를 들어 Copilot는 여러 문제를 발견함으로써 색 대비를 하나의 범주로 식별할 수 있습니다.

  • 색 대비 이슈
    • 이슈 #134: 대시보드 텍스트 대비 비율이 4.5:1 미만임
    • 이슈 #156: 양식 오류 상태가 대비 요구 사항을 충족하지 않음

접근성 요구 사항에 대한 포괄적인 개요를 제공하여, Copilot 우선 순위를 정하고 계획을 세울 수 있습니다.

2단계: loop 계획 - 접근성 구현 전략

다음으로, 자세한 구현 계획을 만들도록 요청 Copilot 합니다.

예제 프롬프트 2

Copilot prompt
Based on your accessibility analysis of our Figma designs and GitHub issues, create a focused implementation plan for an immediate pull request addressing the highest priority accessibility issues. Don't make any changes yet. Also suggest follow-up issues we should create for the remaining Figma specifications.

예제 응답 2

          Copilot 는 즉각적인 끌어오기 요청에 대한 영향력이 높은 접근성 문제에 초점을 맞춘 우선 순위가 지정된 구현 계획을 만들고 나머지 작업에 대한 후속 문제를 제안하여 응답합니다.

예를 들어 Copilot 색 대비 범주의 문제를 해결하기 위해 수행해야 하는 작업을 식별할 수 있습니다.

          **1. 색 대비 수정:**
  • 모든 일반 텍스트에 대해 4.5:1 대비 비율을 보장하도록 variables.scss의 텍스트 색 변수 업데이트
  • 3:1 대비 비율을 충족하도록 DashboardCard.vue 및 기타 기본 구성 요소의 UI 구성 요소 색 수정
  • 이슈 #134(대시보드 텍스트 대비) 및 이슈 #156를 우선적으로 수정(양식 오류 상태)

집중하려는 내용에 따라 계획을 조정하도록 요청할 Copilot 수 있습니다. 당신이 만족하는 Copilot에게 구현을 요청할 수 있는 적합한 계획입니다.

3단계: 구현 loop - 접근성 개선

계획을 검토한 후, Copilot에 접근성 수정을 구현하라는 알림을 표시합니다.

예제 프롬프트 3

Copilot prompt
Create a new branch and implement the critical accessibility fixes according to your proposed implementation plan. Focus on the top three categories that you identified as highest priority. Create a pull request with proper references to the issues being fixed.

예제 응답 3

          Copilot 는 구현 계획을 실행하고, 식별된 접근성 문제를 해결하기 위해 대상 코드를 변경하고, 끌어오기 요청을 만들어 응답합니다.

예를 들어 Copilot는 fix/critical-accessibility-issues라는 새 분기를 만들고 색 대비 문제를 해결하기 위해 변경을 합니다.

  • 해결된 대시보드 텍스트 대비 이슈(이슈 #134): * src/styles/variables.scss에서 텍스트 색 변수를 #767676에서 #595959로 업데이트했습니다.
    • 4.5:1 비율을 보장하기 위해 DashboardCard.vue에서 밝은 회색 배경의 어두운 텍스트를 수정했습니다.

이러한 변경 내용으로 끌어오기 요청 #213을 열었습니다.

4단계: loop 테스트 - Playwright를 사용한 접근성 확인

Playwright MCP를 사용하여 Copilot에게 접근성 테스트를 만들고 실행하도록 요청할 수 있습니다.

예제 프롬프트 4

Copilot prompt
Create focused accessibility tests for the components we've updated in the pull request. Use the Playwright MCP.

예제 응답 4

          Copilot 는 접근성 테스트를 개발하고 필요한 경우 Playwright 구성 파일을 만들어 응답합니다.

예를 들어 Copilot 텍스트 대비를 중심으로 테스트 파일을 만들 수 있습니다.

          **테스트 구현:**

          `tests/accessibility/`에서 대상 테스트 파일을 만들었습니다.

          `contrast.spec.ts` - 텍스트 대비 비율이 유효한지 검사합니다.

테스트가 생성된 후, Copilot는 테스트를 실행하기 위해 Playwright MCP의 다양한 도구 사용 권한을 요청할 것입니다. 경우에 따라 Copilot 반드시 요청하지 않은 추가 테스트를 수행할 수 있습니다. 프롬프트를 더 엄격하게 조정하여 이를 방지할 수 있습니다.

5단계: 문제 업데이트 GitHub

마지막으로 Copilot 해결된 문제들을 업데이트하도록 하고, 끌어오기 요청에서 해결된 문제를 GitHub 후속 문제로 추가하도록 독려합니다.

예제 프롬프트 5

Copilot prompt
Update the GitHub issues we've fixed in the pull request with comments summarizing the changes. Create the follow-up issues you suggested for the remaining accessibility work.

예제 응답 5

          Copilot 는 MCP 서버에서 GitHub 필요한 도구를 사용할 수 있는 권한을 요청하여 응답합니다. 그런 다음, 자세한 주석으로 GitHub 문제를 업데이트하고 남은 작업에 대한 구조화된 후속 문제를 만듭니다.

예를 들어 연구 Copilot 단계에서 처음 식별된 색 대비 문제에 주석을 추가합니다.

          **주석으로 이슈 업데이트:**
  • 이슈 #134: "대시보드 텍스트 대비 비율이 4.5:1 미만임"
    • 주석: "variables.scss 및 DashboardCard 구성 요소에서 텍스트 색 변수를 업데이트하여 PR #213에서 수정했습니다. 이제 모든 대시보드 텍스트가 4.5:1 대비 비율을 충족하며 이 내용은 자동화된 테스트로 확인되었습니다."

이제 끌어오기 요청을 검토하고 조정할 수 있습니다. 변경 내용이 유효한지 확인한 후에는 다른 끌어오기 요청과 마찬가지로 병합할 수 있습니다.

실습

MCP와 GitHub Copilot Skills 통합 연습에서 MCP를 GitHub Copilot통합하는 방법을 연습합니다.

이 연습에서는 다음 방법을 알아봅니다.

  • MCP 서버를 설정하고 GitHub을(를) GitHub Copilot에 연결합니다.
  • 자연어를 사용하여 에이전트 모드에서 MCP 도구를 통해 외부 서비스와 상호 작용합니다.
  • MCP를 사용하여 유사한 프로젝트를 검색하고 분석합니다.
  • 문제를 GitHub로 분류, 생성 및 관리한 다음 GitHub Copilot을 사용하여 변경 내용을 구현합니다.

추가 참고 자료

  •         **MCP 기본 사항**: MCP 서버 설정 및 구성에 대한 자세한 내용은 [AUTOTITLE](/copilot/customizing-copilot/using-model-context-protocol/extending-copilot-chat-with-mcp)을(를) 참조하세요.

  •         **MCP 서버 사용**: MCP를 GitHub Copilot과 통합하는 추가 아이디어는 the GitHub Blog GitHub Copilot 및 MCP를 사용하여 워크플로를 변환하는 [5가지 방법](https://github.blog/ai-and-ml/github-copilot/5-ways-to-transform-your-workflow-using-github-copilot-and-mcp/)을 참조하세요.