서론
해커톤이 시작한 지 벌써 일주일이나 지났네요. 더 늦으면 기억이 완전히 날아갈 것 같아서 그전에 정리하고 있어요.
우선 열심히 수고해 준 팀원 분들께 감사의 말을 전합니다. 여러분 아니면 트랙 2등이라는 좋은 결과를 얻지 못했을 거예요.
본론
사실 처음에 나가지 않으려고 했어요.
제 첫 번째 해커톤 경험은 2019년도 JunctionXSeoul이었습니다. 그때는 해커톤에 첫 참가라 어떻게 진행되는지도 몰라서 정말 미숙했습니다. 고생은 고생대로 했는데, 계획한 대로 결과가 나오지도 않았습니다. 아는 것도 없으니 나서서 적극적으로 하지도 않았죠.
문제 원인은 정말 다양했어요.
- 부족한 기술: 자기소개에 적었던 Django는 매우 기초 수준이라 제대로 쓰는 법을 몰랐습니다.
- 부족한 홍보: 지금은 개인 프로젝트도 조금씩 해서, 나름대로 Resume도 있지만, 이때는 그런 게 전혀 없었습니다.
- 팀 빌딩: 부족한 기술과 홍보 때문에, 그리고 제일 결정적으로 소극적인 태도 때문에, 팀 빌딩에서 적극적으로 나서지 않고 당일에 겨우 팀을 구했습니다.
- 체력 문제: 이건 지금도 약점이지만, 오프라인이라는 특성 때문에 학교가 있는 광주에서 대회장이 있는 서울로 가는 것만으로도 체력을 꽤 많이 썼습니다.
- 해커톤에 대한 이해 부족: 완성된 제품을 구현하는 데 너무 신경을 많이 쓴 나머지, Track에서 요구하는 기술 스택 같은 것들이 제대로 작동을 안 하면 거기서 막혀서 시간을 너무 많이 썼습니다. 발표 단계에서, 많은 팀이 다양한 프로토타입을 가지고 발표하는 것을 보고 나서야 이 문제를 깨달았죠.
이렇듯 여러 이유로 제대로 돌아가질 않았고, 광주-서울 왕복도 힘들고, 당시 제 시간표가 엄청 힘들 때 저렇게 오프라인으로 다녀온 거라 너무 지쳐서 한동안 해커톤을 생각도 못 하고 있었습니다. Junction뿐만 아니라, 다른 해커톤도 나가질 않았어요.
근데 이번엔 나가게 되었어요.
그렇지만 올해는 나가게 되었습니다. 제 참가 목적은 단순했습니다. 현재 진행 중인 팀 프로젝트가 잘 풀리지 않는 상황에서 열정을 되찾고 싶은 게 제일 큰 이유였습니다. 그 외 또 다른 이유는 제가 HCI라는 분야에 관심을 가지게 되면서, 디자이너 분과 기획자분들과도 이야기를 해보면서 관련된 정보를 얻고, 그걸 현재 하는 프로젝트 같은데 적용해 보고 싶었거든요.
무엇보다 상황이 아주 달랐습니다.
- 기술: Django를 다루다가 프런트엔드로 갈아타고, React를 쓰고 있었는데, Django를 다룰 때보다 전체적으로 숙련도가 올라가 있었고, 흥미도 더 있는 상태였습니다.
- 팀 빌딩: 같이 팀 프로젝트를 진행하던 사람 중에서 저를 포함해 3명이 같이 참여했고, 이 3명 다 개발자다 보니 기획과 디자인이 필요하다는 팀 빌딩에 필요한 방향성을 잡을 수 있었어요.
- 홍보: 저도 그사이에 경험이 조금 쌓여서, 자신을 홍보하기 위한 Resume을 작성한 적도 있었고, 다른 2명도 개발 경험을 보여줄 수 있는 github이나 포트플리오 페이지가 있었습니다.
- 온라인 해커톤: 온라인 해커톤이라 체력 문제가 많이 해결되었고, 무엇보다도, 제대로 씻을 수가 있었습니다. 오프라인 때는 행사장에서 씻을 수 있는 공간으로 이동하는 데 시간이 오래 걸렸는데, 이번엔 그냥 방안 샤워실을 가면 되었으니깐요.
- 해커톤이라는 대회 특성의 이해: 팀원 중에 다른 해커톤에서 저와 비슷하게 개발과 완성에만 집중하다가 프로젝트가 망한 경험이 있었던 사람이 있어서, 해커톤이라는 대회의 특성을 어느 정도 공유하고 출발할 수 있었습니다.
여러모로 변한 상황이었고, 개발자 3명은 그렇게 JuctionXSeoul 2021에 도전해 보기로 했습니다.
Team Caffeine, 갑니다!
그렇게 3명이 모여서, 방 안에 있는 아무 사물이나 떠오르는 것을 말해보다가 카페인이라는 팀 이름까지 정하게 되었습니다. 팀 카페인의 초기 멤버는 3명, 2명은 프엔 위주고, 1명은 백엔 위주의 개발 경험을 가졌습니다. 제일 큰 문제는 기획과 디자인이었습니다. 아이디어야 저희도 생각할 수 있지만, 그것을 다듬고 UI/UX 적으로 표현하고, 발표자료를 깔끔하게 다듬어줄 그럴 능력이 저희는 부족했거든요.
최소 디자이너 1분, 기획자 1분이 필요하다고 생각해서 모집공고와 포스터를 만들어서 올렸습니다.
그렇지만 공고를 올린 것 만으론 사람이 모이지 않더라고요. 그래서 저희는 직접 나서기로 했습니다. 사실 팀원 모집에 관해서는 서강현 님이 주도적으로 해주셨습니다. 그렇게 처음으로 합류하신 분은 기획자이신 백승호 님이었고, 그다음으로 디자이너 양정안 님과 김동빈 님이 합류하셨습니다.
그렇게 저희는 원하는 팀 구성을 갖췄습니다. 그러면 앞으로 일이 순탄하게 풀렸을까요?
사전 준비: 매체
본격적인 해커톤 전에 간단한 준비를 했습니다. 저와 또 다른 한 명은 프엔 쪽 개발자라, 디자이너분들과 직접적으로 소통해야 하는 일들이 많았습니다. 그래서 디자이너분들에게 어떤 도구를 쓸 것인지 미리 알려달라 했고, 디자이너분들은 Figma를 사용하기로 했습니다.
전 Figma 사용이 처음은 아니었지만, 간단한 그림 그리는 정도에만 썼지, 그걸 개발에 본격적으로 사용해본 적은 없었습니다. 그래서 Figma에서 스타일 시트를 보거나, 그림으로 저장하는 법, 구성요소 검색, SVG 추출 등의 방법을 미리 익혔습니다. 그리고 이 과정에서 Figma에서 바로 코드로 작성해 준다는 몇몇 서비스를 미리 사용해 보았는데, 우리가 필요한 것처럼 나오지 않은 걸 보고 미리 기술 스택에서 제외할 수 있었습니다. 팀 빌딩을 미리 하고, 미리 소통한 덕분에 이런 매체를 도입하는 데 있어서 시행착오를 줄일 수 있었습니다.
또 다른 매체는 줌과 슬랙이었습니다. 이미 기존 사용자들이 친숙한 매체라, 음성과 영상 커뮤니케이션은 줌으로, 문자와 장기 보관이 필요한 기록들은 슬랙을 통해 이루어졌습니다. 친숙한 매체라 별도로 학습 시간이 필요 없다는 장점도 있었고요.
해커톤의 밤이 깊었습니다. 참여자들은 고개를 들어주십시오.
그렇게 저녁이 되어 해커톤이 시작되었습니다. 다시 19년도 첫 해커톤 참여했을 때 그 느낌을 유튜브에서 크류 분들이 전해주시더라고요. 트랙 소개를 듣고, 저희는 미션 1부터 미션 5까지 Junction에서의 여정을 이어갔습니다.
첫째 날 : 기획 기획 또 기획
첫째 날에는 대부분 팀이 자기소개와 기획 위주로 돌아갔을 거로 생각합니다. 저희 팀도 그랬고요. 여러 트랙 소개를 들으면서 아이디어를 생각해냈습니다. 그래서 나왔던 아이디어 목록은
- (AWS) 멀티 플레이 게임 시 "저기!"라고 말로 하면 그게 어딘지 보여주는 무언가
- (AWS) AWS 학습을 게임화하기
- (AWS) 리듬 게임 랭크 기록 및 다음 난이도 연습 추천해주기
- (AWS) TRPG 도우미
- (MS) 일정 관리/메시지 전송/그룹 관리를 포함한 면접 및 인사 관리 툴
- 이 외에도 한 두 마디 나오고 버려진 많은 아이디어
여러 아이디어와 그에 맞는 트랙을 논의하면서 방향성이 점차 잡혀 나갔습니다. MS 트랙 같은 경우, 우리 아이디어와 연결 짓기가 힘들기도 했고, 낯선 특정 기술 스택을 요구하는 내용이라 자연스럽게 제외되게 되었습니다. SIA 같은 경우 저희가 이미지 처리와 관련돼서 깊은 지식을 가진 사람이 없고, 마찬가지로 지리 데이터와 연결 지어서 활용하는 아이디어가 많이 나오지 않아 제외되게 되었습니다. 남은 아이디어 중에서 AWS와 연관된 것은 별로 없었고, 제시되는 아이디어 중에 교통에 있어 겪는 어려움을 AUTOCRYPT의 기술로 해결하자는 이야기가 많이 나와서 AUTOCRYPT 트랙으로 방향이 잡혔습니다.
운전하면서 겪는 어려움을 AUTOCRYPT의 데이터를 통해 경고하는 방법, 겪는 어려움에 무엇이 포함되는지 의논하다가 교통약자에게 맞춰서 택시 서비스를 AUTOCRYPT의 데이터를 이용하여 제공하자는 아이디어가 나왔고, 어뷰징 문제를 고려하는 동안 새벽이 다 되었습니다. 이렇게 한참 의논을 하다가 일단 머리를 식힐 필요성을 느낀 저희는 일단 잠을 자고 나서 다시 모이기로 했습니다.
둘째 날 : 개발 전야의 기획
그렇게 해서 다음 날 자고 일어나서, 기존에 나온 서비스와 큰 차별화가 힘들다. 유사한 아이디어가 경쟁팀에 나왔을 수도 있다. BM관점에서 발전 가능성 문제 같이 여러 이유로 다른 아이디어를 논의하기도 했습니다. 계속 줌으로 이야기를 하다가, 의견을 모으기 위해 Miro라는 툴을 썼습니다. 처음 써본 툴이긴 했지만, 사용법이 직관적이라 아주 어렵지 않더라고요.
덕분에 하고자 하는 이야기를 어느 정도 정리해서 AUTOCRYPT 트랙 오피스 아워에 제출할 수 있었습니다. 사실 이 시점까지도 기획에 어느 정도 방향성이 확실하지 않았는데, AUTOCRYPT 오피스 아워에서 담당자분이 확실하게 트랙의 방향성과 그에 따라 아이디어 평가를 해주셔서 확실하게 방향을 잡을 수 있었습니다. AUTOCRYPT 측에서 명확하게 제시하는 방향이랑 맞는 아이디어는 원래 아이디어인 교통약자를 위한 택시 매칭 서비스로 방향이 잡혔습니다.
이 이후로도 의견 공방이 치열하게 오갔는데 일주일이나 지나서 제대로 기억이 안 나네요. 이때 의논한 내용 중 일부는 데모 개발과 발표 자료 준비 시간에 대한 부담감 때문에 제대로 끝나지 못한 부분도 있었지만, 그래도 어느 정도 정리한 뒤 이후 작업에 들어갔습니다. 기획이 이렇게 길어졌지만 그래도 좋은 내용이 나올 수 있었던 것은 승호 님이 말한 모두가 끌리는 것이 있어야 한다는 말에 공감했기 때문이라 생각합니다. 모든 참가자가 끌리는 것이 있을 그런 내용을 준비하다 보니 자연스럽게 기획이 길어지게 되었지만 그래도 그 덕분에 모든 사람이 공감하는 기획안과 방향이 준비될 수 있었습니다. 그래서 이후에도 크게 흔들리는 일이 없이 작업할 수 있었다고 생각해요.
기획이 끝난 다음에 본격적으로 제품 디자인과 데모 개발, 발표 자료 준비가 시작되었습니다. 제가 본 부분은 개발 쪽 위주라 그 위주로 적겠습니다. 디자인이 개발 작업에 필요한 정도로 갖춰지는 동안, 개발자들은 의논을 거쳐서 백엔드 개발자 팀원 한 분을 프런트엔드 개발에 투입하기로 하였습니다. 기존에 프론트엔드 경험이 있던 사람이기도 하고, AUTOCRYPT 자체에서 제공하는 정보의 형태에 대해서 구체적으로 제약을 두지 않았기 때문에, 프론트엔드 단에 다 넣어 놓는 형식으로 데모를 제작하기로 했습니다. 또한 저희가 생각한 아이디어는 모바일 앱이지만, 구현 난이도와 기술 스택의 편의성 문제로 Create React App을 이용한 SPA 형태로 제작하기로 했습니다. 데모 페이지를 위한 URL 구매까지 마치고 작업에 들어갔습니다.
그렇지만 남은 시간 동안 밤새우면서 진행된 개발에서는 많은 어려움이 있었습니다.
1. 폰트 문제
개발 과정에서 처음으로 만난 문제는 디자이너분들이 Figma에서 작업한 폰트를 윈도용이나 웹폰트 용으로 구할 수 없었다는 것입니다. 라이선스를 어기면 방법이 있긴 했지만, 그것보다는 폰트 수정이 더 적절하다고 생각해 폰트를 변경해서 작업했습니다.
2. 작업 순서 문제
저희가 이미 작업에 들어간 페이지가 디자인이 조금씩 수정되는 일이 있었습니다. 그래서 작업했던 부분이 필요 없게 되는 일이 있었는데요. 이 문제는 확실하게 디자인 방향이 잡힌 페이지를 따로 목록을 모아서 그 부분부터 작업하기로 하는 것으로 했습니다. 나중에 개발자들도 누가 어떤 페이지를 이미 작업했는지 헷갈리는 일이 생겨서 비슷한 방식으로 문제를 해결하였습니다.
3. 지도 띄우기
택시를 잡는 화면을 보여줘야 하는데, 여기에 사용되는 배경 이미지를 처음에는 지도를 띄우려 했습니다. API Key를 발급받고 이리저리 해보았지만, 잘 안 풀렸고, 우리가 원하는 형태로 마커를 띄워주는 방법 같은 것도 복잡하기에 그냥 지도 서비스를 이용하는 것을 포기하고 배경에 이미지를 박아 넣는 것으로 대신하였습니다
4. 별점 주기 만들기
그다음 제가 만든 것은 택시 운전을 평가하는 항목이었습니다. 이 과정에서 별점 주기가 사용되었는데요. 이 컴포넌트는 찾아보니 좋은 글이 많아서 생각보다 금세 작업할 수 있었습니다. 가장 많이 참고한 글은 별점 기능 구현하기입니다. 다만 이 과정에서 조금 아쉬움이 있었는데요. SVG fill을 사용할 때 자연스럽게 채워지는 애니메이션 같은 건 구현하지 못했습니다.
5. 토글스위치 만들기
토글스위치를 구현해야 했는데, 문제는 제가 디자이너분들이 디자인 한 대로 그대로 구현하지도 못했고, 그리고 그걸 컴포넌트 스테이트 하고 연동하지를 못했습니다. 밤새워서 이 문제에 매달렸는데, 결국 여기에 시간을 더 쓰는 것을 포기하고 그냥 클릭만 가능하게 구현했습니다. 당시 밤을 새운 상태라 머리가 해롱해롱 거려서 도저히 이해가 안 되었는데, 다음엔 제대로 구현해 보고 싶네요. 가장 아쉬움이 드는 부분이었습니다.
이 시점에서 대부분 피로 때문에 자러 갔는지 free_talks 채널에도 농담 하나 안 올라오고 저희 팀원분들도 자러 갔습니다. 저도 개발을 더 진행 못 할 정도로 머리가 마비되기도 했었어요. 다른 팀원들이 잠깐 3시간 정도 눈 붙이는 동안 저도 자버리면 제 시간 안에 못 일어날 것 같아 발표자료에 기술 파트에 조금 내용을 채워 넣은 뒤, 다른 팀원이 일어난 것을 확인하고 저도 잤습니다.
셋째 날 : 3시를 향하여
다른 팀원분들이 제가 자고 일어나는 동안 애니메이션 작업과 추가적인 로직, 발표자료와 디자인들을 더 완성해 놓은 상태였습니다. 그렇지만 아직도 문제가 몇 개 남아있었습니다.
5. 개발 시간문제
개발 시간이 예상보다 모자랄 수도 있다는 불안감에, 이 시점부터는 대부분 작업을 날림으로 처리하였습니다. 그냥 크기만 대충 잡아놓고, 백그라운드 이미지로 박아 넣는 형식으로 해결했어요. 다행히 디자인 수정 사항이 거의 없어서 별문제는 안 되었습니다.
6. CSS 선택자 문제
급하게 작업하다 보니 CSS 선택자가 중복으로 적용되어 이상한 스타일이 적용되는 경우가 있었습니다. 이 부분은 치명적이라 바로 수정해 주었습니다.
7. 배경 문제
팝업창이 보이는 부분에 배경이 그대로 유지되고 거기서 팝업이 보였으면 좋겠다는 피드백을 받아 그 부분을 수정하였습니다. 어떻게 하면 할지 고민을 했는데 CSS 자체적으로 배경 혼합에 관한 설정이 있어서 그걸 적용했습니다.
background-blend-mode: multiply;
background: url("../assets/dest_map.png") rgba(0, 0, 0, 0.5);14시 38분에 아슬아슬하게 두 번째 완성하고, 급하게 데모 비디오를 찍고, 발표자료를 검토하고 그렇게 최종 미션 제출이 끝났습니다. 저장소에 README 도 정리가 안 된 상태였고요. 어쨌든 드디어 제작이 끝났고 다른 팀원분들과 마찬가지로 개발자들도 드디어 씻고 쉬러 갈 수 있었습니다. 커피 말고 먹은 게 없던 배도 떡볶이 시켜서 채우고 있었죠.
파이널리스트라고?
로제 떡볶이 먹으면서 이래서 좋았다 완성 못 한 이런 부분이 아쉬웠다. 이런 이야기를 하는데 믿기 힘든 소식이 전해졌습니다.
당시 개발자들은 주린 배를 채우면서 처음인데 좋은 분들 만나서 완성해서 좋았다. 저번처럼 너무 산으로 안 가서 다행이다. 이런 이야기 하고 있었는데 저런 소식이 들리니 엄청나게 놀랐어요. 급하게 뒷정리를 하고 구글 미팅을 하는데 들어오는 분은 거의 없더라고요. 다만 다른 팀은 적극적으로 free talk에 홍보자료를 올렸는데, 저희는 전혀 예상을 못 했다 보니 그런 쪽으로 활용을 못 했었습니다. 그래도 Mission4에선 제출하지 못했던 영상을 활용할 수 있어서 다행이었습니다.
그 이후
그 이후는 기쁨과 피로 때문에 제대로 기억이 안 나요. 애프터 파티에 참여했는데 개더의 미친 듯한 렉 때문에 5분 동안 같은 자리에서 움직이는 아바타 보다가 쉬러 갔습니다. 해커톤에 참여한 이유 중 하나가 네트워크였는데 별로 활용하지 못해서 아쉬웠어요. 심지어 같은 팀원들끼리 사진도 못 남겼습니다. 그렇지만 이렇게 참여한 해커톤에서 멋진 아이디어를 만들고, 계획대로 데모를 완성한 것만으로도 기뻤습니다.
결론
이번 해커톤에서 좋았던 점은 정말 많았어요. 좋은 팀원분들을 만난 것도 좋았고, 개발자 사이에서 업무 프로세스가 잘 진행된 것도 좋았고, 좋은 아이디어가 나온 것도 좋았습니다. 그렇지만 가장 좋았던 점은 팀원들이 끌리는 것을 해야 한다는 걸 공감하는 걸 넘어 직접 실천할 수 있었던 것이었습니다. 이게 아니었으면 2박 3일 동안 그렇게 빡세게 달리지 못했을 거예요. 해커톤에 참여하셨던 분들이든, 앞으로 참여하실 분들이든 여러분이 끌리는 것을 만들 수 있기를 바랍니다.