MCP란? VSCode에서 CLine과 Gemini 2.5 Pro로 AI와 협업해봤습니다

개인 프로젝트에서 한 단계 더 유용한 개발 환경을 만들기 위한 실험기를 공유드립니다.

최근 주변 개발자 지인들로부터 "Cline + Gemini 2.5 Pro 진짜 괜찮다",
"Gemini 2.5 Pro 써보면 Copilot보다 자연스럽다",
"MCP는 요즘 AI 도구들의 핵심 기반 기술이다"라는 이야기를 자주 들었습니다.

처음에는 반신반의했지만
프론트엔드 개인 프로젝트를 진행하면서
"어차피 세팅할 거라면 지금 써보자"는 마음으로
VS Code + CLine + Gemini + MCP 조합을 직접 도입해보게 됐습니다.

결과적으로는 단순한 코드 생성 그 이상으로
"내 개발 맥락을 이해하고 반응해주는 AI 환경"이 무엇인지 체감할 수 있었고
덕분에 훨씬 빠르게 문제를 해결하거나 반복 작업을 줄일 수 있었어요.

이 글은 그 경험을 정리한 기록입니다.
단순한 사용법 소개를 넘어서
왜 이 조합이 강력한지 그리고 어떻게 실무나 사이드 프로젝트에 쓸 수 있을지
궁금한 분들에게 도움이 되었으면 합니다.

---

실제로 사용하기에 앞서 Cline의 핵심 개념인 MCP에 대해서 알아보겠습니다.

1. MCP (Model Context Protocol)란?

MCP (Model Context Protocol)는
LLM (Large Language Model)과 외부 데이터/도구/환경 간의 연결을 표준화해주는 개방형 프로토콜입니다.(2024년 11월 26일 Anthropic에 의해 도입되었습니다.)

LLM과 외부 데이터/도구/환경 간의 연결을 표준화해주는 개방형 프로토콜?
이라고 하면 이해하기 힘드니
쉽게 말해 MCP는 서로 다른 프로그램들이 AI랑 쉽게 대화하고 협업할 수 있게 해주는 '공통 언어'.라고 생각하면 좋습니다.

MCP에는 3가지 핵심 역할이 있습니다.

1. MCP 호스트: 외부 데이터를 활용하고자 하는 Claude Desktop, IDE 또는 AI 도구와 같은 애플리케이션.
2. MCP 클라이언트: 서버와 안전한 일대일 연결을 유지하여 효율적인 통신을 보장하는 프로토콜 클라이언트.
3. MCP 서버: 각기 특정 기능을 표준화된 모델 컨텍스트 프로토콜을 통해 노출하는 경량 프로그램.
출처: Anthropic Model Context Protocal Introduction

이 구조는 호스트가 클라이언트를 사용하여 다양한 서버에 연결할 수 있도록 하여 원활한 통합을 가능하게 합니다.

자세한 내용은 상단에 공유한 문서에서 확인하실 수 있습니다.

---

2. Cline

CLI 및 에디터 를 활용할 수 있는 AI 어시스턴트입니다.
CLine 공식 GitHub 저장소 - 한국어 README 보기

OpenRouter 같은 LLM 제공 서비스와 연동하여 MCP 형식으로 사용할 수 있습니다.
저는 VSCode 에서 Extenstion으로 설치하여 사용했습니다.

---

3. LLM 선정(Gemini 2.5 Pro Experimental 03-25 버전)

Cline에서 사용할 LLM은 작성일 기준 5일 전에 새로 나온 Gemini 2.5 Pro Experimental 03-25 버전으로 선택했습니다. 현재 기준 최신 모델이며 무료로 제공하고 있어서 사용했습니다.

Google AI Studio 링크

해당 LLM을 사용하기 위해 아래의 OpenRouter에서 계정을 만들어야합니다.

---

4. OpenRouter 설정

OpenRouter 홈페이지

1. 로그인/회원가입
2. 우측 메뉴들 중 Keys 메뉴를 선택해서 API Key 생성(생성된 키는 안전한 곳에 따로 보관)

---

3. VSCode에서 Cline 설정

1. VSCode 좌측 패널에서 Cline Extension 선택
2. API Provider을 OpenRouter로 설정
3. OpenRoter에서 생성했던 API 키 붙여넣기
4. LLM Model 설정
5. 사진 우측 하단의 Plan 모드로 설정

위 순서대로 설정한 후 원하는 작업을 채팅을 통해 작성하면 됩니다.

e.g. 현재 작업하고 있는 쇼핑몰 페이지를 같이 작업해줘 등

---

사용 후기

초기 몇 번의 채팅에서는 구체적인 작업 내용을 확인하는 질문을 하고

작업 전에는 Act 모드로 전환할 것을 요청합니다.

작업 중에는 다음과 같은 기능을 직접 수행할 수 있었습니다

• 터미널에서 명령어 실행
• 패키지 직접 설치
• 파일 생성 및 수정

와 같은 작업을 사용자가 허가하면 실행하며 파일을 직접 만들고 수정합니다.

또한 오류가 발생할 경우 파일 내용을 탐색해 원인을 분석하고 수정해주는 능력도 인상적이었습니다.
런타임 오류의 경우에는 직접 실행 후 발생한 메시지를 전달해야 해결이 가능했지만
그 외 대부분의 정적 오류는 자체적으로 해결이 가능했습니다.

가장 좋았던 점은 현재 프로젝트 폴더 구조와 버전에 맞춰 코드를 자연스럽게 통합해준다는 점이었고
또한 OpenRouter를 통해 다양한 LLM을 자유롭게 변경해가며 사용할 수 있다는 유연성도 만족스러웠습니다.

Gemini 2.5 Pro의 토큰이 모두 소진된 후 다른 모델로 전환해도 기존 대화 맥락이 유지되어 작업 연속성도 높았습니다.

결과물 역시 20분 남짓한 시간에 상당히 완성도 있게 구현되었고 충분히 실무에도 응용할 수 있을 거라 느꼈습니다.

---

작업물 전/후

작업 전

작업 후

---

단점

아직 뭔가 불안정한게 있는지 실행중에 API Provider 오류가 꽤 자주 떠서 재시도를 계속 해줘야하는 불편함이 있었습니다.

마무리하며

이번 실험을 통해 단순히 AI에게 코드를 물어보는 수준을 넘어서
LLM이 나의 개발 환경을 이해하고 능동적으로 참여하는 수준까지 도달할 수 있음을 직접 경험했습니다.

CLine과 강력한 LLM(Gemini 2.5 Pro)의 조합은
생산성과 효율성 모두를 끌어올릴 수 있는 매우 유용한 도구였습니다.

실제로 MCP Server을 적극 활용해보진 못했지만,
생성형 이미지 플랫폼(DALL-E)과 연동해서
Agent가 적절한 이미지를 직접 가져와 화면에 자동으로 삽입하는 작업까지도
가능할 것 같습니다.

앞으로 더 다양한 프로젝트에서 이런 AI 기반 개발 워크플로우를 실험해볼 예정이며
관심 있는 분들은 꼭 한 번 체험해보시길 추천드립니다.

궁금한 점이나 공유하고 싶은 팁이 있다면 댓글로 자유롭게 남겨주세요 :)

---

참고: https://youtu.be/4SoMe9xKTKo?si=p2RDkyNSof_87Iop