[최우수상] 2021 SW중심대학 공동해커톤 참가 후기

캥거루 2021. 2. 10. 03:01

작년 12월, 기말고사가 끝날 즈음 공지가 하나 올라왔다.

 

SW 중심대학(우리학교 포함 약 40여개)을 대상으로 하는 해커톤 대회였다.

각 학교마다 SW 개발자 4명, 디자이너 1명 이상을 뽑아서 추천할 수 있었다.

 

SW 중심대학에 대한 설명. 회장님이 우리학교 컴퓨터공학과 교수님이시자 동아리 선배 (킨젝스 1기) 이신 서정연 교수님이셨다. 

 

지금까지 해커톤 같은 대회 참가 경험도 전무했고, 그래서 잘할 수 있을지에 대한 고민부터 앞섰지만 ... better than never 라는 생각으로 지원했다.

 

 

대회 포스터

다행히도 교내에서 추가적인 선발 과정 없이 선발되었다..! 

프론트엔드 쪽으로 개발할 생각이 있었기에 그 전에 js와 React에 대해서 공부해야겠다고 계획을 세웠으나 ... 

 

how it works...

그렇게 해커톤 오리엔테이션 날이 되었다. (1월에 많은 일들이 있었다.)

엄밀히 말하면 오리엔테이션이 있다고 바로 개발을 시작하는 것은 아니고, 각자 아이디어를 등록하고 팀원들을 모집하는 시간이 약 4-5일 정도 주어진다. 내가 얼핏 알기로는 원래 해커톤 당일에 팀빌딩도 하고 그러는 것으로 아는데... 온라인이라 그런지 그런 과정이 어려우니 미리미리 등록하도록 해준 것 같다. (아님 말고)  같은 학교 출신은 한 팀이 될 수 없다는 룰이 있다. 다만, 디자이너랑 개발자는 같은 학교여도 된다. 우리 팀도 그랬다. 

 

처음부터 아이디어가 나온 것은 아닌데, 주말에 바빠서 해커톤에 대해 잊고있던 동안 아이디어가 꽤 등록되어 있었다. 그래서 아이디어가 괜찮아 보이는 몇몇 팀에 신청을 했다. 그런데 하루 이틀 지나도 팀원으로 등록이 안됐다. (?)

 

알고보니 직접 DM으로 어필을 했어야 했던 것.. (운영용 슬랙 채널 있었음)

 

그런걸 모르니 멍때리고 있다보니 이미 팀원 모집이 마감된 팀도 있었고, 3-4명은 이미 모집한 팀도 꽤 됐다. 갑자기 똥줄이 타서 지원한 팀의 팀장님들에게  DM을 보냈다. 하지만 다음날이 되어도 답장이 없었다....😢

 

아무튼 까인거 아님

답장은 안오는데 팀원들이 속속 차오르는걸 보면서.. 시작부터 약간 낌새가 좋지 않다는 생각이 들었다. 그도 그럴것이, 웹 대외 프로젝트 경험도 없고 해커톤 경험도 없어서 그렇게 반기진 않을 것 같기도 했다. (내가 팀장이었어도 뭐 해본 사람들 위주로 꾸리지 않았을까...?)  

 

그렇게 아 큰일났다 ...! 싶던 중 발견하게 된 아이디어가 바로 내가 참가하게 된 팀의 아이디어 모바일 인력 사무소(워크맨)컨셉이다. 팀이름은 봉고 (Bongo, 봉고차에서 따온 이름이다.) 일용직 노동자를 위한 앱으로, 생각해보면 다큐 3일 같은 방송이나 기사에서 숱하게 접했던 문제들과 관련한 솔루션이다. 일용직 노동자의 경우 새벽에 일찍 인력 사무소로 나가서 일자리를 구해야하고, 코로나 시국엔 사람들이 경제적으로 어려우니 그게 더 심해져서 조금만 늦게 나와도 일자리를 못구하고 허탕치고 돌아가는 경우가 많다고 한다. 사실 기약없이 기다릴 수도 없는 노릇인데 정말 급하면 거기에서 계속 기다려야한다... 라는 내용들이 내 머릿속을 잠시 스쳤다.

 

팀장님의 아이디어

 

