[코테이토 10기] 5th COKERTHON(코테이토 해커톤) 회고

2025.01.17 (금) 19시  ~  01.18 (토) 09시

무박 2일의 기간동안 해커톤이 진행되었다.

주제는 자기계발 or 감정이었고, 아래 순서로 진행되었다.

나는 이번 해커톤을 통해 웹 사이트를 완성하고 배포까지 해보자는 목표를 가지고 참여하였다.

팀 프로젝트는 아직 진행중이었고 미리 완성과 배포과정을 한번 해보면 현재 진행중인 프로젝트를 마무리할 때 도움이 될 것 같았다.

또한 짧은 시간 내에 완성해야 하는 만큼 기능의 선택과 집중이 중요하다고 느꼈고 이런 경험을 배우기엔 해커톤이 가장 많은 경험을 얻을 수 있을 것 같아 참여하게 되었다.

 

우리팀은 기획 1, 디자인 1, 프론트엔드 2, 백엔드 1로 이루어졌고

팀과 주제가 당일 나와서 기획 팀원이 미리 어느정도 구상을 하고 만난 상태로 시작을 하여 빠르게 MVP를 설정하고 진행할 수 있었다.

다행히 프론트엔드 파트가 2명이라 안심하고 시작했던 것 같다. 

아마 혼자였으면 구현한 대부분의 기능은 완성을 못했을 것이다...

 

우리 팀의 웹사이트 이름은 Mood Company 였고 사용자가 감정일기를 제출하면 감정 상태를 AI가 분석하여 사용자의 감정에 따라 천사와 악마 상사가 등장하여 일기에 대해 코멘트를 남기고 일기는 감정 쓰레기통에 버리듯 버려지는 웹사이트이다.

MVP는 다음과 같이 3가지로 정하였다.

1. 감정 보고서 작성 및 단어 추출
   • 사용자가 작성한 감정 보고서를 바탕으로 긍정/부정 단어 비율을 자동으로 분석한다.
   • '감정 쓰레기통'이라는 컨셉으로 작성된 내용은 저장되지 않아, 부담 없이 감정을 털어놓을 수 있다.
2. 감정 데이터 시각화
   • 차트를 통해 감정 비율을 시각화하여 사용자 상태를 직관적으로 보여준다.
   • 천사, 악마 캐릭터가 각각 작성한 글을 기반으로 위로, 조언을 해준다.

     

3. 천사와 악마 캐릭터 상호작용
   • 긍정 감정은 천사 포인트, 부정 감정은 악마 포인트로 전환된다.
   • 이러한 포인트로 화면을 꾸미는 아이템을 구매할 수 있다. (구현 X)

5TH COKERTHON_1팀.pdf

18.16MB

 

게임 형식의 웹사이트여서 프론트를 구현하며 어려운 부분이 많았다. 

같이 프론트엔드 파트를 맡은 팀원이 애니메이션을 많이 구현하여 사이트의 퀄리티가 많이 올라간 것 같다.

 

개발 과정이 기획 → 디자인 / 백 → 프론트이다 보니 초반엔 리액트 프로젝트 생성과 기본 작업을 해놓으니 할 일이 없었다.

VITE로 리액트 프로젝트를 생성하였고 npm을 이용하였으며, css는 tailwind css를 사용하였다.

쉬다가 디자인이 페이지를 완성할 때마다 UI를 먼저 구현하였고 이후 백이 완성된 후 서버 배포를 하여 작업을 시작하였다.초반엔 할 일이 없어 여유로웠지만 후반부로 갈수록 할 일이 너무 많아 제출 10분전까지도 계속 작업을 했었다...

 

해커톤에서 단기간내에 사이트를 완성하는 데 집중하면서 많은 것을 배웠다.

같은 팀이었던 프론트엔드 팀원에게도 많이 배운 것 같다.

프론트엔드에서 애니메이션을 LottieFiles라는 사이트에서 무료로 가져올 수 있다는 점도 알게 되었고,

useLocation을 통해 props 처럼 데이터를 전달할 수 있다는 점도 알게 되어 해커톤 이후 진행중인 프로젝트에서 적용해보기도 하였다.

또한 백엔드와 협업하면서 swagger를 보는 방법도 배웠고 axios 작업을 하면서 params를 어디에 적어 보내야 하는 지 등 알고 있었다 생각했지만 몰랐던 부분도 많았다.

기획과 디자인도 빠르게 작업을 해줘서 잘 마무리할 수 있었다 ~! 지금 다시 보니 우리팀 다들 너무 고생했다... 짱짱

 

결과는 4팀 중 1등이었다 !!!

이번 해커톤은 H-Space에서 지원을 받아 상금도 많이 받았다. ㅎㅎ

열심히 해서 배운 점도 많았고 수상까지 해서 더욱 값진 경험이었다🥇🎉👏

 

https://github.com/5th-COKATHON/Team1-Client

GitHub - 5th-COKATHON/Team1-Client