main

우아한형제들에서 제 1회, 처음으로! 사내 이벤트로써 헤커톤이 진행되었습니다. 그간 수많은 헤커톤을 해봤지만 사내에서 열리는 헤커톤을 참가해보기는 처음이었습니다. 이제 본격적으로 헤커톤 이야기를 풀어보도록 할께요!

시작과 발단

회사에서 별 다름없이 코딩을 하고 있는데 슬랙에 띠용~ 하고 알람이 도착했습니다. 평소에 모든 알림을 읽던 버릇으로 클릭 했더니 아래와 같은 사진이 열렸습니다.


image1
(오오 회사에서 해커톤도 해?)


회사에 입사한 지 얼마 되지 않아 주변 팀원분들께 물어봤어요.

나: 저희 내부에 헤커톤도 했었군요? 장난아닌데..
팀원 A: 엥? 저희 헤커톤이 있어요?
나: ????

그렇습니다. 이번 우아톤 2019는 회사 내에서 처음으로 열리는 헤커톤으로써 우아한형제들 내부 인원들만 참가할 수 있었어요. 그래서 저는 생각했어요.

image1

그리고 같이 할 팀원을 찾기 시작했어요. 제가 프론트엔드를 담당하게 될 테니, 서버 개발과 앱 개발을 담당할 수 있는 사람이 필요했죠. 그래서 전 회사에서 함께 우아한형제들로 왔던 형한테 제의를 했죠. 마침 형도 해커톤을 하고 싶어했던 차여서 함께 팀을 이루기로 하고 이제 제일 중요한 디자이너를 구해야 했어요. 어떻게 구해야할까 고민하던 중, 옆에서 이야기가 들렸죠.

???: 광휘는 이거는 1px만 더 내려줄 수 있어요?
나: 아!! 옆에 있었구나!
???: 엥?

저희팀 UI를 거의 다 책임지시는 디자이너분이 항상 옆에 계셨던 것입니다! 그래서 디자이너분께 함께 하자고 이야기를 드렸습니다. 그랬더니 지원군과 함께 두 분이서 오셨어요. 그렇게 결성된 저희 조는 웹 프론트앤드 개발자, 앱 개발자(서버 개발 겸함), 디자이너 2명으로 이루어져 개발을 하게 되었습니다.

아이디어

해커톤 주제는 배민에 관련된 서비스 제작하기 였어요. 사전에 주제가 나왔다보니 여러 팀들이 사전에 준비를 하고 있었죠. 하지만, 저희 B마트팀은 앱 메인 대공사 업데이트가 12/7로 잡혀있었습니다. 그래서 정말 아무런 준비도 못하고 ㅜ_ㅜ; 앱 메인 대공사 업데이트 일정 때문에 야근으로 점철된 일정을 보냈어요. 그래서 사전에 준비할 겨를이 없었습니다.

그래서 저희 팀은 시간을 내어 오고 가며 간단하게 아이디어를 이야기 했어요. 초기 아이디어는 배민 전체 영역에서 할 수 있는 아이디어였으나 점점 저희가 잘 알고있는 도메인이었던 B마트쪽으로 아이디어가 옮겨오기 시작했어요. 그나마도 거대한 틀만 있던 뿐이지 상세하게 잡을 겨를도 없었습니다.

우아톤 시작

12/7 런칭을 위해 바삐 움직이던 우리에게 우아톤 일정은 금새 다가와 당일 1시가 되었어요. 그래서 우아톤이 이루어지는 강연장으로 이동했어요!


image4
(우와아 해커톤 굿즈!)


들어오자마자 해커톤 굿즈를 받고 사진을 찍었습니다. 무료로 참가하는 사내 해커톤이지만 정말 준비를 잘 해주셨더라구요 ㅠ_ㅠ; 내용물을 살펴보면!

  • 1박 2일동안 사용할 배민 문방구제 칫솔 치약!
  • 어디든 따뜻하게 해주는 배민 담요!
  • 노트북도 따뜻하게~ 노트북 파우치!
  • 1박 2일간 음료를 책임지는 텀블러
  • 올 겨울을 따뜻하게 준비할 후리스
  • 참가자 전원에서 10만원 상품권

image5


이게다 무엇이라 말입니까.. 다 좋지만 특히 후리스! 입사 선물로 후드 집업을 받았는데 이 후리스는 퀄리티가 대박이었습니다. (감동)

수상자 상품

