Computer >> 컴퓨터 >  >> 프로그래밍 >> HTML

모바일 사파리에서 HTML 위치 공유 알림 표시 시점을 결정하는 방법

모바일 사파리의 위치 공유 프롬프트 동작 방식

웹 애플리케이션을 개발하다 보면 사용자가 특정 지역에 있을 때만 최신 위치를 추적해야 하는 요구사항이 생기곤 합니다. 이런 경우에는 일반적인 위치 추적 로직과 별도로, 언제 사용자에게 위치 공유를 요청할지 판단하는 전용 코드를 작성해야 합니다.

HTML Geolocation API를 활용해 위치 공유 프롬프트를 표시할 시점을 결정하는 기본적인 코드 구조는 다음과 같습니다.

if (frstTime) { // 첫 방문인 경우
    navigator.getCurrentPosition(function (coordinates) {
        if (coordsAreInTheBox) { // 좌표가 특정 영역 내에 있는지 확인
            storeCoordsForUser(); // 사용자 좌표 저장
            navigator.watchPosition(); // 위치 실시간 감시 시작
        }
    });
}

else if (userInlocat) { // 사용자가 해당 위치에 있는 경우
    navigator.watchPosition();
}

코드 동작 원리

이 코드는 페이지가 처음 로드될 때 의도한 대로 정상적으로 작동합니다. 동작 흐름은 다음과 같습니다.

1. 첫 방문 여부 확인
먼저 사용자가 처음 방문했는지(frstTime) 검사합니다. 첫 방문이라면 navigator.getCurrentPosition()을 호출하여 현재 위치 좌표를 가져옵니다.

2. 영역 내 좌표 판별
가져온 좌표가 미리 정의된 영역(박스) 안에 포함되어 있는지(coordsAreInTheBox) 확인합니다. 영역 안에 있다면 사용자의 좌표를 저장하고, navigator.watchPosition()으로 위치 변화를 실시간으로 감시하기 시작합니다.

3. 재방문 시 처리
첫 방문이 아니라면, 이미 저장된 정보를 바탕으로 사용자가 해당 위치에 있는지(userInlocat)를 판단합니다. 위치에 있다면 곧바로 watchPosition()을 호출하여 위치 추적을 이어갑니다.

참고 사항

모바일 사파리는 배터리 절약과 개인정보 보호를 위해 위치 권한 요청 시점을 신중하게 관리합니다. 따라서 위와 같이 필요한 순간에만 위치 공유를 요청하는 조건부 로직을 사용하면, 불필요한 권한 팝업을 줄이면서도 사용자 경험을 크게 개선할 수 있습니다. 또한 HTTPS 환경에서만 Geolocation API가 동작한다는 점도 반드시 유의해야 합니다.