html5
CHAPTER 16 / 33
읽기 약 2분
SYNTAX
위치 정보: Geolocation
핵심 개념
지금 내가 어디에 있는지 위도와 경도를 알려주는 기능이에요. 지도 앱에서 내 위치를 찾을 때 쓰이죠.
코드 분석
<p>내 위치를 확인해보세요:</p>
<button onclick='getLocation()'>위치 정보 가져오기</button>
<div id='result'>대기 중...</div>
<script>
function getLocation() {
const res = document.getElementById('result');
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
(pos) => {
res.innerHTML = '위도: ' + pos.coords.latitude + '<br>경도: ' + pos.coords.longitude;
},
(err) => {
res.innerHTML = '에러: ' + err.message;
}
);
} else {
res.innerHTML = '이 브라우저는 Geolocation을 지원하지 않습니다.';
}
}
</script>AI 프롬프트
🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트
Claude
무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6
이 Geolocation API 코드에서 권한 거부·정확도·타임아웃 처리의 허점을 찾아 프로덕션 수준 에러 핸들링으로 개선해줘.
ChatGPT
무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro
Geolocation API로 배달의민족 스타일 '내 주변 검색' 기능을 바로 쓸 수 있는 완성 코드로 만들어줘.
Gemini
무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro
이 위치 기반 코드 전체를 분석해서 배터리 소모, 정확도, 프라이버시(GDPR), HTTPS 요구사항을 종합 정리해줘.
Grok
무료: Grok 4.1 / SuperGrok $30/mo
2026년 사용자들이 위치 권한을 얼마나 거부하는지, Geolocation API가 여전히 실용적인지 현실적인 데이터로 알려줘.
⭐ 이것만 기억하세요
위치 정보: Geolocation는 이 3가지만 확실히 잡으세요
1.위치 권한 요청 없이 GPS 데이터에 접근하면 브라우저가 차단하고, 사용자 신뢰도 무너집니다
2.navigator.geolocation.getCurrentPosition()은 사용자 동의 후 위도·경도를 콜백으로 전달합니다
3.다음 챕터에서 마우스로 요소를 끌어서 옮기는 Drag & Drop API를 배웁니다
공유하기
진행도 16 / 33