하이톤이란?
하이톤은 고등학생에 의한, 고등학생을 위한, 고등학생들만의 해커톤 이라는 주제로 운영진부터 참가자까지 모두 고등학생으로 이루어진 대회입니다
팀은 디자이너 1명, 프론트 개발자 2명, 백엔드 개발자 1명, 이렇게 총 4명이서 한팀을 이루어
무박 2일동안 진행하고, 전 여기서 프론트 개발자로 참여했습니다
참여한 이유
여느때처럼 회사에서 딴짓하는 날, 후배에게 디엠이 왔습니다
나갈까 말까 고민하던 중, 같이 나갈 노예 한명을 얻어서 하이톤에 참가하게 되었습니다
주제
이번 하이톤의 주제는 나를 행복하게 하는 것, 행복 두개 중 하나를 선택해야 했습니다
아이디어가 쉽사리 떠오르지 않아 챗지피티에게 영감을 얻는 도중,
본인이 행복을 느꼈던 장소는 분명히 있지만, 이를 잘 기억하지 못한다. 라는 말에서 영감을 얻어,
본인이 행복했던 장소를 기록하고, 이를 공유하는 서비스를 기획했습니다
기획
우리는 이 서비스를 기획할때 최대한 나를 기준으로 쓸 수 있게 기획했습니다
다른 사람의 행복한 장소를 보는것도 좋지만, 나를 행복하게 하는게 이번 주제에 부합하기 때문입니다
그렇게 노션을 통해서 간단하게 아이디어를 정리했습니다.
서버, 디자인 그 누구에게도 친절하지 않은 기획서
디자인
디자인은 Claude를 통해 디자인 했습니다
항상 해커톤에서 느끼는거지만, 디자인 -> 퍼블리싱을 하는 작업은 실 서비스에서는 맞는 순서지만,
개발 시간이 부족한 해커톤에선 여기에 소요되는 시간이 많아 정작 기능을 개발할 시간이 부족하다 느꼈습니다
그리고 요즘 ai는 웬만한 디자이너보다 수준 높은 디자인 실력을 보여주기에 Claude 디자인을 택했습니다
개발
처음엔 앱 서비스로 개발 할려 했으나, 이 서비스는 로그인 없이 그때마다 바로바로 기록하는게 좋다고 생각하였고,
앱보단 웹이 No Auth 접근 방식이 좋다고 생각하여서 모바일에 최적화된 웹 서비스로 개발했습니다
1차
그렇게 1차를 개발하고, 멘토에게 약 20분동안 서비스를 소개하고, 대화하면서 다음과 같은 피드백을 받았습니다.
내가 쓴 글을 볼 수 있으면 어떨까요?
지도에 아이콘만 있으니까 허전해요
이와 같은 피드백을 받고 UX를 재구상하였습니다
-
내가 쓴 글을 볼 수 있나? <- 이 피드백은 유저 정보를 알아야 구분이 가능하기에 불가능합니다.
그렇다고 로그인을 도입하자기엔, 앞서 말한 접근성 부문에서 다소 떨어질 수 있다고 생각했습니다
이에 조금 다르게 접근하여,localStrage를 활용하여 한 브라우저에서라도 본인이 작성한 글은 볼 수 있게 하고,
상단에 행복 카테고리 + 내가 쓴 글 카테고리를 추가하였습니다 -
지도에 아이콘만 있으니까 허전해요 <- 하단에
vaul라이브러리를 사용한 바텀 시트를 추가하여,
좋아요 수를 기준으로 가장 인기 있는 3곳과 가장 최신에 등록된 글 3개를 띄울 수 있게 하였습니다.
최종 화면
그렇게 최종적으로 다음과 같은 메인 화면을 구상하게 되었습니다.
행복이란 색상에 가장 잘 맞게, 연분홍을 메인 컬러로 잡고 진행하였으며,
추가적으로 위치 검색 기능을 개발하였습니다.
또한, 나를 주제로 잡은 만큼 상단의 카테고리에 내가 기록한 장소가 먼저 뜨게 하여,
내가 기록한 장소를 가장 먼저 볼 수 있게 UX를 수정했습니다
자세한 화면들은 시연 영상을 참고해주세요 1분밖에 안걸려요 제발 봐주세요 제발
수상
그렇게 위 자료를 바탕으로 PPT를 만들어 발표를 하고 대상을 받았습니다.
당시 독감이 나은지 얼마 안되서 저조한 컨디션으로 발표를 제대로 진행하지 못하여
수상은 염두에 두지 않았는데 갑자기 대상 수상자에 저희팀이 호명되어서 굉장히 당황스러웠습니다
그렇게 상을 받고 심사위원분께서는 발표 자료에 우리 서비스를 써야 하는 이유를 잘 설명하였고,
서비스 구현도가 높다고 호평을 받았습니다.
처음으로 받은 대상이자, 고등학생 신분으로 참여한 마지막 해커톤이기에 더 기억에 남을거 같네요
긴 글 읽어주셔서 감사합니다
버스가 타고싶었는데 태워버렸슨 ㅠㅠ