이 글은 2022 부산소프트웨어마이스터고등학교 여름 해커톤 회고록이다.
눈물겨운 그냥 눈물 story(감동 아님)👋 여는 말
내가 개발할 수 있는 능력을 갖춘 뒤로 처음 하는 여름 해커톤. 아주 기대가 컸다... 저번 첫 해커톤에서는 개발 능력이 없어 기획과 발표 디자인 같은 것에만 참여했기 때문이다. (1기라서 그런지, 대부분의 친구들이 그랬다) 아무튼 그래서 열심히 하겠다는 다짐을 하고, 주말에 야무지게 커피까지 두 개 사왔다.
👨👧👦 팀 빌딩
여기서부터 뭔가 잘못됨을 느꼈는데, 기술 스택이고 뭐고 아무것도 없이 레크레이션하다가 자리바꾸기 게임해서 팀 빌딩을 했다... umm... 네 아무튼 그럼에도 스택 맞는 친구랑 잘 걸렸다. 팀 이름을 두 글자로 정하라는 이상한 규칙 때문에 트렌드 리더라는 뜻의 트리로도 정하고, 팀 빌딩을 마쳤다.
🏡 주제
주제는 내가 꿈꾸는 스마트 빌리지로, 학교 근처에 스마트 시티가 생겨서 하는 것 같았다. 그래서 팀원끼리 자유롭게 의견을 내고, 투표해서 결정했다. (저 사람 표시가 투표한 것이다.)
💭 아이디어 구체화
그래서 결정한 아이디어가 smart하게 공구하자! 지역 공구 웹인데, 솔직히 우리가 봐도 경쟁력이 없었다. 이 아이디어가 나온 배경이, 인터넷에서 본 아파트 커뮤니티에서 치킨 모아서 시켜서 배달비를 아끼고 나눠서 가져간다는 이야기이다. 이 이야기를 들은 지나가는 멘토 쌤께서 이 아이디어를 아파트 월패드에 적용해보는 게 어떻겠냐는 조언을 해주셨다. 아파트 월패드를 통한 공구와, 이를 앱에서도 확인할 수 있는 것으로 아이디어를 확장해서 결정했다.
🏢 건너건너
결정한 프로덕트의 이름은 건너건너이다. 귀엽다.
하나의 공구를 위드 with라고 부르기로 했다.귀엽다...
미흡하지만 다음과 같이 story도 정의했다.
🔨 백엔드 개발
해커톤은 아이디어를 수요일에 정하고, 목요일에 해커톤을 진행하고 금요일에 발표를 하는 일정이었다. 그래서 목요일에서 금요일 넘어가는 밤을 새워서 개발을 해야겠다는 다짐하고 자려는 찰나, 룸메가 발표 동영상을 목요일 밤까지 내야 한다는 이야기를 했다. 말이 안 됐다... 팀이 30 팀이나 돼서, 발표를 영상으로 1분씩 짧게 한다는 소식이었다. (이건 지금도 말이 안 된다고 생각한다)
그래서 수요일에서 목요일로 넘어가는 밤을 새워서 백엔드 개발을 했다. 해커톤이니까 내가 잘 다루는 spring boot + java + mysql 로 개발을 시작했다.
못참고 ERD도 했다. 사실 DB를 그려놓은 게 없으니까 entity 짜기가 힘들었다. 그래서 했다.
프로젝트 내용 자체가 user가 있어야 하니까, 다른 프로젝트에서 만들어 놨던 user login 관련 spring security + jwt 친구들을 데려왔다. 그리고 엄청난 리팩토링을 했다. 데려온다고 끝이 아니었다. cookie를 쓰는 백엔드 중심주의 logic이라서, token 관리 책임을 client로 옮기면서 token을 header로 옮기는 작업을 이때 했다.
그리고 With, Notification domain까지 개발을 마쳤다. 알림은 역량 부족으로 소켓을 못 써서... ㅎ 그냥 API만 만들었다. 사실 앱 개발하고 시간 남으면 알아봐서 하려고 했는데 시간이 안 남았다. 변명 맞다.
🙀 앱 개발
엄청나게 졸렸는데 커피로 도핑해가면서 백엔드 개발을 했더니 해가 떴다. 본격적인 일정이 시작된 것이다. 나는 오전 중에 필요한 API 개발을 마쳤다. 그래서 이제 무엇을 할지 고민했다. 프론트 개발하는 친구를 도와줄까 했는데 타입스크립트 친구를 쓸 줄 몰라서, 앱을 아이디어에 넣은 김에 앱을 한 번 해보기로 했다. 디자인은 1학년 친구들이 맡아서 하고 있었는데, 한 명은 월패드용 웹을 디자인하고 있었고 한 명은 앱을 디자인하고 있었다. 근데 말이 안 됐다. 그래서 결국 디자인도 했다. 위에 줄만 내가 한 디자인이다.
대강 만들어 놓고, 1학년 친구한테 이런 느낌으로 가면 좋을 거 같다고 말도 하고... 개발을 시작했다. 앱 할 줄 하나도 몰라서 그나마 전에 쓸 뻔해서 세팅해놨던 react native로 개발하기로 결정했다. 학교에서 웹 프로그래밍 시간에 react를 배웠기 때문에 비슷할 거라고 생각했다. ㅎ...
로그인 화면과, 최신 위드들이 나오는 메인 화면, 글 작성 화면, 글 상세 화면, 하단 바까지 구현했다. 물론 로그인 API, 최신 위드 가져오는 API, 글 작성 API, 글 상세 화면 가져오는 API, 참여하기 API까지 다 연동했다. 저녁 8시까지 밥도 안 먹고 계속 도핑하고 악으로 깡으로 버텨서 개발해냈다.
특히 애먹었던 부분은 asyncStorage와 react-navigation 으로 하단 바 만든 거였다. asyncStorage는 구글에 나와있는 자료들이 다 다른 asyncStorage를 import하고 있어서 문제였다. 결국 이것저것 다 해보고 찾았다. 그리고 하단바는 디자인에서 볼 수 있듯이 로그인 화면에서는 없어야 하고, 글을 새로 작성할 때도 없어야한다. 진짜 미치는 줄 알았다. 구글링을 엄청나게 해서 눈물 흘리면서 겨우겨우 했다. 그리고 다른 자잘한 문제들은 멘토 선생님의 도움을 받았다. 멘토 썜 없었으면 진짜 눈물 흘리면서 쓰러질 뻔 했다.
✨ 발표 영상
이때 진짜 긴장감이 엄청났다. 9시까지 제출이라서 8시부터 영상을 찍으려고 마감을 했는데, 해커톤을 진행하는 체육관이 시끄러워서 바깥에 나가니 와이파이가 안 돼서 돌아오니까 프론트가 진짜 갑자기 안 됐다. network를 확인해보니 style.css가 500이 떴다. (tailwind 써서 그런 듯한... 사실 잘 몰라요) 그리고 앱은 엄청나게 느리게 됐다. 눈물 날 뻔했다... 이 상태가 30분 넘게 지속됐다. 노트북을 엄청 껐다 켜고 와이파이도 바꿔보고 멘탈도 엄청 흔들리고... 아마도 학교 네트워크 문제였던 것 같다. 다른 친구도 상황이 비슷했다고 한다. 다 만들어놨는데 갑자기 작동이 안 되니 멘탈 친구가 가출했다. 하지만 직전에 어떻게든 돼서 어찌어찌 겨우겨우 영상을 찍었다. 저런 이상한 상황에서 시끄러운 체육관에서 탈출도 못하고 찍어서 그런지, 잡음도 많이 들리고 쉽지 않았다.
⚽️ 발표
진짜 말이 안 됐다. 내가 한 건 100인데, 10밖에 못 보여주는 구조였다. 1분 발표가 말이 되는지... 영상을 보고 질문 하나를 받고 내려오는 발표였는데, 알림을 소켓으로 구현했냐는 질문을 받았다. 아니라고 대답했다. 이건 양심의 문제였다. 거짓말 쳐서 순위 하나 올리지 말고, 한 만큼만 받자고 생각했다. 쓰고 보니 당연하네...
🧻 결과
위에 저 휴지는 내 눈물 닦는 용도이다. 백엔드, 웹, 앱 모두 구현했지만 상을 못받았다. 솔직히 화가 났다. 내가 한 만큼 결과가 따라주지 않으니까 너무 억울했다. 솔직히 3등은 받을 줄 알았다. 그렇다고 상 받은 다른 친구들을 후려치기는 것도 인성에 문제있다. 그냥 이번 해커톤을 계기로 다음에는 소켓도 활용하고, 아이디어도 좀 더 많이 생각해보면 될 것 같다.
😳 느낀점
사실 기술 스택이 정해져있다보니, 아이디어가 한정적으로 나왔던 것 같아서 아쉬웠다. 기술 스택에 제한이 없었으면 더 좋은 아이디어가 나왔을 거 같기도 하다. 하지만 이 아이디어에서도 아이디어를 확장해나가는 과정이 좋았다. '월패드'가 좋았다고 생각한다.
하지만 구현한 것에 후회는 없다. 개발하는 사람이 2명밖에 없는데 앱, 웹, 백을 다 한 게 너무 멋있었다. 특히 내가 앱을 해본 적도 없으면서 무작정 구현했던 게 낭만 있고 좀만 더 늙었으면 못할 생각인 것 같다. 아 좀 더 늙었으면 리액트 네이티브도 찍먹해봤을 거 같다.
진짜 나 소켓 공부하고 만다 진짜루 진짜...
🔗 Link
