DUOLABS
포트폴리오

주유소 위치 안내 지도서비스

운전자가 웹 브라우저에서 가까운 주유소를 지도로 찾는 위치 안내 서비스를 개발했습니다. 같은 회사의 웹 지도 서비스에서 만든 지도 기술을 실제 고객이 쓰는 주유소 브랜드 서비스에 옮겨 적용했습니다. 누구나 접속하는 서비스라 지도가 늦게 뜨거나 조작에 굼뜨게 반응하면 운전자는 다른 방법으로 주유소를 찾습니다. 전국 주유소 위치 표시, 가까운 주유소를 찾는 화면 흐름, 지도 조작, 가벼운 로딩을 맡았습니다.

Launch
2008
Client
국내 정유사
Type
지도·공간정보
01 / 04

가까운 주유소를 지도에서 바로 찾는 위치 안내

주유소 위치 안내 서비스는 운전자가 웹 브라우저에서 전국 주유소를 지도로 보고 가까운 곳을 고르게 하는 서비스입니다. 전국 주유소 위치 데이터를 지도 위에 올리고, 운전자가 지도를 보며 가까운 주유소에 다다르는 화면 흐름을 짰습니다. 주소 목록을 읽는 대신 지도에서 자기 주변을 보며 고르게 하는 것이 이 서비스의 출발점이었습니다.

가까운 주유소를 지도에서 바로 찾는 위치 안내
02 / 04

끌고, 확대하고, 눌러 고르는 지도 조작

웹 지도 서비스에는 지도 이동, 확대 · 축소, 위치 선택이라는 기본 조작이 필요합니다. 이 조작들을 브라우저 안에서 바로 반응하도록 구현했습니다. 운전자는 지도를 끌어 주변으로 옮기고, 확대해 가까이 보고, 주유소 위치를 눌러 고릅니다.

끌고, 확대하고, 눌러 고르는 지도 조작
03 / 04

첫 화면이 빨리 뜨게 덜어 낸 지도 로딩

지도 서비스는 처음 열릴 때의 속도와 조작에 대한 반응이 쓰임새를 가릅니다. 실제 사용자가 접속하는 환경과 네트워크 상황에 맞춰, 지도를 불러오는 양과 주유소 데이터를 표시하는 방식을 가볍게 다듬었습니다. 실서비스로 옮기면서 안정성과 로딩 속도를 기준으로 성능을 다시 맞췄습니다.

첫 화면이 빨리 뜨게 덜어 낸 지도 로딩
04 / 04

한 번 만든 지도 기술을 다른 서비스로 옮긴 재사용

주유소 위치 안내 서비스의 지도는 처음부터 새로 만들지 않았습니다. 같은 회사의 웹 지도 서비스를 위해 만든 지도 기술을 실제 고객이 쓰는 브랜드 서비스에 맞춰 옮겨 적용했습니다. 공통 기술을 다른 도메인의 서비스에 다시 쓰는 경험이 이 작업에서 쌓였고, 같은 지도 기술은 이후 신도시 버스정보 지도로 이어졌습니다.

한 번 만든 지도 기술을 다른 서비스로 옮긴 재사용

이 작업의 포인트

01

전국 주유소 위치를 표시하는 웹 지도

02

가까운 주유소를 찾는 화면 흐름과 지도 조작

03

앞선 웹 지도 기술을 실서비스로 옮긴 재사용

인사이트

블로그 전체 보기