Cursor 말고 VS Code도 할 수 있어! Copilot Agent Ai

Park.Dyel·2025년 4월 12일

개발 환경 구축하기

목록 보기

1/5

TL;DR

//.vscode/setting.josn
"chat.mcp.discovery.enabled": true,
"mcp": {
  "servers": {
    "Figma Dev Mode MCP": {
      "type": "sse",
      "url": "http://127.0.0.1:3845/sse"
    }
  }
},
"chat.agent.enabled": true

최근 AI 개발 환경에서 자주 들리는 MCP와 Agent 모드.
살아남기 위해 살펴보기로 마음 먹었고, 그 과정을 기록해 보았습니다.

왜 다 Cursur야?

이야기나 포스트를 살펴보다 보면 대부분 Cursor를 활용하시는 것으로 보였습니다.
왜 우리 Copilot은 그렇지 못한가에 대해서 고민했을 때, 서비스가 생긴 시점이나 역할, 혹은 추구하는 방향이 다르기 때문이라는 생각을 했습니다.

ChatGPT에게 Copilot과 Cursor에 대해 질의

그렇게 같은 팀에게도 팀길 당했다.

~~결국 개발자 입장에서는 Cursor가 더 편리하니까 자주 쓰는 게 아닐까?~~

하지만 그래도...

저는 Copilot에게 감사함을 느끼고 있습니다.
~~회사에서 Azure Infra를 사용하고 있어서, 플랜 추가하기가 쉬었습니다. 그게 아니었다면 결재 기안을...~~

비록 같은 계열사의 ChatGPT가 아래와 같이

Copilot은 MCP 서버에 연결할 수 없어. GitHub Copilot은 클라우드 기반이고, OpenAI 모델 (Codex or GPT-4 기반)만 사용, 현재로선 자체 호스팅이나 사내 LLM 모델(MCP 등)을 붙이는 기능은 없음

라고 말했지만, 그래도 Copilot이 가만히 있을 것 같지는 않았습니다.

Cursor가 저렇게 열일하는데 놀고 있을까!

관련해서 웹을 찾아보니 포스트를 찾을 수 있었습니다.

Copilot Agent 모드와 친해지기

Agent 모드 설정하기

Agent 모드(Copilot을 넘어서 모든)에서는 자체 엔진 기반의 코드 제안 이상으로, 다른 MCP 서버와 다른 LLM 모뎀을 연동하여 코드 제안을 수행할 수 있습니다. 이를 활용하면 사내 Figma 기반의 코드 제안도 가능합니다. 실제 여러 서비스들(hackle, portone 등)이 자체 MCP를 제공하기도 합니다.

Copilot Chats에서 Ask와 Agent 모드에 대해 질의
그래도 자기 자신에 대해서 물어본 것이니 정확하지 않을까?

Copilot Chats의 화면

Agent 모드를 활용하기 위해서는 Chats를 연 후 보내기 버튼 옆에 Ask 대신 Agent를 선택(우측 하단 빨간 테투리 영역)하면 됩니다. ~~집에서는 무료 Copilot을 쓰고 있어서 다른 모델로는 변경할 수 없었습니다.~~ 여자친구 찬스로 아래 본문에서는 유료 chatgpt 모델을 연결해봤습니다

Context 정의하기

이번에는 Copilot에게 질의할 때, Context를 지정하는 기능에 대해 살펴보겠습니다.

가끔 이 친구가 파일만 보고 답변하는 느낌을 지울 수 없었는데, 멍청한 것은 기능을 제대로 활용하지 못하는 나님이었습니다.

Copilot에게 질의할 때는 Context를 CodeSpace로 지정하여 프로젝트 전체(빨간 박스 안 Add Context.. 영역)를 참고하며 답변하도록 요청할 수 있습니다. 위의 스크린 샷 기준으로 Add Context를 누른 후 CodeSpace나 참고 파일을 지정하면 됩니다.

