개요
푸드트럭 산업은 최근 10년간 폐업률이 약 40%에 이를 정도로 높은 리스크를 가진 업종으로, 이는 낮은 접근성과 경험 부족, 그리고 분산된 정보로 인해 발생하는 운영상의 어려움에서 기인합니다. 이러한 문제를 해결하기 위해 푸드트럭 사장님과 고객 모두를 위한 통합 서비스를 기획하였습니다. 푸딩은 푸드트럭 운영 과정에서 발생하는 다양한 불편함을 해소하고, 운영의 효율성과 고객 만족도를 동시에 향상시키는 것을 목적으로 합니다.
개발 기간
2024.08 ~ 2024.10 (7주)
참여 인원
6명 (프론트엔드 3명, 백엔드 2명, 빅데이터 1명)
주요 기능
푸드트럭 사장님
유동인구 빅데이터 기반 맞춤형 푸드트럭 상권 추천
유동인구 빅데이터 및 예약 로그 기반 조건별 타겟 분석
실시간 푸드트럭 예약 이용자 관리
푸드트럭 관련 공고 데이터 확인 및 푸쉬 알림
푸드트럭 고객
현위치 기반 푸드트럭 위치 조회
실시간 푸드트럭 예약 등록 및 푸쉬 알림
시스템 아키텍쳐
Frontend
React
Typescript
Javascript
Tailwind CSS
Firebase
PWA
Vite
Backend
Java
Spring Boot
JPA
MySQL
QueryDSL
Redis
Python
CI/CD
Docker
Jenkins
Ngnix
Ubuntu
Collaboration
Gitlab
Jira
Mattermost
Figma
Notion
담당 역할
카카오맵 API를 활용한 상권 추천
서울을 구별로 분리하여 지도에 장사 추천 구역, 인구 혼잡도를 표시한다
날씨 API를 이용한 장사 정보 제공
OpenWeather API를 활용하여 실시간 날씨 정보를 제공한다
푸드트럭 허가구역 안내
푸드트럭허가구역데이터를 바탕으로 지도에 허가구역을 표시한다
Chart.js를 활용한 상권 분석
유동인구 데이터와 타겟층 정보를 바탕으로 분석한 상권 정보를 차트로 나타낸다
푸드트럭 모집 공고 조회
푸드트럭 커뮤니티에 업로드되는 모집 공고를 크롤링하여 조회한다
백그라운드 푸쉬 알림 설정
Firebase와 Service Walker를 통해 특정 상황이 되었을 때 푸쉬 알림을 전송한다
서비스 화면
서비스 메인
일주일 동안의 장사 현황을 확인할 수 있습니다. 또한 실시간 날씨 정보와 장사 추천 구역 정보를 통해 매일 푸드트럭 장사에 대한 정보를 빠르게 제공받을 수 있습니다.
맞춤형 상권 추천
Kakao Map API를 기반으로 서울시 지도에 장사 추천 구역, 푸드트럭 허가 구역, 인구 혼잡도가 표시됩니다. 구별로 제공되어 상세하게 확인할 수 있습니다.
맞춤형 상권 분석
전체 유동인구 및 타겟층 유동인구 데이터를 기반으로 어떤 시간대에 사람이 많이 몰리는지 막대 그래프를 통해 확인할 수 있고, 해당 타겟층이 어떤 음식을 선호하는지 원형 그래프로 나타냅니다.
푸드트럭 장사 관리
장사를 시작한 후, Server Sent Event를 통해 손님의 줄서기 및 취소 정보를 실시간으로 제공받아 관리할 수 있습니다.
푸드트럭 공고 안내
푸드트럭 커뮤니티에서 제공되는 데이터를 크롤링하여 한 눈에 볼 수 있도록 조회하고, 새 공고가 업로드됐을 때 푸쉬 알림이 전송됩니다.
성과 및 배운 점
프로젝트 경진대회 1위
프로젝트 초반에는 팀원들 간의 목표와 방향성이 달라 기획 단계에서 예상보다 많은 시간이 소요되었습니다. 하지만 꾸준한 대화를 통해 서로의 입장을 이해하고 존중하며 합리적인 해결책을 찾아갔고, 이를 계기로 팀워크가 크게 향상되었습니다. 이러한 협업의 결과로 프로젝트의 완성도를 높일 수 있었으며, 최종적으로 프로젝트 경진대회에서 1위를 수상하는 성과를 거두었습니다.
React와 TypeScript에 대한 이해 및 활용
React를 활용해 컴포넌트를 설계하고 제작하면서 컴포넌트 간의 구조적인 관계와 재사용성을 고려하는 방법을 익혔고, 이를 통해 유지보수가 용이한 코드를 작성할 수 있었습니다. 또한, TypeScript를 활용하여 데이터의 타입을 명시적으로 정의함으로써 런타임 오류를 사전에 방지하고 코드의 안정성을 높이는 데 도움을 받았습니다.
다양한 외부 API 응용
카카오맵 API를 활용하여 서울시 구별 폴리곤을 그리는 작업을 진행하며 지도 데이터의 시각화와 최적화를 경험할 수 있었습니다. 이를 통해 사용자들은 구체적인 지역 정보를 바탕으로 자신에게 적합한 상권을 빠르게 추천받을 수 있었습니다. 또한, OpenWeather API를 활용해 실시간 날씨 정보를 제공하여 사용자들이 날씨를 고려한 의사 결정을 할 수 있도록 지원하였으며, 특히 장사에 유용한 데이터를 제공함으로써 사용자 만족도를 높이는 데 기여했습니다.
Tailwind CSS 기반 반응형 웹 구현
사장님 화면은 아이패드 기반, 손님 화면은 모바일 기반으로 반응형 웹 작업을 진행해야 했습니다. Tailwind의 유틸리티 클래스를 사용하여 스타일링을 빠르고 효율적으로 적용할 수 있었고, 각 화면에 맞는 반응형 디자인을 쉽게 구현할 수 있었습니다. 재사용성 높은 클래스를 사용하여 코드의 중복을 최소화하고 유지보수를 용이하게 할 수 있었습니다.