바이브코딩, 그리고 ChatGPT. 이 조합이 지금 제 개발 인생의 가장 큰 동력입니다. 최근 저는 이 조합을 바탕으로, 제게 꼭 필요한 VS Code 확장 프로그램을 하나 직접 만들고 있습니다. 이름하여, ‘기획형 바이브코딩 도우미’.
아이디어의 시작: 왜 이런 확장 프로그램이 필요했을까?
챗지피티에게 글을 써달라고 했더니 아주 소설을 써놔서 도입부분은 좀 고쳐야겠습니다. 바이브 코딩으로 꽤나 여러개의 프로그램을 만들었습니다. 매번 전체 코드를 복사해서 주고 질문과 함께 수정된 코드를 받는 방식을 주로 사용했었습니다.
어쩔수 없었어요. 그때는 프로젝트 기능이 없었기 때문에 파일을 주거나 파일의 내용을 주는 수밖에 없었거든요. 무작정 그렇게 하다가 폴더 구조를 짜서 그 구조를 주면서 코드 수정을 요청하면 좀더 수월하게 코드 수정을 할 수 있었죠.
챗지피티에 프로젝트 기능이 나오고 나서 이미 작성한 코드나 기획문서를 프로젝트 파일로 넣어두고 기본 지침을 작성해서 프로그램을 만들었습니다. 그런데 이렇게 해도 채팅이 길어지면서 나오는 문제, 그리고 중간중간 치고들어오는 궁금증 해결을 한채팅에서 해서 끊기는 맥락이 고질적인 문제였죠.
그래서 여러개의 채팅창을 띄워놓거나 여러개의 ai를 사용한 적도 있습니다. 이게 가장 큰 문제였고, 또 다른 문제들도 많았는데, 코드를 하나하나 복사 붙여넣기 하는거였죠. 전체를 다 복사해야 제대로 코드를 주는 편이어서 그렇게 해야했고, 맥락이 자꾸 끊겼습니다.
새창을 열어서 기존 하던 작업을 요약해서 주고 이어서 작성하기도 했는데 그러면 코드가 아예 달라지는 경우도 있고, 전체 코드를 주게되면 금방 맥락이 또 끊기게 되더군요.
커서같은 도구를 쓰면 괜찮은가 싶었는데 비슷한 윈드서프를 vscode에 깔아 써봤는데 원하는 만큼의 활용을 할 수 있을지는 모르겠더라고요. 바이브 코더, 비개발자를 위한 툴이 맞는 것인지도 좀의문이었습니다.
기획부터 파일생성, 코드작성까지 연결해서 진행할 수 있으면 좋겠는데 이건 코드를 수정할 수 있는 개발자들에게 편리한 툴인거 같더라고요. 그래서 나도 한번 vscode 확장프로그램으로 내 바이브코딩을 도와줄 도구를 만들어보자 생각했습니다.
이 확장 프로그램은 무엇을 할 수 있을까?
제가 만들고 있는 확장 프로그램의 핵심 기능은 이렇습니다.
- 자연어로 기획 내용을 입력하면, 이를 기반으로 PRD 문서를 생성
- 입력된 시나리오를 분석해 폴더/파일 구조 자동 생성
- ChatGPT API와 연동하여, 자연어 명령으로 원하는 코드 작성
- 맥락을 잃지 않는 코드 이어쓰기 및 보완 기능
사실상, 프로젝트 기획부터 코드 구현까지의 전 과정을 VS Code 내에서 끊김 없이 수행할 수 있는 환경을 만들고 있는 셈입니다. 저는 이걸 ‘IDE 내 일체형 바이브코딩’이라고 부릅니다.
기획서 → 폴더 구조 → 코드 생성까지의 흐름
예전엔 이 흐름을 손으로 하나하나 했습니다. 기획 문서 작성은 Notion에서, 폴더 구조는 손수 만들고, ChatGPT에서 코드를 받아서 VS Code에 붙여넣는 식이었죠. 그런데 이 모든 과정을 확장 프로그램이 자동으로 해준다면?
제가 구현 중인 흐름은 이렇습니다:
- 사용자가 자연어로 ‘무엇을 만들고 싶은지’ 적는다.
- 확장 프로그램이 이 내용을 분석하여 PRD 문서화.
- 해당 기획을 바탕으로 추천 폴더/파일 구조 생성.
- 각 파일 내부에 ChatGPT가 자동으로 코드 작성.
이 과정에서 가장 중점을 둔 것은 ‘맥락 유지’입니다. 단순히 프롬프트 하나로 끝나는 것이 아니라, 사용자가 무슨 목적을 갖고 있는지, 지금 어떤 코드를 보고 있는지를 바탕으로 자연스럽게 이어지는 코드 작성을 구현하려 했습니다.
어떻게 만들고 있는가?
ChatGPT의 도움 없이는 아마 시작조차 못했을 겁니다. 저는 매번 확장 프로그램의 구조를 어떻게 짤지, API 요청은 어떻게 처리해야 할지 등을 ChatGPT와 대화하며 설계하고 있습니다.
vscode 확장 프로그램은 안드로이드 앱을 flutter로 만들때와 비슷하게 vscode 내에서 기본적인 구조와 코드를 만들어주는 방식이더군요.
OpenAI API를 연동하는 과정은 예민한 부분이 많았지만, ChatGPT가 예시 코드와 함께 설명해주는 방식이 아주 효과적이었어요. 덕분에 간단한 API 요청 처리 구조를 잡을 수 있었습니다.
이 확장 프로그램의 궁극적 목표
바이브코딩이 ‘쉽고 빠르게 만든다’에 초점이 맞춰져 있다면, 저는 여기에 ‘맥락을 놓치지 않고 만든다’는 개념을 더하고 싶었습니다. 단순히 생성만 하고 끝나는 것이 아니라, 문서 기반 기획, 폴더 구조, 코드 작성까지 모두 하나의 연속된 흐름으로 제공하고 싶었죠.
이런 흐름을 구현한 확장 프로그램이 있다면, 누구나 자신의 아이디어를 글로 써내려가기만 해도 실제 프로젝트로 이어질 수 있습니다. 비전공자에게도 아주 유용할 수 있다고 믿습니다.
다음 목표는?
현재는 기획 기반 폴더 구조 생성, 문서 생성까지 구현한 상태입니다. 이제 남은 과제는 코드 자동 생성과 코드 보완 기능입니다. 여기에 좀 더 정교한 프롬프트 엔지니어링이 필요하고, 사용자 입력을 분석하는 로직도 보강할 예정입니다.
완성도 있는 MVP가 나오면 오픈소스로도 공개할 예정입니다. VS Code 사용자 누구나 이 흐름을 체험할 수 있도록 만드는 것이 목표입니다.
