Tracking map

오프라인 위치 데이터를 지도 상에 표기하는 모바일 웹

개요

로우 데이터로 존재하는 오프라인 위치 데이터를 지도상에 선으로 연결하여 실제 시간에 따른 사용자의 움직임을 표시하기 위한 모바일 웹을 제작하였습니다.

날씨를 추가하면서 사람들이 날씨가 변함에 따라 움직임이 어떻게 달라지는지 확인할 수 있도록 기획하였습니다.

세부 내용

• 기간 : 2022.05.04 - 2022.05.19

• 지도 UI를 이용한 데이터 움직임 표시

• 데이터별 선택버튼의 시각화

담당 파트

초반 개발자와 디자인 기획을 진행할 때, 추가로 시간의 변동에 따라 날씨의 변화도 함께 넣으면 사람들의 이동이 날씨에 따라 어떻게 변하는지에 대해 알 수 있을 것 같아 기획하였습니다.

데이터 번호를 선택함에 있어 좀 더 편하게 클릭 할 수 있도록 checkbox에서 일반 버튼으로 디자인을 변경하였습니다. 이를 통해 사용자들이 좀 더 직관적으로 해당 버튼 색을 누르면 동일한 색의 선이 지도에서 사라진다는 걸 알 수 있고, 단순한 클릭 몇 번으로 원하는 데이터만 화면에서 볼 수 있습니다.

두 번째 기획 회의에서 구간별 멈춤을 통해 원하는 시간대의 움직임만 따로 볼 수 있으며, 해당 번호를 눌렀을 때 약간의 box-shadow와 선택되지 않은 선의 불투명도를 높여 사용자가 선택한 선이 좀 더 잘 보일 수 있도록 디자인했습니다.

어려웠던 점

모바일을 기준으로 작업하다 보니 데스크톱에서 볼 때, 약간의 어색함이 존재하는 것이 아쉬웠습니다. 그리고 지도를 모두 보여줘야 하면서 그 안에 다양한 아이콘을 각각의 위치에 배치하는 것이 어려웠습니다.

정리

이 프로젝트를 하면서 즐거웠던 점은 glass effect라는 디자인을 실제 사이트에 접목해볼 수 있었다는 점입니다. 지속해서 새로운 디자인에 관해 공부하지만 실제로 서비스에 적용할 수 있는 부분이 비교적 적었는데, 이런 SMP를 진행하면서 새로운 것을 배우며 더 발전할 기회가 되어서 좋습니다.