[제주도스와이프] 스와이프로 만든 나만의 제주도

 배경(Background) - 심각한 지역 간 불균형

제주도는 국내에서 가장 인기있는 여행지이지만, 모든 지역이 동일한 관심을 받고 있지 않습니다. 유명 관광지와 인접해있지 않은 제주도 내의 수 많은 지역들이 여행객들의 선택을 받지 못하고 소외되어 있습니다.
현재 제주도는 심각한 지역 간 불균형과 양극화를 앓고 있으며, 제주도의 핵심 도시인 제주시와 서귀포시조차 행정 구역에 따라 50% 이상이 쇠퇴 지역으로 평가받고 있는 상황입니다.

  문제 정의(Problem) - 비인기 지역에 대한 낮은 관심 및 접근성

이에 밀감 팀은 소외된 비인기 지역에 대한 관심 부족과 낮은 접근성을 문제로 정의했습니다.
사람들이 잘 찾지 않는 지역이 다수 존재함에도, 제주도에 대한 인식은 과거와 비교했을 때 새롭기 보다는 식상하고, 이미 다 알고 있는 관광지라는 평가를 받고 있습니다. 최근에는 고물가 이슈가 더해져 2023년을 기준으로 전년도 동기간 대비 관광객 수가 200만 명 이상 감소했습니다.
반면에, 소외된 지역들은 도시재생활성화 등 정부 지원이 장기간 진행중임에도 이러한 지역 간 양극화는 해소되지 않고 점점 심화되고 있는 상태입니다.

 해결 방안

‘이것저것 다 봐서, 제주도엔 더이상 볼 게 없다’라고 생각하는 관광객에는 숨겨진 관광 스팟들과 맛집 정보를 제공해 새로운 경험을 선사하고, 비인기 지역에는 외부 관광객에게 노출되는 효과를 주어 해당 지역에 대한 접근성을 높이고자 합니다.
이렇게 서로의 니즈를 충족시켜 줄 수 있는 두 집단을 연결해 편익을 제공해 줄 수 있다면 제주도의 지역 별 불균형 문제를 해소하고, 지속 가능한 관광지로서 발전하는 데에 기여할 수 있을 것으로 보았습니다.

 서비스 소개(Solution)

이 문제를 이와 같이 해결했어요!
Onboarding → Home
우선, 추천받고 싶은 장소를 선택해볼까요? 간단하고 직관적인 UX로 13등분된 제주도 지도 중 원하는 부분을 선택하고, 추천받고자 하는 특색을 자연어로 입력하면 끝!
이제 명소를 추천 받아볼까요?
입력 받은 자연어를 AI를 통해 키워드로 추출하여 구축된 명소 DB에서 키워드와 지도 기반하여 데이터를 추출한 후 스와이핑 해서 나만의 여정을 만들어봐요!
Swiping!
Result, Share
만들어진 여정! 공유해볼까요?
좋아요한 명소 기반하여 여정의 제목과 메인캐릭터 규리의 여정에 대한 이야기를 듣고, 알고리즘 기반하여 구성된 명소 탐방 최적 경로를 확인해봐요! 그리고 SNS공유를 통해 친구와 함께 즐길 수 있답니다 :)

 시연 영상

글로 봐서는 잘모르겠죠?! 영상으로 한번 봐요!

 아키텍처

Clinet : Next.js, Server : Spring, Cloud : krampolineIDE, DB: MySQL 을 활용하였고, 단순 OpenAI의 통신뿐만 아니라 LLM Framework LangChain을 활용하여 클라이언트 단에서 로컬 벡터데이터베이스 를 구축 및 프롬프트를 통해서 할루네이션과 정확성에 신경을 썼습니다.

Front-End

