VScode Cline + MCP

이것저것 개발노트

VScode Cline + MCP

4356 2025. 4. 12. 18:26

Cursor AI 유료가 싫다면 Cline을 사용해봅시다.

알아보기

- Claude 3.7 Sonnet의 에이전트형 코딩 기능 덕분에, Cline은 복잡한 소프트웨어 개발 작업을 단계별로 처리할 수 있음

- 파일 생성과 편집, 대규모 프로젝트 탐색, 브라우저 사용, 터미널 명령 실행(권한 허가 필요) 등의 Tool를 사용하여 코드 완성 제공

- Cline은 Model Context Protocol(MCP)를 사용하여 새로운 도구를 만들고 자신의 기능을 확장할 수 있음

- 모든 파일 변경 및 터미널 명령을 승인할 수 있는 사람이 개입가능한 GUI를 제공하여, 에이전트형 AI의 잠재력을 보다 안전하고 쉽게 탐색할 수 있도록 함

Cline 기능

1. Cline은 파일 구조와 소스코드 AST의 분석, 정규식 검색 실행, 관련 파일 읽기부터 시작하여 기존 프로젝트를 파악.

2. 어떤 정보를 컨텍스트에 추가할지를 신중하게 관리하여, 대규모 복잡한 프로젝트에서도 컨텍스트 윈도우를 과부하시키지 않으면서도 효과적인 지원을 제공

3. Cline이 필요한 정보를 얻은 후 다음과 같은 작업을 할 수 있음

- 파일 생성과 편집 + 린터/컴파일러 오류 모니터링을 수행하여 누락된 import나 구문 오류 등의 문제를 자동으로 수정

- 터미널에서 명령을 직접 실행하고 작업 중에 출력을 모니터링. 이를 통해 파일 편집 후 개발 서버의 문제에 대응할 수 있음

- 웹 개발 작업에서는 헤드리스 브라우저로 사이트를 실행하고, 클릭, 입력, 스크롤, 스크린샷과 콘솔 로그 캡처를 수행하여 런타임 오류나 시각적 버그를 수정

4. 작업이 완료되면 Cline은 open -a "Google Chrome" index.html과 같은 터미널 명령을 제공하여 버튼 클릭 한 번으로 결과를 확인할 수 있음

Tip>

CMD/CTRL + Shift + P 단축키를 사용하여 명령 팔레트를 열고 "Cline: Open In New Tab"을 입력하여 에디터의 탭으로 확장 프로그램을 엽니다. 이를 통해 파일 탐색기와 병행하여 Cline을 사용하고 워크스페이스의 변경을 더 명확하게 확인할 수 있습니다.

어떤 API나 모델이든 사용 가능

Cline은 OpenRouter, Anthropic, OpenAI, Google Gemini, AWS Bedrock, Azure, GCP Vertex 등의 API 제공자를 지원

OpenAI 호환 API를 설정하거나 LM Studio/Ollama를 통해 로컬 모델을 사용할 수도 있음

OpenRouter를 사용하는 경우, 확장 프로그램에서 최신 모델 목록을 가져와 바로 최신 모델을 사용할 수 있게 함

Cline은 전체 작업 루프와 개별 요청별로 토큰 사용량과 API 비용을 추적하여, 진행 중인 작업의 비용을 실시간으로 확인할 수 있도록 도와줌

터미널에서 명령 실행

- Cline은 터미널에서 명령을 직접 실행하고 출력을 받을 수 있음

- 이를 통해 패키지 설치나 빌드 스크립트 실행부터 애플리케이션 배포, 데이터베이스 관리, 테스트 실행까지 광범위한 작업을 수행할 수 있음

- 개발 서버와 같은 오래 실행되는 프로세스의 경우, "실행 중 계속"(Proceed While Running) 버튼을 사용하여 명령이 백그라운드에서 실행되는 동안 Cline이 작업을 계속할 수 있음

작업이 진행되는 동안 Cline은 새로운 터미널 출력을 실시간으로 확인하여, 파일 편집 시 발생하는 컴파일 오류와 같은 문제에 즉시 대응할 수 있음

파일 생성과 편집

- Cline은 에디터 내에서 파일을 생성 및 편집하고 변경의 Diff 뷰로 표시

- Diff 뷰 에디터에서 Cline의 변경을 직접 편집하거나 되돌릴 수 있으며, 채팅에서 피드백을 제공하여 만족할 때까지 개선 요청할 수 있음

- Cline은 린터/컴파일러 오류(누락된 임포트, 구문 오류 등)도 모니터링하고 발생한 문제를 자동으로 수정함

- Cline에 의한 모든 변경은 파일의 타임라인에 기록되어 필요할 때 변경을 추적하고 되돌릴 수 있는 간단한 방법을 제공함

브라우저 사용

- Claude 3.5 Sonnet의 새로운 컴퓨터 사용 기능으로 인해, Cline은 브라우저를 실행하고 요소를 클릭하고 텍스트를 입력하고 스크롤하며 각 단계에서 스크린샷과 콘솔 로그를 캡처할 수 있음

- 이를 통해 인터랙티브한 디버깅, 엔드투엔드 테스트, 심지어 일반적인 웹 탐색까지 가능함

- 이로 인해 오류 로그를 수동으로 복사 & 붙여넣기 할 필요 없이 시각적 버그나 런타임 문제를 자율적으로 수정할 수 있음

