MCP 연동 가이드

MCP 연동 2025-05-15

박준호 0 댓글 190

모델 컨텍스트 프로토콜(MCP)

해당 가이드에서는 MCP를 이용하여 Help 사이트에 연동하는 방법을 다룹니다 아래의 모든 내용은 글 작성이 가능한 관리자만 이용할 수 있습니다

1. 개인 엑세스 토큰 생성

Step 1: 먼저 Help 사이트에 로그인하여 우상단 프로필에서 API 토큰 발급 항목을 선택해주세요

1.00

Step 2: Create New Key라는 버튼을 클릭해 API Key를 발급해 주세요

1.00

위와같이 나온다면 정상적으로 API 키가 발급이 된 것입니다. 이제 Token 키 값을 복사해 주세요 해당 키 값은 다른사람에게 노출이 되어선 안됩니다

2. AI 도구에서 구성

다양한 도구에서 MCP를 사용할 수 있습니다 아래 예제에서는 Visual Studio Code의 Copilot을 이용하여 구성합니다

Visual Studio Code(Copilot)

Step 1: 아래 링크를 통해Visual Studio Code를 최신 버전으로 다운로드 받아주세요

Visual Studio Code 최신버전 다운로드 [vscode]: https://code.visualstudio.com/

Step 2: Visual Studio Code를 실행 후 control + shift + x 를 눌러 마켓플레이스를 열어주세요(또는 좌측 아이콘 클릭)

1.00

Step 3: 마켓플레이스 확장 검색에서 Copilot을 검색하여 설치해주세요 본 예제에서는 이미 설치가 되어있어 설치버튼이 나타나지 않습니다

1.00

Step 4: 설치 후 우측 상단에 Copilot 아이콘이 나타난다면 정상적으로 설치가 완료된 것입니다. 아이콘을 클릭하면 우측에 채팅이 열립니다. 만약 아이콘이 나오지 않는다면 Visual Studio Code를 껐다가 다시 실행해 보세요

1.00

Step 5: 여기까지 정상적으로 완료가 되었다면 이 상태에서 Control + shift + p 를 눌러 창을 열고 MCP를 검색합니다. 만약 mcp 서버 추가 라는 항목이 없다면 최신 버전의 Visual Studio Code가 아님으로 Step1 번의 과정으로 돌아가 재설치 해주시기 바랍니다

1.00

Step 6: MCP 서버 추가 항목을 클릭하고 stdio 항목을 클릭합니다

1.00

Step 7: 이름은 임시로 test 라고 지정하겠습니다

1.00

Step 8: 서버 ID는 수정 없이 그대로 사용하겠습니다

1.00

Step 9: 구성을 저장할 위치를 작업 영역 설정 에서 진행하도록 하겠습니다

1.00

Step 10: 여기까지 정상적으로 따라오셨다면 폴더 하위에 .vscode라는 폴더가 생기고 mcp.json이 생긴것을 확인할 수 있습니다

1.00

Step 11: mcp.json안에 있는 내용을 모두 지우고 아래 내용을 입력해주세요

{
"servers": {
  "help-mcp-server": {
    "type": "sse",
    "url": "https://help.zioyou.com/mcp",
    "headers": {
        "Authorization": "Bearer {{Token}}"
    }
   }
  }
}

Step 12: Authorization 부분에 {{Token}} 이라는 변수가 있습니다 이곳에 아까 복사해둔 Token 값을 넣어주세요 아래는 예시 입니다

예시 항목입니다 토큰값은 개인 엑세스 토큰 생성에서 발급받은 코든을 사용해주시면 됩니다 

{
...
      "headers": {
        "Authorization": "Bearer 95b-e4e1-4f92-0f6-a28098"
      }
    }
  }
}

Step 13: 이제 help-mcp-server라는 부분을 클릭하면 위에 시작이라는 버튼이 생성됩니다. 시작을 눌러주면 연결이 진행됩니다

1.00