[항해99] 2024 AI 항해커톤 후기

🪴 뉴스 스크랩

[ZDNET korea-팀스파르타, AI 해커톤 '2024 항해커톤' 성료]

🪴 항해커톤 참가 과정

부트캠프 FE 과정 3개월 + 취준 3개월을 불태우고 웹 개발자로 취준 후에는 회사일에만 집중했다. 그리고 입사 1년 반쯤 된 요즘은 사이드 프로젝트 or 외주에 관심이 생겨서 서치 중이었다.

1년에 한 번은 꼭 인생에 이벤트가 있어야 직성이 풀리는 나는... Hola 사이트를 구경하다가 상단에 2024 항해커톤 광고를 봤다.

개발자라는 직업에 대한 인식조차 없을 때 스타트업 드라마를 본 적이 있는데, 열정에 찬 사람들이 초면에 팀을 만들고 결과물을 도출하는 과정들이 매력적으로 느껴졌다. 마침 광고를 봤고, 고민 없이 신청서를 작성했다.

신청폼에서 기억 나는 내용은, 예시 1 : 에너지 문제 해결 서비스 예시 2 : 행정 문제 해결 서비스 예시 3 : 동물권 문제 해결 서비스 중에서 기여하고 싶은 내용을 작성하는 부분이다. 나는 애견 유치원 CCTV + AI 위험 감지에 대한 내용을 주제로 하였고 4-5 문장 정도의 분량으로 작성했다. (신청폼 내용을 캡쳐해두지 않은 게 제일 후회됨)

🪴 합격 문자

결과 발표날 오후 6시에 정확히 날아온 합격 문자.. 신청서를 정말 정성 가득가득 담아 쓴 건 또 아니라서 기대 안 하고 있었는데 너무 행복했다. 열심히 살게요..
(추후에 알려주셨는데, 경쟁률은 10:1 정도 됐다고 한다.)

🪴 해커톤 준비

팀도 없고, 해커톤 경험도 없는 경력 1.5년차 개발자가 해커톤을 준비하는 방법이다.. 무작정 주제 아이디어를 써보고, 혹시 몰라 리액트 템플릿 깃헙에 푸시하고, 배포, 와이어프레임, 플로우 차트 등등 세팅해놓았다.

내 아이디어가 채택되진 않았지만, 해당 도메인들을 미리 공부해가서 뇌를 말랑하게.. 예열해가는 쪽으로 도움이 됐다. (웹 API 서버를 만들 백엔드 개발자, FE 개발자는 본인의 개발 환경을 미리 세팅해가는 것은 필수다. 현장에 가면 세팅할 정신 따위 없음..)

🪴 해커톤 첫째 날 - 입장

해커톤은 금요일 오후 8시 ~ 토요일 오후 6시 까지의 일정이다. 직장인들도 많이 참여를 하기 때문에 주최측에서 배려해준 것 같다. 안내 받은 주소로 가니 누가봐도 해커톤 열릴 것 같은 장소가 있다. 홀린 듯이 따라가다보면,

입구에서 스태프 분들께서 운영중 촬영되는 것에 관한 동의서에 사인을 요청하시고, 사인 후에는 저녁과 항해커톤 굿즈를 나눠주신다.
(save('This Moment') 라고 적혀있는 키캡.. 귀여웠다. 지금 로우프로파일 키보드 쓰고 있어서 간직만 하는 중..)

개세구 티셔츠 입고 화장실에서 이 요상한 자세로 인증샷 찍다가 스파르타팀 직원분이랑 눈 마주침..

🪴 해커톤 첫째 날 - 시작

오프닝, AI 세션

스태프분께서 해커톤의 전반적인 안내를 해주시고, AI 개발자님께서 오픈 소스 AI 사이트들과 각 사용 예시들을 코드와 함께 교육해주시는 짧은 강의 시간을 보낸다.

팀 빌딩, 회의

해커톤은 개인 or 팀(최대 4명)으로 지원 가능하고, 팀 빌딩은 팀 참가자는 팀 참가자끼리, 개인은 4명씩 (주최자 측의 밸런스 조절로) 뭉쳐져서 한 팀이 된다.

이번 해커톤에서 개인으로 이루어진 팀은 2팀만 있었다. 합격 후 미리 팀을 만들어서 오는 경우도 있고, 이미 기획 개발까지, 거진 완성된 팀으로 출전하는 팀도 보였다.

