Geolocation API
사용자의 지리적 위치 파악
Geolocation API는 사용자의 동의 하에 현재 기기의 위도와 경도 정보에 접근할 수 있게 해주는 기능입니다.
지도 애플리케이션(Google Maps, Kakao Map), 내 주변 배달 음식점 찾기, 날씨 서비스 등 위치 기반 서비스(LBS)를 구축하는 데 필수적입니다. 개인정보 보호가 매우 중요하므로 반드시 안전한 컨텍스트(HTTPS)에서만 작동하며, 정보 수집 전 사용자에게 권한 허용 팝업을 표시합니다.
지도 애플리케이션(Google Maps, Kakao Map), 내 주변 배달 음식점 찾기, 날씨 서비스 등 위치 기반 서비스(LBS)를 구축하는 데 필수적입니다. 개인정보 보호가 매우 중요하므로 반드시 안전한 컨텍스트(HTTPS)에서만 작동하며, 정보 수집 전 사용자에게 권한 허용 팝업을 표시합니다.
1. "GPS 위성과 브라우저 나침반" (비유)
🔒
보안 열쇠 (Permission)
사용자의 위치는 민감한 정보입니다. 자바스크립트가 브라우저에게 나침반(API)을 빌려달라고 요청하면, 브라우저는 반드시 사용자에게 "허용하시겠습니까?"라는 열쇠를 요구합니다.
🛰️
GPS와 Wi-Fi (측위)
허용을 받으면 스마트폰의 GPS 칩셋이나 PC가 연결된 Wi-Fi, IP 주소를 기반으로 삼각측량을 하여 위도/경도 데이터 세트를 가져옵니다.
2. 권한 요청 및 데이터 흐름 다이어그램
3. 주요 메서드 및 반환 객체
| API 형태 | 역할 및 설명 |
|---|---|
getCurrentPosition(success, error, options) |
현재 시점의 사용자 위치를 단 한 번 가져옵니다. 비동기로 동작하며 성공 시 success 콜백에 Position 객체를 전달합니다. |
watchPosition(success, error, options) |
사용자가 이동할 때마다 위치 변경을 지속적으로 추적하여 콜백을 실행합니다. (예: 내비게이션 앱) |
position.coords (반환 객체 속성) |
성공 콜백으로 반환되는 핵심 데이터입니다. latitude(위도), longitude(경도), accuracy(오차 반경 m) 등의 정보를 포함합니다. |
<div class="geo-app">
<div class="header">
<h2>현재 위치 추적기</h2>
<p>Geolocation API를 사용하여 좌표를 가져옵니다.</p>
</div>
<div class="content">
<button id="getLocationBtn" class="action-btn">
<i class="ph-duotone ph-crosshair"></i> 내 위치 찾기
</button>
<div id="loading" class="loading" style="display: none;">
위치 정보를 요청 중입니다... (권한을 허용해 주세요)
</div>
<div id="resultCard" class="result-card" style="display: none;">
<div class="coordinate">
<span class="label">위도 (Latitude)</span>
<span id="latValue" class="value">--</span>
</div>
<div class="coordinate">
<span class="label">경도 (Longitude)</span>
<span id="lngValue" class="value">--</span>
</div>
<div class="coordinate">
<span class="label">정확도 (Accuracy)</span>
<span id="accValue" class="value">--</span>
</div>
</div>
<div id="errorBox" class="error-box" style="display: none;"></div>
</div>
</div>