2023년 우리 학교에서 진행한 겨울 캠프 해커톤과 관련된 이야기를 해보려한다.
해커톤 일정과 개발한 프로덕트, 느낀 점 등을 이야기해보겠다.
해커톤 일정
해커톤 일정은 생각보다 많이 빡빡했다.
수요일 오후 1시 ~ 오후 9시, 목요일 오전 9시 ~ 오후(낮) 12시까지였다!!
무박 2일이라며 48시간을 제공하는 다른 일반적인 해커톤과는 다르게,
12시간이라는 매우 짧은 시간을 배정받았다.
하지만 나는 밤을 새고 싶지 않았기에 프로덕트를 제일 빠르게 뽑는 법을 생각하고 있었다.
팀 빌딩
본인은 현재 2학년인데, 이번 해커톤은 1,2학년을 랜덤으로 섞어 팀빌딩을 했다.
4인 1조였는데, 내 팀은 나와 1학년 3명이 매칭되었다.
뭐 다른 팀은 2학년 두명있고 하던데 뭐...예.. 별 생각은 없었다.
이번 해커톤에서 내가 잡은 목표는 다음과 같았다.
- 팀원 모두가 밤 새지 않고 프로젝트 완성하기
- 책임감은 주고, 부담감은 주지 말기 (열심히 하되 못하면 욕하진 않을게 라는뜻)
- 후배님들이 얻어가는게 더 많은 해커톤이 되도록 하기
사실 나는 해커톤에 대한 별 욕심이나 생각이 없는 덤덤한 상태로 시작을 했기에,
해커톤 경험이 나보다는 적은 우리 후배님들이 무언가를 많이 얻어가면 좋겠다 싶었다.
아이디어
주제는 "학교생활과 밀접하게 쓸 수 있는 웹 구현하기"였다.
문제는 우리 학교엔 이미 학생들이 학교생활과 관련된 서비스를 다 만들어놓았단 것이다.
위키 서비스, 급식, 시간표, 성적(비스무리한거), 입학 전형, 커뮤니티 다 있었다^^..
다른 팀들은 다 이 주제를 듣고 모든 서비스가 이미 있다며 고민을 했지만,
나는 주제를 듣자마자 생각난 프로덕트가 하나 있었다.
DSM - PICK
바로 대덕소프트웨어마이스터고등학교에서 개발한 PICK이라는 서비스이다.
저번에 소프트웨이브에 참여했을 때 다른 소마고의 부스를 둘러보던 도중 발견했다.
교내 서비스란 서비스는 나올 대로 다 나왔다고 생각했는데,
그 당시 전자출석부 출결관리시스템이라는 아이디어가 굉장히 인상깊었다.
불편하게 종이로 관리되는 출석부를 웹 서비스로 바꿔 선생님이 편하게
학생들의 출결을 관리하게 해주는 시스템이다.
일단 무한 샤라웃부터하고간다 PICK 깃허브 링크
그래서 나는 소프트웨이브 이후 친구들에게도 "와 이거 우리학교에도 있음 좋겠다"
라고 말하고다니며 꼭 개발해보고 싶은 웹 서비스였다.
그런데 개발할 동기도 잘 생기지 않았고 한창 다른 일 한다고 눈이 팔려있었는데,
딱 해커톤에서 학교와 관련된 주제로 나에게 개발할 당위성을 준 것이다.
바로 나는 팀원들에게 해당 아이디어로 프로젝트를 만들어보자고 제시했다.
기획
정말 좋게도 우리는 백엔드 두명, 프론트 두명으로 분야가 나뉘어져있었다.
하지만 백엔드 친구들이 아직 서투르니 기획을 하면서 개발하기도 쉽게
ERD와 요구사항 명세서, API 명세서를 다 짜주기로 마음먹었다.
4명이서 같이 모여서 이야기를 하며 ERD와 API 명세서를 작성했다.
물론 쌩 텍스트로..!ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
귀찮음이 최고조로 올라왔던 나는 그냥 디자인도 거기서 할 겸 피그마를 켜서
거기서 텍스트박스 하나 들고와서 ERD랑 API명세서를 짰다.
응 다시 생각해보니까 좀 미안하네^^.. 동생들 많이 당황하더라
DB 설계는 효율이 좋고 정규화가 잘 되어있는 데이터베이스보다는,
구현하기 쉽고 직관적인 데이터베이스 구조로 설계해서 백엔드 친구들이
개발을 수월하게 할 수 있는 데에 초점을 맞췄다.
그리고 API 명세서까지 전부 작성한 다음 백엔드 친구들에게 로그인 로직을
먼저 구현해달라고 요청했다! 그리고나선 나와 프론트 칭구는 디자인에 들어갔다.
디자인
내가 디자인이 잼병이라 사실 레퍼런스가 좀 필요했다.
그래서 대덕에 내가 가장 아끼는 친구에게 연락해서 PICK의 디자인 레퍼런스를
보내줄 수 있냐고 물어보았다.
너무나 고맙게도 알아봐주겠다며 흔쾌히 수락해주었고, 레퍼런스를 받기 전에
뭐라도 디자인해놓아야겠다고 생각하며 디자인을 시작했다.
서비스의 핵심이 되는 출석부를 보는 디자인의 와이어프레임을 작성했다.
우리 학교의 각 학급은 16명이었기에, 한 줄에 4명씩 4줄로 보여주면
매우 깔끔하고 보기에도 좋을 것이라고 생각하고 이렇게 설계를 했다.
상태를 미인정 결석, 인정 결석, 출석 완료 세 가지로 나누었는데,
텍스트를 안봐도 한 눈에 어떤 상태인지 알 수 있도록 디자인하고 싶어서
각 상태의 색깔을 많이 돋보이게 해야겠다는 생각을 했다.
그렇게 나온 디자인이다.
뭐 나름 나쁘지 않다. 추가적으로 UX를 위해서 선생님이 각 출석 상태에
주석을 작성할 수도 있게 디자인을 해놓았다.
이건 학생이 보는 화면이다. 학생은 이석증 발급 기능을 사용할 수 있고,
자신의 출결 현황을 잔디처럼 볼 수 있게 디자인했다.
오른쪽 밑에는 최근 출석 상태가 어떤지를 자세하게 보여주는 컴포넌트도 설계했다.
신청된 학생의 이석증은 선생님께 이렇게 보인다.
이석증을 승인하면 자동으로 인정결석 처리가 되며, 사유도 같이 적히는 식으로
UX를 구상하며 디자인했다.
개발
개발 시작 전에 깃허브 오가니제이션을 만들어야 했는데 이름을 뭘로 할지가 고민이었다.
고민하다가 마침 대문짝만하게 크게 오가니제이션 이름을 추천해주시길래
그걸로 해드렸다. 어 그래ㅋㅋ
백엔드는 스프링, 프론트엔드는 리액트와 타입스크립트를 사용했다.
해커톤인데도 타입스크립트를 사용한 이유는, 자바스크립트 컴파일러가 오류를
너무 느슨하게 잡아주어서 코드를 작성하는 단에서 오류를 잡지 못하기 때문이었다.
스타일 라이브러리는 테일윈드를 사용하고 싶었는데, 울 후배님이 테일윈드를
아직 쓸 줄 모른다길래 위에서 언급한 목표를 이루기 위해서 후배님이 잘쓰는
스타일드 컴포넌트를 사용하기로 했다.
페이지는 3개 채 되지 않았기에 퍼블리싱은 오래 걸리지 않겠다고 생각했...으나
잔디 기능이나 출석부 학생의 각 컴포넌트를 클릭하면 상태 변경을 따로 해주어야하고
하는 등의 시간을 요구하는 상태 관리로 인해 생각보다 많은 시간이 걸렸다.
수요일 오후 1시에 시작해서 오후 3시쯤에 기획이 끝났고,
한 2시간 정도 디자인을 했으니 6시부터 9시 정도까지 퍼블리싱을 했다.
트러블 슈팅
우리 팀의 이슈는 다름 아닌 백엔드였다. 아니 이칭구들이 12월이 넘도록 공부를
똑바로 안해봤단 것이다..!!!
오후 6시쯤, 로그인 로직 구현해달라고 했는데 몇 시간 동안 끙끙대고 있어서 보니까
강의를 듣고 있었다. 쫌 괘씸했다ㅋ 아니 지피티한테 만들어달라해도 모자랄판에
어쨌든 그때부터 이미 프론트엔드 단에서 API를 제 시간에 사용하지 못할 것이라
예상을 했고, 서버리스로 서비스를 구축해야겠다는 생각을 한 뒤 일단 백엔드 친구들에게
열심히 해달라고 요청을 했다. 옆에서보는데 다죽어가더라 ㄹㅇ
간단한 백엔드는 하는 법을 알아서 내가 백엔드를 하려했지만, 12시간이라는 시간 중
벌써 6시간 채 남지 않았기에 supabase를 사용하여 상호작용을 해야겠다고 생각했다.
서버리스 개발
supabase로 개발을 백엔드 친구들에겐 비밀로하고 시작했다.
기존에 심심하다고 친구 생축 사이트를 만들 때 supabase를 쓴 적이 있는데,
그 때 기억을 되살려 supabase로 API를 연결하기 시작했다.
기존에도 필요한 API가 5~6개밖에 없었기에, 나름 어려운 일은 아니었다.
그래서 퍼블리싱을 열심히 해준 프론트엔드 친구에게 10시가 넘어서 들어가서 쉬라하고,
나 혼자 API 연결을 시작했다.
supabase로 개발하니까 API 하나 연결하는데 5~10분도 채 걸리지 않아 굉장히 만족스러웠다.
그렇게 난 프로젝트를 완성해 새벽 1시 30분 쯤에 잠들 수 있었다. 목표 달성 ~
일어나고선 내가 빼먹은 기능이 있다는 걸 프론트 친구가 알려주었다. 근데 당시에
너무 피곤해서 알빠노 니가해줘 시전하고 노션 자료를 만들었다.
고맙게도 알아서 잘해주었다^^..
전날에 스프링에게 호되게 당해 영혼이 털린 두 친구들에게는 격려와 함께
PPT를 준비해줄 수 있냐고 요청했고, 나는 노션 자료를, 프론트엔드 친구는 남은 기능과
버그를 픽스하며 분업을 시작했다.
성공적으로 10시 30분쯤에 개발과 함께 노션 작성, PPT를 모두 끝마칠 수 있었다.
그 후론 인력사무소 드립치면서 다른 팀 쏘다니며 도와달라는 애들을 도와주었다.
당시에 무슨 뭐지 일하는 정규직인가 그게임마냥 상사들이 초단위로 난리부르쓰치는
그런 게임 있는데 내가 그 게임 주인공이 된 느낌이었다.
이 팀에서 에러 고쳐주고 있으면 다른 팀에서 와서 "우빈이!!!!! 도와줘!!!"이러고
그 팀 가면 또 "우빈이!!!!!!!!!" 또 해주고나서 쉴라고 앉아있으면 옆에 후배애가
"선배 도와주세요!!" 진짜 우ㅏㅁ노라무파ㅣㄴㄴ프아ㅟ풍ㅍ와옹오
그래도 많은 팀들을 도와줄 수 있어서 뿌듯했다.
OAuth 로그인 기능이나 그 팀의 핵심 기능도 개발을 도와주고 하는 등
14팀 중 5개가 넘는 팀에 기여를 할 수 있어서 좋았다.
심사
심사는 심사위원분들이 직접 자리에 오셔서 한 팀씩 설명을 쭉 들으시고,
상위 세 팀을 뽑아서 그 세 팀을 발표시킨 다음 그 중 한 팀을 뽑는 식이었다.
우리 팀의 차례가 오자 나는 심사위원분들께 우리 프로젝트를 노션과 함께 소개드렸다.
근데 긴장도 많이 하고 좀 절어서 끝나고나서 팀원들에게 너무 미안했다.
응근데 미안한건 둘째치고 점심이 부대찌개라길래 개처럼 달려가서 먹었다.
먹고나서 돌아오니까 우리 팀이 3팀 안에 들었다고 팀원이 말해줬다! 다행이었다^^..
팀을 둘러보며 진짜 잘했다고 생각된 팀이 있었는데, 그 팀이 세 팀 안에 들지 못해서
굉장히 놀랐다. 프론트가 내 친구였는데 정말 열심히 했는데 안돼서 대신 섭섭했다.
발표
그렇게 전교생이 보는 앞에서 우리 프로젝트를 발표했다^^.. 시연 영상도 같이 보여주면서.
시연 영상 보실분 유튜브 링크 드립니다 링크
다행히 발표는 준비한 대로 잘 끝낼 수 있었다. 질의응답 시간이 있었는데,
프론트엔드 강의를 해주신 강사님께서 나에게 API fetching과 관련된
성능에 대해 질문을 해주시길래 조금 당황했다.
mutation 이후에는 refetch를 해서 데이터를 다시 가져오냐고 여쭤보셨다.
그래서 현재는 mutation 발생 후 다시 API를 불러와서 데이터를 가져오지만,
추후에는 React Query를 사용하여 값을 캐싱하고 mutation될 때마다 해당 쿼리의
키값을 invalidate시키는 식으로 마이그레이션할 것 같다고 답변드렸다.
추가적으로 1학년 학생이 질문을 했는데, 질문이 간단하면서도 내가 발표할 때
못했던 서비스 설명을 해줄 수 있게 한 질문이라 정말 고마웠다.
시상
정말 운좋게 14팀 중 1등을 하여 최우수상과 상금 15만원을 받았다.
아니 4인 1존데 15만원주면 어떡해요
팀원들에게 수고했다며 독려하고, 이번에 백엔드 개발을 끝내지 못한 두 명에게는
수고많이했다고, 겨울방학에 열심히 공부해서 와달라고 말해주었다.
백엔드 완성을 실패할 걸 예상하기도 했었고, 서버리스로 빠르게 대응을 한 탓에
딱히 이 칭구들이 밉거나 그러진 않았고 오히려 열심히 노력해줘서 고마웠다.
상금 분배^^...
그래서 열심히 노력해준 우리 친구들 많이 하라고 나 3, 후배님들 4 이렇게
나누자고 했는데 막 극구 사양을 하면서 자기들도 양심이 있다고 그러는거다.
아니 내가 괜찮다는데 왜이러냐면서 도망갔는데 밍@췽@놈들이 20분동안
그렇겐 못한다면서 돈다발들고 계속 쫓아오길래 진짜 어이가없었다.
그래서 단순 도망가면 얘네한테 돈을 못줄 것 같다는 생각에 바로 입을 털었다.
한 팀으로 되었으면 어찌됐든 돈은 똑같이 받아야된다... 기여도에 따라서 상금을
분배하는 것은 적절하지 않다... 이런 뭐 나도 모르겠는 개소리하면서 입털었는데
음 잘 먹혔다 ㅋㅋ 그래도 내가 3을 받는건 아니라고 하길래 결국 ATM에 돈 입금한다음에
15/4해서 37500원을 각자 받기로 했다^^. 뭐 그정도 해서 후배들에게 돈가도
좀 탐탁찮긴한데 만족했다.
마무리
이번에도 밤새고 스트레스받으면서 개발을 한게 아니라, 잠도 자고 할거 하고
즐기면서 진행하고 상까지 받았던 해커톤같아서 너무 좋았다.
해커톤을 하며 느끼는 건 서비스가 작다하더라도 이거 좋네, 저거 좋네 하면서
여러 기능 붙이는 것보단 핵심 기능 하나로 밀고가는게 무조건 좋다고 생각했다.
거의 12시간만에 이런 서비스를 구현했다는 게 정말 자랑스러웠고,
동기가 없던 나에게 마침 이 서비스의 MVP 정도라도 개발할 기회를 줘서 좋았다.
우리 백엔드 후배님들은 애들이 인성도 너무 착하고 순해서 오히려 더 아쉬웠다.
그래서 겨울방학때 공부 열심히 해서 꼭 보답해달라고 이야기하고 빠빠이했다.
뭐 나는 돈이랑 MVP 개발 동기 말곤 얻은게 딱히 없는 해커톤이었지만,
우리 팀원들 챙겨주고 다른 팀도 도와주면서 자원봉사의 행복감을 조금 체험했다.
해커톤 기간이 짧아서 불만인 친구들도 많았지만, 해커톤 체질이 아닌 나에게는
오히려 짧아서 후유증도 덜하고 즐길 수 있는 해커톤이었던 것 같다.
그렇게 끝나고 밥을 먹던 중 친구가 "야 너 해커톤 일주일하면 어떨 것 같음?"
이라고 물어보길래
"바로 노트북 부수고 뛰어내리지"라고 답했다
캐리머신이네요^~^