2023 현대 모비스 해커톤 회고록

Lellow_Mellow·2023년 2월 26일

회고록

목록 보기

2/10

이걸 내가 나가도 되는걸까?

처음에 든 생각이었다. 인하대 슈퍼 챌린지 해커톤에서 대차게 까이며(?) 자신감도 떨어질대로 떨어진 터라... 완성도도 완성도지만 슈퍼 챌린지는 아이디어톤이랑 다를게 없다고 생각이 들 정도로 아이디어의 비중이 워낙 컸었다. 괜찮은 아이디어를 낼 수 있을까, 걱정도 걱정이었지만.. 방학 아니면 이런 큰 대회 언제 나가보겠어.. 하는 마음으로 시작했다.

이전에 멋쟁이사자처럼 활동을 통해 큰 규모의 해커톤에는 출전해본 경험이 있지만, 이렇게 큰 기업이 주관하는 해커톤에 나가보는 것은 처음이었다. 과연 잘 해낼 수 있을지, 이전과 같은 실수를 반복하지는 않을지 걱정이 앞서긴 했다.

그래서 일단 이 대회는...

무려 현대 모비스에서 멋쟁이사자처럼과 함께 주최하는 해커톤이었다. 얼마나 많은 팀이 지원할지는 상상이 안갔지만... 일단 상금의 금액만 봐서도 이제껏 참여한 대회 중에서는 가장 큰 규모였다. 현대니까 자동차와 관련된 주제지 않을까 생각했다.

우리에게 주어진 주제는 아래와 같았다.

사실 주제만 봐서는 잘 감이 안왔다. 팀원들 역시 웹 개발만 해왔기에 어떤 주제가 가장 적합할까... 고민 끝에 PBV SW를 선택하기로 했다.

우리가 선택한 주제는

아이디어 선택에 고민에 고민에 고민을 이어가다 결정한 것은 PBV SW였다. 현대 유튜브 채널에 업로드된 미래 모빌리티에 대한 컨셉 영상을 팀원이 찾아왔었는데, 보자마자 이거다 싶었다.

간단하게 정리하자면 완전 자율 주행 모빌리티를 이동하는 건물처럼 활용하는 것이었다. 이를 더 구체화하여 아래와 같은 주제를 최종적으로 결정하게 되었다.

커스텀 PBV 대여 및 구매 플랫폼

미래 사회 완전 자율 주행 시대에서, 기존 이동 수단의 용도를 초월한 Active Mobility(이동형 공간)으로 재해석

사용자의 활용 목적에 따라 필요한 가구를 직접 선택

미리 볼 수 있는 차량 내부의 3D 배치로 쉽고 빠르게 나만의 차량을 제작

가구에 알맞는 인포테인먼트의 제공, 추가적인 인포테인먼트로 PBV에서의 몰입감 향상

협업 관련

협업은 주로 notion과 google meet를 통해서 진행했다. notion은 대회 진행 과정에서 필요한 정보들이나 의견을 종합하고, 정리하는 용도로 활용했다. 다들 거리가 있어 대부분의 회의는 온라인으로 진행했다.

대회 진행 과정

대회는 크게 아래와 같은 순서로 진행되었다.

- 23.02.03 : OT
- 23.02.08 : 기획안 멘토링
- 23.02.14 : 중간 보고회
- 23.02.22 : 결과물 제출
- 23.02.24 : 해커톤 행사

무엇보다 기획안 멘토링과 중간 보고회 과정에서 현업자이신 멘토분들께 직접적인 멘토링을 받을 수 있었다.

중간 보고회

중간 보고회는 1차적으로 팀 주제 소개와 개발 진행 상황, 앞으로의 개발 계획을 담은 5분 영상을 제작하여 멘토님께서 서면으로 피드백을 작성해주셨다. 이후, 22일 이전까지 온라인으로 이와 관련하여 디테일한 피드백을 받을 수 있었다.

멘토분께서 주신 피드백은 다음과 같다.

완전 자율 주행 시대를 가정하고 차량을 커스텀하는 플랫폼을 구성하는 것은 좋은 아이디어라고 생각.

하지만 인포테인먼트와는 처음 들었을 때, 동떨어진 주제라고 느껴질 수 있어 이에 관련된 확실한 설명이 필요.

서비스 플로우

전체적인 플로우를 핵심만 나타내면 다음과 같다. 사용자는 AI(OpenAI api 활용)에게 차량을 사용하는 목적을 입력해 카테고리를 추천받거나 본인이 원하는 카테고리를 선택하도록 한다. 이에 맞는 차량 프리셋을 3D로 제공하고, 이러한 프리셋이 마음에 들지 않는다면, 가구(모듈)를 직접 골라 차량을 커스텀할 수 있다.

이후 앞에서 선택한 가구에 따라 맞춤형 인포테인먼트와 더불어 추가적으로 원하는 인포테인먼트를 선택하도록 하고, 결제 과정 이후에 최종적인 인포테인먼트를 보여주는 것으로 마무리된다.

