멋쟁이 사자처럼 직장인, 서울 5기 해커톤!
<비전공자, 기획과 개발로 해커톤을 준비하다> 시리즈의 마지막 이야기
멋쟁이 사자처럼 서울 직장인 5기, 웹 서비스 기획 중 느낀 점과 과정을 써온지 벌써 네 번째 글이다. 오늘은 드디어 마지막, 해커톤에 대한 내용이다.
앞선 글들의 링크는 아래에!
▼1편 링크▼
비전공자, 기획과 개발로 첫 해커톤을 준비하다 (1) : 멋쟁이 사자처럼 직장인 서울 5기, 공부법과 커리큘럼 그리고 느낀 점
▼2편 링크▼
비전공자, 기획과 개발로 첫 해커톤을 준비하다 (2) : 멋쟁이 사자처럼 직장인 서울 5기, 아이디어톤과 팀빌딩
▼3편 링크▼
비전공자, 기획과 개발로 첫 해커톤을 준비하다 (3) : 멋쟁이 사자처럼 직장인 서울 5기, 서비스 개발 과정
06. 해커톤
1) 해커톤을 준비하는 자세
긴 여정의 피날레, 해커톤이 다가왔다.
길어지는 모임 금지 연장 끝에 결국 아슬아슬 하지만 해커톤 날짜가 정해졌다. 멋직 측이 몇 개의 날짜를 선택지로 주었고, 짧은 투표시간이 주어졌다.
2월 중순쯤, 멋직 공지
해커톤 일정 결정 후, 멋직 공지투표 결과 정말 몇 안 되는 인원의 참석.. 아찔했다.
아무리 우리끼리 해커톤이라지만 그동안의 과정을 생각하면 더 많은 사람들에게 결과를 보여주고 싶었던 마음으로 작년 12월부터 그렇게 미뤄온 건데 조금 허탈하기도 했다. 하지만 불참을 선언한 다른 수강생들의 마음도 이해가 갔다. 이미 두세 달 동안 지나오면서 시간과 노력을 투자해야 하는 당위성을 잃어왔을 테고, 그런 것들이 서로 마음에 맞지 않아 팀이 와해됐을 수도 있겠다.
사실 해커톤을 나흘 앞두고 나조차도 살짝 흔들렸다.
과정도 좋았고, 팀원들과 관계도 좋았는데 만약 결과가 안 좋거나 한다면 그 좋았던 과정들까지도 무색해질까 봐 살짝 두려웠다. 그래도 팀장이니까, 빠른 결정을 해야 한다고 생각했고 팀원들의 의견을 물었다. 우리의 결론은 일단 고! 였다. 그래도 끝맺음은 의미 있으니까! :)
하지만 HTML/CSS 는 거의 완성했지만, 주요 기능들 개발이 아직 덜 되어있는 상태에서 3일은 당연 짧은 시간이었다. 팀원 4명 중 나를 제외하고 해커톤에 참석할 수 있었던 팀원 한 명과 빠르게 to-do list를 리스트업을 했다.
해커톤 D-3, To-do list
1. 검색 기능 개발
- 텍스트 입력 검색
- 카테고리 중복 선택(필터) 검색
2. tab-menu 안에서 데이터 저장되고 반영시키기
3. 해시태그 DB로 보내기
4. 북마크 기능
2) 발등에 불 떨어진 개발
[ 검색 기능 개발 ]
to-do list에서 내가 가장 중요하게 생각하면서 담당한 부분이기도 했던 검색 기능만 짧게 적어보기로 했다.
우리 서비스에서 텍스트 검색, 그리고 여러 조건에 따른 필터가 있는 카테고리 검색이 필수라고 생각했다.
사실 검색 기능은 몇 날 며칠을 몰라서 고민한 부분이었다. 하지만 역시는 구글링.. 그리고 온갖 도움의 손길들(?)을 통해 정말 몇 줄 안 되는 함수를 완성했고, 텍스트 검색부터 성공시킬 수 있었다. 참고로, 장고는 q 객체를 이용해 검색 기능을 아주 쉽게 만들 수 있다.
몇 줄 안 되는 함수는 이러하다.
q객체를 이용한 검색 기능 구현 views.py (꼭, import Q를 해야 한다!)사실 우리의 D-3, 발등에 불 떨어진 개발은 해커톤 당일까지 이어졌다. 반절은 거의 해결하지 못한 채로 여러 가지 시도들만 난무한 채, 해커톤에 들고 갔었다. 검색 기능 중 카테고리 검색 또한 해결하지 못한 문제 중 하나였다. 중복 선택이 되도록 보이는 프론트엔드 부분까진 해결했지만, 백엔드가 관건이었다. 선택한 대로 중복된 값을 DB로 보내야 했고, 그에 맞는 결과를 보여줘야 했다. 결국 필터 검색 부분은 강사님의 도움을 매우 많이 받고서야 해결할 수 있었다. 중복 선택되는 카테고리들은 input type이 checkbox였고, 이는 js로 해결할 수 있었다.
초기 중복 선택 가능한 필터 검색창 부분 화면 /FIF-project
최종 필터 검색창 부분 화면 /FIF-project[ 개발 마무리 ]
한 페이지에서 activeTab(tab-menu)을 두어 상단 부분 변화 없이 하단 페이지만 변경하게끔 만들기 위해 사용한 함수, 해시태그를 입력하고 엔터를 치면 바로 나오게끔 만든 함수, API를 활용한 구글 캘린더 연동 적용, 찜을 누르면 특정 페이지에 분류되어 보이는 북마크 기능 등.. 더 쓰자면 더 쓸 수 있을 정도로 정말 많은 기능 구현의 연속이었다. git status, git add, git commit, git push.... 끊임없는 깃과 깃허브 사용, postgreSQL을 사용한 DB 관리까지.. 돌아보니 정말 많은 것들을 만들었고, 정리했다. 그리고 무엇보다, 엄청난 양의 HTML/CSS를 보는 순간 다시 한 번 팀원들에게 미안해졌다.
activeTab(Tab-menu) / FIF-project
드롭다운 메뉴 / FIF-project
사용한 languages /FIF-project결과적으로 말하자면, 우리의 to-do list는 해커톤 당일까지 대부분 해결할 수 있었다. 물러설 곳이 없는 입장이 되니 정말 결국 다 해버렸다. 특히 해커톤 날까지 끙끙 앓던 부분은 메인강사님의 시원시원한 서브와 코칭 덕분에 코드 몇 줄로 해결되기도 했다.
발표 전엔 직접 디자인하고 제작한 스티커도 전부에게 나누어주었다. 심볼 캐릭터로 만들었던 피피와 프프..
(원래는 거대한(?) 해커톤을 기대하고 제작한 홍보용이었다.)
그리고 드디어, 발표만을 앞두게 되었다.
3) Hack your life, HACKATHON!
적당한 순서에 발표를 마쳤다. 인원이 적은 해커톤의 장점은 시간이나 분위기에 쫓겨 급히 발표를 끝내지 않아도 되는 것..이었다고 말하고 싶다. 그동안 함께 고생해서 만든 우리의 서비스를 구석구석, 보여주고 싶었다. 아니 보여줘야만 했다! 배너나 이미지 하나하나 직접 만들고, 글씨체와 자간, 그리드나 블록 크기, 각종 js/css 효과들, 진짜로 구현되는 기능들까지.. 결과를 떠나서 그런 노력의 결과물을 낱낱이 보여주고 싶었다.
그리고 그 결과, 당일 배포를 안 한 감점 1점을 제외한 만점으로 화목/수토반 전체 중 2등을 하게 되었다.
멋쟁이 사자처럼 직장인 5기, 해커톤 2등 사실 사전에 '시현 외에 참가자나 강사님들에게 url을 전달하여 직접 체험하게 하는지'에 대해 물은 적이 있었고, '완성된 서비스를 모니터를 통해 시현하면서 보여주는 형식으로 진행된다'는 답변을 받았어서, 그럼 deploy를 굳이 해야 하나 싶어서 아예 제외시킨 부분이었다. 가상의 회원 ID도 직접, 잔뜩 DB에 만들어 둔 우리로서도 직접 체험하게 하는 것이 가능했다면 당연히 deploy까지 진행했을 것이다. 도메인도, AWS도 깔끔하게 세팅해 둔 상황이었으니까! 그래서 그 부분이 감점요소라고 들었을 땐 조금 아쉬웠다.
1등을 한 팀은 모바일 앱으로 만든 팀이었는데, 군더더기 없이 깔끔하게 잘 만들었다고 생각했다. 물론 웹사이트를 만들자고 모인 멋직의 의도와는 조금 엇나간 게 아닌가 싶긴 했다. 아무튼 우리 팀 모두 개발을 1도 모르고 시작한 우리는 정말 0부터 시작했고, 또 아낌없이 노력했기 때문에 후회는 없었다!
4) 진짜 끝!
사진 촬영까지 모든 게 끝나고 메인 강사님이셨던 희햄님과 긴 인사를 나눴다. 또 다른 모습으로 만날 언젠가를 기약하기도 했다. 정말 커리큘럼 내내 아낌없이 가르쳐주셨고, 도움이 필요하면 언제든 연락하라던 감사한 희햄님 :-) 지금도 아주 잘(?) 연락하며 지내고 있다. 아, 덧붙이자면 여러모로 아쉬움도 있었지만 고생해 준 멋직 측에도 고마움을 전하고 싶다!
그리고 코로나로 인해 전체 회식이나 모임은 없었지만, 우리끼리 모여 회포를 풀며 늦은 식사를 했다. 함께 참여하지 못한 팀원들에게 결과도 전했다. :)
서비스를 직접 기획·개발하면서 여러모로 느낀 것도, 배운 것도 많다. 기획자 입장으로서, 더 나은 세상을 위해 끊임없이 고민하는 사람이어야겠다는 생각을 다시 한번 다졌다. 그리고 무엇보다 사람을 얻었다. 정말 멋진 팀원들과 도움을 주신 분들, 강사님들까지.. 앞으로 각자의 방향이 어디로 향할지는 모르지만 모두 스스로가 옳다고 믿는 방향에서 멋진 삶을 살길 응원하며! 진짜 끝!
Copyright 2021. 임지은 All pictures cannot be copied without permission
