[210204~210206]SW중심대학 공동해커톤 후기

[210204~210206]SW중심대학 공동해커톤 후기

 

2021년 2월 4일부터 6일까지 2박 3일간의 해커톤 후기를 남겨보고자 한다.

시작 전

    SW중심대학 공동해커톤에 대한 공고를 학교 홈페이지에서 보게 되었다. 알고리즘 대회에만 몇번 참가해보고 해커톤에는 한번도 참여해보지 않았는데 선배들이 한번 나가보는 것도 괜찮다고 했던 말이 생각나 덜컥 접수해버렸다. 몇일 뒤, 선발되었다는 메일이 왔고 걱정이 되기도 했다. 2박 3일 그 짧은 시간안에 서비스를 하나 만들어야 할텐데 내가 잘할 수 있을까라는 걱정이 제일 컸던 것 같다.

---

팀빌딩

    걱정을 안고 OT 이후에 팀빌딩이 시작되었다. 이번에 해커톤은 온라인으로 진행하는 방식이라 그런지 팀빌딩도 미리 진행하였다. OT 이후부터 해커톤 시작일인 2월 4일 전까지 팀빌딩을 완료해야 했다. 팀빌딩은 아이디어가 있는 사람이 사이트에 아이디어를 올리면 다른 사람이 그 소개글을 보고 마음에 드는 아이디어가 있으면 팀원으로 참가하는 방식이었다. 초반부터 아이디어들을 쭉 보면서 내가 할 수 있는 기술 스택과 맞춰보다가, 끌리는 아이디어가 있어서 신청하게 되었다. "알바꼼꼼"이라는 아이디어였는데, 평소에 알바를 하면서 출퇴근을 관리하기 어렵고 대타를 구하기 힘들었던 기억을 살려 아이디어를 내셨다고 하셨다. 나도 평소에 여러 알바를 해보며 해당 아이디어에 공감하는 부분이 많았고, 한번 만드는데 참여해보고 싶어 신청하였다.

    첫날(2/4)까지 팀빌딩이 안된 경우, 해커톤 운영위원분들이 직접 나서서 팀 매칭을 진행해 주신다. 나는 그전에 미리 팀빌딩을 마쳐 정확한 과정은 모르지만 모두가 만족스럽게 팀빌딩을 마쳤던 것 같다.

 

---

첫날

    첫날에는 팀끼리 slack 채널을 파고, zoom을 이용해서 아이디어 구체화에 들어갔다. 우리 팀원은 프런트엔드 개발 2명, 백엔드 개발 1명, AI 개발 1명, 디자이너 1명, 총 5명이었다. "알바꼼꼼"이라는 아이디어의 주요 기능/페이지은 다음과 같다.

• 랜딩페이지
• 로그인/회원가입
• 캘린더를 이용한 출퇴근 기록
• 캘린더를 이용한 대타 구하기
• CCTV 객체 인식을 이용한 당일 매장 혼잡도 계산 (YOLO)
• 출퇴근 기록 및 혼잡도 정도를 이용한 알바생 월급 산출

처음에는 이정도로 명확하게 기능을 정해놓지 않아서 개발을 시작할때 막막한 느낌이 있었다. 이후에 중간중간 회의를 통해 기능을 명확히 하였고, 개발을 진행하였다. 나는 주로 프런트엔드를 담당했는데, 다른 프런트엔드 개발자분이 백엔드도 함께하게 되면서 프런트엔드 대부분의 기능은 내가 구현하게 되었다. 그만큼 앞으로 서술하는 내용도 프런트엔드에 좀더 초점을 맞춰 얘기하게 될 것 같다. 프런트엔드는 react로 진행하고 백엔드는 flask, AI는 yolo 모델을 가져와 사용한다고 하셨다. 아무튼 첫날에는 기획이 가장 큰 부분을 차지했고, 각자 역할을 나눠서 개발을 진행했다. 첫날에는 스타트를 끊는 디자이너분이 조금 바쁘셨다. 처음에 디자인을 받아야 개발을 시작할 수 있었기 때문이다.

귀여운 SW중심대학 공동 해커톤 공식 사이트

---

