코드 작성 중 AI가 편집기에서 기다리고 있습니다
복잡한 함수를 작성하다가 특정 로직에서 막히는 상황은 자주 겪는 일이죠. 문서를 찾아보거나 스택오버플로우를 검색하며 시간이 흐르고, 디버깅을 반복해도 해결되지 않을 때입니다. 혹은 오래된 프로젝트를 처음 접했을 때, 수천 줄의 낯선 코드를 바라보며 진입점을 찾기조차 어려운 경우죠.
이러한 개발 현장의 현실을 변화시키는 데 ChatGLM-6B가 등장했습니다. 이 오픈소스 중영대화 모델은 웹사이트에 챗봇으로 배포하는 것이 아니라, 가장 친숙한 VSCode 편집기에 직접 통합되어 지능형 프로그래밍 동반자로 자리 잡았습니다.
이것은 개념적인 시연이 아니라 이미 실행 가능한 엔지니어링 사례입니다. ChatGLM-6B의 능력을 가벼운 VSCode 플러그인으로 포장하여, 외부 서버 없이 코드를 업로드하지 않고 모든 추론이 로컬에서 수행됩니다. 코드 일부를 선택하고 단축키를 누르면 즉시 최적화 제안을 제공하며, 주석에 "디바운스 함수를 생성해줘"라고 적으면 바로 실행 가능한 코드를 생성하고, 오류 메시지 위에 마우스를 올리면 대화처럼 오류 원인과 해결 방법을 설명합니다.
이것은 마법이 아니고, 단순한 기술 통합입니다. 대규모 모델의 의미 이해 능력을 편집기의 컨텍스트 인식 시스템에 정확하게 연결한 것입니다. 다음 섹션에서는 0부터 시작하여 실제 개발 효율성을 높이는 AI 헬퍼를 구축하는 과정을 함께 살펴보겠습니다.
왜 VSCode인가? 다른 편집기와의 차이점
1. VSCode의 생태계 우위: 편집기 이상의 기능
VSCode는 단순한 코드 편집기 이상의 확장 가능한 개발 플랫폼입니다. 작은 핵심 기능과 큰 생태계라는 설계 철학을 바탕으로, 자체적으로 경량화되면서 플러그인을 통해 기능 범위를 무한으로 확장할 수 있습니다. 이 구조는 ChatGLM-6B 같은 AI 기능 통합에 자연스럽게 적합합니다.
핵심은 VSCode가 제공하는 몇 가지 하위 API입니다. 이 API들은 AI 헬퍼가 "거리에서 속삭이는 것"이 아닌, 실제 개발 흐름에 깊이 스며들 수 있도록 합니다:
- TextDocument API: 현재 파일의 전체 내용, 커서 위치, 선택된 텍스트 블록을 실시간으로 제공하여 AI가 "작성 중인 코드를 보고 있다"는 느낌을 전달합니다.
- HoverProvider API: 마우스가 특정 심볼(변수, 함수명, 오류 정보) 위에 있을 때 맞춤형 패널을 표시하는 기능으로 오류 설명 기능의 기반이 됩니다.
- CodeActionProvider API: 코드 줄 번호 옆에 작은 불빛을 표시하여 클릭 시 일회성 수정 제안을 제공하는 핵심 인터페이스입니다.
- StatusBarItem API: 편집기 하단 상태 표시줄에 맞춤 버튼 및 상태 표시기를 추가하여 AI 헬퍼가 준비되었는지, 생각 중인지 쉽게 확인할 수 있도록 합니다.
이러한 API들이 "컨텍스트 인식"을 가능하게 하는 다리 역할을 합니다. 대비해서 많은 IDE의 플러그인 시스템은 너무 폐쇄적이거나 복잡한 JNI 호출이 필요하며, VSCode의 TypeScript/JavaScript 플러그인 개발은 문턱이 낮고 문서가 풍부하고 커뮤니티가 활발하여, 공학자는 AI 능력 연마에 집중할 수 있도록 도와줍니다.
2. ChatGLM-6B의 로컬화 가치: 프라이버시와 조작성의 보장
ChatGLM-6B를 다른 대형 모델 대신 선택한 핵심 고려사항은 실제 적용 가능성입니다. 62억 파라미터 규모의 모델은 중국어 이해 및 생성 품질을 유지하면서 INT4 양자화 기술을 통해 RTX 3060(12GB VRAM) 또는 고사양 CPU(32GB RAM)에서도 부드럽게 작동합니다.
더 중요한 것은 개발자가 가장 민감하게 느끼는 두 가지 문제를 해결합니다:
- 코드 프라이버시: 모든 코드 분석, 프롬프트 생성, 응답 추론은 로컬 머신에서 이루어져, 사업 로직, 데이터베이스 연결 문자열, 내부 API 키는 컴퓨터를 떠나지 않습니다. 금융, 행정, 의료 등 데이터 보안 요구가 엄격한 산업에서 이는 불가피한 장점입니다.
- 환경 조작성: 클라우드 서비스 할당량 신청, 복잡한 Kubernetes 클러스터 구성, API 호출 제한 또는 비용 초과 걱정 없이 로컬에서 사용할 수 있습니다. 회사 네트워크 정책이 강화되거나 원격 근무 VPN이 불안정할 때에도 AI 헬퍼는 계속 작동합니다.
이것은 이론적인 아름다운 비전이 아닙니다. 실제 테스트에서 INT4 양자화된 ChatGLM-6B 모델은 RTX 4070 개발기에서 중간 복잡도의 코드 완성 요청(약 200자 프롬프트 + 500자 컨텍스트)을 평균 3.2초 이내에 처리할 수 있습니다. 이 속도는 일상적인 '생각-코딩-검증' 사이클에 충분히 녹아들 수 있으며, 이를 방해하지 않습니다.
플러그인 아키텍처 설계: 대형 모델이 편집기 언어를 이해하도록
1. 계층 구조: 명확한 책임 경계
건강한 VSCode 플러그인은 단순히 모델 로딩과 API 호출을 하나의 파일에 넣는 것이 아닙니다. 우리는 세 계층 구조를 채택하여 각 모듈이 각자 역할을 수행하도록 하고, 유지보수와 개선을 용이하게 합니다:
- 표현 계층(Extension Layer): VSCode 플러그인의 본체로 TypeScript로 작성됩니다. 사용자 입력(단축키, 마우스 호버, 우클릭 메뉴), VSCode API를 통해 컨텍스트를 가져오고 결과를 편집기 인터페이스에 렌더링합니다. 모델 작동 방식을 모르고, 단지 "전달"과 "표시"만 담당합니다.
- 통신 계층(Bridge Layer): 전체 구조의 "통역관"으로 작용합니다. VSCode의 JavaScript 객체(예: TextDocument, Position)를 JSON으로 직렬화하여 HTTP 프로토콜로 독립적인 Python 백엔드 서비스에 전송하고, 반대로 JSON 응답을 VSCode가 이해할 수 있는 객체로 역직렬화합니다. 이 계층은 UI와 모델 간의 분리를 완벽하게 해주며, TypeScript로 인터랙션을, Python으로 모델을 처리할 수 있게 합니다.
- 모델 계층(Model Layer): 독립적인 Python Flask 애플리케이션입니다. 시작 시 ChatGLM-6B 모델(FP16, INT8, INT4 등 다양한 정밀도 지원)을 로드하고 간단한 RESTful API를 노출합니다. 요청을 받으면 요청 유형(코드 완성, 오류 설명, 문서 생성)에 따라 특정 프롬프트 템플릿을 생성하여 모델에 전달하고, 결과를 구조화하여 반환합니다. 이 서비스는 VSCode 플러그인의 일부로 함께 배포되거나 사용자가 로컬의 어떤 포트라도 배포할 수 있습니다.
이러한 계층 설계는 엄청난 유연성을 제공합니다. 예를 들어, 미래에 ChatGLM2-6B로 업그레이드하려면 단지 모델 계층의 Python 코드와 모델 파일만 교체하면 되며, 표현 계층과 통신 계층은 전혀 변경할 필요가 없습니다. 또한 팀에 맞춤형 내부 지식库 버전을 만들고자 한다면, 단지 모델 계층의 프롬프트 생성 로직만 수정하면 되며, 전면 경험은 매끄럽게 유지됩니다.
2. 핵심 기능의 프롬프트 공학: 질문이 아닌 프로그래밍 협업
대형 모델의 출력 품질은 대부분 입력 프롬프트에 좌우됩니다. 프로그래밍 헬퍼의 경우, 나쁜 프롬프트는 실행 불가능한 "가짜 코드"를 생성할 수 있습니다. 우리는 세 가지 핵심 기능에 대해 엔지니어링 중심의 프롬프트 템플릿을 설계했습니다:
- 코드 완성(Code Completion):
당신은 [언어] 전문 개발자로, 프로젝트를 도와주는 중입니다. 엄격히 다음 규칙을 준수하십시오: 1. 코드만 출력하고 아무 설명이나 마크다운, ``` 감싸지 않음 2. 코드는 문법이 맞아야 하며, 바로 편집기에 복사 붙여넣기할 수 있음 3. 모듈을 가져야 할 경우 import 문도 함께 포함 4. 코드 스타일은 컨텍스트와 일치해야 함 (예: if 문이 const라면 const 사용) 현재 파일 언어: [언어] 커서 위치 행 번호: [행 번호] 커서 앞 코드 (최대 10행): [이전 코드] 커서 뒤 코드 (최대 10행): [후행 코드] 위 정보를 바탕으로 커서 위치의 코드를 완성해주세요. - 오류 설명(Error Explanation):
당신은 초보자를 가르치는 인내심 있는 프로그래밍 멘토입니다. 편하게 설명해 주세요: 첫 번째 단계: 이 오류 메시지([오류 메시지])는 무엇을 의미하는가? 한 문장으로 요약해 주세요. 두 번째 단계: 이 오류를 가장 자주 만든 1~2가지 원인은 무엇인가요? (예: 변수 미정의, 괄호 불일치, 타입 오류) 세 번째 단계: 가장 간단하고 직접적인 수정 방법을 제시하고, 수정된 코드 예시를 함께 제공해 주세요. 전문 용어를 사용하지 말고, 친구에게 설명하는 것처럼 이야기해 주세요. - 문서 생성(Doc Generation):
당신은 전문 기술 문서 공학자입니다. 아래 [언어] 코드에 JSDoc 스타일의 주석을 생성해 주세요. 요구사항: - 표준 JSDoc 문법 (/** ... */) - @param 각 파라미터의 타입과 용도 설명 - @returns 반환값의 타입과 의미 설명 - @throws 발생할 수 있는 오류 및 원인 설명 - 간결하고 핵심만 강조, 불필요한 설명 제외 주석을 추가할 코드: [함수 코드]
이 프롬프트는 무작정 생각한 것이 아닙니다. 수십 번의 A/B 테스트 후에 정리된 것입니다. 우리가 발견한 것은, 역할을 명확히 설정하고 엄격한 출력 형식 제약을 걸고, 명확한 컨텍스트 경계를 설정하는 것이 단순히 더 똑똑한 모델보다 안정적이고 예측 가능한 높은 품질의 출력을 만들어 줍니다.
개발 실전: 첫 번째 AI 프로그래밍 헬퍼를 만드는 법
1. 환경 준비: VSCode와 Python의 협업
첫 번째 단계는 VSCode 플러그인 개발을 위한 기본 환경을 준비하는 것입니다. 이는 상상보다 간단합니다. VSCode 공식은 완벽한 스크ел레톤 도구를 제공합니다.
먼저, 컴퓨터에 Node.js(v16+)와 Python(v3.8+)이 설치되어 있는지 확인하세요. 다음 명령을 실행합니다:
# 글로벌 설치 Yeoman과 VSCode 플러그인 생성기
npm install -g yo generator-code
# 새로운 플러그인 프로젝트 생성
yo code
인터랙티브 와이즈에서 "New Extension (TypeScript)"를 선택하고, 플러그인 이름(예: chatglm-coder)과 저자 정보를 입력합니다. 몇 초 후, 완전한 플러그인 뼈대가 생성됩니다.
다음으로, 프로젝트 디렉토리에 진입하고 필요한 의존성을 설치합니다:
cd chatglm-coder
npm install
# Python 백엔드와 통신하기 위한 axios 설치
npm install axios
# 타입 정의를 위한 @types/node 설치
npm install --save-dev @types/node
이제 VSCode는 TypeScript 프로젝트를 자동으로 인식하고 tsconfig.json을 구성해 줍니다. `Ctrl+Shift+P` (Windows/Linux) 또는 `Cmd+Shift+P` (Mac)를 눌러 "Developer: Reload Window"를 입력하여 VSCode를 다시 시작하면, 새 플러그인 환경이 로드됩니다.
2. Python 백엔드: 가벼운 모델 서비스
이제 독립적인 Python 백엔드를 만듭니다. 플러그인 프로젝트의 루트 디렉토리에 `backend` 폴더를 새로 만들고 `app.py` 파일을 생성합니다:
# backend/app.py
from flask import Flask, request, jsonify
from transformers import AutoTokenizer, AutoModel
import torch
import os
app = Flask(__name__)
# 모델과 토크나이저는 애플리케이션 시작 시 한 번 로드
model_path = os.getenv("CHATGLM_MODEL_PATH", "./models/chatglm-6b-int4")
tokenizer = None
model = None
@app.before_first_request
def load_model():
global tokenizer, model
print("Loading ChatGLM-6B model...")
tokenizer = AutoTokenizer.from_pretrained(model_path, trust_remote_code=True)
# INT4 양자화 모델로 메모리 사용량 최소화
model = AutoModel.from_pretrained(model_path, trust_remote_code=True).quantize(4).half().cuda()
model = model.eval()
print("Model loaded successfully.")
@app.route('/api/completion', methods=['POST'])
def code_completion():
data = request.get_json()
prompt = data.get('prompt', '')
# ChatGLM의 대화 이력 구성
history = []
response, _ = model.chat(tokenizer, prompt, history=history)
return jsonify({
"success": True,
"response": response.strip()
})
@app.route('/api/explain', methods=['POST'])
def error_explanation():
data = request.get_json()
error_msg = data.get('error', '')
# 오류 설명용 특별 프롬프트 구성
prompt = f"""당신은 초보자를 가르치는 인내심 있는 프로그래밍 멘토입니다.
편하게 설명해 주세요:
첫 번째 단계: 이 오류 메시지({error_msg})는 무엇을 의미하는가? 한 문장으로 요약해 주세요.
두 번째 단계: 이 오류를 가장 자주 만든 1~2가지 원인은 무엇인가요?
세 번째 단계: 가장 간단하고 직접적인 수정 방법을 제시하고, 수정된 코드 예시를 함께 제공해 주세요.
전문 용어를 사용하지 말고, 친구에게 설명하는 것처럼 이야기해 주세요."""
history = []
response, _ = model.chat(tokenizer, prompt, history=history)
return jsonify({
"success": True,
"response": response.strip()
})
if __name__ == '__main__':
app.run(host='127.0.0.1', port=5000, debug=False)
이 백엔드를 실행하려면 필요한 Python 패키지를 설치해야 합니다. `backend` 디렉토리에 `requirements.txt` 파일을 생성합니다:
flask==2.3.3
transformers==4.30.2
torch==2.0.1+cu118
accelerate==0.21.0
그리고 의존성을 설치하고 모델을 다운로드합니다:
# backend 디렉토리로 이동
cd backend
# 가상 환경 생성 권장
python -m venv venv
source venv/bin/activate # Linux/Mac
# venv\Scripts\activate # Windows
# 의존성 설치
pip install -r requirements.txt
# INT4 양자화 모델 다운로드(필요시 git-lfs 설치)
git clone https://huggingface.co/THUDM/chatglm-6b-int4
마지막으로 백엔드 서비스를 실행합니다:
python app.py
콘솔에 "Model loaded successfully."가 출력되면 서비스가 준비되었습니다.
3. VSCode 플러그인 핵심: AI 능력을 편집기로 전달
이제 VSCode 플러그인의 주전장인 `src/extension.ts`에서 작업을 시작합니다. 여기서는 백엔드와의 통신 및 VSCode API 통합을 구현합니다.
먼저 `package.json`의 `contributes` 부분에 명령어와 단축키를 추가합니다:
"contributes": {
"commands": [
{
"command": "chatglm-coder.codeCompletion",
"title": "ChatGLM: 코드 완성"
},
{
"command": "chatglm-coder.explainError",
"title": "ChatGLM: 오류 설명"
}
],
"keybindings": [
{
"command": "chatglm-coder.codeCompletion",
"key": "ctrl+alt+c",
"mac": "cmd+alt+c"
},
{
"command": "chatglm-coder.explainError",
"key": "ctrl+alt+e",
"mac": "cmd+alt+e"
}
]
}
그런 다음 `extension.ts`에서 핵심 로직을 작성합니다:
// src/extension.ts
import * as vscode from 'vscode';
import * as axios from 'axios';
export function activate(context: vscode.ExtensionContext) {
// 코드 완성 명령어 등록
let disposable1 = vscode.commands.registerCommand('chatglm-coder.codeCompletion', async () => {
const editor = vscode.window.activeTextEditor;
if (!editor) return;
const document = editor.document;
const selection = editor.selection;
const wordRange = document.getWordRangeAtPosition(selection.active);
// 커서 주변 컨텍스트(최대 10행) 가져오기
const startLine = Math.max(0, selection.start.line - 10);
const endLine = Math.min(document.lineCount, selection.end.line + 10);
const contextLines = [];
for (let i = startLine; i < endLine; i++) {
contextLines.push(document.lineAt(i).text);
}
const context = contextLines.join('\n');
const language = document.languageId;
try {
// 백엔드 호출
const response = await axios.default.post('http://127.0.0.1:5000/api/completion', {
prompt: `당신은 [언어] 전문 개발자로, 프로젝트를 도와주는 중입니다.
엄격히 다음 규칙을 준수하십시오:
1. 코드만 출력하고 아무 설명이나 마크다운, ``` 감싸지 않음
2. 코드는 문법이 맞아야 하며, 바로 편집기에 복사 붙여넣기할 수 있음
3. 모듈을 가져야 할 경우 import 문도 함께 포함
4. 코드 스타일은 컨텍스트와 일치해야 함 (예: if 문이 const라면 const 사용)
현재 파일 언어: ${language}
커서 위치 행 번호: ${selection.start.line + 1}
커서 앞 코드 (최대 10행):
${context.substring(0, context.indexOf('\n', context.indexOf('\n') + 1))}
커서 뒤 코드 (최대 10행):
${context.substring(context.indexOf('\n', context.indexOf('\n') + 1))}
위 정보를 바탕으로 커서 위치의 코드를 완성해주세요.`
});
if (response.data.success) {
// AI 생성 코드를 커서 위치에 삽입
await editor.edit(editBuilder => {
editBuilder.insert(selection.active, response.data.response);
});
}
} catch (error) {
vscode.window.showErrorMessage(`AI 완성 실패: ${error}`);
}
});
// 오류 설명 명령어 등록
let disposable2 = vscode.commands.registerCommand('chatglm-coder.explainError', async () => {
const editor = vscode.window.activeTextEditor;
if (!editor) return;
const document = editor.document;
const selection = editor.selection;
const word = document.getText(selection);
if (!word.trim()) {
vscode.window.showInformationMessage('오류 메시지를 선택해 주세요');
return;
}
try {
const response = await axios.default.post('http://127.0.0.1:5000/api/explain', {
error: word.trim()
});
if (response.data.success) {
// 사이드 패널에서 설명 표시
const panel = vscode.window.createWebviewPanel(
'chatglm-explanation',
'ChatGLM 오류 설명',
vscode.ViewColumn.Beside,
{ enableScripts: true }
);
panel.webview.html = getExplanationHtml(response.data.response);
}
} catch (error) {
vscode.window.showErrorMessage(`오류 설명 실패: ${error}`);
}
});
context.subscriptions.push(disposable1);
context.subscriptions.push(disposable2);
}
function getExplanationHtml(content: string): string {
return `
<html lang="ko-KR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>오류 설명</title>
<style>
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; margin: 20px; line-height: 1.6; }
h1 { color: #007acc; }
.step { margin: 15px 0; padding-left: 20px; border-left: 3px solid #007acc; }
</style>
</head>
<body>
<h1> 오류 설명</h1>
<div class="step">${content.replace(/\n/g, '<br>')}</div>
</body>
</html>`;
}
export function deactivate() {}
이 코드는 두 가지 핵심 기능을 구현합니다: `codeCompletion` 명령어는 커서 주변의 코드 컨텍스트를 수집하고, 프롬프트를 생성하여 백엔드에 전송한 후, 생성된 코드를 편집기로 직접 삽입합니다. `explainError` 명령어는 선택된 텍스트(오류 메시지)를 백엔드에 보내고, 새로운 Webview 패널에서 HTML 형식으로 설명을 표시합니다.
4. 패키징 및 배포: AI 헬퍼를 세상에 나누기
개발이 완료되면, `.vsix` 파일로 패키징하여 다른 기기에서 설치하거나 VSCode Marketplace에 게시할 수 있습니다.
먼저 VSCode의 패키징 도구를 설치합니다:
npm install -g vsce
그리고 플러그인 프로젝트 루트 디렉토리에서 다음 명령을 실행합니다:
# VSCode Marketplace에 게시를 위해 로그인 (선택 사항)
vsce login
# 플러그인 패키징
vsce package
실행 후, 프로젝트 루트 디렉토리에서 `chatglm-coder-0.0.1.vsix` 파일을 확인할 수 있습니다. 이 파일이 바로 AI 프로그래밍 헬퍼의 설치 파일입니다.
설치하려면 VSCode에서 `Ctrl+Shift+P`를 누르고 "Extensions: Install from VSIX..."를 입력한 후 `.vsix` 파일을 선택하면 됩니다. 설치 후 VSCode를 재시작하면 `Ctrl+Alt+C`와 `Ctrl+Alt+E` 단축키를 사용해 AI 프로그래밍 여행을 시작할 수 있습니다.
팀원에게 공유하려면 이 `.vsix` 파일을 내부 공유 드라이브나 Git 저장소에 두고, 동료들이 다운로드 후 한 번에 설치할 수 있습니다. 이 과정은 외부 서비스에 의존하지 않고 완전히 사내 통제 가능합니다.
실전 효과 및 경험 요약: 정말 코드를帮你 작성할 수 있을까?
1. 실제 시나리오에서의 효과 피드백
이론이 얼마나 좋은지는 실제 코드 실전에서 입증됩니다. 우리는 세 가지 대표적인 개발 시나리오를 선정해 플러그인의 실제 성능을 테스트했습니다:
- 시나리오 1: React Hook 로직 빠른 완성 - 자주 사용되는 Hook의 의존 배열 처리에서 막혔을 때, `useEffect(() => {` 줄을 선택하고 `Ctrl+Alt+C`를 누르면 3초 이내에 올바른 의존 배열과 `cleanup` 함수 처리를 포함한 완전한 Hook 코드가 생성됩니다. 코드 스타일은 프로젝트 기존 코드와 완전히 일치합니다.
- 시나리오 2: 복잡한 TypeScript 컴파일 오류 해석 - `Type 'string | number' is not assignable to type 'string'. Type 'number' is not assignable to type 'string'.`와 같은 오류가 발생할 때, 전체 오류 메시지를 선택하고 `Ctrl+Alt+E`를 누르면 "이 오류는 당신이 배열에서 요소를 추출했지만 TypeScript에게 이것이 문자열 배열이라는 것을 알리지 않았기 때문에 발생했습니다. 가장 쉬운 해결 방법은 배열 선언 시 타입을 명시하는 것입니다." 같은 친근한 설명을 제공합니다.
- 시나리오 3: 잔존 함수에 JSDoc 생성 - 50行长의 Node.js 함수에 주석을 추가할 때, 전체 함수 본문을 선택하고 명령어를 호출하면 JSDoc이 생성됩니다. 이 JSDoc은 모든 파라미터와 반환값을 정확히 설명하고, 함수 내부에서 발생할 수 있는 `Error` 타입을 지적하여 우리가 간과했던 예외 처리 점을 알려줍니다.
이러한 사례는 잘 설계된 로컬 AI 프로그래밍 헬퍼가 개발자의 역할을 대체하는 것이 아니라, "항상 온라인인 숙련된 동료"로서 개발자의 사고 정체 시, 개념 혼란 시, 세부 사항 기억 상실 시 즉시 도움을 주는 것이 얼마나 가치 있는지를 보여줍니다.
2. 엔지니어링 실천 중 핵심 경험
이 플러그인을 демо에서 실제 사용으로 확장한 몇 달간, 우리는 몇 가지 귀중한 경험을 쌓았습니다. 이 경험들은 코드 자체보다 더 가치 있습니다:
- 모델 정밀도와 응답 속도의 균형: 우리는 초기에 FP16 정밀도 모델을 사용했지만, 8초의 평균 응답 시간으로 개발 리듬을 방해했습니다. INT4 양자화로 전환한 후, 소소한 단어 정확도 감소가 있었지만, 3초 이내의 안정적 응답으로 "가끔 사용"에서 "필수적 사용"으로 변했습니다. 엔지니어링 결정은 종종 "더 좋다"와 "충분하다" 사이에서 선택하는 것입니다.
- 프롬프트의 반복이 모델 미세 조정보다 중요: 우리는 P-Tuning을 통해 ChatGLM을 영역별로 미세 조정하는 데 많은 시간을 투자했지만, 결국 프롬프트 템플릿의 설계가 더 효과적이었습니다. "ES6 문법 사용, 화살표 함수 사용 금지"라는 프롬프트 하나가, 모델을 JavaScript 콘텐츠에 미세 조정한 것보다 더 신뢰할 수 있는 결과를 제공했습니다. 이는 AI 엔지니어링의 핵심이 종종 "인간의 엔지니어링"이어야 한다는 것을 보여줍니다.
- 오류 처리가 기능 구현보다 더 중요: 사용자들이 가장 자주 불평하는 것은 "생성된 코드가 잘못되었다"가 아니라 "눌렀는데 아무 반응도 없거나" 또는 "불명확한 오류 창이 나타난다"는 것입니다. 따라서 우리는 try-catch 구문을 추가하고, 네트워크 시간 초과, 모델 로딩 실패, CUDA 메모리 부족 등 모든 가능한 실패 상황에 대해 명확하고 친절한 사용자 알림을 제공했습니다. 안정적인 도구의 90% 코드는 10%의 예외 상황을 처리하는 데 사용됩니다.
미래 전망: 프로그래밍 헬퍼에서 개발 동반자로
개발 과정을 돌이켜보면, 우리는 단순한 VSCode 플러그인을 만들지 않았습니다. 그것은 개발자에게 더 깊이 스며들어, 각 키 누름, 마우스 호버, 코드 제출의 원자적 운영에 모두 깊이 통합된 새로운 소프트웨어 개발 패러다임을 제시했습니다.
이것은 시작일 뿐입니다. 이 기반 위에서 더 흥미로운 가능성들을 자연스럽게 확장할 수 있습니다:
- 지능형 코드 검토(Smart Code Review): PR이 Git 저장소에 제출될 때, 플러그인이 자동으로 변경을 분석하여 성능 저하점, 보안 취약점(예: SQL 인젝션 위험), 팀 규정에 어긋나는 작성 방식 등을 발견하고 구체적인 리팩토링 제안을 제공합니다.
- 파일 간 컨텍스트 이해: 현재 파일만 보는 것이 아니라, VSCode의 `workspace.findFiles` API를 사용해 전체 프로젝트를 스캔하여 하나의 함수가 다른 수십 개 파일에서 어떻게 호출되는지 이해하게 되며, 수정 시 영향받는 범위를 미리 경고합니다.
- 개인화된 학습 동반자: 플러그인이 자주 묻는 질문 유형(예: 항상 "Promise로 콜백을 재구성하는 방법"을 묻는 경우)을 기록하고, 관련 학습 자료, 최선의 실천 문서, 개인화된 연습 문제를 추천하거나 생성합니다.
기술의 발전은 더 화려한 장난감을 만드는 것이 아니라, 개발자가 아닌 사람이 해야 할 반복적인 노동을 해소하는 데 있습니다. 코드의 매개변수 순서를 찾는데 30분을 보내는 것을 더 이상 필요치 않으며, 자연어로 요구사항을 설명하면 바로 실행 가능한 코드 프레임워크를 제공받고, 낯선 오류에 대해 친구처럼 친절한 설명을 받을 때, 그 순간에야 진정한 기술이 주는 자유를 느낍니다.
이 모든 것들은 VSCode에 설치한 작은 플러그인에서 시작됩니다.