해커톤 참가 후기 (SPARCS 2023 StartUp Hackathon)

1월 27일부터 29일까지, 2박 3일의 기간 동안 SPARCS 2023 StartUp Hackathon 에 참가했습니다! 이곳에 대회 준비와 대회 중 과정에 대한 후기를 적어보려 합니다.

대회 전

작년 12월 말 즈음에 우연히 SPARCS 해커톤 참가자 모집 글을 보게 되었다. 마침 내가 그 동안 회사나 사이드 프로젝트에서 배웠던 개발 지식들을, 실제로 사람들이 사용할 소프트웨어를 빠르게 만들어보는 데에 써볼 수 없을까? 라는 고민이 들던 때였고, 마침 나도 병특이 끝나 회사에서 나와 푹 쉬고 있던 상태라 바로 해커톤 참가 신청을 하게 되었다.

참가 신청은 개발자, 디자이너, 기획자 중 하나 이상의 직무를 선택한 후, 직무에 맞는 지원서를 작성해 지원하는 시스템이었고, 나는 개발자 직무로 지원해 합격하게 되었다. (나중에 알게 된 사실이지만 이번 해커톤 경쟁률이 3:1 로 매우 높았다고 하더라..)

참가 신청 당시에는 마땅히 같이 참가하자고 할 사람도 없었고, 해커톤 전에 팀 매칭 과정이 있다고 해서 아는 사람 한 명 없이 개인 참가로 신청을 했다. 처음에는 팀을 못 구해서 남은 사람들끼리 묶이게 되진 않을까 걱정을 조금 했는데, 다행히 해커톤 주최측에서 자기소개를 작성해 서로 팀 매칭을 할 수 있는 페이지를 제공해주었고, 이걸 통해서 백엔드 개발자 한 명을 구하던 4인팀에서 연락을 받게 되었다. 기존에 디자이너 겸 기획자 2명, 프론트엔드 개발자 2명으로 구성된 팀이여서, 내가 하나 남은 백엔드 자리에 들어가게 되었다.

아이디어

이번 해커톤은 주제가 대회 전에 선공개되었고, 주제는 “새로운 사회를 위한 시도” 였다. 이 주제에 대해 아이디어를 미리 생각해보는 건 가능했지만, 디자인이나 개발을 미리 하는 것은 금지되어 있었다.

팀 구성 이후에, 팀원들과 같이 모여서 브레인스토밍 회의를 두 번 오프라인으로 진행했다. 회의에서 정말 다양한 아이디어들이 나왔고, 해커톤 기간 내에 임팩트 있게 진행해볼만한 것들 위주로 고민한 결과, 시각장애인들을 위해 웹사이트의 대체 텍스트 현황을 개선하는 프로젝트를 진행해보기로 결정했다. 구체적으로는 아래 두 가지의 서로 연계되는 아이템을 같이 만들어 보기로 했다.

• 시각장애인이 보는 웹페이지에서, 대체 텍스트가 달려있지 않은 이미지에 AI가 생성한 대체 텍스트를 대신 달아줄 수 있는 크롬 확장 프로그램을 만들자
• 주어진 이미지에 대해 가장 적합한 대체 텍스트를 선택하도록 하는 비장애인 대상의 미니 게임을 통해, AI가 생성한 대체 텍스트를 사람이 개선할 수 있도록 함

기술 스택: AI

이 아이디어의 가장 중요한 부분 중 하나는 이미지를 텍스트로 변환하는 Image-To-Text AI 모델이었다. 안타깝게도 팀 내에 AI에 대해 잘 아는 사람이 없었고, 처음에 이 아이디어가 나왔을 때는 “충분히 좋은 퀄리티의 대체 텍스트를 AI로 생성하는 것이 가능한가?” 조차도 팀 내에서 판단하기 힘든 상황이었다.

다행히도 내가 해커톤 팀 매칭 이후에 얕게나마 AI에 대한 공부를 조금 해 보았던 상태였는데, 이 과정 중에서 HuggingFace라는 AI 커뮤니티를 처음 알게 되었다. HuggingFace에서는 이미 큰 연구소나 기업에서 훈련해 놓은 모델을 쉽게 가져다 쓸 수 있었는데, 이 곳에서 우리가 필요로 하는 여러 가지 Image-To-Text 모델도 찾을 수 있었다.