- Cline에게 "앱을 테스트해줘"라고 요청하면, npm run dev와 같은 명령을 실행하고 로컬에서 실행 중인 개발 서버를 브라우저에서 실행하여 일련의 테스트를 수행하고 모든 것이 정상적으로 작동하는지 확인 할 수 있음

- 데모는 여기를 참조하세요.

도구 추가

- Cline은 Model Context Protocol을 활용하여 커스텀 도구를 생성하고 기능을 확장할 수 있음

- Cline은 사용자의 워크플로우에 최적화된 도구를 직접 제작하고 설치할 수도 있음

- "~ 도구를 추가해주세요."라고 요청만 하면, Cline은 새로운 MCP 서버 생성부터 확장 프로그램 내 설치까지 모두 자동으로 처리 가능

- 예시

"Jira 티켓을 가져오는 도구를 추가해주세요": 티켓 AC를 가져와 Cline에게 작업을 요청
"AWS EC2를 관리하는 도구를 추가해주세요": 서버 메트릭을 확인하고 인스턴스를 확장 또는 축소
"최신 PagerDuty 인시던트를 가져오는 도구를 추가해주세요": 최신 장애 정보를 가져와 Cline에게 버그 수정 요청

컨텍스트 추가

@url： URL을 붙여넣으면 확장이 해당 페이지를 가져와 Markdown으로 변환 할 수 있음

최신 문서를 Cline에게 제공할 때 유용함

@problems： Cline이 수정할 워크스페이스 오류와 경고(Problems' panel)를 추가

@file： 파일의 내용을 추가하여, 파일을 읽는 데 API 요청을 허비하지 않고도 Cline이 접근할 수 있도록 함 (+ 파일 검색 가능)

@folder： 폴더 내 모든 파일을 한 번에 추가하여 워크플로우를 더욱 빠르게 진행할 수 있음

체크포인트: 비교 및 복원

- Cline이 작업을 진행하는 동안 확장 프로그램은 각 단계에서 워크스페이스의 스냅샷을 저장

- “Compare” 버튼을 사용하여 스냅샷과 현재 워크스페이스의 차이를 확인하고, “Restore” 버튼을 사용하여 해당 시점으로 롤백할 수 있음

시작하기

VScode - 왼쪽 메뉴바 - Extension에서 cline을 검색합니다.

Cline install을 진행합니다.

설치가 완료되면 아래와 같은 화면이 보입니다.

만약 GPU 서버가 있다면 'Get Started for Free'를 클릭하고 Ollama로 LLM을 사용할 수 있겠습니다. 아래 이미지에서 확인하듯이 Ollama도 사용할 수 있습니다.

저는 'Use Your Own API key' 버튼을 눌러 OpenAI API나, Claude API 또는 Google Gemini API를 사용하겠습니다.

OpenAI나 Claude 같은 경우 사용하다보면 요금이 너무 많이 나옴

가장 요금이 적은 Google Gemini를 사용하겠습니다.

Google Gemini API 얻기

https://aistudio.google.com/welcome?utm_source=PMAX&utm_medium=display&utm_campaign=FY25-global-DR-pmax-1710442&utm_content=pmax&gad_source=1&gclid=Cj0KCQjwnui_BhDlARIsAEo9Gus8Frmnx6lvR1NncZYiFt0FAmv6vq8NHGlh-SM3yfStXxnJRe07zhkaAqhtEALw_wcB&gclsrc=aw.ds

Gemini API Docs 클릭

Gemini API 키 가져오기 버튼 클릭

API 키 열의 파란색 글씨 클릭하면 복사 가능

요금제 열을 살펴보면 무료인것을 확인할 수 있음

API를 넣고 Let's go 버튼을 누름

이 화면에서 우측 상단 설정 아이콘을 클릭

Model을 바꿀 수 있음 2.5-pro 정도면 Claude sonnet과 성능은 비슷한데 무료라고 합니다. 프롬프트도 한국어로 해줍니다.

Cline 터미널 설정

저는 제가 사용하는 터미널과 cline이 같은 환경의 터미널을 사용하기를 원합니다.

따라서 먼저 아래와 같은 설정을 수정합니다.

settings를 검색합니다.

{
    // 최신 방식: Anaconda Prompt 설정
    "terminal.integrated.profiles.windows": {
        "Anaconda Prompt": {
            "path": "C:\\Windows\\System32\\cmd.exe",
            "args": ["/K", "C:\\Users\\khw11\\anaconda3\\Scripts\\activate.bat C:\\Users\\khw11\\anaconda3"],
        }
    },
    "terminal.integrated.defaultProfile.windows": "Anaconda Prompt",

    "git.autofetch": true,
    "git.enableSmartCommit": true,
    "workbench.editorAssociations": {
        "*.ipynb": "jupyter-notebook"
    },
    "kite.showWelcomeNotificationOnStartup": false,
    "workbench.startupEditor": "none",
    "notebook.cellToolbarLocation": {
        "default": "right",
        "jupyter-notebook": "left"
    },
    "terminal.integrated.automationShell.windows": "",
    "editor.suggestSelection": "first",
    "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",

    // Cline 관련 설정
    "cline.preferredLanguage": "Korean - 한국어",
    "cline.vsCodeLmModelSelector": {
    
    }
}