소개
5월 여행 계획을 세우면서 Map 기반 일정 계획 및 관리를 하고 일지까지 저장할 수 있는 웹이 필요하다는 생각이 들어 제작하게 됨
진행 내용
기술 스택 : Google Maps API, Places API, Supabase (Auth + DB + Storage), Vercel
결과물 : https://travel-journal-xi-sandy.vercel.app/
메인 페이지
한국어로 된 웹사이트의 홈페이지
상세 페이지 (Map 기반 일정 관리)
비행기의 위치를 보여주는 지도
상세 페이지 (여행일지 관리)
관람차 사진
겪은 어려움과 해결
Google OAuth 로그인 연동
구현 내용 : supabase Auth 를 통한 Google OAuth 2.0 로그인/ 로그인,로그아웃+세션자동복원 / 프로필 드롭다운 메뉴 (사용자이름,아바타)
어려움 : 카카오톡 인앱 브라우저에서 Google OAuth 팝업/리다이렉트를 차단하여 로그인 불가 -> User Agent 감지로 카카오톡, 인스타그램 인앱 브라우저 판별 시 " 기본 브라우저로 열기" 안내 메시지 표시
Google Maps 지도 연동
구현 내용 : Google Maps JavaScript API 로 인터랙티브 지도 렌더링/ Places Autocomplete 로 장소 검색 및 핀추가/ 3종 핀 시스템 (태그, 일정, 완료) 구성/ 일정 핀 등록시 day 별 동선 라인 생성/ 지도 테마 전환 기능 / Places API 로 사진/별점/웹사이트 자동 조회 말풍선 추가자동 추천
한국의 레스토랑 위치를 보여주는 지도
어려움 :
API Key 보안 문제 : 처음에 프론트엔드에서 API Key가 노출되는 구조 -> Google Cloud Console 에서 HTTP 리퍼러 제한 설정, 개발자 비밀번호 인증 모달로 Key 관리 기능 분리
복잡한 핀 관리 : 태그와 일정이 많아지면서 지도가 복잡해서 보기 어려움 -> 지도 하단에 2단(핀/ DAY) 필터바 구현/ Day필터 클릭시 해당 Day 일정 핀 기준으로 자동 줌 되도록
지도를 보여주는 한국 앱의 스크린샷
Google Place API 자동 추천 기능
구현 내용: 지역명 또는 현재 지도 중심 기반으로 인기 장소 자동 검색(별점수/리뷰수/검색량/웹존재감을 종합한 google 자체 랭킹 반영)/ 7개 카테고리 별로 추천 가능하며 결과에서 체크박스로 원하는 장소만 선택/ 선택한 장소를 태그로 추가 또는 공개 꾸러미로 저장
어려움 : textSearch ($32/1,000회), nearbySearch ($32/1,000회)로 비용 발생 우려 -> 일반 사용자 하루3회 제한(localStorage 기반 일별 카운토)/ 검색 버튼에서 남은 횟수 표시
커뮤니티 공유 기능
구현 내용 : 여행별 공개범위를 설정/ 전체공유으로 설정된 여행은 비로그인 홈화면(커뮤니티) 에서 여행 조회 가능