그래서 팀장님께 슬랙으로 DM을 날리고 얘기를 나눴다. 처음엔 백엔드에 대한 이해도가 궁금하다, 파이썬 백엔드가 가능하시냐 이런 얘기를 했었고, 그 뒤로 백엔드와 관련한 여러 기술 스택 (sanic, postgreSQL, SQLAlchemy 등...) 에 대해서 이야기를 하려다가 잘 알지도 못하는데 주책부리지 말자 (?) 라는 생각으로 가볍게 이야기 했던 것 같다. 파이썬은 얼마나 잘하시냐 ... 등의 이야기를 나눴고, 파이썬 자체는 자신 있었기 때문에 이번 기회에 한 번 서버와 디비 연계하고 api 를 만들어 보고 싶었다 라는 식의 어필을 했었다. 원래는 프론트개발을 생각했었고, 리액트는 저번학기에 시간 투자를 꽤나 해서 공부했었으니까 프론트가 좀 더 자신있었지만 ... 내 생각엔 어차피 도긴개긴이었고 결국 풀스택 개발자를 해야겠다는 생각이 있었기 때문에 내린 선택이었다. 다행히도 긍정적으로 받아들여주셔서 팀에 조인하게 되었다.

 

시작은 4일 목요일 오후 부터였고, 그 전까지 뭘해야 하지 생각했는데... 하고 있는게 너무 바빠서 뭘 들여다 볼 시간은 안났다. 그나마 집에 flask 책이 있어서 집어들고 전날에 조금 들여다보다가 잤다. 

 

그러다가.. 대회 당일이 되었다! 나는 그날도 바빴고... 오리엔테이션을 볼 시간이 없어 스킵했다. 그러다가 사실 개발도 오후 5시부터 였는데 좀 더 늦게 참여하기 시작했던 기억이 난다. 그런데 갑자기 내가 프론트를 해야할 상황이 되었다. (백엔드 아니었나욤??) 근데 더 큰 문제는 프론트가 문제가 아니라, 우리 솔루션의 특성상

 

  • 앱으로 개발해야 한다.
  • 우리 팀에는 앱을 만들어 본 사람이 없다. 는 것...

 

어떡하지...

앱으로 개발을 진행해야된다!는 팀장님의 의지가 강력했다. 그 컨셉엔 사실 동의했다. 만약 이걸 웹으로만 구현한다면 편의성이라는 가장 중요한 컨셉이 사라지는 셈이기 때문. 문제는 어떤 기술스택으로 개발할 것인가... 였는데 4명 중 팀장님과 원래 백엔드를 하시던 팀원분(A씨)은 flask를 이용하여 api를 만들고 나와 다른 팀원 분(B씨)은 react native를 이용해서 개발하기로 했다. 리액트 네이티브는 완전 처음 사용해보지만, 그래도 나와 B씨, 그리고 팀장님은 모두 리액트 경험이 있기 때문에 그나마 익숙한 리액트 네이티브로 선택했다. 리액트로 개발하고 앱으로 뿌려주는 형식은 안될까? 라고 잠깐 생각도 해봤는데 일을 두 번 하는 셈이라 차라리 처음하더라도 네이티브로 부딪혀보자고 생각했다. (결론적으로는 그 선택이 옳았다.)

 

리액트 네이티브. ios와 안드로이드에서 모두 동작하는 js 기반 라이브러리이다.

하지만 항상 시작이 문제다. (그래서 시작이 반이라고 하나보다.) 모든 언어나 라이브러리나 프레임워크를 처음에 마주할 때 느끼는 그 감정... 도대체 어떻게 시작해야하지? 하는 막막함. 시간이 곧 금인 해커톤인지라 그 압박감은 더욱 컸다. 처음에 React native for beginners 같은 강의를 찾아보았다. (물론 2배속) 그리곤 빠른 개발을 위해선 expo를 사용해야 겠구나! 를 깨달았다. expo는 react native 개발을 빠르게 도와주는 프레임워크다. 자세한건 expo.io/ 를 참조. expo의 장단점은 다음과 같다.

 

장점

  • 초기 세팅 과정 생략.
  • 안드로이드 스튜디오 안켜도됨. (물론 쉽게 연동시킬 수 있음)
  • 휴대폰에 앱을 깔면 내 휴대폰에서 직접 실시간 테스팅 가능. 리프레쉬 속도도 실시간이라 코드를 고치고 ctrl + s 를 누르면 바로 내 휴대폰에 즉각즉각 적용됨. expo를 중간 번역기라고 생각하면 된다.

단점

  • RN 의 기능들 중 일부를 사용할 수 없음.
  • 라이브러리도 마찬가지. expo를 지원하는 라이브러리만 사용할 수 있음. 지원 가능여부는 https://reactnative.directory/ 를 참고하면 된다.
  • 위와 같은 이유들로 결국 앱 개발을 하다가 $eject expo 해야함. 그니까 편해서 시작했는데 그걸 던져버려야함.

 

