ChatGPT를 VSCode 확장으로 연동하기 (1) — 환경 구축과 목표 설정

최근 개발 방식은 단순히 도구를 사용하는 수준을 넘어, AI 모델을 개발 워크플로우 내부에 통합하는 방향으로 변화하고 있다. 특히 OpenAI 기반 모델은 코드 이해, 리팩터링, 파일 생성, 테스트 보조 등 다양한 기능을 수행할 수 있어 IDE 수준의 도구와 결합할 경우 기존 개발 방식보다 높은 생산성을 기대할 수 있다.

이번 시리즈는 ChatGPT(OpenAI API)를 Visual Studio Code Extension과 직접 연결해, 개발 환경 내부에서 코드 생성 및 자동화 기능을 수행하는 구조를 만드는 과정을 기록한다. 목표는 다음과 같다.

---

목표

1. ChatGPT를 VSCode 확장 내부에서 직접 호출할 수 있도록 구성한다.
2. 브라우저나 외부 창 없이 VSCode 내에서 AI와 상호작용할 수 있는 UI를 구축한다.
3. 명령 기반 기능을 구현한다.
   • /analyze → 프로젝트 구조 분석
   • /refactor → 현재 파일 리팩터링
   • /create → 새로운 코드 파일 생성
4. 최종적으로 원하는 기능을 개발자가 자연어 입력으로 실행할 수 있는 환경을 구축한다.

---

왜 VSCode 확장을 선택하는가?

AI를 웹사이트 또는 CLI에서 호출하는 방식과 달리, VSCode와 직접 결합하면 다음과 같은 장점이 있다.

• 코드와 모델 입력 컨텍스트가 동일한 공간에 존재한다.
• 파일 생성, 수정, 분석이 즉시 수행된다.
• 복사/붙여넣기 과정 없이 개발 흐름을 유지할 수 있다.
• AI가 프로젝트 전체 구조를 읽고 맥락 기반 도움을 줄 수 있다.

즉, AI가 단순한 질문 응답 도구가 아니라 IDE 내부 실행 가능한 자동화 엔진으로 동작하도록 만드는 것이 목적이다.

---

작업 환경 준비

1) VSCode Extension Generator 설치

VSCode 확장을 개발할 수 있는 공식 Yeoman 기반 스캐폴딩 도구를 설치한다.

 

npm install -g yo generator-code

2) 확장 템플릿 생성

yo code

 

다음과 같이 선택한다.

? What type of extension do you want to create? > New Extension (TypeScript)

이후 이름, 설명, 식별자 등을 입력하면 확장 템플릿 구조가 생성된다.

---

프로젝트 실행 테스트

확장 프로젝트를 VSCode로 열고 실행한다.

1. Ctrl + Shift + B (빌드)
2. F5 실행 → 새로운 VSCode 창이 열림

이 창은 Extension Host 환경이며, 작성한 기능이 실제로 동작하는 실행 대상이다.

---

OpenAI API Key 연동

OpenAI 기반 모델을 사용하기 위해 API Key가 필요하다. 아래에서 발급 가능하다.

https://platform.openai.com/

Windows 환경 기준, 환경 변수 등록은 다음과 같다.

setx OPENAI_API_KEY "YOUR_KEY"

등록 후 새로운 터미널에서 다음 명령으로 확인한다.

echo %OPENAI_API_KEY%

---

현재까지 진행된 상태

• VSCode Extension 템플릿 생성 완료
• Extension Host 실행 확인
• OpenAI API Key 연동 준비 완료

다음 단계에서는 WebView UI를 통해 확장 내부에서 ChatGPT와 상호작용할 수 있는 기본 인터페이스를 구축하고, 메시지를 웹뷰 → 익스텐션 → OpenAI API → 응답 반환 경로로 연결할 예정이다.