카이스트 SPARCS 2023 StartUp Hackathon 준우승 수상 후기

KAIST SPARCS 해커톤

참가 과정과 팀 빌딩

1. 같이 동아리 활동도 하고 수업도 들었던 후배가 해커톤에 함께 나가자고 연락이 왔다. 기획과 디자인이 가능한 2명, 디자인과 프론트가 가능한 1명 있어서 나와 백엔드 개발자 한 명을 추가로 넣고 싶다고 했다. 1월에 일정이 많아 걱정 되었지만 해커톤에 대해 궁금해서 일단 사이트에 방문해보았다. 
   https://hackathon.sparcs.org/
   

   SPARCS 2023 StartUp Hackathon

2. 장소도 서울이고 상금 규모도 있고, 재미있게 몰입하여 개발할 수 있을 것 같아 참가하기로 했다. 우선 4명이서 팀 지원을 하고 백엔드는 개인 참가자 중 선택하기로 결정했다.
3. 다행히 3:1의 경쟁률을 뚫고 최종 팀으로 선발되었다. 그리고 몇 분의 백엔드 개인 참가자 중 소개글이 가장 마음에 드는 분께 연락을 드렸다. 팀장님과의 간단한 전화 미팅 후에 합류를 결정했다고 한다.

아이디어 기획

1. 참가자가 확정되고나서 공개된 해커톤 주제는 '새로운 사회를 위한 시도'였다. 해커톤 기간 이전에 개발이나 디자인을 미리 해가는 것은 금지되었기 때문에, 1~2번 정도 만나 주제만 확정하기로 하였다.
2. 회의 전 각자 원하는 아이디어를 준비해오고, 다같이 토론을 통해 좋은 아이디어를 향해 나아갔다. 5명 모두가 공감하는 주제를 선발해야 3일 동안 재밌게 몰입하여 프로젝트를 완성할 수 있을 것 같았다.
3. 우리 팀이 정한 주제는 '시각 장애인을 위한 대체 텍스트 생성 Chrome Extension'이었다. 나는 프론트엔드 개발자로서 대체 텍스트가 얼마나 부실한지 그 실태를 알고 있었고, 기획자 분들도 평소에 사회적 약자를 관련 주제로 공부를 많이 해왔던터라 모두가 동의하는 주제로 선정되었다. 웹이 계속해서 성장하고 있는데, 미래에는 웹에 있는 양질의 정보를 모든 사람이 평등하게 사용할 수 있는 사회가 되었으면 하는 시도였다!
4. '시각장애인이 사용하는 크롬 확장 프로그램' + '대체 텍스트를 생성해주는 AI 모델을 고도화하기 위한 데이터 라벨링용 웹사이트' 개발을 목표로 하고 어떤 기술 스택을 사용할지 개발자들과 논의를 하였다. 주제가 먼저 공개되고 기획과 개발 설계를 생각하고 갈 수 있어서 마음이 편했다.

Day 1

1. 총 20팀, 96명의 참가자가 해커톤에 참가했다. 7시 오프닝 후 바로 작업에 들어갔다.
2. 크롬 확장프로그램
   • 아래 그림과 같이 popup HTML이 뜨는 크롬 확장프로그램을 구현해야했다. 디자인이 나오기 전이라 manifest.json, popup html, API 통신을 위한 js 기본 코드 작성, Chrome Extension 등록 등 밑작업들을 빠르게 수행했다.
   • 메인 로직은 다음과 같다.
     • 크롬 확장프로그램을 켜면 js를 이용해 페이지의 img tag를 가져오고, alt 속성이 없다면 서버로 API를 호출하여 해당 이미지에 맞는 적절한 대체 텍스트를 가져온다. 그 후 응답값 text를 img tag의 alt 속성에 추가하면 된다.
       

       

       완성된 chrome extenison popup.html

   • 예상대로 API fetch 로직을 작성하는 것이 가장 오래걸렸는데, chrome extension에서는 일반적인 웹개발과 달리 보안과 관련된 제약이 상당히 많기 때문이다. 처음에는 content-script라는 메인 js 파일에서 fetch를 하려고 했는데, 보안 규칙에 막히길래 background.js를 만들어 service-worker에서 돌아가게 하고, content-script -> service-worker로 message 통신으로 요청을 보낸 뒤 background.js에서 fetch API를 호출했다. 그 후 응답값을 다시 message 통신으로 service-worker -> content-script로 보내면 된다.
