왜 또 해커톤에 왜 나갔는지
이번이 세 번째 해커톤이다.
앞선 해커톤 둘 다 너무 힘들었던지라 이젠 안 나가겠지 싶었지만, 공고를 보자마자 신청버튼을 누르고 있더라. (사실 이번주 주말에도 해커톤을 나간다..ㅎㅎ 해커톤 중독자다.)
해커톤 때는 항상 새로운 기술을 써보게 된다.
첫 번째 해커톤인 2024 새싹 해커톤 때는,
Web Audio API을 사용해 녹음한 오디오를 WAV 형식으로 변환하여 백엔드로 전송하는 것을 구현했다. STT를 구현하기 위해서였는데 부정확한 텍스트가 반환되었던 문제가 있었다. 이때 Highpass, Lowpass, Bandpass, Notch 필터를 모두 사용해서 음질을 향상하여 이슈를 해결했던 기억이 있다.
두 번째 해커톤인 2024 서울시립대학교 플랑크톤 해커톤 때는,
Naver Map API을 활용해 어드민 페이지에서 지도를 기반으로 구역을 나누고, 사용자 페이지에서 해당 구역을 시각적으로 확인할 수 있도록 구현했다. 지도에 각 꼭짓점을 클릭해 다각형(Polygon)을 만들어 여러 구역을 정의하고, 이렇게 생성된 다각형들의 좌표 리스트는 서버로 저장된 후, 사용자 페이지로 전송되어 지도에 렌더링되도록 했다. Naver Map API을 사용한 것도 처음이었지만, Naver Map API의 Polygon 컴포넌트는 구역 나누기와 같은 다양한 프로젝트에 응용해보면 좋을 유용한 기능같다.
삐약톤 해커톤에 가다
앞서 나갔던 해커톤과는 달리 이번에는 즉석에서 팀빌딩하여 진행되었다.
개발자 한 명씩 기술 스택과 경험들을 말하며 PR을 한 후 디자이너 분들이 한 명씩 골라갔다.
우리 "뺙뺙이"팀은 PM 1명, 디자이너 1명, 프론트엔드(React) 2명, 백엔드(Java) 3명 총 7명으로 구성되었다.
이번에 공개된 대회 주제는 "사회초년생 또는 대학생들인 삐약이들의 문제를 해결할 수 있는 서비스"이다.
계획한 서비스 주제와 기능들
일본 기업 취업을 준비 중인 팀원의 경험을 바탕으로, 교수, 상사 또는 기업에 메일을 보낼 때 겪는 어려움을 해결해주는 서비스를 기획했다. (일본은 특히나 메일 형식이 더 빡세다고 한다.)
계획한 주요 기능은 다음과 같다.
1. 메일 생성 - GPT API를 활용하여 사용자가 입력한 개인 정보와 내용, 언어, 말투를 기반으로 메일 제목과 내용을 자동 생성
2. 메일 전송 - 사용자가 설정한 발송 이메일에서 SMTP 프로토콜을 사용해 버튼 하나만으로 생성된 메일을 수신 이메일로 바로 발송
3. 메일 저장 - 보낸 메일을 보관함에 저장하여 언제든 다시 열람할 수 있는 기능
삐약톤에서 써본 새로운 기술
Zustand
리액트 상태 관리 라이브러리인 Zustand를 처음 써봤다.
상태 변수를 전역적으로 관리하여 컴포넌트끼리 Props를 사용하여 전달하지 않고 전역 공간에서 가져다 쓸 수 있는 기능이다.
지금까지 프로젝트에서는 아래 이미지 왼쪽과 같은 Prop Drilling도 거의 발생하지 않는 구조여서 필요성을 못 느꼈고, 전역 상태를 사용하게 되면 편한 맛에 모든 상태를 전역적으로 사용할까봐 걱정되어 공부하는 걸 계속 미뤄뒀다.
이번 해커톤 때 팀원분께 여쭤보니 로그인해서 나온 이름 같은 것은 Zustand을 사용해서 전역적으로 관리하면 편하다는 말을 듣고 이번 해커톤을 통해 한 번 써보기로 했다.
로그인 후 사전에 입력해놓는 개인 정보(이름, 소속, 직급 등)을 전역 상태로 관리하고 동시에 LocalStorage에 저장했다. 메일 생성을 위해 GPT에게 메일 내용을 보내줄 때 내 개인 정보를 중복적으로 작성하는 번거로움을 없애기 위함이다.
의문이 생겼다.
개인 정보를 전역 상태로 관리하지 않고 LocalStorage에만 담아놓고 꺼내서 쓰면 될거 같았다. 리액트 상태 변수와 LocalStorage를 쓰는 기준에 의문이 생겼다.
해커톤이 끝난 이 시점에서 다시 생각하고 알아보니,
개인정보가 입력되면 각 컴포넌트에서 입력된 개인정보의 렌더링을 관리하기 위해 전역 상태를 사용하고, 새로고침 시 초기화되지 않기 위해서 LocalStorage에도 저장하는 것이다.
여기서 중요한 것은,
1. 전역 상태는 현재 LocalStorage에 저장된 값을 기준으로 초기화되어야 하고
2. 각 컴포넌트에서는 LocalStorage에 직접 접근하는게 아니라, 전역 상태를 가져와서 사용해야 한다.
앞으로 어느 경우에 전역 상태를 사용하는게 좋은지 따져보는게 중요한 부분이라 생각한다.
삐약톤에서 발생한 이슈들
첫 번째 이슈
이번 해커톤에서 사고를 쳤다. 맥북에 콜라를 쏟아서 짐싸서 집 갈 생각을 하고 있었다.
일단 바로 맛이 간 건 아닌거 같아서 말리는 동안 야간 게임에 참여하여 다른 팀의 팀원분들과 맥주를 마셨다(?)
키캡 안으로 콜라가 들어가서 키를 누르면 쩍쩍 소리나며 키들이 잘 안올라오는 문제가 있었는데 다행히 전원이 나가지는 않아서 마저 진행했다.
두 번째 이슈
그동안 자바 서버는 도커로만 켰었는데 이번에는 도커 대신 IntelliJ에서 직접 실행해야 했다. IntelliJ와 Java를 설치가 네트워크 문제로 굉장히 오래걸려서 시간이 많이 지체되었다. 해커톤 때는 도커가 필수인거 같다.
세 번째 이슈
가장 큰 이슈다. 백엔드에서 발생한 500에러가 해결되지 않아서 구현을 해놓은 백엔드를 아예 사용을 못했다.
프론트엔드에서는 백엔드 API를 사용하는 걸로 구현을 해놓았는데 아예 사용을 못하니 사실상 서비스에서 보여줄 수 있는 기능이 한 개도 없었다.
수상은 못해도 서비스가 굴러가게라도 해서 발표까지 무사히 마칠 수 있도록 목표를 잡았다.
오전 8시쯤부터 3시간동안 급하게 백엔드 API 관련 코드를 모두 지우고 GPT API를 프론트엔드에서 호출하고 생성된 메일 내용을 모두 LocalStorage에 저장되도록 하여 보관함에서 조회할 수 있도록 했다.
디자인 구현을 마지막에 하기로 해서 미뤄두고 있었는데 많은 부분을 갈아엎게 되어 시간이 너무 부족했다. 그래서 디자인도 최대한 간소화시켰다.
만들어진 결과물
1. 사전에 입력된 개인 정보들 중 이번 메일 생성에 사용될 개인 정보 하나를 선택한다.
-
작성할 메일 내용과 원하는 답변 요소, 언어, 말투를 선택한다.
-
메일이 생성되고, 보관함에 저장한다.
앞으로 해커톤에서의 마음가짐
이번 해커톤에서 맥주를 마시며 다른 개발자들과 이야기를 나눴던 시간이 너무 즐거웠다. 원래는 많은 기능을 빠르게 구현하는 것에만 급급했는데, 이번에는 비어 타임 때 나눈 이야기들이 좋은 에너지로 남아 이후 개발을 이어가는 데 큰 동기부여가 될거 같다.
해커톤에서 팀원들과의 소통이나 네트워킹 이벤트가 있다면 꼭 참여해 보는 게 정말 좋은 거 같다.
또 하나, 해커톤에서는 새로운 기술에 도전해 보는 마음가짐이 정말 중요한 것 같다. 평소에는 새로운 기술을 시도하려다 망설이게 되는 경우가 많다. ‘이게 잘 될까?’, ‘내가 감당할 수 있을까?’ 같은 잡생각들이 든다. 하지만 해커톤은 짧은 시간 안에 많은 걸 시도해 봐야 하는 만큼, 이런 고민 없이 새로운 기술을 과감히 써보게 된다.
상 받는 것도 물론 좋지만, 해커톤에서 정말 중요한 건 얼마나 열심히 하고, 그 과정을 얼마나 재밌게 즐겼느냐다. 결과는 노력과 즐거움이 자연스럽게 만들어내는 부산물일 뿐이다. 해커톤을 참여할 때마다 ‘이번엔 뭘 배우고, 누구와 이야기해 볼까?’라는 마음으로 임하면 더 의미 있고 재밌게 즐길 수 있을 것 같다.
