> ## Documentation Index > Fetch the complete documentation index at: https://docs.apimart.ai/llms.txt > Use this file to discover all available pages before exploring further. # VSCode에서 Cline을 사용하여 APIMart 통합하기 > Visual Studio Code에서 Cline 확장 프로그램을 사용하여 APIMart API 서비스를 구성하는 상세 가이드입니다. 이 가이드는 VSCode에서 Cline을 통해 APIMart의 AI 모델을 사용하여 코드 개발, 디버깅 및 최적화를 수행하는 방법을 설명합니다. ## 소개 Cline(이전 Claude Dev)은 개발자가 편집기 내에서 AI 어시스턴트와 직접 상호 작용하여 코드 작성, 디버깅, 리팩토링 등의 작업을 수행할 수 있는 강력한 VSCode 확장 프로그램입니다. APIMart API를 구성하면 Cline에서 다양한 고급 AI 모델을 사용할 수 있습니다. ## 사전 준비 시작하기 전에 다음을 확인하세요: 1. **Visual Studio Code 설치 완료**\ [공식 웹사이트](https://code.visualstudio.com/)에서 VSCode 다운로드 및 설치 2. **Cline 확장 프로그램 설치 완료**\ VSCode 확장 프로그램 마켓플레이스에서 "Cline"을 검색하여 설치 3. **APIMart API 키 획득**\ [APIMart 콘솔](https://apimart.ai/keys)에 로그인하여 API 키 획득 (`sk-`로 시작) **팁:** APIMart 계정이 없는 경우, 먼저 [APIMart](https://apimart.ai)에서 등록하고 API 키를 받으세요. ## 1단계: Cline 확장 프로그램 설치 ### 1.1 확장 프로그램 마켓플레이스 열기 VSCode에서: 1. 왼쪽 활동 표시줄에서 **확장 프로그램** 아이콘 클릭 (또는 `Ctrl+Shift+X` / `Cmd+Shift+X` 누르기) 2. 검색 상자에 **Cline** 입력 3. Cline 확장 프로그램 찾기 (작성자: Cline) 4. **설치** 버튼 클릭 ### 1.2 설치 확인 설치 완료 후: 1. 왼쪽 활동 표시줄에 **Cline** 아이콘 (로봇 머리)이 나타납니다 2. 아이콘을 클릭하여 Cline 사이드바 열기 3. 처음 열면 "Hi, I'm Cline" 환영 메시지가 표시됩니다 4. 두 가지 옵션이 표시됩니다: * **Get Started for Free** - 공식 무료 체험 사용 * **Use your own API key** - 자체 API 키 사용 Cline 확장 프로그램 설치 *VSCode 확장 프로그램 마켓플레이스에서 Cline 검색 및 설치* ## 2단계: APIMart API 구성 ### 2.1 자체 API 키 사용 선택 Cline 환영 화면에서: 1. **Use your own API key** 버튼 클릭 2. API 구성 인터페이스가 열립니다 Cline 환영 화면 *Cline 환영 화면, "Use your own API key"를 선택하여 APIMart 사용* **팁:** 이전에 구성한 적이 있다면, Cline 사이드바 상단의 **설정** (톱니바퀴 아이콘)을 클릭하여 구성에 액세스할 수 있습니다. ### 2.2 API 제공자 구성 설정 인터페이스에서: 1. **API Configuration** 섹션 확장 2. **API Provider** 드롭다운에서 **OpenAI Compatible** 선택 3. OpenAI 호환 구성 옵션이 표시됩니다 **중요:** APIMart는 OpenAI API 형식과 완벽하게 호환되므로 "OpenAI Compatible"을 선택합니다. ### 2.3 API 구성 입력 다음 구성 정보를 입력합니다: | 설정 | 값 | 설명 | | ----------------------------- | --------------------------------------- | ------------------ | | **API Provider** | `OpenAI Compatible` | 드롭다운에서 선택 | | **Base URL** | `https://api.apimart.ai/v1` | APIMart API 기본 URL | | **OpenAI Compatible API Key** | `sk-xxxxxxxxxxxx` | APIMart API 키 | | **Model ID** | `gpt-5` 또는 `claude-sonnet-4-5-20250929` | 사용할 모델 ID 입력 | APIMart API 구성 *설정 인터페이스에서 API Provider, Base URL, API Key, Model ID 구성* **구성 참고사항:** * **API Key**: [APIMart 콘솔](https://apimart.ai/keys)에서 얻은 `sk-`로 시작하는 키여야 합니다 * **Base URL**: `https://api.apimart.ai/v1`로 고정, `/v1` 접미사 주의 * **Model ID**: 모델 ID를 직접 입력, 예: `gpt-5`, `gpt-4o`, `claude-sonnet-4-5-20250929` 등 * 구성 인터페이스 하단에 모델 기능(이미지 지원, 브라우저 사용 등)이 표시됩니다 ### 2.4 구성 저장 구성 완료 후: 1. 오른쪽 상단의 **Done** 버튼 클릭 2. 구성이 자동으로 저장됩니다 3. Cline이 새 구성으로 즉시 APIMart에 연결합니다 4. Cline 메인 화면으로 돌아가면 "What can I do for you?"가 표시됩니다 ## 3단계: 적합한 모델 선택 ### 추천 모델 개발 시나리오에 따라 적합한 모델을 선택: **텍스트 생성 및 코드 개발:** * **gpt-5** ⭐ 최신 모델, 최고의 코드 생성 품질 * 적합: 복잡한 알고리즘, 아키텍처 설계, 코드 리팩토링 * 특징: 이해력이 뛰어나고 코드 품질이 높음 * **gpt-4o** 고성능 모델 * 적합: 일상 개발, 코드 리뷰, 버그 수정 * 특징: 빠르고 안정적인 품질 * **gpt-4o-mini** 💰 비용 효율적 * 적합: 간단한 코드 생성, 주석 작성, 문서 생성 * 특징: 가성비가 좋고 응답이 빠름 **Claude 시리즈 (강력한 추론):** * **claude-sonnet-4-5-20250929** * 적합: 복잡한 논리 추론, 알고리즘 최적화 * 특징: 추론 능력이 뛰어나 복잡한 문제 해결에 적합 * **claude-haiku-4-5-20251001** * 적합: 빠른 코드 완성, 간단한 Q\&A * 특징: 매우 빠르고 저비용 **모델 선택 팁:** * 🚀 **복잡한 프로젝트, 중요한 기능:** `gpt-5`, `gpt-4o`, `claude-sonnet-4-5-20250929` * 💼 **일상 개발, 일반 작업:** `gpt-4o`, `gpt-4o-mini` * 💰 **비용 중시, 고빈도 사용:** `gpt-4o-mini`, `claude-haiku-4-5-20251001` ### 모델 전환 Cline 메인 화면 하단에서: 1. 입력 상자 아래의 모델 버튼 찾기 (현재 모델 표시, 예: `openai-compatible:clau...`) 2. 이 버튼을 클릭하여 모델 전환 3. 또는 설정에서 **Model ID** 필드 수정 4. 변경 사항은 즉시 적용되며 VSCode 재시작이 필요 없음 **팁:** 현재 모델은 입력 상자 아래 버튼에 표시됩니다. 클릭하여 빠르게 전환할 수 있습니다. ## 4단계: Cline 사용 시작 ### 4.1 기본 대화 구성 완료 후 AI 어시스턴트와 채팅: 1. Cline 메인 화면에 "**What can I do for you?**"가 표시됩니다 2. 하단 입력 상자("Type your task here..." 표시)에 요청 입력 3. 예: "피보나치 수열을 계산하는 함수 생성" 4. `Enter`를 눌러 전송 5. AI가 요청을 분석하고 코드를 생성하여 프로젝트에 직접 적용할 수 있습니다 6. 각 단계의 진행 상황이 사이드바에 표시됩니다 ### 4.2 코드 생성 AI에게 코드 생성 요청: **예시 1: 함수 생성** ``` 이메일 주소 형식을 검증하는 JavaScript 함수를 만들어 주세요 ``` **예시 2: 기능 구현** ``` React Hooks를 사용하여 이메일과 비밀번호 입력이 있는 사용자 로그인 폼을 구현해 주세요 ``` **예시 3: 테스트 작성** ``` Jest를 사용하여 calculateTotal 함수의 단위 테스트를 작성해 주세요 ``` Cline 채팅 인터페이스 *Cline에서 AI와 채팅하여 코드 생성* ### 4.3 코드 설명 및 개선 기존 코드 분석 및 최적화: **우클릭 메뉴 바로가기:** 1. 편집기에서 처리할 코드 선택 2. 우클릭하면 Cline 옵션이 표시됩니다: * **Explain with Cline** - 코드의 기능과 로직 설명 * **Improve with Cline** - 코드 최적화 및 개선 3. 해당 작업 선택 4. Cline이 사이드바에 분석 결과와 개선 제안을 표시합니다 **대화를 통해:** Cline 사이드바에 직접 입력할 수도 있습니다: ``` 이 코드를 리팩토링하여 가독성과 성능을 향상시켜 주세요 ``` 코드 설명 및 개선 *우클릭으로 "Explain with Cline" 또는 "Improve with Cline"을 사용하여 빠른 코드 처리* ### 4.4 버그 디버깅 오류 찾기 및 수정: 1. 오류 메시지나 문제가 있는 코드를 Cline에 전송 2. 예: "이 코드에서 오류 발생: TypeError: Cannot read property 'name' of undefined" 3. AI가 문제를 분석하고 해결책 제공 4. 수정 사항을 직접 적용할 수 있습니다 ### 4.5 코드 설명 복잡한 코드 이해: 1. 이해하기 어려운 코드 스니펫 선택 2. Cline에 입력: "이 코드가 무엇을 하는지 설명해 주세요" 3. AI가 상세한 설명과 작동 원리를 제공합니다 ### 4.6 문서 생성 코드 문서 자동 생성: **함수 주석 생성:** ``` 이 함수에 JSDoc 주석을 추가해 주세요 ``` **README 생성:** ``` 이 프로젝트의 README.md 파일을 생성해 주세요 ``` ## 고급 기능 ### 다중 파일 작업 Cline은 여러 파일을 동시에 처리할 수 있습니다: 1. **여러 파일 생성**: ``` 라우트, 컨트롤러, 모델 파일을 포함한 완전한 Express.js API를 만들어 주세요 ``` 2. **일괄 수정**: ``` 프로젝트의 모든 var를 const 또는 let으로 교체해 주세요 ``` 3. **프로젝트 리팩토링**: ``` 이 프로젝트를 JavaScript에서 TypeScript로 마이그레이션해 주세요 ``` *Cline은 여러 파일을 동시에 생성하고 수정할 수 있습니다* ### 터미널 명령 실행 Cline은 터미널 명령 실행을 도울 수 있습니다: 1. **종속성 설치**: ``` axios와 dotenv 패키지를 설치해 주세요 ``` 2. **스크립트 실행**: ``` npm test를 실행해 주세요 ``` 3. **Git 작업**: ``` 메시지 "feat: add user authentication"으로 Git 커밋을 만들어 주세요 ``` **명령 실행 흐름:** 1. Cline이 사이드바에 "**Cline wants to execute this command:**"를 표시 2. 구체적인 명령 표시 (예: `gcc fibonacci.c -o fibonacci.exe`) 3. 하단에 두 개의 버튼이 나타남: * **Run Command** - 명령 실행 * **Reject** - 실행 거부 4. "Run Command"를 클릭하면 통합 터미널에서 명령이 실행됨 5. 결과가 터미널과 Cline 사이드바에 모두 표시됩니다 **보안 참고:** Cline은 터미널 명령을 실행하기 전에 명시적인 확인이 필요합니다. 특히 파일 삭제나 시스템 구성과 관련된 민감한 작업의 경우 "Run Command"를 클릭하기 전에 명령 내용을 주의 깊게 확인하세요. ### 컨텍스트 관리 Cline은 대화 컨텍스트를 자동으로 관리합니다: * **현재 파일 컨텍스트**: 편집 중인 파일을 자동으로 포함 * **선택한 코드 컨텍스트**: 선택한 코드 스니펫을 자동으로 포함 * **프로젝트 구조 컨텍스트**: 프로젝트 구조 이해 * **오류 메시지 컨텍스트**: 터미널 오류 메시지를 자동으로 캡처 ### 사용자 정의 프롬프트 사용자 정의 프롬프트 템플릿 생성: 1. Cline 설정에서 **Custom Instructions** 찾기 2. 선호도 추가, 예: ``` - JavaScript 대신 TypeScript 사용 - Airbnb 코드 스타일 준수 - 화살표 함수 구문 사용 - 함수형 프로그래밍 스타일 선호 ``` 3. AI가 모든 상호 작용에서 이 지침을 따릅니다 ## 자주 묻는 질문 ### Q1: Cline이 API 키가 유효하지 않다고 표시? **해결책:** 1. **API Key 형식 확인**: * API Key가 `sk-`로 시작하는지 확인 * 추가 공백 없이 완전히 복사되었는지 확인 2. **Base URL 확인**: * `https://api.apimart.ai/v1`이어야 합니다 * `/v1` 접미사 주의 3. **키 유효성 확인**: * [APIMart 콘솔](https://apimart.ai/keys)에서 키 상태 확인 * 계정 잔액이 충분한지 확인 4. **재구성**: * 기존 구성 삭제 * API Key와 Base URL 다시 입력 ### Q2: Cline 응답이 느림? **해결책:** 1. **더 빠른 모델로 전환**: * `gpt-4o-mini` 또는 `claude-haiku-4-5-20251001` 사용 * 이 모델들은 응답이 더 빠름 2. **컨텍스트 길이 줄이기**: * 한 번에 매우 긴 코드를 보내지 않기 * 큰 작업을 작은 작업으로 분할 3. **네트워크 연결 확인**: * 네트워크가 안정적인지 확인 * 프록시 서버 사용 고려 4. **요청 내용 최적화**: * 더 구체적인 질문하기 * 모호하거나 너무 광범위한 질문 피하기 ### Q3: Cline이 생성하는 코드 품질이 낮음? **해결책:** 1. **더 높은 품질의 모델 사용**: * `gpt-5` 또는 `claude-sonnet-4-5-20250929`으로 전환 * 이 모델들은 더 높은 품질의 코드 생성 2. **더 상세한 요구사항 제공**: * 예상되는 구현을 명확히 설명 * 예제 코드나 참조 제공 * 기술 스택과 프레임워크 버전 지정 3. **사용자 정의 지침 사용**: * 설정에서 코드 표준 추가 * 코딩 스타일과 모범 사례 지정 4. **반복적 최적화**: * AI와 여러 번의 대화 진행 * 점진적으로 코드 품질 향상 ### Q4: API 사용 비용을 관리하는 방법? **해결책:** 1. **적합한 모델 선택**: * 일상 개발에는 `gpt-4o-mini` 사용 * 복잡한 작업에는 `gpt-5` 사용 2. **질문 방식 최적화**: * 가능한 한 구체적으로 * 같은 질문 반복 피하기 3. **코드 선택 사용**: * 처리가 필요한 코드 부분만 선택 * 전체 파일 컨텍스트 전송 피하기 4. **사용량 모니터링**: * 정기적으로 [APIMart 콘솔](https://apimart.ai/overview) 확인 * API 호출 빈도와 비용 파악 ### Q5: Cline이 특정 파일에 액세스할 수 없음? **해결책:** 1. **파일 권한 확인**: * 파일에 읽기/쓰기 권한이 있는지 확인 * 특히 Linux/macOS 시스템에서 2. **.gitignore 확인**: * Cline은 기본적으로 .gitignore의 파일을 무시 * 설정에서 이 동작 조정 가능 3. **작업 공간 설정**: * 파일이 VSCode 작업 공간 내에 있는지 확인 * 작업 공간 신뢰 설정 확인 4. **VSCode 다시 로드**: * `Ctrl+Shift+P` / `Cmd+Shift+P` 사용 * "Reload Window" 명령 실행 ## 사용 팁 ### 1. 컨텍스트 충분히 활용 **완전한 정보 제공:** ``` MongoDB 데이터베이스를 사용하는 Express.js 프로젝트가 있습니다. 등록, 로그인, JWT 토큰 검증을 포함한 사용자 인증 시스템을 만들어 주세요. 프로젝트 구조는: - src/models/ - src/controllers/ - src/routes/ - src/middleware/ ``` ### 2. 점진적 개발 **간단하게 시작하여 점진적으로 개선:** ``` 1단계: 기본 사용자 모델 생성 2단계: 비밀번호 암호화 추가 3단계: 등록 및 로그인 엔드포인트 구현 4단계: JWT 토큰 검증 추가 ``` ### 3. 코드 리뷰 어시스턴트 **AI에게 코드 리뷰 요청:** ``` 이 코드를 검토하고 다음을 확인해 주세요: 1. 잠재적인 보안 문제 2. 성능 최적화 기회 3. 코드 스타일 문제 4. 가능한 버그 ``` ### 4. 새로운 기술 배우기 **Cline을 사용하여 학습:** ``` React Hooks를 배우고 싶습니다. useState, useEffect, useContext 사용법을 보여주는 샘플 프로젝트를 만들고, 각 Hook의 작동 방식을 설명하는 상세한 주석을 추가해 주세요. ``` ### 5. 빠른 프로토타이핑 **아이디어 빠르게 검증:** ``` 간단한 TODO 앱을 만들어 주세요. 요구사항: - React와 LocalStorage 사용 - 추가, 삭제, 완료 표시 기능 - 간단한 CSS 스타일링 - 단일 HTML 파일로 완성 ``` ### 6. 페어 프로그래밍 **AI와 협업 개발:** ``` 정렬 알고리즘을 구현하고 있습니다. 앞부분을 작성했으니 나머지를 완성해 주세요: function quickSort(arr) { if (arr.length <= 1) return arr; const pivot = arr[0]; // 구현을 계속해 주세요... } ``` ## 기능 하이라이트 Cline + APIMart로 다음을 할 수 있습니다: * 💻 **지능형 코드 생성** - 자연어 설명에서 고품질 코드 생성 * 🔧 **코드 리팩토링** - 코드 구조와 성능 자동 최적화 * 🐛 **버그 디버깅 지원** - 코드 문제를 빠르게 찾아 수정 * 📝 **문서 생성** - 주석, README, API 문서 생성 * 🧪 **테스트 케이스 작성** - 단위 테스트와 통합 테스트 자동 생성 * 🔄 **코드 마이그레이션** - 언어 변환, 프레임워크 마이그레이션 * 💡 **코드 설명** - 복잡한 코드 로직 이해 * 🎯 **모범 사례 제안** - 코드 표준과 최적화 조언 제공 * 🚀 **빠른 프로토타이핑** - 아이디어와 개념 빠르게 검증 * 🤖 **터미널 명령 실행** - 개발 명령 자동 실행 ## 키보드 단축키 Cline 일반 단축키: | 단축키 | 기능 | 설명 | | ------------------------------ | -------------- | --------------- | | `Ctrl+Shift+P` / `Cmd+Shift+P` | 명령 팔레트 | 모든 Cline 명령 액세스 | | `Ctrl+Shift+X` / `Cmd+Shift+X` | 확장 프로그램 마켓플레이스 | 확장 프로그램 설치 및 관리 | | Cline 아이콘 클릭 | 사이드바 열기/닫기 | Cline 빠른 액세스 | | `Ctrl+K Ctrl+I` | 인라인 제안 | 편집기에서 AI 제안 받기 | **팁:** VSCode의 키보드 단축키 설정에서 Cline의 단축키를 사용자 정의할 수 있습니다. ## 모범 사례 ### 1. 명확한 작업 설명 ❌ **좋지 않은 질문:** ``` 로그인 기능 만들어 ``` ✅ **좋은 질문:** ``` 다음 요구사항으로 사용자 로그인 기능을 만들어 주세요: - React와 TypeScript 사용 - 폼 검증 (이메일 형식, 비밀번호 길이) - axios를 사용하여 API 호출 - 로그인 성공 시 JWT 토큰을 localStorage에 저장 - 오류 처리 및 사용자 피드백 ``` ### 2. 컨텍스트 정보 제공 **프로젝트 관련 정보 포함:** * 사용 중인 기술 스택과 프레임워크 * 관련 파일 구조 * 기존 코드 규칙 * 서드파티 라이브러리 종속성 ### 3. 반복적 개선 **처음부터 완벽을 기대하지 않기:** 1. 먼저 기본 기능 생성 2. 테스트 및 검증 3. 개선 피드백 제공 4. 점진적으로 개선 ### 4. 코드 리뷰 **생성된 코드는 항상 리뷰:** * 논리적 정확성 확인 * 보안 검증 * 엣지 케이스 테스트 * 프로젝트 표준 준수 확인 ### 5. 대화 연속성 유지 **컨텍스트 연속성 활용:** ``` 라운드 1: 사용자 모델 생성 라운드 2: 방금 만든 모델을 기반으로 CRUD 엔드포인트 생성 라운드 3: 이 엔드포인트에 권한 검증 추가 ``` ## 지원 및 도움말 문제가 발생한 경우: * 📚 [APIMart 문서](https://docs.apimart.ai) * 📚 [Cline 공식 문서](https://github.com/clinebot/cline) * 💬 [Discord 커뮤니티](https://discord.gg/V8zqssyZ5c) * 🐦 [Twitter @APIMart\_](https://x.com/APIMart_) * 📧 기술 지원: [zhihong@apimart.ai](mailto:zhihong@apimart.ai) ## 비디오 튜토리얼 **곧 출시:** Cline + APIMart의 다양한 사용 사례와 모범 사례를 다루는 상세한 비디오 튜토리얼을 준비 중입니다. *** 지금 APIMart에 등록하고 API 키를 받아 VSCode에서 AI 지원 개발을 경험하세요!