언제 어디서나 쉽게 확인하는 서울시 인구밀도 정보

MBTI가 모두 I로 시작하는 아이들이 만드는 우아한 프로젝트

• 저희와 같이 사람이 북적이는 곳에서 놀기 힘든 분들을 위해 여유로운 장소에서 놀 수 있게 도움을 주고 싶었습니다.
• 그러나 서울시에서 이미 도시 데이터 서비스를 통해 서울시 주요 50 장소에 대한 실시간 인구 밀도 정보를 제공하고 있었습니다…
• 다만, 기존의 서비스에는 몇 가지 단점이 있었습니다.

1️⃣ 첫 번째! 기존 서비스는 모바일 환경에서 쾌적하게 이용하기 어려웠습니다.

2️⃣ 두 번째! 기존 서비스에서는 실시간 인구 밀도 이외에도 너무 많은 정보가 있습니다. 그래서 실시간 인구 밀도 정보만 빠르게 파악하기 어려웠습니다.

3️⃣ 세 번째! 기존 사이트의 UI가 이용자 친화적이지 않아 어디에 어떤 기능이 있는지 찾아 이용하기 어렵습니다.

💡 그래서 저희는 기존 서비스의 단점을 보완하고 이용자 편의 기능을 추가하여 언제 어디서든 쉽게 **서울시의 실시간 인구 밀도를 확인할 수 있는 서비스**를 제작하였습니다!!!

• 서울시 실시간 인구 밀도와 관련된 정보만 제공합니다.

• 데스크톱 환경과 모바일 환경에서 모두 이용할 수 있습니다.

• 비로그인 상태에서도 Mildo의 주요 기능들을 이용할 수 있습니다.
• 지도에서 서울시 주요 지역 50곳의 실시간 인구 밀도 정보를 한눈에 파악할 수 있습니다.
• 핀을 클릭하여 해당 지역의 구체적인 인구 정보를 확인할 수 있습니다.

• 혼잡도 필터 기능을 통해 혼잡도 별로 지역을 확인할 수 있습니다.
• 북마크를 사용해 선호하는 지역의 정보만 빠르게 확인할 수 있습니다.
• 검색으로 직접 지도를 움직일 필요 없이 원하는 지역으로 이동할 수 있습니다.

• 서울시 주요 장소 50곳에 대한 인구 밀도 정보를 지도에 마커로 표시합니다.
• 인구 밀도의 정도는 매우 혼잡(빨강), 혼잡(주황), 보통(노랑), 여유(초록) 총 4가지 단계입니다.

• 마커를 클릭하면 상세 정보 모달이 나타납니다.
• 해당 지역의 현재 예상 인구수를 확인할 수 있습니다.

• 상세 정보 모달의 상단을 클릭하면 24시간 이내의 지역별 인구수 정보를 막대 그래프로 확인할 수 있습니다.

• 검색창 옆의 보라색 버튼을 클릭하여 네이버 계정으로 로그인할 수 있습니다.
• 로그인 후 보라색 버튼을 클릭하면 개인정보 창이 나타납니다.

• 로그인된 이용자는 상세 정보 모달 우측 상단에 있는 버튼을 눌러 북마크를 최대 5개까지 추가, 삭제할 수 있습니다.
• 개인 정보 창에서 내가 등록한 북마크를 확인하고 삭제할 수 있습니다.

• 상단의 검색창에서 원하는 장소를 입력하면 해당 장소로 이동합니다.
• 이용자는 해당 장소에 인접한 주요 장소의 인구 밀도 정보를 확인할 수 있습니다.

• Mildo는 서울 실시간 도시데이터 API, 네이버 Maps API 등 다양한 외부 API를 사용합니다.
  • React의 hooks를 사용하면 정보를 가져오고, 렌더링을 하는 일련의 과정을 원할하게 수행할 수 있습니다.
• Mildo는 Modal, Loading, Marker 등의 컴포넌트를 재사용하는 경우가 많습니다.
• Mildo는 데이터 변동 잦아 재렌더링이 많이 발생하는데 상태 관리를 통해 부분 렌더링으로 성능을 개선하였습니다.

• Mildo는 여러 외부 API를 통해 날짜, 장소명, 좌표, 인구수 등의 다양한 타입의 외부 데이터를 사용합니다.
  • 직접 수집하지 않는 외부 데이터이기 때문에 정확한 타입 관리가 이뤄지지 않으면 사용자에게 잘못된 정보를 제공하거나 협업 과정에서 혼선이 생길 것으로 판단했습니다.

• jotai를 사용하여 전역 상태를 관리하고 그래프 렌더링에 필요한 데이터를 캐싱하는데 사용했습니다.

• 서울시 도시 데이터 API는 대략 1시간에 2번 정도 고정된 시간으로 제공됩니다.
  • 그래서 이용자가 접속할 때마다 api 요청을 보내는 것보다 api 서버에서 일정 간격으로 서울시 도시 데이터를 저장하여 성능을 개선했습니다.

• Mildo는 매일 50 곳에 대한 정보를 30분마다 1회씩 총 48회 수집하기 때문에 MongoDB에서 최근 데이터를 가져오면 속도에 문제가 발생했습니다.
  • 그래서 최근 데이터는 Redis에 함께 저장하고 불러와서 데이터 처리 속도를 높였습니다.

• 완성된 프로그램 제작을 목표로 매주 목요일에 배포를 진행하였습니다.
• Github Actions를 사용해 비교적 간편하게 CI/CD를 구현하고 배포에 들이는 시간을 아낄 수 있었습니다.

• Mildo는 사용자 위치 정보가 필요하여 https 설정이 필요한데, nginx를 통해 https를 적용하였습니다.