My Travel Roulette(내 여행 룰렛)는 SVG 지도를 활용하여 사용자가 원하는 지역을 선택하면 해당 지역의 도시 중 한 곳을 랜덤으로 추천해주는 인터랙티브 웹 서비스입니다. 기존의 단순한 체크박스 방식에서 벗어나 직관적인 지도 UI를 통해 사용자가 흥미롭게 지역을 선택할 수 있도록 구성했습니다.
🌍 배포 링크: https://my-travel-5.onrender.com/
개발 기간: 2024.12.01 ~ 진행중 (1인 단독 개발)
앞으로도 지속적으로 기능을 추가하고 서비스를 발전시켜 나갈 예정이며, 이 문서는 개발 과정에서 겪은 문제점과 해결 방법, 얻은 인사이트를 정리한 기록입니다.
🛠 기술 스택
이 프로젝트는 React.js와 FastAPI를 활용하여 프론트엔드와 백엔드를 구성하고 Render 서비스를 통해 배포하였습니다.
- Frontend: React.js, Axios, SVG
<object>, React Router, CSS3 - Backend: FastAPI, Python 3.10
- 배포: Render (Web Service)
- 도구: GitHub, Postman, VSCode
✅ 구현한 핵심 기능들
🔹 SVG 지도와 인터랙티브 UI
SVG 지도 파일을 <object> 태그로 삽입하여 전국 지도를 표시하고, 각 지역(path)을 클릭하면 선택된 지역의 색상을 변경하여 사용자의 선택을 직관적으로 보여줍니다. 또한 다중 선택이 가능하도록 상태를 관리하여 사용자 편의성을 높였습니다.
🔹 랜덤 셔플 기능 및 애니메이션
사용자가 선택한 지역의 도시 목록에서 랜덤으로 도시를 추천하는 기능을 구현했습니다. 이를 위해 React의 setInterval과 CSS 애니메이션 효과를 활용하여 동적이고 재미있는 셔플 UI를 제공하였습니다.
🔹 FastAPI를 이용한 데이터 관리 및 API 구축
FastAPI를 활용해 지역 데이터를 관리하고, 프론트엔드와의 원활한 데이터 연동을 위해 /regions, /regions/{region}과 같은 API를 구성했습니다. 이 구조 덕분에 데이터를 쉽게 추가하거나 수정할 수 있습니다.
🔹 React와 FastAPI의 통합 및 배포
React 애플리케이션을 빌드하여 FastAPI의 static 폴더에 복사 후 Render를 통해 단일 서버에서 배포했습니다. 이를 통해 배포 및 유지 보수가 간편해졌습니다.
🚩 프로젝트의 폴더 구성
명확한 구조를 통해 관리의 효율성을 높였습니다.
my_travel_app/
├── backend/
│ └── app/
│ ├── main.py
│ ├── routers/
│ ├── data/
│ └── static/
├── frontend/
│ ├── public/
│ ├── src/
│ └── build/🐛 개발 과정에서 만난 문제와 해결 방법
| 단계 | 문제 | 해결 방법 |
|---|---|---|
| 기획/설계 | UI 이벤트 처리의 복잡성 | SVG <object> 활용과 동적 이벤트 바인딩으로 해결 |
| 프론트엔드 구현 | 셔플 상태 전달 오류 | React Router 상태 관리(navigate, useLocation)로 해결 |
| 데이터 설계 | 도시 데이터 구조화 | FastAPI Dictionary 기반 API 설계 |
| API 연동 | Axios API 호출 환경 이슈 | API base URL 자동 설정 (window.location.origin) |
| 정적 리소스 | SVG, JS, CSS 404 오류 | React 빌드 결과물을 static 폴더로 복사하는 스크립트 작성 |
| 배포 과정 | Static 경로 충돌 | FastAPI에서 명확한 mount 경로 설정(/, /static) |
📌 Git 및 파일 관리 팁
- 빌드 결과(
frontend/build)는.gitignore에 추가하되, 배포용 static 폴더 복사본은 Git에서 별도로 관리했습니다. - 배포 자동화 스크립트(
npm run build→xcopy→git add)를 활용하여 배포 과정을 간소화했습니다.
✨ 프로젝트를 통해 배운 점
- React와 FastAPI를 연동하여 정적 파일을 관리하는 방법
- SVG UI의 이벤트 관리와 세부적 인터랙션
- 다양한 배포 환경에서 API 주소 자동 처리 방법
- Render를 활용한 실제 서비스 배포 경험과 문제 해결 능력 향상
🚀 앞으로의 계획과 발전 방향
- 공공데이터 API를 활용하여 추천된 도시의 관광지, 숙소, 맛집 정보 연계
- 프론트엔드와 백엔드의 분리 배포를 통한 확장성 및 유지 보수성 강화
- Google Maps 또는 D3.js를 사용한 더욱 고도화된 지도 인터랙션 구현
- 사용자 로그인 기능과 개인화된 기능(즐겨찾기, 방명록 등) 추가
🌟 총평
My Travel Roulette 프로젝트는 시작은 간단했지만, 개발하면서 다양한 문제를 직접 해결해가며 성장한 소중한 경험이었습니다. 앞으로도 이 프로젝트를 꾸준히 발전시켜 더욱 완성도 높은 서비스를 만들어 갈 예정이며, 그 과정에서 얻은 인사이트를 계속 정리해나갈 것입니다.
