🗺️ RoutePlanner: 지능형 경로 최적화 및 시각화 도구

RoutePlanner - 나만의 경로를 똑똑하게

클릭 한 번으로 원하는 장소를 검색하고, 나만의 최적 방문 경로를 그려보세요. 거리를 계산하고 시각화할 수 있습니다.

RoutePlanner

🗺️ 프로젝트 명: RoutePlanner (스마트 경로 생성기)

1. 한 줄 요약

"복잡한 일정을 한눈에 시각화하고, 최적의 동선을 찾아주는 지능형 경로 관리 도구"

2. 어떨 때 사용하나요? (Use Cases)

• 여행 계획: 여러 관광 명소를 방문할 때 이동 순서를 효율적으로 정하고 싶을 때.
• 외근 및 배송: 하루에 방문해야 할 여러 업체나 배송지들을 최적의 동선으로 연결하고 싶을 때.
• 부동산 임장 및 지역 조사: 특정 지역의 여러 지점을 차례로 방문하며 현장을 확인해야 할 때.
• 공유용 지도: 내가 계획한 경로를 친구나 동료에게 URL 하나로 간단히 공유하고 싶을 때.

3. 주요 특징 및 강점 (Key Strengths)

• 스마트 동선 최적화: 단순히 장소를 나열하는 것이 아니라, 마법사 버튼(🪄) 클릭 한 번으로 가장 효율적인 이동 경로를 자동으로 계산해 줍니다.
• 직관적인 드래그 앤 드롭: 리스트 순서를 자유롭게 바꿔가며 실시간으로 지도 위의 경로가 업데이트되는 것을 확인할 수 있습니다.
• 강력한 공유 기능: 생성한 경로 데이터를 URL 파라미터로 압축하여 전달하기 때문에, 별도의 회원가입 없이도 누구나 내가 만든 지도를 볼 수 있습니다.
• 전문적인 캡처 도구: 지도 화면을 고해상도 이미지로 즉시 저장하여 보고서나 개인 일정표에 활용하기 좋습니다.
• 반응형 UI/UX: PC뿐만 아니라 모바일에서도 편리하게 사용할 수 있도록 하단 시트 방식의 레이아웃을 제공합니다.
• 대쉬보드 지원: 관리자 모드에서는 실시간 접속 통계와 활동 로그를 차트로 확인할 수 있어 서비스 운영 현황을 한눈에 파악할 수 있습니다.

4. 사용된 기술 스택 (Tech Stack)

Backend

• Python / Flask: 가볍고 빠른 웹 서버 구축.
• SQLite: 접속 이력 및 로그 저장을 위한 가벼운 데이터베이스.
• Geopy (Nominatim): 지명 및 주소를 위경도 좌표로 변환(Geocoding)하는 오픈 소스 API 활용.
• Werkzeug (ProxyFix): Nginx와 같은 프록시 환경에서도 정확한 사용자 IP를 추적하기 위한 미들웨어.

Frontend

• Leaflet.js: 인터랙티브한 지도 렌더링을 위한 가벼운 오픈소스 라이브러리.
• Vanilla JS: 외부 프레임워크 의존성을 줄이고 빠른 성능을 위해 순수 자바스크립트로 로직 구현.
• Sortable.js: 경로 리스트의 매끄러운 드래그 앤 드롭 구현.
• html2canvas: 브라우저 화면상의 지도를 이미지로 변환.
• Chart.js: 대쉬보드 내 통계 데이터 시각화.
• CSS (Pretendard Font): 현대적이고 가독성이 뛰어난 프리텐다드 서체와 다크 모드 지원.

DevOps

• Docker / Docker Compose: 어디서나 동일한 환경으로 실행 가능하도록 컨테이너화.
• Environment Variables (.env): 보안 설정 및 시크릿 키 관리.

🔍 검색 엔진 고도화

• Google Maps API 전면 도입 (2026.04.04)
  • 기존 Nominatim 엔진을 대체하여 한국어 주소 검색 및 좌표 변환 정확도 대폭 향상.
  • 역지오코딩(좌표→주소) 및 지오코딩(주소→좌표) 기능 안정화.

📊 시스템 관리 및 보안

• NPM 기반 인증 체계 구축 (2026.03.21)
  • Nginx Proxy Manager의 Access List를 활용한 외부 보안 강화.
  • 내부 로그인 시스템을 제거하고 서버 단 보안으로 통합.
• 접속 로그 관리 시스템 강화 (2026.03.22)
  • 로그 조회 UI 개선 및 IP 주소 표시 기능 추가.
  • 데이터베이스 로그 초기화 기능 구현.

⌨️ 사용자 편의성 및 버그 수정

• UI 조작 편의성 향상 (2026.03.21)
  • ESC 키를 이용한 모달 창(접속 기록, 단축키 창 등) 닫기 기능 추가.
• 구조적 결함 수정 (2026.03.21)
  • index.html의 HTML 시맨틱 구조 및 렌더링 오류 해결.