3. 이미지 검수 웹사이트
   • image-to-text AI를 고도화하기 위해서는 데이터 라벨링이 필요했는데, 비장애인이 image to alt text 라벨링을 재밌게 할 수 있도록 도와주는 게임을 만들고자 했다. 아래는 최종 사이트의 디자인이다.
     

     

     NooN for Fashion 사이트

   • 해커톤 전 백엔드 개발자와 architecture를 구상하던 중, t3 stack이라는 것을 처음 듣게되었다. Next.js를 매우 좋아하는 나로서 t3 stack은 신세계였다. 혹시 처음 들어보는 분들이 있다면 꼭 아래의 링크를 들어가보길 권장한다.
     https://create.t3.gg/
     tRPC, Prisma, Typescript, NextAuth, tailwind 등 아주 좋은 tool들만을 모아둔 template code를 제공해준다.
     tRPC를 사용하기 때문에 프론트엔드와 백엔드 API를 작성할 때 서로 type이 자동으로 호환된다. 이는 폭발적으로 개발자 경험을 증가시키기 때문에, 앞으로의 사이드 프로젝트에서 반드시 또 적용해볼 생각이다.(이번 해커톤에서도 너무 개발자 경험이 좋았다.)
   • create t3를 통해 빠르게 프론트엔드 Next.js 환경 세팅을 할 수 있었다. 그 후 백엔드 개발자가 vercel에 배포하여 1일차에 할 수 있는 환경 설정을 마무리했다.
4. 여기까지 했을 때 새벽 2~3시쯤이 되었는데, 디자인을 한창 하고 있는 와중이었기 때문에 더이상 개발을 할 수 없었다. 그래서 1일차 때에는 chrome extension/Next.js 기본 세팅과 1~2개의 mock API 생성 및 front-backend 연결까지 진행하고 개발자들만 먼저 호텔로 이동하게 되었다.

Day 2

1. 9시 반쯤 기상하여 바로 해커톤 장소로 향했다. 돌아와보니 디자이너분들이 밤새 디자인을 완성하고 방금 호텔로 출발해있었다. 우리도 그 열정을 이어받아서 꼭 개발을 완성해야겠다고 생각했다.
2. 다자인을 확인해보니 어제 밤까지 작업 중이던 검은색 바탕의 디자인은 모두 사라지고, 형광 노란색으로 화사하게 디자인이 개편되어있었다. 밤새 고민한 흔적이 보였고, 디자인이 훨씬 예뻐져서 좋았다.
3. 프론트엔드 개발자가 둘이다보니 나는 비지니스 로직과 게임 기능 구현에 집중하고, 한 분은 UI에 집중하기로 했다.
4. 그렇게 순조롭게 개발이 되나 싶던 찰나, DAY 2의 메인 행사인 '멘토링' 섹션이 시작되었다.
   • 우리는 인공지능 스타트업 보이저엑스의 iOS 개발자분께서 멘토링을 해주셨다.
   • 우리의 기획은 '모든 사이트에서 image-to-text 인공지능을 활용하여 대체 텍스트를 제공하자' 였는데 여기에 대해 의문점을 제시해주셨다. 그러면 결국 대기업에서 좋은 image-to-text 모델을 개발하면 경쟁에서 밀리는 것이 아니냐는 것이었다.
   • 멘토분의 조언과 우리가 해커톤을 준비하면서 브레인스토밍한 많은 기획을 잘 버무려서 새로운 방향을 정하게 되었다.
   • 기존의 기획에서 '인공지능이 특히나 잘 설명하지 못하는 도메인을 특정하여 그 사이트에서 인간 지능으로 대체텍스트를 제공하자!'로 최종 기획을 확정했다.
     • 즉, 패션 쇼핑몰의 '품이 넓고 트렌티한 맨투맨' 상품과 같이, 사람이 개입되어야하는 대체 텍스트를 게임 사이트에서 라벨링하고, 시각 장애인분들은 크롬 확장 프로그램으로 그 인간 지능을 활용할 수 있게 하는 것이다.
   • 돌이켜 생각해보면, 멘토링을 통해 우리 서비스의 강점과 의의를 확실히 하고 도메인을 좁힌 것이 가장 중요한 선택이었다. 좋은 조언을 주신 멘토분께도 감사하고, 그동안 우리가 기획을 열심히 준비했기 때문에 바로 그 조언을 잘 캐치할 수 있었던 것 같다.
