카이스트 SPARCS 해커톤에 참가했던 4명의 팀원들과 새로운 디자이너 1명과 함께 팀을 구성하게 되었다.(SPARCS 참가 후기)
준비 과정
Junction은 SPARCS 해커톤과 달리 주제를 사전에 알려주지 않기 때문에 미리 준비할 것은 없었다.
다같이 모여 가볍게 인사를 나누고 5개의 Track Partners 기업이 어떤 프로덕트를 서비스하고 있는지, 그렇다면 어떤 주제가 나올 수 있을지 예상해보는 시간을 가졌다.(이번에도 역시 큰 도움은 되지 않았다😅)
팀이름을 미리 정했는데, 5명 모두 같은 학교라 교목인 zelkova(느티나무)로 했다.
Day 1
당일 저녁 부산 벡스코에 도착하여 오프닝 행사에 참여했다. 기념 티셔츠도 나누어주시고 인생네컷도 찍을 수 있다.✌️
각 트랙파트너즈를 소개하는 발표에 이어 각 트랙의 해커톤 주제가 발표되었다.
부산 X 신한카드: 증권사 데이터와 공공데이터를 활용하여 일상의 문제를 해결하라.
JAKA: 로봇이 요리하는 음식에 대한 부정적인 선입견을 없앨 수 있는 아이디어와 서비스를 제시하라.
SOLUM: ESL(Electronic Shelf Label)을 새로운 산업과 접목시킨 서비스를 만들어라.
BTO Busan X GroundK: 부산의 여행 경험과 이동성을 개선할 수 있는 서비스를 만들어라.
CNT Tech: 포장 주문을 유도하는 새로운 방식의 배달 플랫폼을 만들어라.
밤까지 트랙 선정을 완료하고 서비스에 대한 설명까지 제출해야했기 때문에 시간이 촉박했다. 5개의 기업 부스를 방문하며 사용가능한 하드웨어나 데이터에 대해 묻고 주제에 대한 추가 설명을 들었다. 그 후 트랙별로 떠오르는 아이디어들을 브레인스토밍하고 각자 선호하는 트랙을 2개씩 적어서 투표했다. 공공데이터를 사용한 visualization에 자신이 있었지만 획기적인 아이디어가 떠오르지 않아서 신한카드를 제외하고, 상대적으로 생소한 JAKA와 SOLUM도 제외했다. GroundK와 CNT Tech가 고민되었는데, 우리가 자주 사용하는 배달앱을 새로운 방식으로 구현한다면 3일 동안 재밌게 개발할 수 있을 것 같아 CNT Tech 트랙을 선택했다.
5명 모두 활발하게 아이디어를 내었고 특히 기획팀에서 애를 많이 써주었다. '포장 주문을 유도'한다고 했을 때, 일반적인 아이디어는 '밖에 나온김에 포장을 한다'거나 '배달에 비해 금전적 혜택을 주는' 방식을 생각할 것이다. 하지만 우리는 '포장 주문을 필요로'하는 사람들이 있을지 고민하고 그 사람들을 타겟으로 하면 서비스에 당위성이 생길 것이라 판단했다.
우리는 은둔형 외톨이(히키코모리)를 대상으로 그들이 집에서 나와 매장으로 포장을 할 수 있도록 유도하는 서비스를 만들기로 했다. 은둔형 외톨이의 수가 생각보다 많았고 사회적 문제였기 때문에 이것을 해결할 수 있는 서비스를 구현하고 싶었다. 기획팀의 추가적인 자료 조사 결과, 은둔형 외톨이는 밖에 나가고 싶다는 마음은 있지만 그 행동을 이끌어내는 주변인이나 동기가 부족하다는 사실도 알 수 있었다. 또한 은둔형 외톨이는 배달앱의 헤비 유저이기 때문에 비지니스적으로도 적합한 타겟이었다.
해결할 문제와 원인을 알게되니, 무엇을 구현해야할지가 자연스럽게 정해졌다. AI 챗봇을 이용하여 은둔형 외톨이와 대화를 진행하고, 그 과정에서 식사 시간에 맞추어 포장 주문을 유도하는 핵심 시나리오가 그려졌다. 또한 매장을 방문하는 과정 안에서도 알림을 통해 지속적으로 격려의 말을 건네고 포장 경험을 좋은 기억으로 남게 해주기 위한 UX를 고민했다.
백엔드 개발자와 함께 T3 Stack 개발환경 설정을 마치고 새벽부터 본격적인 개발을 시작했다.
Day 2
첫 날 야식을 제공해주셔서 맛있게 먹고 밤샘 개발을 할 수 있었다. 음료는 거의 무제한이었기 때문에 잠을 깨려고 해커톤 내내 음료를 많이 마셨다.🧃
유저와의 라포(rapport) 형성이 중요한 서비스이기 때문에, 디자이너는 서비스의 메인 캐릭터와 편안한 UI를 디자인하는 것에 집중했다. 서비스의 메인 캐릭터로 귀여운 토끼 Bob이 탄생했고, 서비스명도 'PICK UP BOB!' 으로 정해졌다.
지금까지의 경험상 Day 2 새벽은 컨디션이 비교적 가장 괜찮을 때이므로, 단순한 UI보다는 기술적으로 어려운 부분들을 미리 작업해두기로 했다.
배달'앱'을 만들어야했기 때문에 Next.js에 PWA를 적용했다.
지도 페이지에 naver maps API를 연결하고 Navigation API의 watchPosition 함수로 유저의 위치를 지속적으로 추적하여 지도에 그렸다.
유저의 위치와 매장 사이의 거리를 계산하고 화면에 표시했다. 남은 거리에 따라 진동을 주는 기능이 있어서 Vibration API가 휴대폰에서 잘 작동하는지 확인했다.
FCM(Firebase Cloud Messaging)을 직접 사용해본 것은 처음이었지만 공식 문서와 예제를 참고해가며 Next.js와 연동하고 무사히 알림 기능을 세팅할 수 있었다.
세팅이 끝나니 아침이 되었는데, 저녁 시간 전까지는 디자인에 따라 UI를 구현하고 미리 구현해둔 함수들을 기획에 따라 호출했다.
메인 기능인 채팅 UI를 개발했다. AI가 식사 메뉴를 추천해주고 포장 주문을 유도하는 대화를 진행한다. 챗봇은 OpenAI GTP API를 사용했고 백엔드 개발자가 프롬프트 엔지니어링을 통해 상황에 맞는 응답값을 보내주었다. 나는 유저가 작성하는 input string과 백엔드에서 보내주는 AI의 응답값을 상태로 관리했다. 말풍선 CSS를 적용하고 채팅을 작성하면 스크롤을 최하단으로 내리는 기능 등도 구현했다.채팅 UI
지도 페이지의 UI도 완성했다. 매장과의 남은 거리를 Progress Bar에 표시하고, 진행률에 따라 푸시 알림을 보내고 말풍선을 표시했다. 지도에서 유저의 이동 경로를 발자국 모양 아이콘으로 나타내었다. 유저의 이동 방향에 따라 발자국의 방향도 변한다. 매장에 도착하면 축하 Modal을 띄워 중요한 순간에 사용자에게 긍정적인 경험을 제공하도록 했다. 지도 UI 알림 예시
핵심 기능을 구현하고나니 저녁이 되어, 스파랜드에 가서 씻고 밤까지 휴식을 취했다.(작년과 달리 이번에는 숙소를 제공해주지 않고 스파랜드 티켓만 제공해주었다.)
Day 3
새벽에는 남아있던 CSS와 UI를 작업했다. 채팅에 Fade animation을 적용하여 자연스러워 보이게 하는 등 UI/UX를 최대한 개선했다.
해커톤 장소에 마련된 쉼터에 누워 잠깐 잠을 청했는데, 쿠션이 모자라서 바닥이기도 했고 에어컨도 강해서 몸이 으슬으슬해졌다. 이 때 컨디션이 급격히 안좋아져서 남은 프론트엔드 작업을 백엔드 개발자가 대신 해주었다. ChatGPT 프롬프트를 작성하는 일도 어려울텐데 프론트엔드 일까지 도와주어서 너무 고마웠다😭
아침이 되어 햇볕에 잠을 자니 컨디션이 조금 돌아와서, 마감 시간인 12시까지 QA와 발표자료 준비에 매진했다. 안드로이드 공기계를 챙겨왔기 때문에 두 기기를 들고 돌아다니면서 GPS나 알림 기능이 잘 작동하는지 한 번 더 확인했다. 백엔드 개발자와 함께 최종 데모 영상도 녹화하고 기술 스택을 정리해 발표 자료로 제공했다.
발표 및 결과
발표는 팀장님이 영어로 진행하였고, 차별화된 기획과 아이디어에 칭찬을 받았다.
작년과 달리 개발 난이도보다는 아이디어와 유저 시나리오에 더 큰 비중을 두는 느낌이었다. 작년에는 AWS Track에서 게임을 만들었고, 이번에는 새로운 아이디어의 배달앱이 주제였기 때문인 것 같다.
기획, 개발 난이도, 완성도 모두 만족스러웠기 때문에 1등을 할 수도 있겠다는 생각을 했지만, 정말 근소한 차이로 2등을 차지했다..아쉬웠지만 작년보다 좋은 결과라 만족하기로 하고 다같이 무대 위에서 상을 받았다!
의의
가장 중요한 것은 기획이라는 사실을 또 다시 체감할 수 있었다. 서비스의 목표가 이해되니 페르소나, 유저 시나리오, 세부 기획도 자연스럽게 도출되었고 개발 과정도 즐거웠다.
SPARCS 해커톤에서 명확한 타겟 유저가 있으면 좋다는 것을 배웠는데, 이번 해커톤에서 그 경험이 빛을 발한 것 같다.
일하는 사람으로서 컨디션 관리를 잘하는 것도 중요하다는 생각이 들었다.
개발 난이도가 낮은 프로젝트는 아니었는데, 그동안 쌓아온 경험과 빠른 학습을 통해 완성도 있는 결과물을 만들었다.