HuggingFace에서 찾을 수 있는 대표적인 Image-To-Text 모델: vit-gpt2-image-captioning

팀 내에서 같이 이 모델을 살펴 보았을 때, 생성된 텍스트의 퀄리티가 우리가 사용하기에 충분히 좋다는 결론을 내렸다. 비록 텍스트 퀄리티가 아주 높지는 않았지만, 우리의 아이디어는 사람이 참여해 AI가 만든 대체 텍스트를 개선하는 것이였기 때문에, AI의 설명 퀄리티가 아주 좋을 필요는 없었다.

백엔드 개발을 맡은 내가 마침 Python 기초가 있어서, 있는 모델을 가져다 쓰는 것 또한 쉽게 할 수 있었다. 그렇게 AI 경험이 없는 팀이 AI를 해야 한다는 아주 심각해 보였던 문제는 의외로 싱겁게 해결되었다.

기술 스택: 웹

아이디어의 또 다른 큰 부분은 대체 텍스트를 개발하는 데 쓰이는 미니 게임이었다. 팀 내에는 다른 두 명의 웹 프론트엔드 개발자가 있었기에 이 게임을 웹으로 개발한다는 건 쉽게 결정할 수 있었고, 이어서 구체적인 웹 개발 스택을 정하는 시점에서는 create-t3-app 템플릿을 사용해보기로 결정했다.

create-t3-app은 기본적으로 Typescript와 Next.js를 중심으로 풀스택 프레임워크를 만드는 것을 목표로 하는 템플릿이고, 특징으로는 Next.js상에 type safety를 돕는 여러 라이브러리들을 미리 연동한 상태로 프로젝트를 시작할 수 있게 도와준다는 것이다. 이 템플릿은 해커톤 전에 웹 개발을 공부하던 중에 알게 되었는데, 프론트와 백엔드가 빠른 속도로 협업하는 데에 적합하다고 생각해 팀에 사용을 제안하게 되었다. 백엔드 개발자로서 이 템플릿에 대해 특히 인상 깊었던 부분은 tRPC와 Prisma였다.

• tRPC: 서버와 프론트 통신 시의 API 요청을 typesafe하게 할 수 있도록 도와주는 라이브러리
• Prisma: DB 쿼리와 그 결과를 typesafe하게 사용할 수 있도록 돕는 ORM

대회 중

시작

이렇게 우리 팀은 아이디어와 기술 스택에 대한 만반의 준비를 거치고 행사장에 도착했다.

대회 중간에 찍은 사진. 행사장은 대충 이런 분위기였다

길지 않은 오프닝 이후에 대회가 시작되었고, 그 때부터 팀원 모두가 미리 정해놓은 주제에 대해 개발과 디자인을 시작했다.

첫 날에 프론트엔드 팀원 두 분은 익스텐션 개발을 먼저 시작하고, 동시에 미니게임 페이지의 틀을 잡아나갔다. 나는 먼저 AI 모델 인퍼런스 결과를 서빙할 수 있는 파이썬 서버를 빠르게 구현하고(FastAPI를 썼다), 그 후에는 프론트에서 사용할 가장 기초적인 API들을 Next.js상에 구현하고 Vercel에 배포해서, 프론트와 연동하는 작업을 바로 진행했다.

이번 해커톤에서 백엔드 개발자로서는 최대한 프론트엔드에 API를 빠르게 넘기고 연동해서, 서로간에 피드백을 빠르게 주고받을 수 있도록 하는 것에 집중했다. 지금 시점에서 가장 프론트엔드에 필요한 API의 Mock을 구현하고, 그 API Mock을 프론트엔드에 넘기고, 나는 그 사이에 그 API를 최대한 간단하게 구현해보고, 프론트엔드와 연동 후에 시간이 남으면 API 구현을 더 정제하고.. 이 사이클은 다행히 해커톤 내내 잘 돌아가서 빠른 구현에 큰 도움이 되었다.

대회가 2박 3일이었기 때문에 잠을 아예 안 자긴 무리였다고 생각이 들어서, 나와 프론트 개발자분은 새벽 2시를 좀 넘겨서 호텔로 돌아가 숙면을 취했다. (기획과 디자인을 담당하신 두 팀원분들은 첫 날부터 밤을 새면서 둘째날 개발에 필요한 기획과 디자인을 만들어주셨다ㅠㅠ)

