문제 상황
우리 서비스는 Geolocation의 getCurrentPosition API를 사용해 지도페이지 초기 접속 시 내 위치에서 시작되게 한다. 하지만 새로고침을 하거나 초기 접속 시 위치 찾는 데 5초 이상 걸리고, 어떨 때는 86687.30ms까지 걸렸다!
현재 내 위치 설정 코드(Geolocation API 사용)
useEffect(() => {
if (!isInitialLoad || !isMapReady) return;
const getUserLocation = async () => {
try {
const position: GeolocationPosition = await new Promise((resolve, reject) => {
navigator.geolocation.getCurrentPosition(resolve, reject, GEOLOCATION_CONFIG);
});
const userLoc = {
lat: position.coords.latitude,
lng: position.coords.longitude,
};
setUserLocation(userLoc);
if (mapRef.current) {
mapRef.current.setCenter(new kakao.maps.LatLng(userLoc.lat, userLoc.lng));
setCenter(userLoc);
updateMapBounds();
}
setIsLoading(false);
setIsInitialLoad(false);
} catch (error) {
console.error('Geolocation error:', error);
updateMapBounds();
setIsLoading(false);
setIsInitialLoad(false);
if (error instanceof GeolocationPositionError) {
if (error.code === error.PERMISSION_DENIED) {
alert('위치 권한이 차단되었습니다. 위치를 수동으로 설정하세요.');
} else if (error.code === error.POSITION_UNAVAILABLE) {
alert('위치 정보를 가져올 수 없습니다.');
} else if (error.code === error.TIMEOUT) {
alert('위치 정보 요청이 시간 초과되었습니다. 다시 시도해주세요.');
}
}
}
};
getUserLocation();
}, [isInitialLoad, isMapReady]);특정 위치로 이동하자마자 그 위치에서 값을 얻고(center, bounds), 그 값을 이용해 API 호출 후 응답을 보여주는 것이 초기 세팅이다. 위치 정보가 완전히 준비된 후 API 호출을 하는 과정도 험난했지만, 이는 다음 포스팅에서 다뤄야겠다.
문제 발생 원인
getCurrentPosition은 원래 느린 API
다들 Geolocation API로 내 위치 찾는 것이 느려서 해결 방법을 찾고 있었다.
구글링, GPT, 카카오 데브톡에서도 비슷한 글을 찾을 수 있었다.
성능 문제일까?
지도페이지에 너무 많은 컴포넌트와 비동기 작업이 일어나기 때문일 수도 있다. 실제로 한 달 전 80번대 브랜치에서는 매우 빠르게 동작했다. setMap으로 맵 객체를 관리하고, 여러 기능이 빠져 있었지만...
하지만 이 모든 의문을 벨로그 글을 보고 결국 Geolocation API 자체의 속도가 느리다는 결론을 얻었다.
대기업의 지도는 왜 이렇게 빠를까?
나는 잘 모르지만 GPT가 말하길, 내부적으로 최적화된 캐시 시스템을 사용하고 있다고 한다.
결론
우리 서비스에서는 getCurrentPosition으로 위치를 빠르게 찾기는 어렵다!
해결
로딩 UI로 UX 개선 ✅
위치 정보를 가져오는 동안 로딩 화면을 보여주며 (timeout 5초) 성공하면 내 위치에서 시작하고, 실패하면 기본 위치인 서울 중앙에서 시작하는 방법을 선택했다.
결국 사용자의 위치를 찾지 못하면 5초간 로딩 화면을 봐야하니 완벽한 해결책은 아니지만, 최선의 방법인 것 같다.
기존에는 로딩 UI 없이 서울에서 시작하고 내 위치를 찾은 후 이동하는 방식이었다. 그러나 위치 찾는 속도가 느리다 보니 서울에서 작업하다가 뒤늦게 내 위치로 이동하는 현상이 발생했다.
저 로딩이 사용자 경험을 개선하는지에 대해서는 여전히 의문이다. 개인적으로는 로딩 UI가 매우 답답하다고 느끼기 때문이다.
사용자 위치를 캐싱
이러한 방법도 잠깐 논의되었지만 매우 음침하다. 법적 문제를 야기할 수 있어 실제로 도입하기는 어려울 것 같다.
데이터 사용
와이파이는 약 50초, 데이터는 바로 잡혔다. 다른 팀원은 와이파이에서도 빠르게 잡힌다고 했는데, 사람마다 속도가 달라서 정말 운에 맡겨야 하는 수준이다...
서비스의 성능 문제라면 어떻게든 최적화할 방법을 찾겠지만, API 자체의 문제라 해결책이 많지 않았다. 지도 로직에서 며칠을 밤샌 것 같은데 더 좋은 방법이 없을까요. . .?
여전히 공부 중입니다 🥹
