Your privacy choices

Allow optional cookies for referral attribution, visit analytics, and Google Ads purchase measurement.

VS Code 설정 튜토리얼

VS Code + Cline에서 OpenAI Compatible 방식으로 LLM API Gateway을 연동합니다.

목표: VS Code에 Cline을 설치하고 OpenAI Compatible 방식으로 LLM API Gateway을 연동합니다. 설정을 완료하면 VS Code에서 바로 AI가 코드를 읽고, 수정하고, 명령을 작성하고, 오류를 설명하도록 할 수 있습니다.

설정 항목입력 내용비고
API ProviderOpenAI CompatibleCline에서 OpenAI 호환 서비스 제공자를 공식 지원합니다.
Base URLhttps://api.llm-token.cn/v1전체 /chat/completions 경로를 입력하지 마십시오.
API Keysk-xxxxxxxx본인의 전체 Key를 붙여 넣습니다.
Model ID모델 목록에서 전체 모델 이름 복사모델이 존재하지 않는다면 대부분 이 항목을 잘못 입력한 경우입니다.

일, 사전 준비

  1. VS Code 설치: https://code.visualstudio.com/
  2. Git 설치: https://git-scm.com/downloads
  3. Windows 사용자는 Git 설치 후 환경 변수가 적용되도록 컴퓨터를 한 번 재시작하는 것이 좋습니다.

이, Cline 확장 프로그램 설치

  1. VS Code를 열고 왼쪽의 Extensions 확장 프로그램 스토어를 클릭합니다.
  2. Cline을 검색한 뒤 Install을 클릭합니다.
  3. 설치가 완료되면 왼쪽에 Cline 아이콘이 표시됩니다.
  4. 아이콘이 나타나지 않으면 VS Code를 재시작합니다.

VS Code에서 Cline 플러그인을 검색하는 화면을 보여 줍니다. 왼쪽에 여러 아이콘이 있고 그중 ‘확장 프로그램’ 아이콘이 빨간색 테두리로 강조되어 있습니다. 검색란에는 ‘cline’이 입력되어 있으며 아래 검색 결과에서 Cline 플러그인이 빨간색 테두리로 강조되어 있고, 설명에는 파일 생성/편집, 명령 실행, 브라우저 사용 등이 가능한 자율 코딩 도우미라고 표시되며 오른쪽에 ‘설치’ 버튼이 있습니다. 이 이미지는 문서의 ‘Cline 설정 열기’ 단계와 관련되며, VS Code에서 Cline 플러그인을 검색하는 조작 화면을 보여 줍니다. VS Code에서 Cline 플러그인을 검색하는 화면을 보여 줍니다. 왼쪽에 여러 아이콘이 있고 그중 ‘확장 프로그램’ 아이콘이…

삼, Cline 설정 열기

왼쪽의 Cline 아이콘을 클릭하여 Cline 패널로 이동한 뒤 설정을 엽니다.

이 이미지는 VS Code에서 Cline 설정 단계의 인터페이스 스크린샷으로, 설정 튜토리얼에서 Cline 설정을 연 뒤 수행하는 단계에 해당합니다. 화면 상단에는 ‘How will you use Cline?’라는 질문이 표시되고, 아래에는 ‘Absolutely Free’, ‘Frontier Model’, ‘Bring my own API key’ 옵션이 위에서 아래로 순서대로 있습니다. 이 중 ‘Bring my own API key’가 선택되어 있으며, 해당 옵션 아래에는 ‘Use Cline with your provider of choice’라는 설명이 있습니다. 이 단계는 설정 과정에서 API key 사용 방식을 선택하는 핵심 작업이며, 설정 튜토리얼에서 이후에 LLM API Gateway 인터페이스를 입력하기 전에 거치는 선택 단계와 대응됩니다. 이 이미지는 VS Code에서 Cline 설정 단계의 인터페이스 스크린샷으로, 설정 튜토리얼에서 Cline 설정을 연 뒤 수행하는…

이미지는 VS Code에서 Cline 플러그인의 설정 화면을 보여 줍니다. 화면 왼쪽에는 ‘API Configuration’, ‘Plan Mode’, ‘Act Mode’ 등의 옵션이 있고, 그중 ‘Act Mode’가 빨간색 테두리로 강조되어 있습니다. 오른쪽에는 API Provider가 ‘OpenAI Compatible’, Base URL가 ‘http://api.vectorengine.a...’로 표시되며, OpenAI Compatible API Key 부분은 가려져 있습니다. Model ID는 ‘claude - opus - 4 - 6’이고 Custom Headers 등의 설정 항목도 있습니다. 이 이미지는 문서의 ‘사, LLM API Gateway 인터페이스 입력’ 부분과 대응되며, API Configuration의 관련 설정 내용을 보여 줍니다. 이미지는 VS Code에서 Cline 플러그인의 설정 화면을 보여 줍니다. 화면 왼쪽에는 ‘API Configuration’, ‘…

위 이미지는 Cline 필드 위치를 파악하는 데만 사용합니다. 이미지 속 타사 http://... 주소와 모델 이름은 LLM API Gateway 설정이 아니므로 그대로 따라 입력하지 마십시오. 실제 값은 이 문서 표의 HTTPS Base URL와 사이트 모델 목록을 기준으로 합니다.

사, LLM API Gateway 인터페이스 입력

  1. API Provider: OpenAI Compatible을 선택합니다.
  2. Base URL: https://api.llm-token.cn/v1을 입력합니다.
  3. API Key: sk-로 시작하는 본인의 Key를 붙여 넣습니다.
  4. Model ID: 전체 모델 ID를 입력합니다. 예: claude-sonnet-4-6.
  5. 구성을 저장한 뒤 새 작업을 만들어 테스트합니다.

저장할 때 오류가 발생하는 경우: 먼저 Base URL를 https://api.llm-token.cn/v1/chat/completions로 작성하지 않았는지 확인하십시오. Cline에는 API 루트 경로, 즉 /v1을 입력해야 합니다.

오, 테스트 및 문제 해결

현상처리 방법
URL을 입력할 수 없음일반 OpenAI 공식 제공자가 아니라 OpenAI Compatible을 선택했는지 확인하십시오.
Model Not Found모델 ID가 모델 목록과 완전히 일치해야 합니다.
연결 실패Key, Base URL, 네트워크 프록시를 확인하십시오. 회사 네트워크나 캠퍼스 네트워크에서는 모바일 핫스팟으로 바꾸어 테스트할 수 있습니다.
Cline 아이콘이 없음VS Code를 재시작하고, 그래도 나타나지 않으면 확장 프로그램을 다시 설치하십시오.