OPEN HYPER STEP
← 목록으로 (HTML5)
HTML5 · 16 / 33
html5
CHAPTER 16 / 33
읽기 약 2
SYNTAX

위치 정보: Geolocation


핵심 개념

지금 내가 어디에 있는지 위도와 경도를 알려주는 기능이에요. 지도 앱에서 내 위치를 찾을 때 쓰이죠.

코드 분석
HTML5📋 코드 (20줄)
<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