둘째날

    둘째날, 사실 둘째날이라고 하기도 애매하다. 2박 3일동안 4시간도 자지 않고 개발을 했다. 그래도 첫날에는 마지막날 스퍼트를 내기 위해 새벽 5시부터 9시까지 4시간 정도 자고 일어났다. 편의상 둘째날이라고 하자.

    둘째날에는 중간중간 의욕을 돋구기 위한 멘토님과의 질의응답 시간과 팀별 개발상황 공유 라이브가 있었다. 개발에 너무 집중이 안되면 라이브로 진행하는 방송에 들어가 영상을 시청하고 다시 힘내서 돌아와 개발을 진행하였다. 둘째날 오후에는 페이지의 라우팅부터 모든 페이지의 ui가 완성되었다. 또한 로그인/회원가입 페이지는 다른 프런트엔드 개발자 분이 구현해 주셨다. 나는 캘린더가 포함된 페이지를 맡아서 개발하였는데, 처음에는 제한된 시간에 캘린더를 어떻게 구현하면 좋을지 고민이 되었다. 구글링 후, react-big-calendar라는 라이브러리가 있다는 것을 발견했고, 이를 받아서 일부 디자인을 수정하는 방향으로 시간을 단축할 수 있었다.

    이날은 아예 잠을 자지 않고 개발을 진행했다. 가장 막혔던 부분은 대타를 구현하는 부분이었다. 백엔드에서 api가 가장 늦게 개발되어 다들 지친상태에서 개발을 진행해 여러 오류가 있었던 것도 하나의 이유였고, react hook을 사용하는 과정에서 useEffect를 사용하는 것이 익숙하지 않았던 것도 하나의 이유였다. 또한 styled-component를 사용하는데 font-face가 잘 먹히지 않아 폰트를 적용하는 것도 꽤나 헤맸다. 이부분은 styled-component의 globalstyles에서 font-face를 사용하는 것에서 나타나는 고질적 이유(by. stackoverflow)라고 한다. 일단 css로 적용해서 개발을 진행했다.

    이번 해커톤을 참가하며 온라인임에도 불구하고 굉장히 완성적인 해커톤이라고 생각했는데, 그 이유 중 하나가 바로 멘토링이었다. 일단 이번 해커톤의 후원사가 네이버 클로바와 커먼컴퓨터였다는 것부터 시작해서 현업에서 일하고 계시는 개발자분들과 디자이너 분들, 마이크로소프트, 토스 등의 회사에서 일하고 계시는 개발자분들도 있었다. 학생 입장에서 직접 만나기 어려운 분들을 이렇게 모셔놓고 1:1로 멘토링을 할 수 있다는 것 자체가 무척 메리트있었다. 우리도 AI관련 api 사용에 대해 멘토링을 진행하였다.

---

마지막날

    새벽 8시가 됬을 때, 우여곡절끝에 개발과 발표준비를 모두 마치게 되었다. 개발이 끝날때까지 기다려주신 디자이너분이 고생이 많으셨고 다른 개발팀원분들도 개발에 매진하느라 고생이 많으셨다. 구현하기로 했던 기능을 1%는 부족했지만(CCTV 영상은 오픈된 데이터가 많지 않아 사람 캐릭터가 나오는 심즈 게임 영상으로 대체, AI를 웹서비스에 적용하지 못함) 이외의 기능은 완성하게 되었다. 오후 1시 30분부터 팀별 발표가 진행되었고, 인당 5개의 투표를 통해 수상자가 정해지게 되었다.

랜딩 페이지

캘린더 페이지

---

소감

    2박 3일동안 개발에만 매진해 피곤하기도 했지만 피곤함을 열정으로 이겨내 하나의 서비스를 완성시킨 우리 팀원들에게 너무 고마웠다. 비록 수상은 하지 못했지만 디자이너와 협업을 해보고, 장시간동안 개발에 매달려본 경험은 이후에 쉽게 하지 못할 소중한 경험이 된것 같다. 다른 팀들의 결과물을 보면서 이걸 이렇게 할수도 있고, 이런 아이디어가 이렇게 발전될 수 있구나라는 생각을 하기도 하면서 스스로도 많이 발전할 수 있었다. 가장 큰 것은, 앞으로 해커톤이 있다면 주저하지 않고 나가볼 것이라는 것이다. 해커톤에서는 단기간동안 완벽에 가까운 서비스를 개발하기를 원하지 않는다. 필요한 기능만 개발하며 각각의 개발자가 성장하고 네트워크를 형성하는 것만으로도 해커톤을 충분히 경험하고 오는 것이라고 생각한다. 앞으로 또다른 기회가 생긴다면 다른 기술 스택으로 개발을 해보거나, 이번엔 직접 아이디어를 내고 참여하고 싶다. 아래에 개발을 진행한 코드 링크를 첨부한다. (SW중심대학 공동해커톤에서 개발한 모든 코드는 오픈소스로 공유하는 것이 원칙이다.)

 

github.com/swHackathon11

swHackathon11

 

 

#SW중심대학협의회 #SW중심대학 #소프트웨어중심대학 #소프트웨어
#과기정통부 #과학기술정보통신부
#인재양성 #사람투자 #10대과제 #당신의꿈에투자합니다
#AI #SW #10만인재양성