[바이브해커톤]바이브해커톤 1등한 썰

바야흐로 약 4월쯤 대회를 처음 해보게 됐는데 내향인인지라 오프라인은 안하고 온라인 해커톤 대회를 처음나갔었다. 이때는 개발의 개도 모르던 시절이였기때문에 나름 할줄안다고생각했던게 AI였었고 처음 세상에 chat gpt가 나올때부터 썼기때문에 그래도 한번쯤 나가볼까?? 싶어서 나가게 된 계기였다..

왜 블로그를 지금 쓰나? 싶었는데 벨로그를 당시 쓰고 트렌딩까지 올랐었지만 블로그를 이전했기때문에 날렸습니다..(참고) 이 글을 남기는것도 사실 블로그 백업용으로 남기는것이고 내가 어떻게 했었는지 과정들을 기록하기 위해서 적은거지 남한테 자랑용이 아님을 밝힙니다..

개도 모르던 시절 원래는 그래픽디자인으로 약 2-3년을 일하고 퍼포마로는 거의 1년을 찍기직전이였는데 직업이 나랑 맞지가않았고.. 결국 빠르게 서른이 되기전에 엔지니어가 되고싶다는 욕망이 더 컸다보니 내가 원래 하고싶던 개발공부를 좀 해보고싶었기에 “대표님, 저 개발이 배우고싶어요 대학가겠습니다” 선언을 하게되면서 갑자기 서울로 이사가게됐다.. 그래서 이 대회를 준비할때 동시에 이사준비도 같이 좀 하게됐었는데 쉽지않았고..

아무튼 본론으로 시작해보겠습니다.

그래서 지금이 기회다! 싶어서 무작정 신청을 했고 놀랍게도 400명이 넘게 신청을 했으며 저혼자 맞짱떠야했던 대회였습니다 (개발플랫폼이다보니 개발자가 많았는데 비개발자 혼자서..)

대회주제는 아예 해커톤 사이트를 만드는 대회였었다 말그대로 해커톤 대회에서 해커톤대회 사이트를 만드는 대회였던것..

AI는 뭘 선택했는가?#

저는 대회를 준비할때 약 AI를 3개를 썼습니다

기획:chatgpt 개발:클로드코드 디자인:나노바나나

이렇게 썼었는데 클로드 당시 클로드 pro를 썼었고 나머진 구독안했었습니다 하지만 개발하는데 비용은 8만원정도 썼구요 단기간인 5일안에 개발하는것이다보니 토큰초기화 시간이 있어도 모자라서 추가로 썼던것이라서 그렇습니다..

기획의도#

처음에 아무래도 해커톤플랫폼을 만드는 수준이다보니 서비스명과 어떤 기능을 넣어야될지 좀 고민을 많이했어요 제 체감상 gpt에게 아이디어를 던져보니 거의 똑같이 반복적으로 아이디어가 돌아오는 느낌이라서 아이디어는 인간이 짜야된다 생각을 했고…결국 제가 이름을 만들었습니다

이름이 웃길순 있는데 해커톤의 영어 앞글자를 따서 만들었습니다 저조차 해커톤이라는 이름이 낮설었었고, 해커톤의 뜻이 결국엔 개발마라톤과 같아서 진입장벽을 낮추고자 만들었었어요

두번째로는 해당대회에서 이미 기획명세서를 주어졌기에 기획명세서+차별점을 생각해야했던 문제였습니다

기본적인 페이지는 순위,대회공고보기,팀리스트 이런것들이였는데 저는 아무래도 제 직업상 해커톤이라는게 진입장벽이 컸다고 느껴서 랜덤 팀매칭 기능을 좀 추가했었습니다

마지막으론 대회 과제에 있던 차별점이나 uxui적인 부분을 좀 생각해봤었는데 uxui부분은 메인화면에 스폰서 홍보할수있는 캐러셀을 추가하자 였고, 성장뱃지를 활용해서 홈페이지 재방문률을 높이는 리텐션구조를 생각했었구요

처음 기획서까지 다 내고나서 알았는데 5일이내로 프로젝트개발하는것을 내야했기때문에 기획서 제출이후가 진짜 시작이였습니다..

개발 시작#

처음엔 ai로 디자인을 하자 생각을 했고 뽑아보니 디자인스타일이 너무 구렸습니다 그래서 저는 역설계를 했었는데 기획의도에서 문제정의를 했었고, ai로 먼저 프로토타입을 뽑았습니다

