해커톤 참여 배경
올해 여름 방학 때도 winty와 프로젝트를 진행하려고 회의를 진행했으나, 서로의 시간이 안맞아서 아쉽게 시작하지 못했다.
며칠 뒤, 정윤이가 정션(Junction) 해커톤 참가 모집을 알려주면서 서로 이야기를 해보고 참여하게 되었다.
이번에는 대학 친구이자 멋진 네이버 인턴 연우도 같이하기로 했다. 우리는 팀을 이뤄 각자 신청서(자소서)를 제출했고, 통과하여 참석할 수 있게 되었다.
팀 구성
팀 구성은 다섯 명까지 가능했다. 그래서 한 자리가 남았고, 우리는 새로운 팀원을 구하기로 정했다.
해커톤 디스코드에서 개인 참가자들의 자기소개 글들이 올라왔고, 우리는 Apple Developer Academy에 참여 중인 정환이라는 친구를 발견했다.
얼른 넷이서 모여 오랫동안 고민한 ‘엄청난 예의와 격식을 차린 제안 메세지’를 정환이한테 보냈고, PM으로 함께 해커톤을 참석하게 되었다.
해커톤 참여 전
해커톤 참여 전에 잠깐씩 회의를 진행했고, 되도록이면 최대한 빠르게 만들 수 있는 웹을 개발하기로 했다.
참여 전에 기억 속에서 잊혀져가는 React를 복습했고, React Redux나 styled components 등 새로 사용해보고 싶고, 개발 속도를 올려줄 라이브러리도 잔뜩 공부해갔다.
그렇게 해커톤이 가까워졌고, 8월 18~19일 동안 동아리 창업캠프를 참여하고 19일에 천안에서 ktx를 타고 부산으로 출발했다.
해커톤 입장~
부산에 도착해서 미리 만나있던 넷에 합류해서 벡스코로 향했다. 벡스코 앞에서 맥주 페스티벌이 열리고 있어서 들떴지만, 마음을 가라앉히고 벡스코 안으로 들어갔다. (맥주 축제 옆에 개발 축제 ㄷㄷ)
입장해서 본 행사장은 멋졌다. 엄청난 의자와 책상들과 어두운 실내 속 잔잔한 스탠드 조명들은 이 곳이 ‘갬성있는 개발 축제’라는 듯이 보여지기에 충분했다.
짐을 내려 놓고, 맥주 페스티벌에 돌아가서 음료수(😂)와 푸드트럭 음식을 먹으며 서로 이야기를 나누며 배를 채웠다.
저녁을 배부르게 먹고 다시 돌아간 행사장에서는 해커톤 오프닝이 시작되었다. 신나는 음악들과 E로만 구성된 것 같은 진행자들은 해커톤 소개를 진행했다.
그리고 가장 중요한 트랙 소개가 이어졌다. 각 트랙 주제는
- aws: GameLift 등의 aws 서비스를 활용한 게임 개발
- chainapsis: 블록체인 앱 개발
- Microsoft: Azure, Power Apps를 사용하여 협업을 위한 Teams 앱 개발 Teams
- ZEP: ZEP Script로 아무거나 만들기
로 구성되어 있었다.
멘붕?! 그리고 선택
각 트랙 소개를 듣고, 꽤 어려운 주제에 우리는 멘붕이 왔다. 특히, 성욱이와 나는 트랙 주제의 대부분이 처음 사용/개발하는 부분이어서 더욱 그랬다.
하지만, 트랙을 결정해야 하는 시간이 정해졌고, 마음이 급한 나와 정환이는 각 트랙 부스로 달려가서 여러가지 질문들을 던졌다. 아래에 대충 요약해봤다.
- aws: “GameLift를 사용하면 좋겠지만, 처음 써보시는 분들이 바로 사용하시기에는 사실상 어렵고, 인터넷과 어떠한 형식으로든 네트워킹하는 게임이면 괜찮아요!”
- chainapsis: “저희의 블록체인 api를 통해 사용자의 코인이나 NFT 정보를 불러와서 이쁘게 출력해주는 웹 서비스를 만드는 등 자유롭게 만드시면 됩니다!”
- Microsoft: “Azure, Power Apps, Teams 중 1개만 사용한 서비스여도 좋습니다!”
- ZEP은 그냥 아무거나 만드는 거여서 물어보지는 않았다.
역시 모르면 질문을 해야한다. 답변을 듣고오니 크게 빡센 주제가 아니었다. 한결 편해진 마음으로 다시 팀 회의가 시작되었다.
“게임을 만들어보면 어떨까?”라는 정환이의 물음에 나와 정윤이, 연우는 내심 반대의 뜻을 내보였다. 서로 말은 안했지만 우리 셋이 게임디자인학과이고, 아마 게임보다는 새로운 영역을 도전해보고 싶은 마음이 컸던 것 같다.
서로 트랙에 관련된 아이디어를 공유하면서 aws와 Microsoft 트랙으로 좁혀졌고, 우선은 트랙 제출 시간을 지켜야해서 Microsoft로 선택했다. (다음날까지 변경할 수 있었던 것으로 기억한다.)
무엇을 만들까요?
Teams를 설치하고, 기존의 Teams 앱들을 보면서 무엇을 만들지 고민했다.
(참고로 Teams 앱은 카카오톡 안에 있는 ‘선물하기’, ‘메일’, ‘쇼핑하기’ 같이 확장 기능같은 느낌이다. Teams가 비지니스 커뮤니케이션 플랫폼인 만큼, 여러 협업에 대한 확장 기능이 있었다.)
그치만, 잠은 자야지.. 호텔 체크인도 해야하니까 우선 자고 다음날 아침까지 아이디어를 가져오기로 했다. 호텔 침대에 누웠지만, Teams 앱 개발에 대한 여러가지를 찾아보면서 늦은 새벽에야 잠이 들었다.
다음날 아침, 우리가 가져온 아이디어는 이랬다.
- 관련 단어를 추천해주는 마인드맵
- 상세한 비용 정산하기
- 아이스브레이킹 퀴즈 맞추기
- 회의할 때 몰래 사진 찍기 (워딩만 보면 좀 그렇지만, 서로의 재밌는 사진을 찍자는 취지였다.)
- 무작위 단어에 대한 그림 그리기 및 공유 (아이디어 도출)
- 파일, 회의록, 사진 등 한 번에 관리하기
나름 괜찮은 아이디어들이 있었다. 투표를 했고 관련 단어를 추천해주는 마인드맵이 최종 아이디어로 선정되었다.
개발 시작
프로젝트가 정해지자마자 React에서 마인드맵을 그릴 수 있는 라이브러리들을 찾아봤다. 처음에는 중국계 개발자가 github에 올려둔 것을 사용하려고 했지만, 설명이 좋지 않아 다시 찾기 시작했다. 끝내 React Flow라는 엄청 쿨한 라이브러리를 찾게 되었다.
기획된 기능을 아래에 나열해봤다.
- 뿌리(Root) 단어에서 시작 (마인드맵에서 가운데 있는 단어)
- 1:N으로 뻗는 마인드맵 구조
- 선택된 노드의 단어에 따라, 관련 단어를 추천해주는 기능 → 클릭하면 해당 단어가 적힌 노드 생성
- 빈 노드 생성
- 노드 내용 수정
- 노드 색상 변경
- 뒤로, 앞으로
- 마인드맵의 변경은 모든 사용자에게 실시간으로 반영되어야 함
우선 가장 중요한 기능이 마인드맵의 노드를 추가, 수정, 삭제 기능이라고 판단했고, React Flow 문서를 차근히 살펴봤다. 처음 사용하는 라이브러리라 사용법을 파악하는데 가장 오래 걸린 것 같다.
꽤 좋았던 부분은 대부분의 요소들이 커스텀 가능했고, 이미 완성형 라이브러리 였다는 것이다. 우선 서버 연결없이 로컬로 모든 기능이 가능하게 개발을 시작했다. 그 동안 성욱이는 서버에 기능을 구현해나갔다.
미리 공부해왔던 React Redux, styled components가 약간 서툴긴 했지만, 지금와서 생각해보면 어느정도 개발 속도를 올려준 것 같다. (당연하겠지만, 익숙해지면 굉장히 파워풀한 기능들이다.)
급한 상황 속에서 내가 생각했던 프론트엔드 개발 목표가 최소 기능 완성이었기 때문에, 팀원들과 상의해서 ‘노드 이동 불가(자동 배치)’ 및 ‘한 방향 진행’으로 방향을 정했다. 물론 세부적인 기능들이 완벽히 개발되면 좋겠지만, 시간이 그리 많지 않아서 핵심 기능(추천 단어 기반 마인드맵) 개발에 집중했다.
서버 붙이기, UI 적용
성욱이의 백엔드와 정윤/연우의 UI는 어느 정도 완성이 되어갔다. 생각보다 시간이 빨리가서 조급함을 풀장착해서 UI를 먼저 적용했다. 정윤이가 내 옆에서 Figma에 적힌 수치를 불러주고, 연우가 색상 정보 등을 json으로 정리해줘서 시간을 줄일 수 있었다. (고맙습니다 😂)
밤이 되었다. 나한테는 게임잼이나 해커톤을 하면 밤을 하루 정도는 새는 게 당연했고, 서버를 붙여야 해서 나와 성욱이를 제외한 친구들은 호텔로 갔다. 성욱이와 함께 웹소켓을 통해 마인드맵의 실시간 반영을 구현했다. 클라이언트가 마인드맵을 변경하면 REST API 호출로 서버에 알려주고, 서버가 웹소켓으로 연결된 모든 클라이언트에게 해당 정보를 뿌려주는 식으로 진행했다.
새벽동안의 성욱이와 서버 붙이기를 마치고, 성욱이는 호텔로 돌아갔다. 나는 몇 가지 일이 남았었는데, 내용 변경의 실시간 적용이 날 잠 못들게 했다. React만의 Input 컴포넌트 사용법(바뀐 부분이 있으면 State를 바꿔주는)과 서버 API 호출 사이에서 타이밍 오류(?)가 발생해서 키보드로 치는 내용이 다른 사람들에게 실시간으로 반영되는 기능을 구현하지 못했다. 대신 우측 하단에 추가적인 Input 필드를 만들어서, 내용을 수정하고 엔터치면 API를 호출하게 바꿔서 구현했다.
지금 생각해보면, 노드를 클릭하면 원래의 Input을 안보이게 하고 새 Input 필드를 노드 위에 겹치게 표현하는 등의 방법으로 깔끔해보이게 만들 수 있었을 것 같다. 하지만, 당장 해가 떠오르는 아침이 되고 있었기에 살짝은 구린 방법으로 서비스 내의 기능 구현을 마쳤다.
🌞해는 떠오르는데, Teams도 붙여야지..?
우리 트랙의 주제가 Teams 앱을 만드는 것이기 때문에, 우리가 만든 웹 서비스를 Teams 앱으로 포팅해야 했다. 하지만, 체크아웃 시간이 다가왔고, 우선 호텔로 떠났다.
9시가 다 되어가는데 아무도 벡스코에 없었다. 그래서 전화를 걸었다. 정윤이랑 연우는 나올 준비를 하고 있었고, 정환이는 곧 나간다고 했다. 그래서 정환이한테 “웹 서비스를 Teams 앱 위에 올리는 방법을 Microsoft 부스에 물어봐줘”라고 부탁을 했고, 나는 빠르게 샤워와 짐싸기를 마치고, 성욱/정윤/연우와 함께 체크아웃을 했다.
돌아온 벡스코에서는 MS 계정 문제(로 추정됨)로 인해서 Teams 앱이 올라가지 않았고, 그래서 Teams 내에서 웹 페이지를 보여줄 수 있는 기능을 사용하기로 했다. 하지만, https 프로토콜을 사용하는 웹 페이지만 가능했다.
이 문제가 조금 복잡한데 성욱이가 서버를 http로 배포했고, 나는 Github Page 기능을 사용해서 프론트엔드 부분을 배포하고 있었다. 웹소켓이 https(클라이언트)와 http(서버) 사이에서 통신이 안돼서 프론트엔드를 http로 낮춰서 배포했고, Teams 위에서 웹 페이지를 올릴 수 없었다.
끝내 발표 시간이 다가왔고, 우리는 Teams에 올라가지 못한 웹 서비스를 보여줬다..
심사위원이 어떤 부분이 MS와 관련된 건지 질문을 했고, 우리는 ‘Teams 앱이 올라가지 않은 문제’와 ‘Azure를 사용한 서버’를 말씀드렸다. 너무 아쉬웠다. 익숙했던 aws였으면 로드밸런서를 연결해서 https로 쉽게 바꿨을텐데, Azure는 처음 접해서 나도 손 쓸 방법이 없었다.
해커톤 끝, 그리고 남은 것들
큰 아쉬움이 남은 발표를 마치고, 쪽잠을 조금 잤다. 끝으로 수상은 하지 못했지만 여러가지를 느낄 수 있었다.
우선, 너무 즐거웠다.(갑자기 ㅋㅋ) 방학동안 동아리 관련된 일들만 처리하면서 두 달간 조금은 지친 시간을 보냈었는데, 친구들과 함께 부산에서 하나의 프로젝트를 끝냈다는 점에서 잊지 못 할 행복한 추억으로 남을 것 같다.
그리고, 동기부여의 기회가 되었다. 300여명의 참가자들이 이틀을 밤새워가며 개발을 하고, 멋진 결과물을 보여줬다. 그들이 보여준 것들은 단순한 서비스가 아닌 열정과 노력의 산물이었다. 놀라지 않았다면 거짓말일 것이다.
이러한 경험들이 스스로의 부족함을 느끼고, 더 발전된 사람으로 나아갈 수 있도록 뒤에서 밀어주는 것 같다. 그리고 행복했던 기억이 그 여정을 지치지 않게 해준다.
해커톤이 끝나고 이제는 개강한 학생이 되었지만, 이때의 나를 잊지 않고 싶다.