디자이너 지인과 함께 2명이서 참가한 후 디스코드를 통해 나머지 팀원들을 모을 계획이었지만, 디자이너 분이 멋진 백엔드 개발자와 개자이너(개발자+디자이너)를 데려와주셔서 5명 팀으로 참가할 수 있었다.
준비 과정
5명 모두 첫번째 해커톤이라 어떻게 준비해야하는 지도 몰라서 준비를 거의 하지 못했다.😅
2번 정도 만나서 친목을 다지고 예상 주제와 아이디어를 브레인스토밍했다.(이번에 겪어보니 미리 생각한 아이디어를 해커톤에서 그대로 사용할 일은 거의 없을 것 같다.)
개발 환경 세팅이나 디자인 에셋도 미처 준비하지 못했지만, 재밌게 즐겨보자는 생각으로 당일 날 부산으로 떠났다!
Day 1
금요일이라 그런지 공식 오프닝 자체가 늦게 시작한다. 18시 30분쯤 벡스코에 도착해 참가 접수를 했고(참가자에게 파란색 티셔츠와 노트 등의 굿즈를 나누어준다) 공식 오프닝은 19시 30분에 시작했다. 벡스코 건물 외관이 너무 딱딱해보여서 내가 상상하던 모습의 해커톤이 아닐까 순간 걱정이 됐다. 하지만 접수를 마치고 행사장에 들어가자 의욕이 샘솟았다. 내가 상상하던 해커톤의 모습과 굉장히 흡사했다.👨💻 junction asia 2022 행사장
아마존 게임테크(AWS GameTech): 'Zero-Operation' Game을 만들어라. 재밌는 게임을 만들되, AWS의 다양한 serverless 기능(인증, 업적, 랭킹 등)을 이용해라. optional하게 세션 기반(session based) 게임을 만들면 좋다.
체인앱시스(chainapsis): 체인앱시스의 Cosmos Framework(Cosmos SDK)를 이용하여 자유롭게 서비스를 만들어라.
마이크로소프트(microsoft): Microsoft의 제품(Azure, Teams & Power Platform)을 이용하여 협업 관련 서비스를 만들어라.
젭(ZEP): zep script를 이용하여 무엇이든 만들어라.
예상이 안가는 주제들은 아니었지만, 막상 아무거나 만들라는 주제를 받으니 어떤 Track을 선택해야할 지 고민이 되었다. 각각의 Track에 대해 1시간 정도 장단점을 논의했다.
AWS: 시간상 가능할지는 모르겠지만 결과물을 만들었을 때 우리 스스로 가장 재밌고 뿌듯할 것 같다.
chainapsis: 블록체인을 잘 아는 개발자가 1~2명 뿐이라 시간상 불가능할 것 같다.
MSFT: 난이도는 무난할 것 같지만, 기업 제품을 위주로 활용해야해서 5명 모두의 역량을 잘 뽐내기 어려울 것 같았다.
ZEP: 가장 쉬운 트랙이지만 그만큼 경쟁자도 많을 것이다. zep script가 나온지 얼마 안돼서 기능이 충분치 않았고, 우리가 다른 팀에 비해 차별성있는 것을 만들어 낼 수 있을지 고민이 됐다.
위와 같은 고민 끝에 우리의 개발/디자인 능력을 십분 발휘할 수 있고 우리 스스로 가장 재미있을 것 같은 AWS Track을 골랐다. 모든 팀의 Track 선정 후 공식적인 Day 1 스케쥴은 종료되었다. 그리고 Track별로 경쟁 팀의 수를 공개했는데 예상대로 Zep에 20팀 이상이 몰렸다.(총 60~70팀 정도 있었던 것 같다.) 더 놀라운 것은 AWS Track에는 6팀? 정도밖에 지원하지 않았다는 것이다.(아마 게임이다보니 서버/프론트 모두 쉽지 않아서 그런 것 같다. 심지어 중간에 1팀이 이탈했다.) 중간만 가도 전체 Top 12에 들어갈 수 있다는 희망에 의욕이 한 번 더 생겼다.
11시부터 새벽 2시까지 아이디어 회의를 진행했다. 10가지가 넘는 후보가 오고 갔던 것 같은데, 그 중 Stack 게임을 session 기반으로 만들면 재밌을 것 같다는 의견이 나왔다. AWS의 평가 기준(사업성, 창의성, 심미성, 기술)을 모두 만족시킬 수 있을 것 같아 바로 아이디어를 확정하고, 개발 환경과 티켓 관리용 notion을 세팅했다. 48시간이라는 시간동안 세션 기반 게임을 정말 만들 수 있을지 걱정이 되었지만, 중간에 세션을 포기하고 1인용 게임을 만드는 것으로 변경하면 될 일이라 기분 좋게 아이디어를 받아들였던 것 같다.
5명 각각 본인의 업무를 정하고 notion에 티켓을 등록한 후 6시간동안 취침을 하러 숙소에 갔다.(숙소는 벡스코 바로 앞 호텔이다. 호텔이 아주 깔끔하고 좋지만 (대부분의 참가자가) 3일 동안 6~7시간 정도만 이용하게 된다.😅) 각자 맡은 업무는 아래와 같다.
디자이너: 페이지 전체 UX/UI. 발표용 PPT 만들기.
백엔드 1: 세션 기반 게임을 위한 Web socket API 개발.
백엔드 2: 소켓을 제외한 점수 기록, 랭킹, 업적 REST API 개발.
개자이너: three.js를 할 줄 알기 때문에, three.js를 이용하여 3D 게임 렌더링 부분 개발
나(프론트엔드): 게임 자체를 제외한 나머지 프론트엔드 개발.
Day 2
6시간 취침 후 10시쯤 벡스코로 돌아왔다. Day 2는 초안 제출말고 따로 큰 mission이 없었기에 앉은 자리에서 맡은 티켓을 처리하는 데 온 신경을 집중했다. 해커톤 장소가 집중하기에 좋은 환경이라 아침 10시부터 새벽 2시쯤까지 만들어둔 티켓 대부분을 처리할 수 있었다. co-building 제플린 일부
새벽 2시까지 아래와 같은 업무를 처리하니 순식간에 하루가 지나가 있었다. 몇몇 업무는 이전에 내가 작성한 블로그 글을 보며 따라하면 돼서 편했다.
모든 페이지 UI 개발(랜딩 페이지, 로비, Room, 게임 페이지, 결과 페이지, 랭킹 페이지, 업적 페이지)
QR 코드로 공유 및 Room 초대하기 기능 개발.
백엔드 2와 협업하여 AWS Cognito로 OAuth 구글 로그인 기능 개발.(localStorage로 토큰 관리)
Day 3
새벽 4시 무렵, 게임 개발과 페이지 UI 개발이 거의 다 끝나서 나는 아래와 같은 업무를 처리하고 있었다.
개자이너가 만든 게임 HTML을 Next.js 프로젝트에 iframe으로 붙이기
점수 기록, 랭킹, 업적 등의 REST API 연결하기
하지만, 48시간이라는 촉박한 시간 + 어려운 AWS 문서 + AWS Track Partner분들께 질문할 수 있는 시간적 제약으로 인해 백엔드 서버를 완벽하게 구현하기란 쉽지 않았다. 더군다나 web socket의 HTTPS 인증서 관련 문제와 게임 상의 잦은 버그 발생으로 원래 구상한 게임을 완성하는 것은 어렵겠다는 생각이 들었다. 더 늦기전에 빠른 결단을 내려야겠다는 생각이 들어서, 팀원들과 함께 아래와 같이 했으면 좋겠다고 합의를 보았다.
최종 서비스의 목표는 세션을 제외한 1인용 게임이다. 1인의 점수에 기반한 점수 기록, 랭킹, 업적을 구현하자.(Room이라는 개념이 의미 없어지지만 어쩔 수 없는 상황)
session API를 만들고 있는 게 있으니, 심사위원분들께 보여드릴 수 있도록 HTTP 로컬 환경에서 어떻게든 따로 구현을 하자.
남은 8시간 동안 다시 업무를 분배하고 각자 할 일을 시작했다.
디자이너: 최종 발표용 PPT, 데모 영상 제작
백엔드 1: Web socket API를 완성하고 로컬 환경에서 동작하게 만들기, 최종 발표 연습.
백엔드 2: 세션을 제외한 점수 기록, 랭킹, 업적 REST API 완성.(AWS lambda, api gateway, dynamo DB)
개자이너: 게임에 생긴 three.js 버그 수정.(안드로이드에서 동작하지 않는 버그)
나(프론트엔드): REST API 연결, 시간이 남으면 게임에 생긴 three.js 버그 함께 수정.
욕심을 버리고 할 일에 집중하니 놀랍게도 11시(마감 1시간 전) 각자 맡은 일을 모두 끝낼 수 있었다. 해결하기 힘들어 보였던 안드로이드 버그와 gateway 오류가 있었는데 결국 모두 해결되었다.
안드로이드 버그: user event를 처리할 때 'touchmove', 'touchend' 등의 이벤트가 서로 꼬이는 문제였다. ios인지 androiod인지 판단하여 분기함으로써 해결하셨다.
api gateway 에러: 토큰이 필요하지 않은 api header에 토큰을 넘길 경우 발생하는 것이었다. 프론트엔드에서 필요한 header값만 주도록 변경했다.
백엔드 1은 로컬 환경에서 웹소켓 기능 구현을 성공하여 실제로 동작하는 데모 영상 촬영까지 마치셨다. 5명 모두 결국 맡은 일을 모두 끝냈다는 것에 안도감과 만족감을 느꼈던 것 같다.
12시 30분 경 최종안 제출을 완료하고 AWS 트랙 파트너/심사위원분들께 데모도 완료했다. 데모는 QR코드를 이용한 사이트 접속 유도 - 메인 게임 소개 - 사용한 기술 스택 소개 - 랭킹/업적 등 서브 기능 소개 - 세션 기반 데모 영상 소개 순서로 했던 것 같다.
그 후 시상식이 시작되고 각 팀의 3/2/1등 수상팀이 발표되었다.
심사위원분들께서 팀의 노력을 높이 평가해주셨는지, AWS Track에서 3등을 수상하는 기쁨을 누리게 되었다🙏
의의
포기하지 않고 5명 각각의 역량이 닿는 데까지 구현한 것이 가장 잘한 일인 것 같다.
쌓아온 개발 경험과 티켓 처리 능력, 업무 관리 능력을 제대로 발휘할 수 있는 좋은 환경이었던 것 같다. 자신의 역량을 짧은 시간에 시험해보고 싶은 분이라면 해커톤을 추천드린다.
만약 다음에 또 참가한다면, 더 고차원적인 아이디어를 구상하는데 노력을 많이 쏟아봐야겠다.(수상작을 살펴보니 결국 좋은 아이디어가 높은 순위를 결정짓는 것 같다.)
완성된 웹사이트의 링크는 아래와 같다.(기기에 따라 동작하지 않을수도, 모바일이 아닐 경우 사용감이 안좋을 수 있다.) 5명 모두 시간이 맞을 때, 해커톤에서 완성하지 못한 세션 기반 모드를 완성하고 다양한 기기에 대응하기로 했다. https://cobuilding.vercel.app/
