비개발자 둘이서 바이브 코딩으로 해커톤 1등을 해버린 후기

.. 라고 패기롭게 제목을 쓰긴 했으나 사실 내 예상보다 주변에서 더 뿌듯해해주셔서(?) 신기했던 그런 후기.

영어버전 글 링크: Medium 바로가기

그러니까 이것은 일주일 전, 3년 반 동안 청춘을 바쳐(?) 일했던 회사에서의 퇴사를 앞두고, 왠지 다소 헛헛한 기분을 느끼고 있던 어느 날의 이야기다. 사실 친구와 캠핑을 가기로 금-토 일정이 예정되어 있었으나, 궁금해서 몇개 참석해본 비들위크 행사에서 불과 1년 전의 행사장들 분위기와도 확연히 달라진 어떠한 기조를 느껴버린 나.

퇴사 직전이라고 이대로 뇌 빼고 쉬러 가버리기엔 아쉬운 타이밍이라는 생각이 들었고, 그래서 우선 급하게 캠핑 일정을 취소하고 당장 그 다음날이었던 금요일부터 어떤 행사에 돌아다녀볼지 고민을 하고 있던 찰나였다.

그 때 문득 같은 업계에서 종사 중인 고등학교 동창 친구에게서 온 연락. (모 팀에서 BD로 재직 중이심) "희주야 이거 해커톤 같이 나갈래? 근데 내일까지 제출해야 함 ^^;"

2023년을 마지막으로 해커톤을 나가지 않고 있었는데 오랜만에 해커톤이라니? (심장이 반응)

게다가 나 같은 갭찔이(=개발 찌질이)도 이제는 클로드 코드와 함께라면 뭐든지 만들 수 있는 세상이라니? (2차 반응)

심지어 벌써 하루가 다 저물었는데 내일까지 제출이라니? 이런 제약 환경.. 나의 변태적인 성취욕을 자극한다.. (3차 반응)

심장이 반응하면 뭐든지 해야만 직성이 풀리는 나는 그리하여 고민도 하지 않고 "오 좋아!" 라고 답장을 보내게 되었던 것이다. 그동안 회사 일만 해도 너무 바빠서 해커톤 같은 거도 많이 못 나갔었는데 좋은 기회란 생각이 들었달까?

그래서 일단 각자 너무 늦었으니 숙면을 취하고 (?) 다음날 오후 1시쯤 만나서 점심을 먹으며 뭘 만들면 좋을지 서로 얘기를 나누기 시작했다. 지금 돌이켜보면 무슨 패기였지? 싶긴 함

일단 해커톤에서 제일 중요한 것은 내가 보기에는 "아이디에이션"인데, (왜냐면 사실 해커톤에서는 엄청난 완성도를 요한다기보다는 우선 작동하는 POC 버전을 만들기만 해도 개발 파트는 통과다.) 아이디어가 단순히 실용적인지를 넘어서 해당 해커톤의 여러 트랙에 동시에 출품할 수 있는지 또한 중요한 요소기 때문이다. 물론 말도 안되게 이거저거 갖다 붙이는 건 의미 없고, 실제로 스폰서하는 팀들의 여러 기술과 장점들을 어떻게 하면 최대한 살릴 수 있는 아이디어를 낼 수 있는지가 중요하달까..

여튼 서로의 클로드한테 각자 원하는 방향성을 넣고 agent team을 수차례 돌리며 서로의 .md 파일들을 주고받기를 수차례 반복한 끝에, Bargo의 아이디어와 아키텍처가 탄생하게 되었다. 사실 나 혼자 생각했으면 상당히 테키한 방향만 계속 생각했을 것 같은데 역시 휴먼 브레인이 둘인 게 더 창의적인 듯,, 친구야 사랑해,,,(?) 나에게 이 해커톤을 나가자고 해줘서 난 그저 감읍할 따름,,

딴말이지만 최근에 내가 Claude 입문을 도와드린 어떤 분께서 "아니 도대체 이 md 파일들을 실제로 서로 읽기는 하는 거냐, 가독성이 너무 떨어지지 않냐"며 믿지 못하시던데 이미 md 파일들로 서로 의사소통을 하고 의견교류를 하는 게 익숙해져버려서 이제 md 파일들이 가독성이 안 좋다는 생각을 하지 않게 되었달까...? (가독성 불감증..?ㅎ) 회사 분들도 이제 어떤 의견이나 아이디어를 낼 때 md 파일들을 공유해주시는 경우가 많아져서.. 사실 이미 익숙해져버림

여튼 이제 아키텍처도 여러번 클로드와 진대하며 정제를 했으니, 실제 프론트 디자인과 전체 구현은 내가 에이전트 팀들 돌리면서 하고, 친구는 로컬에 내가 만든 레포를 뜬 다음에 내가 레포에 푸쉬하는 것들을 중간중간에 실시간으로 pull 하며 그것을 바탕으로 다음날을 위한 발표 자료를 만들기 시작했다.

