# Tracking map

## 개요

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

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

![](https://142308677-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZLLTZcl9ZxESOaWj7e0k%2Fuploads%2F94e1JPWPVAAJe7eJnLSg%2F%E1%84%8C%E1%85%A1%E1%84%89%E1%85%A1%E1%86%AB%208.png?alt=media\&token=6a227d86-b763-46ba-a9e2-81ba5613d077)

## 세부 내용

* 기간 : 2022.05.04 - 2022.05.19
* 지도 UI를 이용한 데이터 움직임 표시
* 데이터별 선택버튼의 시각화

## 담당 파트

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

![](https://142308677-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZLLTZcl9ZxESOaWj7e0k%2Fuploads%2F4RE2JHTkOh27UWT19GvX%2Fimage.png?alt=media\&token=88b20606-0812-4b52-b486-2d9186e1c951)

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

![](https://142308677-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZLLTZcl9ZxESOaWj7e0k%2Fuploads%2FCeSzu0QeWaCghsBT6OTU%2Fimage.png?alt=media\&token=f3544373-3840-42b9-81db-31cea9f01ebe)

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

![](https://142308677-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZLLTZcl9ZxESOaWj7e0k%2Fuploads%2FxxL3A4WFgoYE11vpAvYz%2Fimage.png?alt=media\&token=8862a77c-62aa-43d2-8515-8b0ee394dd55)

## 어려웠던 점

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

## 정리

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