또 해커톤 하면 빠질 수 없는 상품!

  • 1위 :: 아이패드 11인치 + 애플팬슬 + 스마트폴리오 키보드 (약 150만원 이상!!!)
  • 2위 :: 애플워치 5세대
  • 3위 :: 에어팟 프로

이 상품을 팀 모든 인원에게 지급한다고 합니다!! 마음같아서는 1위 상품을 얻고 싶었지만 1,2위 상품으로 주는 것들이 다 있어서.. 3등만 해도 여한이 없다고 생각했습니다. (모두 엄청나신 분들이라 경쟁이 치열할꺼라 생각했습니당)

개발 시작

해커톤 굿즈를 받고 준비하는 사이에 개최식이 진행되었어요. 개최식을 하면서 저희는 개발 준비를 마쳤죠. 그런데…?

아 맞다..! 우리 내일 배포였지!

image5

그래요. 저희 B마트는 내일 메인 지면 개편으로 배포 일정이 잡혀있었어요. 저희 팀원은 모두 B마트 일원인 만큼 배포에도 대응해야 했죠. 그래서 저와 앱 개발자 두 명은 각자 해야할 일을 마무리 짓기 시작했어요. 1시에 시작했지만, 거의 6시까지 내일 배포 일정때문에 작업을 하지 못했습니다.

도중에 아이디어도 바뀌고 (상세한 아이디어는 비밀) 아이디어에 필요한 프론트엔드 페이지가 많아서 꽤나 바쁘게 작업해야 했어요.

개발 스택

저희 팀은 헤커톤 진행 시간이 하루도 되지 않아서 (오후 1시부터 다음날 오전 11시까지) 구현을 하는데 있어 가장 익숙하고, 간단한 스택을 사용하기로 했어요.

  • React.js
  • JavaScript
  • React-Router
  • Express.js
  • PostgreSQL
  • Amazon EC2

서버 사이드 렌더링을 하면 서버쪽에서 공수가 드니까 그럴 필요없이 SPA로 구현했어요. 또 TypeScript로 구현하면 인터페이스 만드느라 시간 걸릴거라 생각하여 제외했구요. 페이지 이동에 애니메이션을 줄 수 있을 것 같아 React-Router를 사용했습니다. 서버에서는 데이터베이스에 간단하게 값 넣고, 받기위해 Express.js를 사용했습니다. 프론트 개발자인 제가 여차하면 서버도 도와줄 수 있어야 하므로 Express.js를 사용했어요.

여담이지만 원래 사용할 Framework는 svelte였습니다. 너무 궁금해서 사용해보고 싶었는데 상품이 상품인지라 다음 기회에..

개발 중 난관

저희는 실제 운영에서 배달이 되는 프로세스를 구축하고자 목표를 잡았기 때문에 많은 난관이 있었어요. 둘 다 회사 내에서 서버 개발자가 아니기 때문에 내부 인프라에서 동작이 어떻게 되는지 잘 몰랐어요. 그래서 많은 시행착오를 했습니다.

디자이너님: 아 이거, 여기 프로세스 넘었으면 좋겠는데..
나: 에??? 되는지 안되는지 모르겟는데 한번 해볼께요.

-- 1시간 후

나: 어 되네?! 이렇게 하면 되겠다!
디자이너님: 어, 그러면 여기도 넘을 수 있어요?
나: 에??? 안돼요 거긴 넘을수가 없어요! 근데 일단 해보긴 할께요.

-- 몇시간 후

나: 어??? 되네??!@?#!?

해커톤을 하면서 저희 프로세스를 좀 더 깊게 알 수 있었고 (으음..) 그 외에도 개발하면서 여러가지 버그도 발견해서 거의 QA가 된 기분으로 저희 인프라를 돌아다녔습니다.


image8
(이 때가 벌써 새벽..)

도와주러 오신 분들 덕에 힘내서 개발!

image7
(수많은 박카스와 에너지 음료를 보라..)


정말 많은 분들이 도와주러 오셔서 힘내서 개발을 할 수 있었어요. ㅈㅎ님, ㅁㅈ님, ㅅㅊ님 등등.. (프라이버시를 위해 초성으로만 쓰겠습니다) 감사합니다! 특히 ㅈㅎ님 먼 곳에서 저희를 위해 오뎅 배달과 비타민제를 ㅠ_ㅠ.. 정말 감사해요 나중에 고기 살께요..

그렇게 아침 6시 개발 완료!