둘째날 오전에 다시 행사장에 도착하고 나서는, 주최측에 신청해 둔 AWS 리소스가 발급이 된 상황이었다. 나는 파이썬 AI 서버를 GPU가 달려있는 EC2 인스턴스에 배포하고, 미니게임 페이지의 백엔드 구현에 본격적으로 들어갔다. 프론트엔드에서도 전날 기획팀에서 밤을 새서 만들어낸 디자인 구현을 시작했다.

멘토링

이번 해커톤은 해커톤 후원사에서 방문해주신 멘토 분들에게 오프라인 멘토링을 받을 수 있는 시간이 있었다. 우리가 미리 멘토에 대한 소개글을 보고, 원하는 멘토를 주최측에 전달하면, 주최측에서 멘토와의 멘토링 세션을 잡아주는 방식이었다. 우리는 AI 기업에서 일하고 계신 딥러닝 개발자에게 멘토링을 받게 되었다.

먼저 멘토 분에게 우리의 아이디어를 쭉 설명해드렸다. AI를 활용해서 이미지의 대체 텍스트를 채워넣고, 모델을 개선하는 게임을 같이 만들겠다! 멘토 분은 우리의 아이디어를 듣고 난 후 의문에 찬 표정으로 몇 가지 추가 질문을 주셨고, 그리고는 아래와 같은 조언을 해주셨다.

일반적인 Image-To-Text 모델을 돌리고 개선하는 것이 목표라면, 대기업에서 돈을 때려부어서 만들고 있는 모델을 이길 수 없기 때문에 의미가 없다.

의미가 있기 위해서는 게임을 통한 데이터 수집과 대체 텍스트 제공을 모두 한 특정 도메인 내로 집중하는 것이 좋을 것 같다. 특정 도메인에 특화된 모델이라면 충분히 의미가 있다.

안 그래도 해커톤 전 아이디어 회의에서도 도메인을 하나 정해야 하나 라는 이야기가 나왔었지만, 당시에는 우선 넓은 확장성을 위해 모든 웹사이트의 이미지에 대해 대체 텍스트를 채우는 방향으로 결정했었다. 이 때 멘토분의 조언을 듣고 나서는, 도메인을 하나로 확정짓는 것이 기술적으로도 Image-To-Text 모델 개선을 더욱 의미있게 하고, 또 기획적으로도 장애인과 비장애인을 하나의 명확한 도메인에서 이어 주는 것이 더 큰 의미가 있을 것이라는 팀 내의 합의에 도달했다.

짧은 회의 이후에, 팀에서는 패션 도메인을 공략해보자는 의견에 도달했다. 구체적으로는, “온라인 패션 쇼핑몰에서 상품을 설명하는 썸네일 이미지” 라는 아주 구체적인 도메인의 이미지에 대해 대체 텍스트를 달아보기로 했다. 결과적으로는 이 피드백 덕분에 최종적으로 제출했던 결과물의 방향성이 휠씬 더 뾰족해졌고, 이후의 과정에서도 덕분에 더 좋은 평가를 받을 수 있었던 것 같다.

막판 스퍼트

그렇게 갑작스럽게 방향성이 바뀌게 되면서, 기획팀에서는 급하게 디자인과 기획을 수정해나갔고, 프론트엔드 쪽에서도 새롭게 변경된 디자인에 맞춰서 게임 페이지 구현을 시작했다. 나도 프론트엔드 쪽에서 필요한 API의 Mock을 만들고, API를 전달하고, 구현하는 것을 반복했다. 그러다 보니, 어느새 순식간에 둘째날의 새벽이 되어 있었다.

새벽 중에는 어느 정도 백엔드 작업이 마무리되었다. 그 후로는 프론트 쪽 작업을 조금 도와주기도 했고, 또 확장 프로그램으로 대체 텍스트를 채워넣을 페이지와 미니게임 페이지를 왔다갔다하면서, 데모 때 보일만한 문제가 있을지 계속 확인하고, 발견한 문제들이나 추가로 구현하면 좋을 스펙들을 하나둘씩 해결해나갔다.

