VC 심사역의 바이브 코딩 개발기 -3.1-
VS Code + Copilot과의 첫 만남
안녕하세요, 스타트업에 투자하는 VC 심사역 그믐입니다. 지난 글에서 Lovable을 사용해 WOW 레이드 대시보드의 MVP를 만든 이야기를 공유했습니다. 오늘은 그 프로젝트를 VS Code와 Copilot으로 가져와서 본격적으로 개발자 코스프레를 시작한 이야기를 들려드리겠습니다.
토큰의 제약에서 벗어나기
Lovable로 만든 프로토타입은 꽤 마음에 들었습니다. 하지만 문제가 있었죠. 무언가를 수정할 때마다 토큰을 소비한다는 것이었습니다. 제한된 토큰으로는 제가 원하는 모든 수정사항을 구현하기 어려웠습니다.
'이 프로젝트의 소스코드를 내가 직접 가지고 있으면, AI의 도움을 받아 무제한으로 수정할 수 있지 않을까?'
이런 생각에 Lovable 화면을 둘러보다가 어디선가 본 듯한 GitHub 아이콘을 발견했습니다. 클릭해보니 내 GitHub 계정과 연결할 수 있더군요. 순간 깨달았습니다. 'Lovable이 만든 코드를 내 GitHub에 저장할 수 있구나!'
GitHub와의 첫 만남: Download ZIP의 함정
처음엔 GitHub이 뭔지도 잘 몰랐습니다. 그저 코드를 저장하는 클라우드 정도로만 생각했죠. 계정을 만들고 Lovable과 연결하니, 제 프로젝트 코드가 GitHub에 올라가는 걸 확인할 수 있었습니다.
이제 문제는 이 코드를 어떻게 내 컴퓨터로 가져오느냐였습니다. GitHub 화면에서 초록색 "< > Code" 버튼을 발견했고, 그 안에 "Download ZIP"이라는 친숙한 옵션이 있었습니다.
'아, 그냥 압축파일로 다운받으면 되는구나!'
지금 생각하면 참 초보적인 선택이었지만, 당시엔 그게 가장 직관적인 방법이었습니다. (나중에야 Clone이라는 더 적절한 방법이 있다는 걸 알게 되었죠.)
VS Code의 세계로: "프로젝트 실행해줘"
VS Code를 설치하고 압축 푼 폴더를 열었습니다. 화면에는 수많은 파일들이 나타났는데, 뭘 해야 할지 전혀 감이 잡히지 않았습니다. 그래서 Copilot Agent 창에 다짜고짜 이렇게 입력했습니다:
"프로젝트 실행해줘"
놀랍게도 Copilot은 README.md 파일을 찾아 읽더니, 이 프로젝트를 실행하려면 Vite, TypeScript, React 등의 설치가 필요하다고 알려주었습니다. 그리고 package.json에 있는 의존성들을 설치하려면 npm을 사용해야 한다고 했죠.
환경설정의 늪: 1시간의 고군분투
"npm install을 실행하세요"라는 Copilot의 지시를 따랐지만, 터미널에는 빨간 에러 메시지만 가득했습니다.
'npm'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다.
알고 보니 npm을 사용하려면 먼저 Node.js를 설치해야 했습니다. Node.js를 설치했지만 여전히 npm 명령어가 작동하지 않았습니다. 환경변수 설정이 필요했던 거죠.
이 문제를 해결하는 데만 1시간이 걸렸습니다. ChatGPT에 에러 메시지 스크린샷을 찍어 보여주고, 환경변수 설정 방법을 하나하나 따라 했습니다. Windows의 환경변수 설정 창을 처음 열어본 순간, '내가 지금 뭘 하고 있는 거지?'라는 생각이 들기도 했습니다.
폴더 중첩의 함정
환경설정 문제를 해결하고 나니 새로운 문제가 나타났습니다. GitHub에서 ZIP 파일로 다운받은 뒤 Clone으로 다시 받으면서, raid-roster-nexus-main이라는 중첩된 폴더 구조가 생겨버린 겁니다.
이게 얼마나 큰 문제였는지는 나중에야 알게 되었습니다. Copilot에게 수정을 요청하면, 어떤 때는 상위 폴더의 코드를 수정하고, 어떤 때는 하위 폴더의 코드를 수정했습니다. 제가 개발 서버에서 확인하는 것과 실제 수정되는 코드가 다른 경우도 있었죠.
"왜 수정사항이 반영이 안 되지?"
한참을 고민하다 보니, Copilot이 다른 폴더의 코드를 수정하고 있었던 겁니다. 코드를 직접 읽고 이해할 수 없었던 저는 어느 파일을 건드려야 하는지 정확히 몰랐고, AI도 이 부분을 계속 혼동하면서 결국 코드가 누더기가 되어갔습니다.
Copilot이 내 프로젝트를 이해하는 순간
혼란스러운 상황이었지만, 한 가지 놀라운 경험이 있었습니다. 제가 작성했던 PRD를 Copilot에게 보여주고 "전체를 한번 읽어봐달라"고 요청했을 때의 일입니다.
Copilot은 PRD를 읽고 나서 저보다 훨씬 더 이 프로그램의 구조와 사용된 기술, 신경 써야 할 부분들을 잘 이해하고 있다는 느낌을 받았습니다. 제가 막연하게 생각했던 것들을 전문적이고 구체적인 용어로 설명해주었죠.
특히 인상적이었던 건 WOW의 직업과 특성을 구현할 때였습니다. 저는 13개 직업과 각각의 3개 특성을 일일이 설명해줘야 한다고 생각했는데, Copilot은 이미 그 내용을 알고 있었습니다.
"직업 외에 특성 추가하는 란을 만들어줘"
이 간단한 요청만으로 Copilot은 전사의 무기/분노/방어, 성기사의 신성/보호/징벌 등 모든 직업의 특성 리스트를 정확하게 구현해주었습니다. 심지어 각 특성에 맞는 속성값까지 부여하면서요.
개발자가 된 것 같았던 첫날
첫날의 경험은 한마디로 "혼돈 속의 희망"이었습니다. 환경설정으로 1시간을 날리고, 폴더 구조 때문에 헤매고, 코드가 어디서 수정되는지도 모르는 상황이었지만, 동시에 Copilot이라는 강력한 조력자를 얻었다는 확신이 들었습니다.
특히 제가 "프로젝트 실행해줘"라고 막무가내로 요청했을 때도 Copilot이 알아서 필요한 것들을 찾아내고 안내해준 것이 인상적이었습니다. 마치 경험 많은 선배 개발자가 옆에서 하나하나 가르쳐주는 느낌이었죠.
물론 아직 Git이 뭔지, 브랜치가 뭔지, 커밋이 뭘 의미하는지도 모르는 상태였습니다. 하지만 이날의 경험으로 확신했습니다. 'AI와 함께라면 진짜 내가 원하는 프로그램을 만들 수 있겠다!'
다음 글에서는 이렇게 시작한 개발이 어떻게 폭주하게 되었는지, Spec-Icon을 찾아 적용하고 UI를 대폭 개선하며 배포까지 도전한 짜릿한 여정을 공유하겠습니다. 특히 프로젝트가 완전히 망가졌다가 Git으로 되살아난 극적인 순간도 기대해주세요!
#바이브코딩 #VC심사역 #VSCode #Copilot
