VSCode 확장 프로그램을 바이브코딩으로 만드는 법

직접 코드를 다 짜지 않고, AI와 대화하면서 확장 프로그램을 만드는 방식은 비개발자 코더에게 매우 유리한 방법입니다. 이 글은 Node.js, TypeScript, VS Code 확장의 기본 구조를 기반으로, 프론트엔드와 백엔드를 통합한 AI 기반 개발 흐름을 간결하게 설명합니다.

1. Node.js 요약 (백엔드 기반)

자바스크립트를 실행하는 런타임
패키지 설치: npm install [패키지명]
AI API 호출, 서버 구현, 로컬 파일 처리에 사용

2. TypeScript 요약 (정적 타입 기반 자바스크립트)

자바스크립트 + 타입
에러를 사전에 확인할 수 있어 안정적인 개발 가능
AI가 추천한 코드를 안전하게 활용할 수 있음
.ts 파일로 작성, npx tsc로 .js로 컴파일

3. VS Code 확장 기본 구조

package.json: 확장 설정 파일 (명령어, 아이콘, 진입점 등)
extension.ts: 주요 로직 실행 파일
activationEvents: 확장이 어떤 조건에서 실행될지 정의

4. 프론트 + 백엔드를 아우르는 구조

VS Code 확장은 프론트엔드(Webview)와 백엔드(Node.js/TS API)를 모두 다루는 도구입니다.

my-extension/
├── src/
│   ├── extension.ts       ← 확장 진입점
│   └── webview-ui/        ← HTML/CSS/JS or React (프론트)
├── package.json
├── tsconfig.json
└── out/

프론트(Webview)와 확장(extension.ts)은 postMessage로 통신합니다.

5. Webview란?

VS Code 창 안에 웹페이지처럼 HTML/React UI를 표시
설정 입력, 사용자 상호작용 등을 처리
프론트에서 이벤트 발생 → 확장에 전달 → API 처리

6. AI와 함께 코딩할 때 중요한 포인트

모든 문법을 외울 필요 없음
“무엇을 만들고 싶은가”에 집중
AI에게 단계별 요청 (예: 버튼 추가해줘 → 이 버튼이 누르면 API 호출해줘)

7. 꼭 알아야 할 키워드 요약

항목	설명
Node.js	백엔드 환경 (패키지 설치, API 호출)
TypeScript	타입 기반 JS, 안정적인 코드 작성
VS Code API	에디터 기능 확장 도구
Webview	프론트 UI 구현
postMessage	확장 ↔ Webview 통신 방식
JSON	API 응답 및 설정 포맷