우리가 선정한 아이디어는 Near AI Cloud & LLM을 활용한 confidential bid matching과 자연어 buying/selling condition 입력이 가능한 중고거래소! Status Network가 스폰서로 있어서 매칭 결과의 온체인 기록을 Status Network의 gasless transaction을 활용하고, Status Network의 Karma system을 당근마켓의 온도 기능처럼 사용할 수 있도록 구체화해보았다. 이름은 서로 Bargain을 하는 거니까 Bargo 라고 지었다. 클로드는 자꾸 Haggle 이라는 이름을 추천해줬는데 몰라.. 내 직감상 평소에 덜 쓰는 단어라 덜 직관적이고 어감이 안 귀여웠음,,

막상 출품 후 디자인이 귀엽다는 피드백을 종종 들었는데 (실제로 우리 회사 분도 수상 소식 듣고 레포에 있는 링크로 들어가봤다가 디자인이 귀여웠다고 어떻게 하셨냐며 질문을 하시기도,,) 솔직히 클로드 코드한테 그냥 디자인을 맡기면 50%의 만족도도 느낄 수 없는 디자인이 나오기 마련이다. 그리고 누가봐도 AI 돌린 것 같은 디자인만 나옴..

결국 AI를 써서 디자인을 하더라도 어느 정도 자신의 감성을 담아야 그나마 POC인 것을 감안하더라도 6~70%의 만족도까지 끌어올릴 수 있는데, 이번에는 1차적으로 Stitch에 내가 원하는 브랜딩과 어떤 느낌의 디자인을 원하는지 프롬프트로 간략하게 공유, 그 후 몇차례 이터레이션을 반복하며 내가 원하는 감성과 제일 맞는 이미지를 하나 뽑음.

그리고 이번에는 그 이미지를 선택하고, 이 이미지에서 inspire 받은 디자인의 웹 앱을 만들 건데, 앱은 이러이러한 기능을 수행하는 앱이다. 간단하게 설명을 첨부. 그리고 우선 기본적인 컬러 팔레트와 폰트들을 선정한 디자인 시스템을 만들어달라고 함. 이렇게 내가 또 원하는 감성의 (?) 디자인 시스템이 나올 때까지 나의 피드백을 주며 수차례의 이터레이션을 반복. 내가 상상해봤을 때 얼추 비슷한 느낌의 디자인 시스템이 나오면 이제 해당 디자인 시스템을 기반으로 실제로 컨셉 포토와, 대략적인 실제 기능 화면들을 만들어봐달라고 함. 이걸 또 여러 차례 반복하면서 내가 생각할 때 꽤 괜찮은 이미지들이 나오면, 이걸 가져다가 챗지피티에게 간다. (!)

그리고 챗지피티에게 해당 이미지들에서 수정하고 싶은 부분 (e.g. 왼쪽 하단 구석에 있는 붉은 색의 아이템은 삭제해줘) 을 요청. (기본 이미지를 기반으로 간단하게 내부에 있는 이미지 수정은 챗지피티가 제일 잘하는 듯,,) 사실 이거는 스킵해도 되는 부분이긴 한데 나는 약간이라도 거슬리는 거 못 참아서 하긴 했음

그 다음은 이제 진짜로 마지막으로~~! 그 이미지들을 가지고 Google AI Studio에 간다. 그리고 클로드와 함께 정제했던 PRD.md 문서와 디자인 시스템 정보와 함께 해당 이미지들을 첨부하며 이 이미지들에서 영감을 받고, 이런 디자인 시스템을 사용하는 프론트를 만들어줘~! 라고 한뒤 나오는 코드들을 복사한다. 그리고 클로드 코드에게 다시 이를 가져가서 "이걸 베끼라는 건 아니고, 이걸 참조해서 실제 너가 구현 중인 프론트에 디자인 감성을 반영해줘" 라고 말한다.

여기까지 진행하면 솔직히 스티치에서 만든 이미지들에 비하면 훨씬 디자인은 구리지만 그래도 기능에 실질적으로 사용할 수 있는 정도로만 딱 반영된 프론트가 나오게 된다. 시간이 더 있다면 아마 스티치로 만들었던 이미지 수준으로 아마 끌어올렸겠지만 우선 디자인을 원하는 수준으로 끌어올리는 거 자체가 해커톤의 목적은 아니기에..

디자인에 생각보다 다양한 AI들이 활용되었죵,,? ㅎ 솔직히 디자인이 진짜 기깔난다~ 이런 수준까지는 10시간 내에 혼자 기능 구현까지 하면서 디자인까지 챙기기 어려웠지만 그래도 누가 봐도 AI로 만들었군 싶은 냄새는 안나는 프론트가 되었다고 생각합니다. (클로드와 아이디에이션을 오후 2시부터 시작했고 12시가 마감이었으니...)

