PHP 마법 학교 7기 5강: [대단원] 내 위치를 찾아라! ‘GPS와 현재 위치 추적 마법’

안녕하세요! 가족과 함께하는 스마트 라이프입니다. 지난 시간에는 여러 장소를 선으로 잇는 ‘폴리라인 마법’을 배웠죠? 드디어 오늘, 7기 시리즈의 마지막 수업입니다! 바로 스마트폰이나 컴퓨터의 GPS를 이용해 내가 지금 어디에 있는지 지도가 바로 찾아내는 ‘현재 위치(Geolocation) 마법’을 배워보겠습니다.

PHP 마법 학교 7기 5강: [대단원] 내 위치를 찾아라! 'GPS와 현재 위치 추적 마법'

1. Geolocation API란 무엇인가요? ‘디지털 나침반’

우리가 낯선 곳에 갔을 때 가장 먼저 하는 일이 뭘까요? 바로 지도를 켜고 “내가 지금 어디 있지?”를 찾는 거예요. 브라우저에는 Geolocation이라는 똑똑한 나침반이 들어있어서, 사용자의 허락을 받으면 현재의 위도와 경도를 알려준답니다. 이 정보를 구글 맵에 전달하면 지도가 내 위치로 슥 이동하게 되죠.

2. 내 위치로 지도 이동시키기 (코드)

브라우저의 위치 정보를 가져와서 지도 위에 파란 점이나 특별한 마커로 표시하는 코드를 작성해 봅시다.

<!DOCTYPE html>
<html>
<head>
  <style>
    #live-map { height: 500px; width: 100%; border-radius: 15px; }
  </style>
</head>
<body>
  <h2>🧭 나를 찾아봐! 현재 위치 마법</h2>
  <div id="live-map"></div>
  <button onclick="findMe()" style="padding:10px; margin-top:10px;">🪄 내 위치 소환!</button>

  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>

  <script>
    let map, marker;

    function initMap() {
      // 기본 위치는 서울시청으로 설정해요
      map = new google.maps.Map(document.getElementById("live-map"), {
        zoom: 15,
        center: { lat: 37.5665, lng: 126.9780 },
      });
      marker = new google.maps.Marker({ map: map });
    }

    function findMe() {
      // 1. 브라우저가 위치 정보를 줄 수 있는지 확인해요
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition((position) => {
          const pos = {
            lat: position.coords.latitude,
            lng: position.coords.longitude,
          };

          // 2. 지도를 내 위치로 이동시키고 마커를 꽂아요!
          marker.setPosition(pos);
          map.setCenter(pos);
          alert("마법사가 당신을 찾아냈습니다!");
        });
      } else {
        alert("이 브라우저는 위치 마법을 부릴 수 없어요.");
      }
    }

    initMap();
  </script>
</body>
</html>

3. 왜 현재 위치 마법이 중요할까요?

사용자의 위치를 알면 서비스가 훨씬 더 똑똑해져요!
1. 가까운 곳 추천: 사용자님께서 만드시는 ‘군위군 빈집 프로젝트’에서 방문객이 앱을 켰을 때, 현재 위치에서 가장 가까운 빈집 숙소를 우선적으로 보여줄 수 있죠.
2. 길 안내: 오사카 여행 중 복잡한 난바 거리에서 내가 어디를 보고 있는지 실시간으로 확인하며 안전하게 목적지까지 갈 수 있게 도와줍니다.

PHP 마법 학교 7기 5강: [대단원] 내 위치를 찾아라! 'GPS와 현재 위치 추적 마법'

4. 아이들과 함께하는 ‘눈 가리고 아웅’ 위치 놀이

아이의 눈을 가리고 거실 한복판에 서게 한 뒤, 아빠가 “앞으로 세 걸음, 오른쪽으로 두 걸음”이라고 말하며 자신의 위치를 추측하게 해보세요. “우리 눈에는 안 보여도 위성(GPS)은 하늘 위에서 우리를 지켜보고 숫자로 위치를 알려준단다”라고 설명해 주세요. 센서 데이터가 어떻게 실제 세계의 위치로 바뀌는지 이해하는 첫걸음이 됩니다.

마치며: 지도 마법사 졸업을 축하합니다!

7기 ‘지도의 비밀’ 시리즈를 통해 여러분은 장소를 표시하고, 이야기를 담고, 경로를 그리고, 현재 위치까지 찾는 법을 모두 배웠습니다! 이제 여러분의 웹사이트는 전 세계 어디든 연결될 수 있는 지능형 지도를 갖게 되었네요. 저는 잠시 재충전의 시간을 가진 뒤, 8기 시리즈: ‘나만의 자동화 로봇: 뉴스 크롤링과 자동 포스팅’으로 돌아오겠습니다. 모두 수고하셨습니다! ✨

관련 게시물