TRAVELOGUE - 여행을 시작하는 순간의 설렘

FOCUS 된 시선 위에서 흐르고, 분위기로 기억되는 여행지도

안녕하세요! 2년 주기로 나타나는 Gugo-le 인사드립니다. 🫡

제가 생각하는 여행의 설렘은 출발 직전이 제일 설레더라고요! 터미널의 공기, 게이트 앞에서의 기다림. TRAVELOGUE는 그 순간을 한 페이지를 넘기듯 기록하고, 여행이 끝난 뒤에 다시 꺼내볼 수 있도록 만든 서비스입니다.

사진은 영원한 찰나라고 하죠, 소중한 사진을 보면 그 순간 장면이 추억이라는 말을 걸어옵니다.

하지만 사진 속에 담겼던 온도는 생각보다 빨리 주변 온도와 비슷해지더라구요😅
TRAVELOGUE는 사진의 추억보다 먼저 사라지는 그 온도를 붙잡기 위해서 만든 서비스입니다.

여행의 기억을 "정보"가 아니라 "분위기"로 다시 불러오기 위해.

처음 페이지입니다. 비행기 창문을 연상시키는 아이콘을 직접 디자인했습니다! (너무 어려웠어요. 최대한 느낌을 살려보고 싶었는데 약간 아쉽네요) NEW TRAVELER를 누르면

Firebase Authentication을 활용한 로그인 페이지가 나옵니다.

홈화면입니다. 자신이 여행을 한, 여행을 하고 싶은 나라에 마우스를 둡니다. 만약 일본을 골랐다면 하단 Flip-Board가 차라락 바뀌는 효과를 내며 국가 명을 표시해줍니다.(세계지도는 D3.js와 canvas 2D API로 처리하였습니다.)

국가를 선택하면 확대 에니메이션과 함께 보딩패스가 같이 올라옵니다. 그리고 IATA 코드를 누르면 FROM 공항과 TO 공항을 고를 수 있게 됩니다. 보딩 패스를 누르면 도장이 찍히고 탑승권만 잘리는 에니메이션을 구현하였습니다. (전 세계 국제 공항 다 넣었습니다. 확실히 gpt가 검색해주고 csv 파일로 정리해서 주는데 너무 편하더라구요)

Flip-Board엔 FROM 공항 TO 공항이 나오고 Flip-Board를 누르면 걸리는 시간과 총 거리가 표시됩니다. 총 거리는 Haversine Distance Formula를 사용했습니다.

그리고 저 비행 Polyline을 구현하는 것이 굉장히 힘들었는데요.

특히 이 부분을 개발하고 캐나다나 미국 북부 쪽으로 가면 북한 영공을 지나는 문제점이 있더라구요. 북한 영공을 noFlyZone으로 설정하고 Cubic Hermite Spline Interpolation을 활용하여 비행 경로를 부드럽게 보간해서 태평양을 지나가게 하였습니다. 이 부분이 제일 힘들었어요 ㅋㅋㅋ

그리고 비행기가 착륙하면 지금까지의 여정이 나옵니다.

여정이 나오면서 비행기가 착륙할 때 나오는 승무원 안내멘트가 나와서 시각과 청각을 자극해서 내가 여행을 하는 듯한 느낌을 받게 만들었습니다.

화면 우측 하단을 보면 여권이 있는데 이 여권을 누르면 여권 도장이 찍혀있습니다.

물론 Firebase를 사용하는 만큼 친구 추가와 검색 기능도 넣었는데요.

저는 일반적인 sns와는 다른 방식을 채택하였습니다. 물론 아이디 검색 기능도 넣었지만 TRAVELOGUE는 FROM 공항과 TO 공항을 입력해서 같은 여정이 있는 사람들이 친구 추가 리스트로 표시됩니다. 친구 추가를 하면 실시간으로 여행 위치(여행하는 국가에서부터)가 공유됩니다! (그래서 실제 여행을 가서 만날 수도 있습니다)

아직 미완성이지만 제가 사관학교 훈련을 가야해서 개발을 그만두게 되었습니다. 하하

하지만 이 프로젝트를 여기서 끝낼 생각은 없습니다. 언젠가는 다시 돌아와, 여행을 준비하는 순간부터 여행 중의 설렘, 그리고 돌아온 뒤의 여운까지 담아낼 수 있는 서비스로 완성하고 싶습니다.

노마드코더를 처음 본 나이가 15살이었는데 지금은 21살이 되었습니다.....

그 시간 동안 단순히 개발 지식을 배운 것이 아니라, 이 분야의 흐름을 바라보는 눈과 스스로 무언가를 만들어낼 수 있다는 자신감을 얻게 되었습니다. 아직 부족한 점도 많고 갈 길도 멀지만, 적어도 “시도해볼 수 있는 사람”이 되었다는 점에서 노마드코더님께 감사인사 전하고 싶습니다.

읽어주셔서 감사합니다!

더 자세한 정보는 리드 미를 봐주세요!!https://github.com/Gugo-le/TRAVELOGUE