웹 지도 서비스 개발 사례: 주유소 위치 안내 지도

01 / 04

이미지를 밀던 웹 지도 대신, 브라우저 안에서 움직이는 지도

이 웹 지도 서비스는 고객이 전국 주유소 위치와 주변 시설을 브라우저에서 찾아보게 하는 서비스입니다. 당시 웹 지도는 이미지를 옆으로 밀어 옮기는 방식이 대부분이었습니다. 이 서비스는 지도를 끌어 옮기고 확대 · 축소하는 조작을 브라우저 안에서 바로 받는 쪽을 택했습니다. 지도 라이브러리와 원본 지도 데이터를 묶어 이 지도를 구현하는 개발에 참여했습니다.

02 / 04

지도 그림과 원본 데이터가 어긋나지 않는 정합

웹 지도는 잘게 나눈 지도 그림(타일)을 이어 붙여 보여 주고, 그 위에 원본 지도 데이터의 위치를 올립니다. 둘의 좌표가 조금만 어긋나도 주유소 표시가 엉뚱한 자리에 찍힙니다. 타일과 원본 지도 데이터를 화면 좌표에 맞게 옮기고, 서비스 화면에서 어긋나 보이는 곳을 찾아 지도 이미지를 고치는 일을 맡았습니다.

03 / 04

느린 인터넷에서도 지도가 열리게 줄인 전송량

웹 지도는 화면을 채울 지도 데이터를 매번 받아야 하는데, 그때의 인터넷은 그 양을 받는 데도 시간이 걸렸습니다. 지도 데이터의 전송량을 줄이고 표시 방식을 다듬어, 느린 회선에서도 지도가 열리게 했습니다. 서버와 주고받는 데이터도 태그로 감싸는 무거운 형식에서 더 짧게 적는 형식으로 바꿔 통신량을 덜었습니다.

04 / 04

끌고 확대할 때 위치를 놓치지 않는 화면 전환

지도를 끌어 옮기거나 확대 · 축소할 때 화면이 뚝 끊겨 바뀌면, 사용자는 지금 어디를 보고 있는지 놓칩니다. 이동과 확대 · 축소 사이에 자연스러운 전환 효과를 넣어, 축척이 바뀌는 동안에도 위치를 따라갈 수 있게 했습니다. 이 서비스에서 만든 지도 기술은 이후 주유소 위치 안내 서비스, 신도시 버스정보 지도, 해외 서비스로 옮겨 쓰였습니다.

웹 지도 서비스 구축

이미지를 밀던 웹 지도 대신, 브라우저 안에서 움직이는 지도

지도 그림과 원본 데이터가 어긋나지 않는 정합

느린 인터넷에서도 지도가 열리게 줄인 전송량

끌고 확대할 때 위치를 놓치지 않는 화면 전환

이 작업의 포인트

인사이트

GA4 client_storage: 'none'은 정말 쿠키를 막을까?

GA4 Measurement Protocol: gtag.js 없이 서버에서 이벤트 보내기

중소 제조업 AI 도입 순서: DX를 먼저 끝내야 할까?

Next.js loading.tsx와 404: 버튼이 화면보다 먼저 살아나게 하기