사이 · 거리 측정 웹앱
출발지와 도착지를 Nominatim에서 검색해 실제 장소를 선택하고, OSRM 자동차 경로의 총거리를 확인하는 한국어 웹앱입니다. 결과 아래 지도에서 보기를 누르면 해당 출발지와 도착지가 설정된 OpenStreetMap 길찾기가 새 탭으로 열립니다.
Vercel 배포
- 이 폴더의 파일을 GitHub 저장소 최상위에 올립니다.
- Vercel에서 Add New → Project를 누르고 해당 GitHub 저장소를 Import합니다.
- Framework Preset은 Other, Root Directory는 저장소 최상위로 설정합니다.
- Build Command는 비워두고 Output Directory는
.으로 설정합니다. vercel.json에도 설정되어 있습니다.
- 환경변수를 추가하지 않고 Deploy를 누릅니다.
Node.js, npm 패키지 설치, 빌드, Redis, 데이터베이스, API 키, 환경변수가 필요 없는 정적 HTML/CSS/JavaScript 구성입니다. 사용자 검색어와 좌표는 브라우저에서 외부 지도 서비스로 전송됩니다. 인터넷 연결이 필요합니다.
사용 방법
- 출발지에
서울역처럼 장소명 또는 주소를 입력하고 검색을 누릅니다.
- 검색된 실제 장소 중 하나를 선택합니다. 도착지도 같은 방법으로 선택합니다.
- 거리 확인하기를 누르면 자동차 도로 거리와 참고용 직선거리가 나옵니다.
- 지도에서 보기로 경로를 확인합니다.
검색어를 편집하면 이전 선택과 거리 결과는 해제됩니다. 검색어만 입력한 상태에서는 거리 계산을 할 수 없습니다. 장소 검색 결과가 없다면 도시명이나 상세 주소를 추가하세요. OSM 데이터에 등록되지 않은 장소는 검색되지 않을 수 있습니다.
API 및 운영 범위
- 장소 검색: Nominatim Search API. 공용 서버 정책에 따라 자동완성을 사용하지 않고 검색 제출 시에만 요청합니다. 검색 결과는 브라우저에 24시간 캐시하고 저장소 접근이 불가능하면 메모리 캐시를 사용합니다. 이 페이지 안의 검색은 순차 처리하며 요청 사이에 최소 1.1초를 둡니다. 브라우저가 보내는 Referer로 출처를 전달하므로 사이트의 Referrer-Policy를
no-referrer로 변경하지 마세요.
- 공용 Nominatim의 초당 1회 제한은 사용자별이 아니라 앱 전체에 적용됩니다. 정적 앱과 브라우저 캐시만으로 여러 사용자·탭·기기에 걸친 전역 제한을 보장할 수 없습니다. 따라서 이 구성은 개인 테스트와 소규모 시범 사용을 위한 것입니다. 공개 서비스에서 동시 사용자가 늘어나면 정책을 준수하는 별도 제공자 또는 자체 호스팅 Nominatim으로 교체하거나, 중앙 요청 제한을 도입해야 합니다. 공식 사용 정책을 확인하세요. 엔드포인트는
app.js 상단에서 바꿀 수 있습니다.
- 도로 거리: OSRM Route API의 공개 데모 서버입니다. 서비스 가용성을 보장하지 않습니다. API 실패, 연결 단절, 경로 부재 시 도로 거리로 오인하지 않도록 직선거리라고 명시해 표시합니다. 선택한 지점에서 2km 이상 떨어진 도로로 연결된 경로도 직선거리로 안내합니다.
- 직선거리: 지구 평균 반지름 6,371,008.8m의 Haversine 공식으로 계산합니다. 도보 거리나 자동차 이동 거리와 다릅니다.
- 지도 데이터: © OpenStreetMap 기여자. 지도 타일을 직접 내려받지 않으며, 결과 링크로 OpenStreetMap을 엽니다.
로컬 실행 및 확인
Python이 있다면 저장소 폴더에서 python -m http.server 8000 실행 후 http://localhost:8000을 엽니다. 또는 VS Code Live Server 등 정적 HTTP 서버를 사용하세요. file://로 직접 여는 대신 HTTP로 접속해야 Referer와 브라우저 모듈 로딩이 정상 동작합니다.
확인 항목: 두 장소 검색·선택, 출발/도착 교환, 선택 후 입력 수정 시 결과 해제, 검색 결과 없음, 외부 API 실패 시 오류 안내, 거리 조회 실패 시 직선거리 표시, 동일 장소 0km, 지도 링크의 두 좌표, 모바일 화면 및 키보드 조작.
