연산배틀 제작기로 풀어보는 비개발자의 바이브 코딩 도전기 – Prologue

임가비 실험실의 첫 바이브 코딩

<연산배틀>이 바이브 코딩 첫 도전작은 아닙니다. 유튜브 몇 개 보다가, 혹시 이런 것도 되나? 싶어서 처음 만들었던 것은 <사주 확인하기>예요. 순도 100%의 HTML과 CSS와 자바스크립트로만 이루어진 초초 노가다의 결정이죠. 제미나이의 캔버스 기능을 활용해 만들었습니다. 지금 보니, 처음 프롬프트도 정말, 게으르기 짝이 없었군요.

그런데 이 간단한 프롬프트 한 마디로 제미나이가 뚝딱 내놓은 것은 멀쩡한 웹페이지였어요. 정말로 생년월일을 입력하니 사주 여덟 글자를 내놓더라고요. 문제는… 죄다 틀렸다는 거였지만요.

사주 계산의 기본 로직이 틀렸는데, 이걸 제대로 고치질 못하더라고요. 결국 샘플로 뽑은 생년월일을 30개 정도 계속 입력하면서 어디가 틀렸는지 찾아서 미세 조정을 해야만 했습니다.

한… 8시간 동안 생년월일 입력하고 검토하고, 틀린 점 지적해주고, 다시 검토하고, 또 틀린 점 지적해주고… 무한 반복이었죠. 덕분에, 이걸 만들고 나서는 어떤 느낌이었냐면, ‘오! 다른 것도 할 수 있겠다!’보다는 ‘내가 이걸 다시 하면 내가 아니다’였습니다.

그 이후로도, 음력 생일을 양력 생일로 변환하는 과정에서도 문제가 터져 며칠은 더 고생을 해야 했습니다. 이 과정에서 깨달은 것은 바로…

바이브 코딩? 이건 인내력 테스트다.

처음부터 완벽한 결과물을 내는 건 당연히 불가능합니다. AI도, 사람도 처음에 생각하지 못했던 부분이 무조건 있을 수밖에 없고, 이런 부분은 보완하고 수정해야 합니다. 그런데 문제는, 아무리 AI가 직접 짠 코드라도, AI가 그 코드 구조를 다 파악하고 있는 게 절대 아니예요. 문제를 파악하고 수정하는 과정에서 코드를 다시 파악합니다.

즉, AI가 어떤 문제를 해결하기 위해 시도했던 방식을 모두 기억하는 게 아니라는 말입니다. 예를 들면 이런 거죠.

사람: A에 문제가 있어. 고쳐줘.
AI: A에 문제가 있어 불편하셨군요. A'로 고쳤습니다.
사람: 문제가 여전히 있는데? 원인이 뭔지 파악하고 다시 수정해줘.
AI: A'에 문제가 있군요. 죄송합니다. 원인을 파악하고 A로 고쳤습니다. 이제 제대로 작동할 것입니다.
사람: ?? A에 문제가 있다니까?
AI: 지속적인 문제로 불편을 드려 죄송합니다. 원인을 파악하고 A'로 고쳤습니다. 이제 제대로 작동할 것입니다.
사람: ...메;ㅐㅇㄴ러ㅔ배ㅑㅈ더세ㅐㅑ멍ㄴ레ㅐㅑㅓ

주로 언제 이런 문제가 발생하냐면, 스레드가 길어졌을 때 이런 일이 발생하더라고요. 이런 경우는 과감히 끊고 소스를 그대로 가져다가 새로운 스레드로 시작해야 합니다. 특히 제미나이에서는요.

이걸 겪으며 바이브 코딩에 필요한 능력은 이런 게 아닐까 생각한 것은,

• AI가 내놓는 해결책이 정말 문제의 핵심을 겨냥한 것인지 파악하는 눈
• 그게 아니더라도 얘가 같은 해결책을 반복해 내놓고 있는 게 아닌지 가늠할 수 있는 센스

이 두 가지는 필수적이지 않을까 했어요.

제미나이 말고 다른 애들은 어떻게 하지?

제미나이로 이렇게 🐶고생을 했는데, 하나만 만들고 접기 너무 아깝더라고요. 다른 AI들은 어떻게 하는지 궁금하기도 했고요. 그래서 챗GPT한테 무작정 프롬프트 넣고 구현해봤던 게 바로 챗GPT와 Replit으로 구현한 <연산배틀 프로토타입>이었습니다.

이걸 만들 때에는 우선, 제가 생각한 아이디어를 간단히 넣고 유저플로우를 짜달라고 했어요. 활용했던 AI는 챗GPT, 클로드, 제미나이 세 가지였는데, 그 중 챗GPT한테 ‘이걸 너랑 같이 만들려면 어떻게 해야 해?’라고 물어봤던 걸로 물 흐르듯 만들게 된 것이었죠.

처음부터 챗GPT로만 만들려고 했던 건 아니고, 선풍적 인기를 끌고 있다는 Lovable을 활용해서 프로토타입을 만들어보고 싶었어요. 하지만, 2인 이상 동시 접속이 필요한 <연산배틀>은 Lovable에서는 구현이 불가능하다고 하더라고요.

그래서 이걸 당장 만들어보려면 어떻게 해야 하냐 묻고 챗GPT가 주는 가이드대로 따라하다 보니.. 조금 못생긴 프로토타입이 뿅!

하루 재미있게 놀기는 했지만.. 영 이걸로는 성에 안 차더라고요. 그래서 바이브 코딩할 때 남들 다 쓴다는 커서 AI X 클로드를 써보기로 한 거죠.

그래서 커서 AI와 클로드 활용은 과연 쉬웠을까요?