구글 맵의 한계를 넘어: 나만의 '중고샵 대동여지도' 서비스 개발기 (feat. Google Sheets & AWS S3)

 

 

여행을 좋아하거나 특정 테마(맛집, 임장, 덕질 투어 등)를 즐기는 분들이라면 공감하실 겁니다. 구글 지도(Google Maps)에 별표(★)가 수백 개씩 쌓이다 보면, 나중엔 "여기가 뭐 하는 곳이었지?", "지금 영업 중인가?", "내가 갔던 곳인가?" 헷갈리기 시작한다는 것을요.

특히 저는 일본의 북오프(Bookoff), 하드오프(Hardoff), 세컨드스트릿(2nd Street) 같은 중고샵(Recycle Shop) 투어를 즐기는데, 수많은 지점을 관리하기엔 기존 지도 앱들의 '즐겨찾기' 기능만으로는 턱없이 부족했습니다.

그래서 만들었습니다. 나만의, 나만을 위한 커스텀 지도 서비스입니다.

 

🚀 왜 직접 만들었나? (The Problem)

1. 필터링의 부재: 구글 맵에서는 "오늘은 '북오프'만 보고 싶어" 혹은 "옷 가게(세컨드스트릿)만 보고 싶어" 같은 브랜드별 필터링이 불가능합니다.
2. 데이터 관리의 어려움: 방문 여부, 메모, 영업시간 등을 엑셀처럼 한눈에 보고 관리하고 싶었습니다.
3. 지저분한 지도: 가고 싶은 곳과 이미 간 곳이 뒤섞여 지도가 너무 지저분해졌습니다.

💡 해결책: 서버리스(Serverless) 나만의 지도 (The Solution)

복잡한 백엔드 서버 구축 없이, **Google Spreadsheets(구글 시트)**를 데이터베이스(DB)로 사용하고, AWS S3로 호스팅 하여 비용은 거의 0원에 수렴하면서 기능은 강력한 웹 앱을 구현했습니다.

---

✨ 주요 기능 (Key Features)

이 서비스는 단순한 지도 뷰어가 아닙니다. 실제 필드(여행지)에서 유용하게 쓸 수 있는 기능들을 꽉 채웠습니다.

1. 구글 시트 연동 (Google Sheets as a CMS)

가장 큰 장점입니다. 데이터를 추가하거나 수정하기 위해 복잡한 관리자 페이지에 접속할 필요가 없습니다. 익숙한 구글 스프레드시트에 주소를 입력하면, 앱이 자동으로 좌표를 따오고 지도에 뿌려줍니다.

2. 강력한 필터링 & 토글 (Smart Filtering)

지도 좌측 사이드바(모바일 친화적 UI)에서 원하는 브랜드만 쏙쏙 골라볼 수 있습니다.

• 📚 북오프만 보기
• 👕 세컨드스트릿만 보기
• 🎸 하드오프만 보기
• 심지어 핀(Pin)만 볼지, 브랜드 로고(Icon)까지 볼지 디테일한 설정도 가능합니다.

3. 방문/숨김 처리 (Visited/Hidden Mode)

"여기는 가봤으니 지도에서 지우자." 핀을 클릭하고 [숨기기] 버튼을 누르면 즉시 지도에서 사라집니다. 다시 보고 싶을 땐 [🚫 숨겨진 장소도 보기] 옵션을 켜면 반투명하게 나타나 관리하기가 매우 편합니다. 이 모든 상태 값은 실시간으로 구글 시트에 TRUE/FALSE로 저장됩니다.

4. 일괄 추가 모드 (Bulk Add)

여행 계획을 짜다 보면 주소 10개를 한 번에 등록하고 싶을 때가 있죠. 텍스트 박스에 주소 목록을 붙여넣기만 하면, 자동으로 위경도를 변환(Geocoding)하여 지도에 촤라락 뿌려줍니다.

---

🛠 기술 스택 (Tech Stack)

이 프로젝트는 **"최소 비용, 최대 효율"**을 목표로 설계되었습니다.

• Frontend: HTML5, CSS3, Vanilla JavaScript
  • 복잡한 프레임워크 없이 가볍고 빠르게 제작했습니다.
• Map API: Google Maps JavaScript API
  • 전 세계 어디서든 가장 정확한 지도 데이터를 제공합니다.
• Database & Backend: Google Apps Script (GAS)
  • 구글 시트를 JSON API처럼 활용할 수 있게 해주는 마법 같은 도구입니다. doGet, doPost를 통해 데이터를 읽고 씁니다.
• Hosting: AWS S3 (Static Website Hosting)
  • 정적 웹 호스팅 기능을 이용해 서버 구축 없이 배포했습니다.
• Deployment:
  • HTTPS 적용을 통해 모바일에서 내 위치(GPS) 기능을 완벽하게 지원합니다.

---

📝 마치며

처음에는 단순히 "내 여행 동선을 편하게 짜보자"라는 생각으로 시작했지만, 기능을 하나둘 붙이다 보니 웬만한 상용 지도 앱 부럽지 않은 서비스가 되었습니다.

특히 일본 여행이나 특정 테마 여행을 계획 중인 분들에게, 데이터를 엑셀로 관리하면서 지도에 시각화하는 이 방법은 정말 강력 추천합니다.

앞으로 여행지에서 찍은 사진을 바로 업로드하는 기능이나, 여행 경로 최적화 기능도 추가해 볼 예정입니다. 나만의 지도를 꿈꾸는 분들이라면 한번 도전해 보세요!

 

#개발로그 #사이드프로젝트 #구글맵API #AWS #S3 #GoogleSheets #나만의지도 #일본여행 #중고샵투어 #WebDevelopment