비개발자가 바이브코딩 시작하기 전 꼭 준비할 것 3가지
비개발자 PM 취준생의 바이브코딩 기록/레슨런 #4
맨땅에 헤딩도 제대로 하는 방법이 분명 있다. 그걸 알지 못했던 나는 앞선 글에서 바이브코딩을 대충 시작했다가 대차게 망했던 경우에 대해 소개했었다. 버그를 수정하는 데에 한나절이 걸려 문제를 확인해보니 모든 요소들이 거대한 쓰레기 섬처럼 체계 없이 뭉쳐 있었던 게 원인이었다.
https://brunch.co.kr/@jadusprinkles/13
(이전 글을 읽지 않으셨다면 읽고 오시는 것을 추천드립니다)
이번 글에서는 이 망작을 폐기한 이후 체계적인 구조로 다시 프로젝트를 시작할 수 있었던 방법을 크게 세 갈래로 나누어 소개하도록 하겠다.
바이브코딩을 시작하기 전 꼭 준비해야 할 것들
1. 기획자의 일
Q: 기획은 어느 정도로 되어 있어야 하는가?
A: 중간중간 기획을 피봇할 가능성을 최소화해야 한다.
우리 같은 코딩 까막눈들은 중간중간 상세 기획을 피봇할 수 있는 능력이 없다. 물론 커서한테 시키면 어찌저찌 해내겠지만 그러는 데 시간도 많이 걸릴 뿐더러 예정에 없던 기획 수정은 다른 기획들과 충돌할 가능성도 있다. 그러니 아래의 기획은 꼭 준비하고 시작하도록 하자.
준비해야 하는 것들
- PRD (왜 이 제품을 만드는가?)
- 기능정의서 (기능들은 어떻게 작동하는가?)
- IA와 와이어프레임 (어디에 무엇이 있는가?)
이렇게까지 하면 첫걸음을 뗄 준비가 된 것!
그러나 이 정도에서 바이브코딩으로 돌입해버린다면 시장성에 영향을 줄 정도로 완성도 낮은 화면들로 구성된 프로그램을 만들게 된다.
2. 디자이너의 일
위 한계를 극복하기 위해서는 디자이너의 일도 직접 도맡아야 한다. 하지만 본인이 디자인 역량이 없더라도 걱정할 것 없다. 바이브 디자인(?)도 가능하기 때문.
이런 사람들의 경우 디자인과 퍼블리싱을 동시에 할 수 있는 방법이 있으니 이를 따르길 권장한다(퍼블리싱이란 피그마 등으로 만들어둔 디자인을 코드로 옮기는 작업을 말한다).
그 방법은 바로 클로드 활용하기. Cursor 안에서 Claude API를 사용하는 게 아닌, 클로드 웹사이트에서 직접 바이브 코딩을 하는 것이다.
다른 AI나 Cursor가 아닌 클로드를 활용하는 이유는 작업 중인 화면을 옆에 시각화해 주기 때문이다.
클로드에게 와이어프레임 구현을 시키면 디자인+퍼블리싱된 결과를 옆의 화면에 이렇게 띄워서 보여 준다. 뿐만 아니라 수정하는 내용들도 실시간으로 업데이트되어 반영된다. 코드를 직접 확인해볼 수 있다는 것도 장점. 다른 AI 서비스에는 아직 없는 기능이니 이걸 잘 활용하자.
준비해야 하는 것들
- 각 화면들의 프론트엔드 코드
이렇게 클로드를 활용해 와이어프레임으로 구성한 모든 화면들의 프론트엔드 코드 파일을 미리 마련해 두자. 하나의 플로우(ex. 온보딩)에 속하는 화면들이라면 2~3개 정도는 하나의 코드 파일 안에 만들어도 괜찮다.
3. 개발자의 일
여기까지 완성되었다면 이제 가지고 있는 프론트엔드 코드를 개발로 이어붙일 차례다. 이 코드들을 탄탄하게 이어붙이려면 체계적인 구조 설계가 초기에 필요하다. 무슨 말인지 몰라도 괜찮다. AI에게 물어보면 된다.
내가 두 번째 프로젝트를 시작했던 방식
1. GPT 등 원하는 로컬 LLM에게 이전에 프로젝트를 망쳤던 배경에 대해 충분히 설명하고, 이런 문제를 겪지 않으려면 시작 전 Cursor에 어떤 내용들을 입력해야 하는지에 대해 물었다.
2. 답변받은 내용에 따라 프롬프트들을 순서대로 입력해서 초기 세팅을 완료했다.
3. 유저 플로우 단위별로 묶은 프론트엔드 코드들을 순서대로 입력하고, 플로우 하나 개발이 끝나면 다음 걸로 넘어간다.
이렇게 시작하면 첫 단추 정도는 제대로 끼웠다고 볼 수 있는 것 같다. 나도 아직 진행 중이지만 첫 시도 때처럼 구조 자체의 문제로 인해 작업이 막힌 적은 없었다.
이처럼 바이브코딩을 시작하기 전에 꼭 준비해야 하는 것들은 이렇게 크게 세 가지 갈래로 나뉜다고 생각한다. 다만 이 정도 내용으로는 설명이 한참 부족하기에 각각의 일을 구체적으로 어떻게 진행하고 있는지에 대해서는 이후 포스트로 더 자세히 소개하고자 한다.
구체적인 내용을 담은 글들은 최대한 빠르게 작성해서 발행되는 대로 이곳에 링크를 첨부할 예정이다.
매거진 구독하시고 업데이트를 받으시는 것도 좋을 것 같습니다 :)
