바이브코딩 시작, 절대 이렇게 하지 마세요
비개발자 PM 취준생의 바이브코딩 기록/레슨런 #2
이 시리즈는 Cursor로 크롬 익스텐션을 만들고 있는 개발 까막눈 PM 취준생의 이야기이다.
즉, 개발을 전혀 모르는 사람의 시점에서 하는 바이브 코딩은 난이도가 어떤지, 주로 어떤 문제를 겪고 어떻게 해결하는지에 대한 인사이트를 나누기 위한 글이다.
고로 나처럼 비개발자지만 뭔가 시작해 보고 싶으신 분께는 도움이 될 여지가 있다!
다만 이 이상의 개발 지식을 가지고 계신 분들이라면 스킵하시는 것을 조심스레 추천드린다.
(얼마나 삽질을 하고 있나 궁금하시다면 스윽 읽어보시고 조언 남겨주시면 감사히 받겠습니다)
바이브코딩 이렇게 시작하지 마세요
첫 글에도 간략하게 언급했듯이 내 첫 번째 시도는 다음과 같았다.
일단 틀부터 만들어두고 세부적인 건 Cursor랑 함께 하나씩 고쳐나가야지~ 라는 생각으로 “이런 거 하고 싶은데, 이거 만들어줘”라는 프롬프트 하나 던지기
이는 지금 보면 정말 어이없고 가히 최악의 바이브 코딩 사례로 꼽힐 만한 케이스이지만, 실제로 바이브코딩을 시작할 때에 아주 많은 사람들이 하는 대표적인 실수이기도 하다. 이렇게 하면 프로젝트를 구성하는 파일 구조부터 제대로 만들어지지 않는다. 내가 구체적으로 어떻게 시작했는지를 살펴보면 그 이유를 이해할 수 있다.
바이브코딩을 시작하며 내가 가장 먼저 한 일은 GPT에게 ‘Cursor로 크롬 익스텐션을 만들려면 어떤 프롬프트로 시작해야 해?’라고 묻는 것이었다. 그리고 그에 대해 얻은 답을 Cursor에 그대로 집어넣었다.
이렇게 시작했더니 오류 하나를 해결하는 데에 수일이 걸렸고 진행이 되지 않았다.
한참을 시도하다 커서에게 뭐가 문제냐 물으니 그제서야 다음과 같은 문제점을 발견했단다.
발견된 문제점들
단일 파일에 모든 로직 집중 - popup.js에 모든 기능이 몰려있음
복잡한 상태 관리 - 여러 인증 방식과 데이터베이스 연동이 섞임
혼재된 책임 - UI 로직, API 호출, 상태 관리가 한 파일에
디버깅 어려움 - 긴 함수들과 복잡한 의존성
테스트 불가능한 구조 - 모든 것이 강하게 결합됨
무슨 말인지 정확히는 몰라도, 뭔가 체계 없이 막무가내로 다 섞여 있다는 느낌을 강하게 받을 수 있다.
특히 js 파일 하나에 모든 내용이 다 들어갔다는 건 정말 실소 나오는 일이다. 보통 화면 1~3개를 js 파일 하나에 담는다고 하는데 여기에서는 열 개가 넘는 화면을 하나의 파일에 모두 넣어서 관리하고 있다는 소리다.
원인은 너무나 명확하다.
AI에게 모호한 오더를 내리고 처음부터 끝까지 완성하라고 했을 때 AI의 사고는 다음과 같은 구조로 돌아가기 때문이다.
1단계: 프로토타입
"일단 작동하게 만들어보자"
한 파일에 모든 기능 구현
빠른 테스트와 검증
2단계: 기능 추가
"이것도 넣어야지, 저것도 넣어야지"
기존 파일에 계속 추가
점점 파일이 커짐
결과: 복잡성 폭발
파일이 1,700줄 넘음
버그 하나 고치는데 하루 걸림
새 기능 추가 시 더 복잡해짐
AI는 분명 ‘이렇게 하지 않아야 한다’는 지식이 있지만, ‘이렇게 하지 않을 이유’를 주지 않으면 그 지식은 말짱 도루묵이 된다. 내가 머릿속에 그리고 있는 제품에 대해 AI는 전혀 모른다. 따라서 오더에 따라 결과물이 천차만별이 되는 건 당연한 수순. ‘바이브코딩을 잘하는 기술’이라는 게 딱 한 가지 있다면 그건 바로 맥락을 온전히 전달할 수 있는 커뮤니케이션 스킬일 것이다.
나는 그동안 커서가 작업들을 완료하길 기다리면서 남는 시간에 와이어프레임과 IA 등 기획을 보강했고, 화면별 프론트엔드 코드까지 마련해 두었기에(이 부분은 다음 섹션에서 설명하겠다) 프로젝트를 버리고 새로 시작하기로 결정했다.
그럼 바이브코딩 어떻게 시작하면 되나요?
그렇게 미친 망작이었던 첫 버전을 깔끔하게 삭제하고 파일 구조부터 다시 짜서 뉴 프로젝트를 시작하게 된다.. 다행히 첫 단추를 잘 끼워 체계적인 구조로 개발을 시작했다. 어떻게 시작했는지는 다음 포스팅에 작성하도록 하겠다.
지금도 원활히 진행 중인 이 프로젝트에서도 벌써 아주 많은 시행착오를 겪고 있다. 바이브코딩을 하고 계신 개발 까막눈 분들이라면 구독하셔서 제가 얻은 레슨런들을 참고하시길 바라요!
이전 글은 아래 링크에서 보실 수 있습니다 :)
https://brunch.co.kr/@jadusprinkles/6