6시까지 한숨도 안자고 저희 팀 모두 완성을 위해 열심히 달렸어요. 처음에는 상품을 보면서 하염없이 달렸는데, 확실히 배민의 훌륭한 개발자분들과 함께 작업을 하니 완성되어가는 프로덕트를 보면서 뿌듯함과 재미, 성취감 등등이 막 올라오더라구요! 그래서 다 만들었지만 애니메이션을 더 주기위해서 안자고 계속 코딩을 진행했어요.

그렇게 개발이 끝나고 테스트를 해야하는데, 저희 B마트는 9시에 운영이 열리므로 9시까지 쉬었습니다.


image9
(모두 휴-식)

9시! 자 테스트하자!

실제 배송이 되는 걸 보기위해! 저희는 만반의 준비를 갖춘채 운영에서 떨리는 마음으로 실행을 했습니다. 그런데!

image10
(아뿔싸)

테스트로 기입한 게 그대로 들어가서 배달이 제대로 안되버린거에요. 그래서 이 세상에 없는 정보로 주소가 찍혀버리는 바람에 고객센터에서 저희한테 연락이 왔어요.

실화

팀장님: ??에 ??? 주문(이상한 주문)이 들어왔다고 제보가 왔어요.
다른 헤커톤 팀의 개발자님: 해커톤 주문이 들어갔어요.
팀 앱 개발자: 넵 공유 드렸어야 했는데 죄송합니다.

개발자님: 일등하면 용서
다른 헤커톤 팀의 개발자님: 할것같음 장난아님

기획자님: 그거 해커톤에서 만들어서 1월 업데이트하자 ㅋㅋㅋㅋㅋ

팀 내에서도 호응이 좋아서 모두 재밋게 호응을 해주셨어요. 그래서 이번에는 제대로! 테스트를 해서 결제를 했어요. 그렇게 정상적으로 결제와 배달이 완료되었고 저희는 마무리를 지어 자리를 정리했어요. 저는 해커톤 마지막 날에 연차를 내고 다른 일을 보러 가야했기에 이제 끝이겠지 하고 다른 용무를 봤는데..

평가 시작

iamge11

평가는 현장 평가단과 심사위원 분들의 점수를 포함하여 결산한다.

띠용~ 평가를 PPT 발표로 생각하고 있었던 우리는 난데없이 현장에서 실제로 시연하고 보는 평가여서 깜짝놀랐어요. 그래서 실제 모든 프로세스를 개발하여서 다행이라고 생각했습니다. (와. 디테일하게 구현하길 잘했다!)


image12
(실제로 모니터 들고 세팅하기)

끝이 아니라 이제 또 시작이었던 것이에요. 피곤한 몸을 이끌고 저를 제외한 다른 팀원 분들이 너무 고생을 많이 해주셨어요 ㅠㅠ. 다시 이 글을 빌어 팀원분들께 감사 드립니다!


image15
(우리 앱개발자님 멋져)


그렇게 몇 시간의 현장 평가가 끝나고 드디어 결과 발표만 남았습니다.

결과 발표

image16

짜잔! 우리팀은 3등을 했습니다! 고생한 보람이 있었어요! (상 못받았으면 진짜 화났을 뻔!!) 끝까지 함께하지 못해 아쉬웠지만 그래도 모든 팀원들이 즐겁고 상품까지 얻어서 행복한 해커톤이었습니다. 처음에 이야기 했던대로 3등을 해서 너무 기뻣습니다.

총평

해커톤을 하면서 첫 회임에도 불구하고 구성이 잘 짜여진 헤커톤은 처음이었어요. 살짝 딜레이 되는 게 있긴 했었지만 전반적으로 우아하게 진행이 되었다고 생각합니다. 모두가 열심히 개발하는 모습에 저절로 동기부여가 되었었고 담당자분께서는 밤에 장봐서 음료와 음식도 채워주시고 노력이 많이 느껴지는 헤커톤이었어요.

다만 조금 아쉬웠던 점은 헤커톤인 만큼, 행사 시작과 동시에 팀을 만들거나 주제를 오픈했었으면 더 좋았을꺼라는 생각이 들었습니다. 헤커톤을 한다는 이야기를 함과 동시에 주제와 팀원을 자유로 내버리니 미리 개발을 하는게 매우 유리했을꺼라 생각해요. (거의 오픈북 테스트) 다음에 헤커톤을 한다면, 당일날 주제공개를 하거나 팀을 랜덤 배치해서 좀 더 밸런스 있는 해커톤이 되었으면 하는 바람이 있습니다.

끝으로

와~ 이렇게 좋은 헤커톤도 하고 정말~ B마트 프론트엔드 개발자 모집으로 가서 지원해야 겠는걸~?

다른 공고

읽어주셔서 감사합니다!