✈️Traveler
🗒️ 프로젝트 개요
다양한 여행 플래너 플랫폼을 사용하면서 지원하지 않는 부분과 바라던 점을 차별화하여 국내여행 특정 지역(제주도)지원, 여행에 대한 예산작성, 경유지 경로 최적화, 동행 모집과 같은 기능을 가진 Spring Framework를 이용하여 제주도 여행 플래너 웹 애플리케이션을 제작하였습니다.
🚩 프로젝트 기간 & 팀원
- 2020년 3월 24일 - 2020년 11월 24일 (9개월)
- 맹준영(팀장), 김현홍(팀원), 권형준(팀원), 김호겸(팀원)
⚙️ Traveler 기술 스택
📃 API & Library : TMap, Kakao Login, 국문관광정보, Google Chart, Bootstrap
💬 Language : Java8, JavaScript, JSTL, JSP, JQuery
💾 Database : Oracle, Firebase
🔨 Framework & Server : SpringFramework 5.0.7, ApahceTomcat 8.5v
📷 Traveler ERD
📷 Traveler 기능 구조
✈️ 기능 소개
Pic 1 📷 : 여행지에 대한 조회수, 사용자가 입력한 키워드의 검색, 사용자의 북마크, 이 4가지 방법으로 여행지의 검색 및 마커와 인포윈도우를 이용해 위치 및 정보제공 (Tmap API 및 국문관광정보API 이용)
Pic 2 📷 : 여행지의 위치를 간단한 드래그를 통해 옮겨 경유지 경로 최적화를 통해 이동 거리, 최적 경로 및 경과 시간 제공 (Tmap API 경유지 최적화이용)
Pic 3 & 4 📷 : DevExpress 라이브러리 중 Scheduler를 이용하여 드래그 앤 드롭 방식으로 사용자가 저장한 여행 장소를 날짜 및 시간의 간편한 변경이 가능하며, 더블 클릭을 통해 여행지에 대한 상세정보 추가 및 사용자가 원하는 여행지 추가 커스터마이징 기능 제공 (DevExpress Shceduler Library 사용)
Pic 5 & 6 📷 : 사용자의 여행 일차에 맞는 공개 예산을 총액 기준 최대/최소 금액으로 추천해 예산 작성 참고하도록 지원하였으며 Google Chart Library의 Bar Chart와 Pie Chart를 이용하여 금액별, 카테고리 별 예산 추이를 보여주는 기능 (Google Chart Library 이용)
Pic 7 & 8 📷 : 사용자의 여행 일정을 기반으로 예산을 제공하도록 기본으로 여행 일정이 작성되어 있으며 보다 정확한 예산 작성을 지원하기 위해 API가 제공하는 요금정보를 이용하고 추가 예산 작성이 가능
Pic 9 & 10 📷 : 동행 모집은 사용자의 여행 일정의 여행지로 호스팅이 가능하며 호스팅하기 이전에 같은 여행지를 여행하는 동행 게시글 중 사용자의 여행 날짜, 가까운 시간, 마감이 가까운 순으로 추천해주는 자체 알고리즘을 이용해 게스트로 참가할 수 있는 방향성 제공
Pic 11 & 12 📷 : 동행 호스트 혹은 게스트로 참가했을 때 호스트와 게스트간의 여행 일정 및 여행 정보 공유를 위해 Firebase의 Realtime Database를 이용한 실시간 채팅과 DB를 이용한 쪽지를 구현하여 연락 수단 제공
🔗 Traveler 깃허브 주소
📽️ Traveler 시연 영상
🏅 Traveler 수상 내역
👉🏻 제 12회 창의적 종합설계 경진대회 대상 (Hanshin Univ. 12th Capston Design Competition 1st Prize, 2020.11.30) - 한신대학교 SW역량 강화 센터 주관
📌 Traveler에서의 담당 역할
Traveler 프로젝트에서 Spring Framework를 이용한 백엔드와 프로젝트 전반적인 디자인 설계 담당
- 공공데이터포털의 국문 관광 정보 API의 사용
- XML태그를 JSON형식으로 파싱해 필요한 데이터는 가공하여 Database에 저장하였고 필요할 때마다 Ajax 통신을 통한 데이터의 호출 및 가공
- Tmap API의 경유지 최적화, 통합 POI 검색, Marker, InfoWindow 사용
- Kakao Login API 사용을 통해 소셜 로그인 제공
- Firebase Realtime Database를 이용한 채팅 구현
- 예산 관리 및 여행지 계획 만들기 부분 구현
- 프로젝트 전반적인 DB설계
📝 Traveler 프로젝트 회고
1년간 진행하는 대규모 프로젝트는 처음이기에 기획 회의부터 코드 구현까지 많은 시간이 걸렸습니다. 하지만 다양한 API, 라이브러리의 사용과 새로운 기술스택을 사용함으로써 앞으로의 다른 프로젝트에서 이러한 경험을 기반으로 해당 기술들을 사용할 수 있다는 확신이 생겼습니다. 또한, 개발 초기 계획했던 기능들이 모두 올바르게 작동하고 구현되었다는 점은 큰 수확이라 생각합니다.
반면에, Spring Framework에 대한 전반적인 이해도 없이 시작한 프로젝트이다보니 기능 구현에 초점을 두게 되어 기능 작동은 되지만 클린 코드 작성이 되지 않은 점과 프로젝트 시작 전 코드 컨벤션을 정해 놓지 않은 점이 아쉬웠습니다.
또한, 테스트 코드의 미작성으로 인해 다양항 에러에 대응이 늦어졌으며, 코드 효율성이 떨어짐을 확인할 수 있었습니다.
마지막으로, 버전 관리 도구 사용의 미숙함으로 인해 팀원들과 프로젝트에 대한 전반적인 공유에 어려움을 겪었습니다. 자신의 레포지토리에 Commit은 할 줄 알지만, 상대방의 개발 환경에서 레포지토리를 Clone하고 이슈에 대한 PR과 같은 과정이 없었습니다.
🤔 Traveler 프로젝트를 통해서 앞으로 개선해야할 점을 정리해보겠습니다.
- 코드 컨벤션과 클린 코드를 작성하여 기능 구현 뿐만아니라 코드 가독성을 높여 효율성을 올리는 것.
- 켄트 백의 TDD 프로세스에 대해 이해하고 테스트 코드를 작성하는 습관을 들이는 것
- Git에 대한 전반적인 이해와 프로젝트를 진행하며 발생하는 이슈를 관리하고 PR 해보는 것
- Spring Security를 적용해 보안성을 강화하기
이렇게 4가지의 개선점은 제가 앞으로 프로젝트에 들어가며 숙지해야 하는 필수 사항이라고 생각합니다.
💡 Reference
UI(HTML, CSS, Javascript)
1. https://codepen.io/ChynoDeluxe/pen/bdXeqQ
2. https://codepen.io/FlorinPop17/pen/vPKWjd
3. https://codepen.io/GeorgePark/pen/VXrwOPLibrary & API
1. https://developers.kakao.com/docs/latest/ko/kakaologin/common
2. http://tmapapi.sktelecom.com/main.html#
3. https://developers.google.com/chart/interactive/docs/gallery
4. https://www.data.go.kr/data/15057787/openapi.do
5. https://js.devexpress.com/Documentation/ApiReference/UI_Widgets/dxScheduler/