5. 도메인은 바뀌었지만 다행히 개발 로직과 게임의 큰 틀은 그대로였기 때문에, 디자인과 개발을 동시에 바로 수정하기 시작했다. 하지만 기획이 바뀜으로써 계획대로 잘 시간은 부족했다😅 하지만 처음 기획보다 더 좋은 기획으로 멋진 프로젝트를 완성하겠다는 생각으로 그렇게 피곤하지 않았던 것 같다.
6. 2일차 밤에는 해커톤에서 야식으로 치킨을 제공해주셨다! 야식과 더불어 중간중간 빵과 음료수도 제공해주셔서 감사했다.
   

   

   2일차 야식

Day 3

1. 잠을 자지 않고 새벽내내 개발을 했다. 정오까지 코드 프리징이었기 때문에 한시도 쉴 시간이 없었다.
2. 새벽에 겨우 약간의 UI를 제외한 크롬 익스텐션, 게임 로직을 완성하고 시나리오를 테스트해 볼 수 있었다.
   • 비장애인이 게임 웹사이트에서 패션 이미지에 대한 대체 텍스트를 라벨링
   • 서버에 해당 사진에 대한 대체 텍스트 저장
   • 무신사 쇼핑몰 웹사이트에서 시각 장애인용 크롬 익스텐션 ON
   • 라벨링된 대체 텍스트가 img alt에 적용되어있는 것을 확인.
     • 서버에 저장되어 있지 않은 사진이라면 image-to-text 인공지능을 이용하여 실시간으로 대체 텍스트 생성
3. 남은 시간동안 계속 UI 작업과 버그 수정을 하여 종료 직전에 무사히 코드 프리징을 마쳤다.
4. 2시부터 20팀이 각자 4씩 발표를 하고 1분간 심사위원 질의응답 시간을 가졌다.
5. 그 후 30분 간 심사위원 분들과 참가자들이 돌아다니며 프로젝트를 구경하셨다.
6. 5시 반쯤 심사가 끝나고 시상식이 시작되었다. 거기서 우리 팀은 영광의 2등을 수상하게 되었다!
   

   

   2등 쿼드마이너상

의의

1. 주제가 미리 공개된 해커톤이라 기획에 모두가 긴 시간동안 참여할 수 있었고, 모두가 공감하는 주제를 선정할 수 있어서 좋았다. 덕분에 6시간밖에 못잤음에도 별로 피곤함을 느끼지 않은 것 같다.
2. 역시 가장 중요한 것은 기획이라는 것을 느꼈다. 프론트엔드 개발자에게도 미니 PM 수준의 역량이 필요하다는 것을 다시금 되새겼다. 앞으로도 함께 기획하는 개발자가 되어야겠다.
3. 개발적으로는 t3 stack에 대해 알게 되어좋았다. 웹 개발 트렌드가 빠르게 바뀌는 것을 긍정적으로 보는 입장으로서, 재밌고 멋진 stack을 알게되어 기쁘다. 이번에 직접 사용까지 해볼 수 있어서 좋았다!
4. 최고의 기획자들, 최고의 개발자들과 함께 팀으로 참가하게 되어 영광이다. 앞으로도 꾸준히 실력을 키우며 원하는 것을 구현해나가야겠다.