멋대 운영진 해커톤에서 만난 백엔드 개발자와 이야기를 하다가, "또 해커톤 나가자~~"라는 말이 나왔다. 그렇게 대회를 찾던 중 알게 된 것이 바로 STDEV 사이언스 해커톤이었다.
STDEV 사이언스 해커톤은 카이스트 동아리에서 시작된 사단법인에서 주최하는 대회라고 한다 ! (아마도 ..?😅)
디자인 1명 + 기획자 1명을 더 구해서 팀 단위로 나가게 되었다.
🧑🧑🧒 인원 구성: 총 4명
- 프 1명(나!)
- 백 1명
- 기획 1명
- 디자인(기획) 1명
지원서를 내고 결과를 기다렸는데 합격했다 !! (숙소 제공 + 식대 지원!!)
지원서에서는 지원동기, 협업 경험, 내가 선택한 파트와 관련된 경험, 유사 대회나 행사에 참여한 경험 등을 작성해야 했다.
합격하고나서 중간고사 일정이 하나씩 확정될때마다 사실 초조해졌다.
시험 하나가 17일에 끝나고, 21일 오전 10시에 있는데.. 우리 팀은 대전 여행을 위해 18일에 출발해서 18일 놀고, 19~20 개발하는 스케줄이었다. 그래서 21일에 보는 시험 공부할 시간이 많이 없었다 .. 여담이지만 이건 진짜 시원하게 말아먹었다 ;;;;;
해커톤 주제: "호기심으로 풀어내는 과학"
사실 주제를 처음 받고 엄청 고민했다 .. 서비스 기획 회의만 엄청 한 것 같다.
"애초에 어떤 현상에 관심이 있어야 호기심이 생기는거 아닌가...? 그러면 애초에 이 호기심을 생성하게 해줘야 하나?" 등등 팀원들과 오랫동안 회의를 했다 !! (거리 & 시험기간 이슈로 비대면으로 ...ㅜ)
게다가 이 대회는 기술 점수 비중이 높아서 뭔가 기술적으로도 새로운 걸 보여줘야 할 것 같았다. 하지만 ... 개발 시간은 24시간도 채 안 되는 짧은 시간이었기에, 기능도 현실적으로 설계해야 했다. (어렵다 어려워 ..😔)
결국 정한 우리의 서비스는!
"감정으로 호기심을 유도하는 다정한 과학 서비스, oh-rang"
주요 기능 및 사용자 플로우
- 소셜 로그인 (카카오 로그인)
- 9가지 감정 중 오늘 느낀 감정을 선택
- 선택한 감정과 관련된 질문 자동 제시
- 답변 작성 → ‘오랑이’ 캐릭터가 과학적 설명과 함께 공감
- 감정 + 답변 + 오랑이 피드백을 합쳐 감정 이미지 카드 발급, 카드 뒷면에는 자동 작성된 일기 확인 가능
- 아카이빙 페이지에서 감정 카드/일기 모아보기
- 워드클라우드로 내가 가장 많이 느낀 감정 TOP 5 시각화
- 감정별로 글 리스트 필터링 & 개별 카드+일기 다시보기
- 전체 작성 글 리스트도 확인 가능
나는 프론트를 개발했기에, 프론트 중심으로 설명하겠다 !
React + Ts + Vite + styled-components + zustand 환경에서 개발했다.
로그인
 |  |
|---|
우선, 로그인은 OIDC 방식으로 구현했다.
(관련 글은 여기를 참고해주세요오)
1박 2일 해커톤 특성 상 로그인 방식을 여러개 둘 필요가 없다고 생각해 "카카오 로그인"만 구현했다.
지금은 이미지여서 정적으로 보이지만 가운데 아이콘들은 둥실둥실 떠다닌다!!!!
home page
카카오 닉네임을 연동해 "00님" 이렇게 뜨게된다.
home 화면에서 2개의 기능 중 하나를 선택할 수 있다.
"oh! 카드 생성"
"oh! 아카이브"
oh! 카드 생성
지금 나의 감정 선택
 |  |
|---|
지금 나의 감정을 9가지 중 하나로 선택하게 된다.
(선택한 감정에 맞게 오랑이의 표정과 말도 변한다 ㅎㅅㅎ)
여기서 상태 관리로 zustand를 사용했다. 다음 포스트에서 더 자세히 기술하겠다.
선택한 감정 관련 질문과 답변
 |  |  |
|---|
선택한 감정과 관련된 질문을 ai가 자동으로 생성해준다. 그에 대한 답을 입력하면 로딩창이 뜨고, 이후 나의 답변과 관련되어 과학적 원인을 찾을 수 있다면 해당 내용과 함께 공감해준다.
(gif여서 로딩창이 좀 느리게 보인다! 하지만 저렇게 느리진 않다 ..)
카드 및 일기 생성
 |  |  |
|---|
감정 + 사용자의 답변 + 오랑이의 답변을 종합해 이미지를 생성해준다! 이미지 카드를 클릭하면 뒷면의 자동으로 작성된 일기도 확인할 수 있다.
이후 oh! 아카이빙을 누르면 다시 home 화면으로 돌아간다.
oh! 아카이빙
 |  |  |
|---|
oh! 아카이브에 들어가면 이렇게 내가 지금까지 느낀 TOP5의 감정과 전체 아카이빙을 확인할 수 있다.
워드 클라우드 형태로 TOP5를 확인할 수 있는데,그 중 하나를 클릭하면 해당 감정을 언제 느꼈는지 확인할 수 있다. 마찬가지로 카드(이미지 + 일기)를 다시 볼 수 있다.
전체 아카이빙에서도 똑같이 리스트 중 하나를 누르면 카드를 볼 수 있다.
이런 플로우다 !
이번 해커톤은 정말 찐찐 하루밖에 시간을 안주었기에 더 의미가 깊었다. 지금까지 해커톤은 미리 기능 개발을 할 시간을 주었는데, 이번에는 당일에만 가능했다. (전날 오후 6시에 기능 구현의 어려움을 생각해서 6시부터 해도 된다고 했지만 .. 우리팀은 이미 대전에 "놀러" 온 상태였기에 그냥 놀고 먹고 놀고 먹고 .. 했다 ..ㅎㅎ)
배운 점
정말 24시간도 안되어서 이걸 내가 다 구현했다니 !!!!!!
너무 너무 뿌듯했다 .. api가 몇개야 ...
시간이 짧은 개발일수록 백엔드와의 소통이 아주아주 중요하다는걸 깨달았다!! 프론트 ui개발 후 api 연결하려고 해서, api 명세서를 늦게 봤는데 나중에 프나 백이나 서로 고쳐야 할 부분이 있었다. 내가 좀 미리봤다면 !!!!
그리고 상태관리로 zustand를 처음 사용해보았다. 이건 다음 포스트에서 소개해보겠다!!
아쉬운 점
물론 코드가 너무 너무 더럽다 .. 리팩토링이 시급하다
컴포넌트화를 제대로 하지 않았고, 스타일 코드가 길었는데도 그냥 같은 파일에 코드를 작성했다. 그리고 커밋도 자주자주 안했다 ... 바본가 ... 프론트가 나 혼자기도 했고, 일단 "완성"이 최우선이었기에 이런걸 좀 무시했다. 그러면 안되는데!!!! 이건 정말 반성하고 있다 ..🥺😭
개발 하면서 이슈가 있던 부분은 다음 글에서 작성해보겠다 !!
마지막은 stdev 해커톤 겸 대전 여행을 온 우리팀이 대전을 즐긴 사진이다 ..ㅎㅎㅎ
 |  |  |
|---|
 |  |  |
|---|