최근 업데이트로 이제는 Copilot이 자동으로 현재 열려 있는 워크스페이스의 파일과 구조를 바탕으로 맥락을 추론합니다.
따라서 별도의 “codebase” 명령 없이도, 질문을 구체적으로 작성하면 Copilot이 관련 코드를 최대한 활용해 답변을 제공합니다. 응 구라pilot

Copilot에게 메세지를 보낼 때 Codebase를 함께 보낼 수 있는 옵션을 선택(전송 시 Ctrl + Enter)하는 위치가 전송 아이콘 옆으로 변경되었습니다.

다른 서비스와 연결하기

Figma(MCP Server를 통한) 연결

심지어 더 단순해졌어요!

이제는 피그마에서 MCP서버를 제공해줍니다.
공식 홈페이지 가이드

//.vscode/setting.josn
"chat.mcp.discovery.enabled": true,
"mcp": {
  "servers": {
    "Figma Dev Mode MCP": {
      "type": "sse",
      "url": "http://127.0.0.1:3845/sse"
    }
  }
},
"chat.agent.enabled": true

대 Figma MCP 제공 이전

figma api key를 발급받고, vs code에서 mcp 서버를 구축해보겠습니다.

1. figma의 설정에서 계정의 token을 발급받습니다. 권한에 대해서 정확히 모르겠지만, 우선 읽기만 하면 될 것 같으니 읽기권한으로 모두 주겠습니다.
    - \[프로필 아이콘 클릭 > Security > Personal access tokens\]에서 추가
2. vs code에서 MCP Server 설정을 추가합니다.
    - [F1]을 누른 후 MCP:Add Server 커맨드를 통해 추가합니다.
    - 또는, setting.json에 아래 내용을 추가한다. _명령어를 통해서 추가하면 api key를 옵션으로 전달합니다. 큰 차이는 없는 것 같습니다._
    ```json
    //.vscode/setting.josn
    "mcp": {
        "servers": {
            "figma-developer-mcp": {
                "command": "npx",                
                "args": [
                    "-y",
                    "figma-developer-mcp",
                    "--stdio"
                ],
                "env": {
                    "FIGMA_API_KEY": `${발급 받은 FigmaKey}`
                }
            }
        }
    }
    ```
3. 피그마의 섹션의 링크를 복사하여 Copilot Chat에게 접근 가능하녀고 물어봅니다.
4. 그리고 성공!

ChatGPT 연결

copilot chat은 기본으로 연결되어 있는 모델 말고 다른 LLM모델을 연결할 수 있는 기능을 제공하고 있다. 이번에는 유료 결제한 ChatGPT을 예시로 연결해보겠습니다.

chatgpt 플랫폼에서 token을 발급한 후, Chat에서 변경해보자.

chatgpt에서 api key를 추가한다.
본문 중간 이미지의 Agent 옆에 모델 셀렉트를 누른 후 manage models을 클릭한다.
vs code 중 상단에 노출된 목록 중 openAPI를 선택한 후 발급받은 api key를 입력한다.
사용 가능한 모델 중 원하는 모델을 선택한다.
좀 더 똑똑해졌는지 이것저것 시켜본다.

후기

😅 오늘도 월급쟁이 개발자 생명을 연장하기 위해 조금은 노력해보았습니다.
~~대표님이 맨날 물어보신다고 하시더라구요.~~

다만, 아직 회사에서 사용하는 것은 정보보호 파트와 논의가 필요하기 때문에, 개인적으로 가지고 있는 figma로 테스트하다보니 그렇게 좋은 결과물은 주지 않았습니다.

하지만, figma도 점점 code generate 기능이 강화되고 있고, 피그마 컴포넌트를 잘 연결한다면 좋은 결과를 얻을 수 있지 않을까 기대해봅니다.

추후, 사내에서 승인이 되어 figma와 연동한 후기를 공유드릴 수 있으면 좋겠네요. :)

Park.Dyel

ㄱH발자

다음 포스트