NextJS / Javascript - NextJS 는 해커톤의 특성상 빠르게 기능을 구현하기 위해서 파일 라우팅을 지원하는 NextJs로 프로젝트를 시작하였고, 앱라우터같은 경우 아직 기술적 부채가 있었기때문에 페이지 라우팅을 사용해서 구현을 했습니다. - Javascript 로 프로젝트가 크지 않고 단순하기 때문에 타입스크립트의 사용을 보류하고 자바스크립트로 진행해서 생산성을 높였습니다.
Kaka Map SDK - 주제가 스마트 관광이였기도하고, 제일 신뢰성이 높은 카카오 Maps API를 통해서 지도 컴포넌트를 구현하고 그리고 좌표값을 가져와 마커와 직선좌표 거리 표시를 구현했습니다, 가져왔던 데이터를 기반 해당 장소의 위치를 검색 및 리다이렉트를 할 수 있었습니다.
Styled-Compnent - 특정 컴포넌트에 다이나믹이 애니메이션 구현하고, 동적인 애니메이션에는 props를 넘겨 스타일 변경에 용이한 Styled Component를 채택하여 사용하게 되었습니다.
Langchain / hnswlib-node - node에서 벡터스토어를 지원하는 hnswlib-node 를 채택해서 임베딩 후 자체 로컬 벡터스토어를 구축했습니다. - Langchain을 통해서 Retriever한 벡터 데이터를 가져와서 OPENAI 에 주입시켜 컨텍스트를 좁혀서 정확성과 할루네이션을 감소 시킬 수 있었습니다. - 선택된 장소들에 대한 리스트들을 하나의 결과로 만들때, 제목과 설명을 생성형 AI를 통해 도출했고 이때 prompt를 적용해서 원하는 형식의 대답을 나올 수 있도록 튜닝할 수 있었습니다.
@react-spring/web - 카드를 스와이핑 및 뒤집는 애니메이션을 빠르게 구현하기 위해서 애니메이션 라이브러리 중 Framer-motion과 react-srping/web을 고민하다가 좀 더 가볍고 공식문서에서 러닝커브가 낮고 참고해서 바로 적용할 수 있는 예제가 좀 더 많은 react-spring/web을 채택하여 사용하였습니다.

BackEnd

Java17, Spring Boot, JPA, MySQL, Krampoline, Docker
 서비스
•
Java, SpringBoot 프레임워크를 사용했어요
•
해커톤 빠른 진행을 위해 프론트와 주고 받을 데이터 형식을 빠르게 정의 하고 넘어갔어요
•
Layer구분 후 (Domain / Dto / Service / Controller), 각 역할을 철저히 나누어 모듈화 하는데 신경썼어요
 DB
•
깔끔하고 간결한 서비스 특성에 맞게, 데이터 개수를 제한했어요
•
큐레이션 퀄리티를 위해 생성형 AI로 가공한 적절한 키워드 데이터를 저장해요
•
서비스 특성상 다대다 관계로 매핑된 테이블이 많았어요
•
쿼리문은 JPA를 활용해 빠르게 구현했어요
 배포
•
Krampoline 오픈소스 배포도구를 사용할 수 있는 좋은 기회였어요
•
Docker / D2Hub / Kargo를 기반으로 배포 관리를 쉽게 할 수 있어요

팀 소개

 밀어서 감귤해제! 밀감팀을 소개합니다!

 기획

김경수
루즈한 일상에 긴장감을 주는 구름톤… (2박 3일간 5시간 수면…)
능력있는 팀원들/멘토님들과 함께 서비스를 만들면서, 기획자로서 부족한 점과 앞으로의 방향성에 대해 고민해 볼 수 있는 좋은 시간이었습니다 :)
 mail : gelomi90@gmail.com

 디자인

이주성
3박4일이라는 짧은 시간동안 빠르게 디자인을 해본적이 없어서 처음에는 많이 헤맸던것 같아요.
훌륭한 팀원들을 만나 많이 도움을 받았고 해커톤이 끝난 이후 엄청나게 성장했다고 느꼈습니다 밀감팀 쵝오

 프론트엔드

서희찬 [구름톤을 하며, 찾은 나] 3박 4일간 제주도에서의 낭만과 함께 나 자신을 찾을 수 있는 시간을 가졌습니다:) 마음맞는 팀원과 함께 팀을 이뤄 수상이란 목표를 향해 달려가기 보단, 서비스를 구현하고 세상에 내놓기 위해 달려 좋은결과도 얻어 행복했네요 ㅎ 서비스화 되는 저희 스와이핑 제주 많은 기대 바랍니다!
 mail : gmlcks00513@gmail.com
이정민
[지루했던 회사에서의 코딩을 벗어나 연차 4일 던져서 날아온 구름톤 !]
사용해보고 싶었던 기술과 여러 직무의 팀원분들과 몰입하여 코딩을 하면서 잊고 있었던 코딩의 재미를 일깨워줬고, 4일간 단순히 코딩뿐만 아닌 다양한 사람들과 소통하고 경험을 나누면서 낭만도 챙기고 운도 좋게 수상까지 한 1석 500조의 해커톤이였니다.
 mail : clcl6084@gmail.com

 백엔드

최윤수
[제주에서 세계로~ ]
훌륭한 팀원, 멘토님들 덕에 완성한 해커톤작.
주어진 요구사항을 구현하는 회사 일상을 벗어나, 오랜만에 젊은이들의 개발열정을 느낄 수 있어 좋았습니다. 그 분위기에 힘입어 24시간 이상 몰입할 수 있었던 것 같습니다! 제주에서 쌓은 소중한 인연도 오래 갔으면 좋겠어요~ 밀감팀 사랑해