하지만 해커톤은 개발 속도가 생명이지 않은가. 더불어 모든 기능을 다 구현해야할 필요가 없으니 최적의 선택지였다. 이런 내용들을 찾아보고 설치하고 환경 구축을 해놓으니 밤이 다 됐다. 사실 이런 과정은 미리 기술스택만 정해놨으면 개발 시작하기 전에 해놓을 수 있는 사항이라 아쉬웠다. 여튼 아쉬움을 뒤로하고 개발 시작... 이라고 했지만 처음 하는 걸 바로바로 빠르게 할 수 있을리가 만무. 첫 페이지 만드는 데에만 몇시간 쏟았다. 그래도 다행히 첫 페이지를 만들고 나니 감이 잡혀서 다음 페이지는 그보다 더 빨리 만들 수 있었다. 하지만 처음에는 속도가 너무 느려서 한 두번째 페이지 만들즈음엔 이미 백엔드 api 개발이 대부분 끝나가는 상태였다. 팀장님이 심각성을 인지하고 프론트로 뛰어드셨다. 그래서 결국 프론트를 3명이서 매달려서 개발하게 되었다.

 

그나마 다행인 점은 디자이너 분께서 제플린(zeplin) 이라는 툴을 이용해서 디자인을 빠르게 해주셨는데, 그 툴에서 ui와 관련한 코드(스타일 가이드)를 자동으로 만들어준다는 것이었다. 기준이 명확한 덕분에 정말 빠르고 정확하게 개발할 수 있었다.

 

(사실은 여기서 더 디테일이 필요하다고 생각하긴 한다. 왜냐면 스타일 가이드가 만능은 아니란걸 느꼈기 때문이다. 결국 직접 중복하는 코드를 쳐내거나 스타일에 맞게 코드를 추가하는 등 보정하는 작업이 있어야한다.)

 

우리 앱의 디자인 프로세스.

 

 

오른쪽 아래와 같이 스타일 가이드 코드가 생성된다.

 

중간에 진행상황을 업데이트하며 각 조별로 상황을 얘기하는 시간이 있었는데, 그 때 멘토분들이 우리 팀 및 다른 팀들에게 해주신 말씀이 기억에 남는다. 

  • 다들 해커톤을 하면 처음에 로그인페이지, 회원가입 페이지 만드는 데 시간을 너무 많이 쏟는다. 그럴 필요가 없다. 해커톤은 빨리 개발해서 보여주는 데에 집중해야 한다. 
  • 만약 실제 제품 만드는 데 10단계가 있다면 해커톤에선 1,2 단계만 진행하는 것으로 충분하다.
  • (우리팀에게) 너무 사용자 입장만 생각한 서비스 같다. 회사의 입장에서 어떤 유인책이 있는지 생각해봐야한다.

 

마침 우리 팀이 로그인 페이지와 회원가입 단계 (api 로 auth 체크하고 db에 넣어주는 등 일련의 과정들...)에 신경을 쓰고 있었던 것이다. 사실 이런 말씀을 해주신 건 우리 팀 뿐만 아니라 대부분의 팀이 회원가입 단계에서 정체되어 있었기 때문이다. 다행히 이 조언 덕분에 백엔드에서 개발한 api를 사용하지 않고 빠르게 디자인을 따라 개발하는 것을 제일 과제로 삼았다. 사실 페이지도 몇개 만들다 보니 어느새 속도가 붙었던 참이었다. 처음 마주치는 컴포넌트들 (스크롤, 네비게이션 바 등등..) 에서 한 번씩 서치하고 적용시키느라 시간이 걸리긴 했지만 그것도 점차 익숙해졌다.


(잠깐 거쳐가는) 리액트 네이티브 개발 팁 (초보자용)

더보기

특히 https://reactnative.directory/  에서 오픈소스 라이브러리 가져다 쓰는게 너무 편했다. 아이콘도 feathericons.com/ 에서 지원하는 아이콘을 react native 에서 그대로 import 해서 쓸 수 있었기 때문에, 하단 네비게이션 바의 경우 feather 아이콘을 가져다 쓰기도 했다. (사실 이 부분은 image import 하는 데 에러가 너무 자주나서 그렇게 했던 것인데, 나중에 문제를 해결하고 나서 다시 바꾸려고 하다가 말았다.)


그래도 최대한 디자이너 분이 작업해주신 기준에 맞추려고 노력했다. (그리고 그 결과는 진짜 비슷하다. 아님 말고) 첫날 밤은 당연히 샜고, 점심쯤에 4시간 자고 일어났던 것 같다. 두번째 날은 아예 못자고 작업이 다 끝나고 잤다. (토요일 13시부터 팀별 발표가 있어서 어차피 별로 못잤다.) 여튼 그렇게 몽롱한 상태로 다른 조들의 발표를 구경했다. 다들 고생한 흔적이 역력했다. 각 조마다 아쉬운 점이 얼마나 있느냐, 컨셉을 얼마나 잘 살렸느냐 정도의 차이가 있었던 것 같다. 너무 정신이 없어서 다른 조들의 발표를 제대로 다 못들어서 발표가 다 끝나고 다시 라이브 돌려보면서 최대한 모든 팀의 발표를 다 다시보려고 했다.  

 