모두가 개인으로 나와서 주어진 시간 안에 최선의 결과물을 만들어내는.. 그런 내가 상상하던 해커톤과는 살짝 달라서 실망했지만.. 어쨌든 발표 시간에는 완성도 높은 결과물들을 눈으로 경험해볼 수 있어서 만족스러웠다.

우리 팀은 기획+WEB 개발자 1, WEB 개발자 1, FE 개발자 1, AI 개발자 1 로 이루어졌다.

기획+WEB 개발자님과, AI 개발자님의 캐리로 주제는 빨리 정해졌고 팀회의 1-2시간 만에 개발을 시작할 수 있었다.

개발, 개발, 밤샘 개발

우리의 주제는 보이스 피싱 감지 서비스였다.

핵심 기능은 다음과 같다.

a. 통화 버튼 클릭 시 -> 클라이언트에서 음성 녹음
b. 종료 버튼 클릭 시 -> 클라이언트 음성 녹음 중지 -> 서버에 음성 파일을 formData 로 전송
c. 서버에서 음성 파일 받아서 -> Google Cloud API로 Speach To Text
d-1. 보이스피싱 데이터셋으로 훈련된 모델을 활용하여 text 내용이 사기 전화인지 식별
d-2. chatGPT API을 활용하여 text 내용이 사이 전화인지 식별
e. 서버 응답을 받으면 보이스 피싱 판별 결과를 화면에 표시

react-audio-analyser

나는 FE 개발에 참여하였고, a, b 파트의 기능 부분을 맡았다.
음성 녹음은 Web Audio API를 사용하는 react-audio-analyser npm 리액트 라이브러리를 사용했다.

해당 라이브러리는 recording audio, drawing the curve, converting the audio to wav 기능을 지원한다. 내가 딱 필요했던 기능들이어서 채택했다.

👉 react-audio-analyser CodeSandbox
👉 react-audio-analyser 내가 개판으로 짰지만 돌아가는 코드 (.wav 파일 변환, formData에 담아서 서버로 전송하는 코드 포함)

react-audio-analyser 가 Web Audio API 를 사용하는 근거

/react-audio-analyser/lib/AudioAnalyser/MediaRecorder.js의 MediaRecorderFn 함수를 보면, Web Audio API의 AudioContext 객체를 생성하는 것을 확인할 수 있다.

_this.audioCtx = new (window.AudioContext || window.webkitAudioContext)();

🪴 해커톤 둘째 날

발표 준비

마지막 결과 화면 개발이 오후 2시에 끝났고, 작업이 먼저 끝난 능력자.. 기획+WEB 개발자님께서 발표 자료를 준비해주셨다.
우리는 오후 3시에 딱 맞춰서 GitHub와 PDF 발표 자료 제출을 완료했다.

발표

원래는 시연 영상을 제출하라는 안내가 있었지만, 우리 팀은 발표 때 직접 시연을 하기로 했다. 발표 현장을 보니, 직접 시연을 하게 되면 발표 제한 시간(5분)을 지키지 못해 점점 딜레이 되는 상황이 생겨 시연 영상을 제출하라는 규칙이 생긴 것을 알 수 있었다..

하지만 보이스 피싱 감지 서비스 특성상 직접 통화 내용을 들려드려 현장감을 주고싶었다. 우리팀 두분이 a. 보이스 피싱 전화 내용, b. 평상시 전화 내용 두가지 버전의 연기를 해주셨고, 결과 화면도 완벽하게 나왔다.

시상식

👉 수상 결과

마무리

아쉽게 수상하진 못했지만 원래 참가 목적을 달성했다..
나는 개발자 친구를 만들었고, 내 거창한 인생 버킷리스트인 해커톤에 출전했다. 아주아주 만족하고 이런 기회를 주신(하찮은 지원서를 보고 뽑아주신) 해커톤 스태프 분께 정말 감사하다..

무박 2일 해커톤이 끝나고 몽롱한 상태로 팀원한테 "다음에 해커톤 또 나가라하면 나갈 거예요?" 라고 물어봤다.
나도 팀원들도, 고민도 안 하고 나간다고 했다.. 힘든데 정말 재밌고, 특히 여기서 만나는 사람들은 개발자 관점 말고도 사람 대 사람으로서 너무 멋진 사람들 뿐이었다.
이끌어주신 팀원분들, 진행해주신 스태프분들 감사합니다..~~!!ㅠ