개발 과정

공용 컴포넌트는 팀원들과 분배하여 개발한 이후, 각자 페이지를 분담하여 개발했다. 내가 담당한 페이지는 회원가입, AI 채팅, 인원 수 선택, 구매 및 대여 관련 페이지다.

이번 해커톤에서 새롭게 시도해본 부분이라면 3가지일 것이다.

1. 한 페이지 내에서 회원가입, AI 채팅 진행하기

몇 번째 페이지인지를 저장하는 state를 이용해, 다음 버튼을 눌렀을 때, state가 1씩 증가하도록 하여, 다음 페이지를 띄우도록 하였다. 최종적으로 마지막 페이지에 도달했을 경우에는, 플로우 상의 다음 페이지로 navigate를 이용해 이동시켰다.

해당 코드는 AI 채팅에서의 코드다. AI에게 보낼 질문이나, 결과에 관한 state는 상위 컴포넌트에서 관리하였다. 다만, 뭔가 더 좋은 방법이 있을 것 같은데... 다른 방식으로 구현해보면 좋을 것 같다.

2. 카카오맵 API 활용

구매 및 대여 과정에서 차량을 수령할 위치를 검색하고 표현하기 위해 카카오맵 API를 활용하였다. 여러 시행착오가 있었는데... 이와 관련된 포스팅은 여기서 확인할 수 있다.

3. react-h5-audio-player 사용

인포테인먼트에 위와 같은 뮤직 컨트롤러가 필요해 해당 라이브러리를 사용하였다. 기존의 태그로는 원하는 스타일링이 불가능하였다. 이와 관련된 내용은 이후에 포스팅할 예정이다.

모델링 지옥

이번 프로젝트에서는 3D 모델을 웹 페이지에 띄워주어야 했고, 이를 위한 3D 모델이 필요했다. 이전에 모델링을 경험해본 인원이 없어, 시행착오를 많이 겪었고, 초반에는 shapr3D를 활용해 모델링을 진행하던 도중에 확장자 관련 문제로 spline을 이용하여 작업하였다.

다행스럽게도... spline에는 가구와 관련된 프리셋들이 존재해 테마별 차량 모델링을 편리하게 할 수 있었다. (이후에 모델링해 건내준 spline 코드를 어떻게 적용했는지에 대해서는... 이를 담당한 팀원에게 문의 예정이다.)

개발 결과와 그 과정들

최종 결과물의 플로우는 위와 같다. 이번 해커톤은 이전에 참가했던 해커톤에 비해 기간도 넉넉한 편이었고, 이전에 프로젝트를 진행해본 팀원들과 작업을 진행했기 때문에 상대적으로 수월했었다.

다만 다들 돌아가면서 기간에 본인 포함 아프기 시작해서.... 그래도 다행히 해커톤 당일에는 컨디션을 회복해 참여할 수 있었다.

해커톤 당일

장소는 보코 서울 강남 호텔이었다. 11시부터 11시 50분까지 입장 시간이었지만, 미리 가서 준비도 하고 연습도 해보자는 마음으로 다같이 모여 11시에 입장했다. 단체 티도 받아서 갈아입고, 굿즈도 받고, 가서 발표 준비를 시작했다.

예선과 본선으로 나뉘는데, 예선은 심사위원 앞에서 2분 PT와 2분 QnA로 이루어진다. 본 심사는 5팀이 올라가게 되고, 10분간 발표를 진행하게 된다.

예선 진행 전에 이두희님께서 축사를 해주셨다. 10기 활동때도 잘 못뵈었는데... 이제라도 뵙네요...😹

하 2분 PT 정말 열심히 했는데... 모니터랑 노트북은 총동원해서 시연 영상 띄워놓고... 노력은 했지만 심사위원에게는 매력적으로 다가가지 못한 것 같다... 개인적인 생각에 플랫폼과 인포테인먼트의 연결에 대한 충분한 설명 불가 / 허술한 비즈니스 모델이 실패 원인이었던 것 같다.

다른 팀들은 정말 기술적으로 준비해온 부분이 많았다. 이런 부분에서도 상대적으로 많이 부족했지 않았을까 싶다... 아쉽지만 얻어간 점도 많은 해커톤이었다.

이름표 들고 사진도 찍고, 코스 요리도 먹고, 현직자 분과 스몰토킹 시간도 가졌다. 레크레이션도 진행해 경품도 타고... 여러모로 참 알찬 해커톤이었다.

😺 여담

현대 모비스에서 기존에 알고리즘 경진대회는 존재했으나 해커톤은 이번이 처음이라고 한다. 이번 해커톤의 결과도 의미 있었고, 내년에도 진행할 예정이라고 하니, 관심 있으신 분들은 꼭 참여해보시면 좋겠다. 내년에는 어떤 주제가 기다릴지는 모르겠으나, 기술적인 부분을 많이 디벨롭해서 가져가셨으면 좋겠다.