우리 팀의 발표 및 시연 영상. (팀장님 목소리가 너무 좋으시다. ㅎㅎ)

전날 멘토님들이 조언해주신 바를 토대로, 근로자 입장에서 장점인 부분 (임금 체불 방지 (+팁) , 빠른 자동배치, 보건증 및 자격증 기존 인증 등) 이외에 고용주 입장에서 장점인 부분 (평가 시스템을 기반으로 근로자에 대한 누적 평가를 확인해서 고용의 신뢰성 확보 가능, 자동 배치 시스템으로 효율적이고 빠른 인력 배치 가능, 근로자 신원 확인 가능 등) 도 발표 내용에서 어필하려고 노력했다.

 

그리고 투표를 진행했는데, 각자 맘에 드는팀 5군데에 투표할 수 있었다. 내 투표 기준은 아이디어에 참신함이 있거나, 사회에 기여하는 서비스일 경우, 또는 기술적으로 뛰어날 경우 였다.

 

투표기준. 학생 비중이 제일 높다.

 

그리고 우리 팀의 결과는... 최우수상[정보통신기획평가원장상] !! (상들 이름이 전부 길다)

 

감동의 순간

사실 호명할 팀이 3팀(1등 1팀, 공동2등 2팀) 남았을 때는 이미 포기상태였다. 에이 설마 3팀 안에 들겠어... 하는 생각이 들었다. 그도 그럴 게 이미 호명된 팀들도 아이디어나 구현 상태가 꽤 좋았기 때문이었다. 여튼 투표해주신 분들께 진심으로 감사드립니다.

 

 

 

 

저번 학기에 여러 기업들의 면접을 보면서 협업 경험이 얼마나 중요한지 깨달았고, 그래서 해커톤을 통해 경험을 쌓고자 했는데, 좋은 결과가 나와서 더 의미 있었다고 생각한다. 원래 사람이 쫄리면 말을 잘 안하려고 한다. 그래서 팀플하다보면 문제점이나 진행 상황을 잘 파악하지 못하고 전체적으로 커뮤니케이션이 진척되는 등의 문제가 생기곤 하는데, 해커톤 같이 시간이 짧은 상황에서는 시간이 곧 금인지라 빠른 의사소통이 정말 중요하다. 그런데 팀장님이 그런걸 정말 잘했다. 쪼는걸 (농담입니다.😘)

 

계속 진행상황이 어떤지 물어보고, 무엇을 해야할지 계속 파악해주시고... 하다보니 나도 정신이 번뜩 들어서 '내가 어디를 맡아서 하겠다. 지금 어느정도 진행되었다'  등의 상황을 계속 얘기하려고 노력하게 됐다. 그리고 계속 리마인드 해주시니 또 쪼들려서 풀집중 모드로 임할 수 있었다. 다른 팀원분들의 상황도 이해가 되어서 내가 먼저 이러이러한 점이 문제일 것이라고 약간 넘겨짚은 다음에 제안을 해 드렸다. 부족할 수 있었지만 여튼... 그랬읍니다.

 

좋은게 좋은거지

이전에 서비스를 만들어본 경험이 없었는데, 이번에 만들면서 왜 디자이너가 중요한지, 그리고 디자이너랑 어떻게 협업을 해야하는지 조금이나마 알 수 있게 되었다. (진짜 조금이긴함)  그래도 디자이너분께서 스타트업에서 일 해본 경험이 있으셔서 그런지 와이어프레임부터 컴포넌트별 디자인까지 일사천리로 진행해주셨고 ... 개발하다보니 더 큰 단위로 넘어가면 납기일(표현이 맞나요?)을 맞추기 위한 개발 속도도 정말 중요한 요소임을 깨달았다. 팀장님도 React native는 처음 다뤄보시는데 정말 빠르게 하셨고... 넘모 대단합니다. 

 

다른 사람들은 어떤 스타일로 개발하고 어떤 기술스택을 주로 쓰는지 어떤 아이디어를 갖고 있는지 등에 대해서도 알 수 있었던 좋은 시간이었다. 덕분에 React native도 써보고, 앱도 만들어보고, 이런 긴 후기도 한 번 작성하고...(?) (사실 쓰다 한 번 일부 날림👻) 나는 다시 하던 일로 돌아가야겠다. 끗.

'' 카테고리의 다른 글

2021 회고 (겸 개발자 취준 후기)  (17) 2022.01.02