geolocation
걸으며 위치 기록하기
해결하는 문제
현장을 돌며 이동 경로와 거리를 기록하고 싶다.
GPS 위치를 계속 받아 이동 거리와 속도, 지나온 길을 기록하고 나침반 방향을 보여 줍니다.
서버 의존도
외부 라이브러리나 AI 모델을 CDN에서 받아 옵니다. 서버는 필요 없고, 오프라인용은 ./libs/에 넣어 둡니다.
브라우저만브라우저 + CDN브라우저 + API 키브라우저 + 엣지 함수서버 필요
데이터가 흐르는 길
무엇이 들어와서 브라우저 안에서 어떻게 바뀌어 나가는지 정리했습니다.
들어오는 것위도·경도·정확도·방향
브라우저가 하는 일두 지점 사이 거리 공식(하버사인)으로 이동 거리, 시간으로 속도
나오는 것지도, 경로 선, 방향 화살표
쓰는 브라우저 기술
Geolocation watchPositionDeviceOrientationEvent (나침반)
라이브러리와 모델
OpenStreetMap 지도 임베드
바꿀 수 있는 옵션
- enableHighAccuracy: 정밀 위치
- maximumAge·timeout
- 정확도가 나쁜 값 버리기 (50m 이상)
자주 막히는 곳
- 실내에서는 위치 오차가 수십 미터로 커진다
- 화면이 꺼지면 위치 기록이 멈춘다
이 능력으로 만들 수 있는 서비스
같은 기술을 AI 서비스, 웹 서비스, 피지컬 AI로 넓힌 예시입니다.
AI 서비스
- 이동 기록 요약 일지
- 순찰 경로 최적화
웹 서비스
- 안전 점검 순찰 기록
- 걷기 챌린지
피지컬 AI
- 드론·로봇 귀환 지점 기록
- 위치에 따라 켜지는 조명
넓히는 방법
- 경로를 GPX 파일로 저장
- 특정 장소에 들어가면 알림 (지오펜스)
- Leaflet으로 직접 지도 그리기
지원 브라우저
PC 크롬·엣지된다
맥 사파리된다
안드로이드 크롬된다
아이폰 사파리된다
코딩 에이전트에게 줄 프롬프트
복사해서 Claude, Codex, Cursor 같은 코딩 에이전트에 그대로 붙여 넣습니다.
휴대폰 GPS로 걸은 경로와 거리, 속도를 기록하고 지도와 나침반을 함께 보여주는 웹페이지를 만들어줘.
같은 분류의 능력
11 기기·센서에 속한 다른 능력입니다.
무료로 보는 것
체험 페이지, 한 줄 설명, 미리보기 영상
스킬팩 구성
full.html, skill.md, prompt.md, rules.md, customize.md, troubleshooting.md, 예시 데이터, agent-instructions.md