당시에 클로드 코드로 먼저 개발을 했고 -> MCP를 활용해서 화면캡쳐를 해서 피그마에 옮겼구요 프로토타입은 기능이 실제 실행하는지 검증하면서 피그마에서 직접 UI를 다시 디자인을 해서 올렸고,디자인하는데에만 약 이틀정도 소요했습니다

아무래도 위에 디자인들을 보면 터무니없는 AI 전형적인 디자인이였기때문에 AI디자인 티를 벗겨내고자 만들게 됐어요

당시 디자인작업을 진행하고있을때 피그마에서 피그마X클로드MCP를 공개했었는데 타이밍이 좋게 바로 적용했습니다 피그마에서 디자인을 하면 링크를 가지고 클로드코드에 던지면 그대로 개발이 된다는 점이였는데, 그래서 디자인 작업에 집중할수있었구요

당시에 이렇게 컴포넌트들을 만들어서 하나의 톤앤매너를 지키고자 제가 직접 디자인을 하게됐습니다 저는 풀 페이지를 전부 다 개발한건 아니고 조각조각 나눠서 테트리스식으로 붙였었는데 당시 피그마에서 최초공개했을당시 json 파일로 디자인토큰md를 만들어서 관리를 한다고 했고 바로 차용했구요

디자인 토큰파일을 만들어두면 일관성있게 페이지를 뽑을수있기때문에 토큰파일을 읽으면 다음 페이지를 톤에 맞춰서 개발한다는것이죠

그렇게 저는 먼저 개발을 시키고 -> 디자인 후작업을 진행하고 -> 최종 개발을 진행해서 약 5일만에 개발을 끝냈습니다

재밌는 포인트#

아니 그럼 개발은 클로드가 했는데 나노바나나는 왜?

당시 제가 해커톤의 이름이 낮설다고 했었는데 친근함을 표현하고싶어서 캐릭터 마스코트를 만들었습니다.. 제 딸과 아들자식같은 느낌인데 마우스로 낳았습니다..

정확히는 3D 모델링을 할줄 몰라서 2d로 그린것을 3d로 만드는데 썼구요 주로 제가 못하는 영역들을 좀 많이 썼던것같습니다.

그리고 캐릭터를 만든이유도 차별점으로 성장뱃지를 만들었는데 아래처럼 재방문율을 높이기위해 뱃지를 따면 이미지를 뽑을수있게도 만들었었습니다

개발후기#

사실 메인페이지는 공을 들였고 그외에 나머지 10페이지 가까이 되는 팀매칭,공고목록,마이페이지,게시판 등 이런페이지는 디자인토큰을 만들어서 썼기에 약간의 조정만 했었고 메인페이지에 공을 많이 들였던것같습니다 개발은 약 하루반나절? 정도 걸렸고, 디자인이 제일 시간이 오래걸렸던것같구요 그외 시간은 영상찍고,소개서 제출용 pdf 만드는데 시간을 조금 투자했습니다.

대회에서는 다행히 로컬스토리지 기반으로 만들어라고 해서 위 아키텍쳐를 만들어서 개발을 진행했고, 프레임워크는 next.js와 테일윈드,Zustand,vercel 등 사용했습니다.

대회 이후 결과#

사실 개인으로 신청했고 다른분들은 팀이있던 상태였는데 개발자분들이 워낙많아서 비전공이다보니 좀 주눅이 든 상태였고.. 최대3등만이라도 타보자 약간 이런생각을 가졌었구요.

결과적으론 1등을 했습니다 이번 대회에서 느낀건 일단 도전하면 하게된다!는 것이고..

대회 하면서 AI가 뭐가 문제고, 어떻게 좀 더 극대화 하고 활용할수있을까에 고민을 많이 했던것같은데 배웠던 점이 많았었습니다. 그리고 개발자분들 많던 대회였어서 처음 생각과 동일하게 어차피 기능명세서가 같으면 왠만한기술로는 차별화할 수 없다고 판단했고 기술적으론 AI에게 맡겨야 했던 부분이 많아서 내가 제일 잘하는걸 하자라는 마인드로 부족한 AI의 특징의 디자인을 없애기 위한 전략을 바꾸기 결정 했었던게 대회 수상하는데에 가장 크지않았나 싶었습니다.