加油站位置指引地图服务
我们开发了让驾驶者在网页浏览器中用地图查找附近加油站的位置指引服务。同一家公司网页地图服务中打造的地图技术,被移植应用到面向真实顾客的加油站品牌服务。这是人人都能访问的服务,地图加载慢或操作反应迟钝,驾驶者就会改用别的方法找加油站。我们负责全国加油站位置显示、查找附近加油站的流程、地图操作以及轻量加载。
在地图上直接找到附近加油站的位置指引
加油站位置指引服务让驾驶者在网页浏览器中通过地图查看全国加油站,并选出附近的一家。我们把全国加油站位置数据放到地图上,并设计了让驾驶者看着地图找到附近加油站的流程。不必阅读地址列表,而是在地图上看着自己周边来选择,这是这项服务的出发点。

拖动、缩放、点选的地图操作
网页地图服务需要几项基本操作:平移、缩放和选择位置。我们把这些操作实现为在浏览器内即时响应。驾驶者拖动地图查看周边,放大细看,再点击加油站位置进行选择。

为首屏快速出现而精简的地图加载
地图服务能否被用起来,取决于首次打开的速度和对操作的响应。我们根据真实用户的访问环境与网络状况,精简了地图的加载量和加油站数据的显示方式。迁移到正式服务时,以稳定性和加载速度为标准重新调校了性能。

一次打造的地图技术,复用到另一项服务
加油站位置指引服务的地图并不是从零开始做的。为同一家公司网页地图服务打造的地图技术,经过调整后应用到了面向顾客的品牌服务。这项工作积累了把通用技术复用到其他领域服务的经验,同一套地图技术后来又延续到新城公交信息地图。

项目亮点
显示全国加油站位置的网页地图
查找附近加油站的流程与地图操作
把此前的网页地图技术复用到正式服务
洞察
GA4 client_storage: 'none'은 정말 쿠키를 막을까?
두 달 전 이 블로그에 「GA4 쿠키 없이 쓰기」라는 글을 썼습니다. clientstorage: 'none' 으로 쿠키 저장을 끄고, 자체 분석이 쓰던 익명 ID 를 clientid 로 넘기면 쿠키 0개로 GA4 를 쓸 수 있다는 내…
GA4 Measurement Protocol: gtag.js 없이 서버에서 이벤트 보내기
랜딩 페이지의 전송량을 파일 단위로 쪼개 보다가, 가장 큰 파일이 우리 코드가 아니라는 것을 알았습니다. Google Analytics 의 gtag.js 였고, 방문 한 번에 176KB 를 받고 있었습니다. 페이지 전체가 1,094K…
중소 제조업 AI 도입 순서: DX를 먼저 끝내야 할까?
공장을 가진 중소·중견 제조기업 16만여 곳 가운데 스마트공장을 도입한 곳은 19.5%입니다. 회사가 작을수록 이 비율은 더 떨어집니다. 중소벤처기업부가 2025년 4월에 낸 제1차 스마트제조혁신 실태조사 결과입니다. 그림: 기업 규…
Next.js loading.tsx와 404: 버튼이 화면보다 먼저 살아나게 하기
관리 화면 왼쪽 위에 사이드바를 접고 펴는 ☰ 버튼이 있습니다. 폭 하나 바꾸는 버튼인데, 대시보드에서 누르면 2초 넘게 아무 반응이 없었습니다. 레이아웃만 바꾸는 일이 왜 이렇게 오래 걸리는지부터 들여다봤습니다. Next.js 16…