해커톤에 참가하기 전에는, 밤을 새게 된다면 도저히 피곤해서 코딩이 안 될 것 같았는데, 막상 둘째날 새벽 동안은 추가로 구현할려고 하는 기능들에 대한 생각과, 내가 구현한 부분에 문제가 있진 않을지에 대한 생각으로 내내 긴장된 상태였다. 피곤함은 느껴지지만, 잠은 하나도 오지 않는 각성 상태로 둘째날 새벽 내내 컴퓨터 앞에 앉아있었다. 오전이 되었을 때는 팀원들 다 같이 호텔로 가서 짐을 챙겨 체크아웃을 하고, 바로 다시 행사장으로 돌아와서 막바지 작업을 진행했다.

결과

최종 개발 결과물 제출은 셋째날 12시까지였다. 12시가 되기 몇 분 전에 떨리는 마음으로 마지막 커밋이 담긴 레포를 제출하고, 이어서 기획자 분도 1시 반까지 마감인 발표 자료를 성공적으로 제출했다!

이렇게 생긴 플러그인이 대체 텍스트가 없는 이미지의 대체 텍스트를 채워주고..

이런 게임에 사용자들이 참여해서 대체 텍스트를 개선할 수 있게 만들었다!

최종적으로 제출한 코드 레포는 여기서 구경해볼 수 있다.

잠시 쉬고 난 후에는, 모든 참가팀들의 발표를 순서대로 지켜보는 시간이 있었다. 다른 팀의 발표와 결과물들을 비교해보면서 우리가 수상할 확률이 어느 정도 될지 팀원들과 이야기를 나눴다. 우리 팀도 총 20팀 중 12번째 순서로 발표를 성공적으로 마쳤다.

팀 발표가 모두 끝나고 나서는, 각 팀이 팀 테이블에서 결과물을 직접 시연할 수 있는 데모 시간이 있었다. 우리 팀은 모두 테이블에 둘러앉아서 심사위원분들이 오셨을 때 확장 프로그램과 게임이 실제로 동작하는 모습을 시연하는 데에 집중했고, 우리 테이블에 찾아주신 심사위원 분들에게는 모두 프로그램이 잘 동작하는 모습을 보여주면서 좋은 점수를 딴 것 같다ㅎㅎ

심사위원 의견 집계 시간이 잠시 지난 후에, 바로 시상식이 시작되었다. 결과는 은상! 총 20팀 중에서 2등의 성적이었다. 은상 수상팀으로 우리 팀이 호명되는 순간에, 환호하며 뛰어올라간 순간이 아직도 기억에 남는다.

이렇게 생긴 상패도 받았다

아주 신남 :)

마치며

이번 해커톤은 개인적으로 나에게 아주 기억에 남는 시간이었다. 우선 기술적인 측면에서 여러 가지 평소에 하기 힘든 경험들을 해볼 수 있었다. 비록 결과물만 놓고 보면 실제 서비스로 출시하기에는 어려운 제품이었지만, 실제로 동작하고, 사람들이 사용해볼 수 있고, 좋은 의미를 가지고 있는 소프트웨어를 단 2박 3일만에 만들어내는 것 자체가 아주 재미있는 경험이었다. 또, 평소에 사이드 프로젝트로 조금씩만 사용해보던 create-t3-app을 다른 사람과 협업하면서 사용해본 것도 좋았고, AI 공부를 시작한지 얼마 되지 않은 내 입장에서 HuggingFace상의 AI 모델을 가져와서 사용해본 것도 기억에 남았다.

또, 좋은 팀원들을 알게 된 것도 너무 기뻤다. 처음에 개인 참가로 신청했을 때는 잘 맞는 팀원을 만날 수 있을까 걱정을 많이 했는데, 결과적으로는 우연히 좋은 팀원들을 만나 덕분에 좋은 결과를 낼 수 있었다. 기본적으로 팀원들의 실력이 훌륭해서 협업에 막힘이 없었고, 무엇보다도 모두가 긍정적이고 활발한 성격이여서, 해커톤 기간 내내 웃을 일도 많았고, 대회 기간 내내 기분 안좋은 일 한번 없이 즐겁게 코딩했었던 기억이 남는다. 역시 좋은 제품을 만드는 데에는 좋은 코드보다도 좋은 사람이 훨씬 더 중요한 것 같다.

이번이 내가 참가했던 첫 번째 해커톤이였는데, 앞으로도 기회가 된다면 이 기억을 살려서 다른 해커톤들에도 계속 나가볼 수 있었으면 좋겠다.