사실 이 10시간동안 아이디에이션 할 때를 빼면 친구와 둘이서 대화는 사실상 거의 안하고 서로 "알아서 자기 일 잘 하고 있겠거니" 맡겨놓고 신경을 끄고 있었는데, 이렇게 서로 신경을 끄고 있어도 자기 할 일 잘 하고 있을 거라고 신뢰할 수 있는 팀원을 구하는 것도 해커톤의 핵심인 것 같긴 하다. (이 부분은 친구가 여러번 언급했다 우헤헤)

여튼 대략적으로 구현을 끝낸게 한 11시 15분쯤이었는데 그 때부터 큐에이와 디버깅을 시작하고 데모 영상을 부랴부랴 찍기 시작했으니 얼마나 긴박한 상황이었는지 아시겠나요?

진짜 제일 심각했던 게 구매자와 판매자의 intent가 서로 조건이 부합함에도 매칭되지 않는 크리티컬한 버그가 마지막까지 날 힘들게 했는데 알고보니 그냥 환경변수 문제였다는 사실 ㅡㅡ 하.. 디버깅 하느라 막판에 진짜 쫄렸는데 환경변수 문제일 거라곤 처음에 생각을 못했다. 여하튼 결국 이 이슈를 해결해서 너무 다행이었음. 크리티컬한 기능들은 디버깅을 해야 데모 영상을 찍을 수 있으니께... ㅠ_ㅠ 친구도 조용히 나를 기다려주긴 했지만 매우 불안했을 것 같다,,,

그래도 그 전에 바이브 코딩을 하면서 Railway와 Vercel을 계속 사용해왔었기 때문에 어렵지 않게 배포 & 디버깅까지 했던 듯 하다. 막판에는 "하. 완성만 해도 다행이야 그치~" 라고 서로 웃었는데! 12시에 제출까지 완료하고 퀭해진 눈으로 각자의 집으로 돌아갔다.

사실 다음날 발표하는 거는 친구가 담당하기로 했어서 행사장이었던 DSRV 온사이트에서는 대체로 내 친구가 할 일이 많았지만(?) 솔직히 제너럴 트랙에서 수상할지는 전혀 몰랐었기 때문에..! Status network 스폰서 트랙에서 1등을 하고나서 우리는 넘 피곤해서 집에 갈 준비를 하고 있었음 근데 심지어 우리가 이번 해커톤에서 전체 1등을 했다는 것이 아니겠음...(?) 심지어 심사위원이었던 어느 분의 말에 의하면 우리가 심사위원 만장일치로 1등이었다고...(?) 진짜로 1등 발표할 때 우리 팀 이름이 호명되는 순간 전혀 예상치 못했어서 입 밖으로 "으억!" 하고 소리를 지르고 말았다.

Buidl Hack 해커톤 장에서 뭐하는 사람이냐고 사람들이 물어보면 퇴사 직전이긴 하지만 아직 재직중이니까 현 회사의 이름을 말하며 자기소개를 했는데, 마지막까지 회사의 이름을 알리고 나가는 거 같아서 뿌듯하고 기분이 참 좋았다. 나! 이래뵈어도! 정말 멋진 회사의! 꽤 멋진 PM이었다고!!! 회사 슬랙에도 수상 결과를 공유했는데 다들 엄청 축하해주시고 개발자 분들도 진짜로 100% 바이브코딩 한 거냐고 물어보시고 그래서 매우 기분이 좋았달까~

이번에 우리의 팀 이름을 나는 "라프텔"로 지었었는데, 애니메이션 원피스의 해적들이 모두 궁극적으로 도달하고 싶어하는 미지의 섬 라프텔처럼, 우리도 두 명의 비개발자가 바이브 코딩으로 어디까지 도달할 수 있는지 실험해보고 싶다는 의미였다. 그런 스스로의 니즈를 충족한 거 같아서 참으로 보람차고 기쁜 성과였다. 이로서 여태까지 3회 해커톤 출전 3회 모두 수상해버린 나~ 100% 타율 껄껄

흠 오늘도 글을 어떻게 마무리하지? 다들 스스로의 한계가 어디인지 정하지 마시고 이거저거 도전해보세요! 직접 부딪히면서 배우는 게 세상에서 제일 재밌고 유익하답니당! 뻔하지만 그것이 진리

---

Bargo가 궁금하시다면? https://github.com/claraexmachina/bargo

저와 제 친구가 어떤 사람들인지 궁금하시다면?

글쓴이: https://x.com/claraexmachina

제 친구: https://x.com/0xcryptosonny