코로나맵 개발자와 함께하는 지도서비스 만들기 2

코로나맵 개발자와 함께, 지도서비스 정복하기 🧭

안녕하세요, 개발자 이동훈입니다.
저는 1400만명이 이용한 코로나맵, 그리고 마스크 맵을 기획/개발하였습니다.

_{약국 마스크 재고를 지도 위에 시각화한 프로젝트 ‘마스크맵’}

_{확진자 동선을 지도 위에 점과 선으로 표시한 프로젝트 ‘코로나맵’}

서비스 운영을 하면서 가장 많이 받았던 질문 중에 하나가
‘코로나맵과 같은 서비스를 만들어보고 싶은데, 어디서 어떻게 시작해야할지 모르겠습니다’ 였습니다.
그래서 강의 제작을 생각하게 되었고 작년, 지도서비스 입문자를 위한 강의를 제공하였습니다.

많은 분들의 응원과 관심 덕분에 첫 강의임에도 불구하고 좋은 피드백을 많이 받았습니다.
강의에 대한 피드백 중, 더 다양한 기능을 배우고 싶다는 의견이 많아 새로운 강의를 계획하게 되었고, 본 강의를 제작하였습니다.

_{인프런 <코로나맵 개발자와 함께하는 지도서비스 만들기> 강의 수강평}

이번 강의에서는 MongoDB, Mongoose, 업로드 기능, 마커클러스터링, 행정구역 시각화 등 좀 더 심화된 내용을 추가하였으며, 코로나맵을 현재까지 운영하면서 얻은 지도서비스 제작 노하우를 담았습니다. 코로나맵에서 사용한 기능들, 최적화 방법 및 라이브러리 활용 방법 등을 최대한 알기 쉽게 강의에 풀어냈습니다.

여러분들의 지도서비스 실력 향상에 많은 도움이 되었으면 좋겠습니다. 
감사합니다:)

왜 지도 서비스일까요?

_{출처: 젠리 공식 홈페이지}

현재 1000만 다운로드 앱 “Zenly(젠리) - 친한 친구끼리”를 아시나요?

소위 Z 세대들이 자주 이용하는 서비스로 지도 위에 친구들의 위치, 배터리, 이동 속도 등을 표시하여 서로 공유하는 서비스입니다. 이를 통해 젠리는 새로운 소통 방식으로 급부상하여 인기를 얻고 있습니다. 오늘날 Z 세대는 자신의 현재 위치와 이동 경로를 남들과 공유하는데 친숙하다고 표현할 수 있겠죠.

_{출처: 젠리 공식 홈페이지}

이는 현재 트렌드로 자리잡아 계속해서 지속되고 있습니다. 
때문에 위치정보와 이동경로를 시각화하는 지도 서비스의 중요성 역시 크게 증가할 것이라 예상합니다.
위치 정보를 시각화 하는데 가장 좋은 UI는 바로 지도이기 때문이죠.

현재는 코로나19 때문에 외부 출입이 자유롭지 않지만, 만약 코로나 19를 극복하는 시기가 온다면 필연적으로 오프라인 활동에 대한 수요 역시 증가할 것이며, 관련 사업 역시 성장할 것이라 생각합니다. 
이러한 오프라인 활동을 도와주는 것이 바로 장소, 좌표를 한눈에 시각화할 수 있는 지도 UI입니다. 

코로나맵 역시 지도 UI를 채택하여 1400만명이 넘는 사용자에게 많은 도움을 주었습니다. 이처럼 지도 서비스는 다양한 서비스와 결합이 가능하고 폭발적인 잠재력을 가지고 있습니다.

남들과 차별화된 자신만의 강점을 키우고 싶은 분들에게 이 강의를 추천드립니다.

무엇을 배우나요?
학습 내용 & 강의 특징

국내 유일!
지도 서비스 제작 강의

_{데이터를 바탕으로 마커를 생성하고
인포윈도우를 띄워주는 기능}

_{카카오 api를 활용한 키워드 검색}

_{MongoDB에 위치 데이터 저장}

_{마커 클러스터링 기능}

_{행정구역 데이터 레이어 기능}

섹션별 소개

Section 0. 강의 소개
프로젝트 및 강의 소개를 통해 앞으로 제작할 지도 서비스에서 배울 수 있는 기능들을 설명합니다.

Section 1. 초기환경 구축
프로젝트 제작에 필요한 초기환경을 설치하고 설정하는 방법을 소개합니다. Node.js 및 VS Code, 개발에 필요한 필수 패키지들을 설치하고 실행해 봅니다.

Section 2. 지도 서비스 프로젝트 구축
Express를 활용하여 서버를 실행하고, 지도서비스를 만들기 위한 준비를 합니다. 네이버 지도 API를 발급받고 해당 프로젝트에 적용시킵니다.

Section 3. 마커 및 인포윈도우 생성
마커를 표시하고 클릭 이벤트를 추가해 인포윈도우를 띄우는 방법을 설명합니다. 여러 개의 마커를 표시해 보고 CSS를 통해 마커 아이콘을 변경해볼 수 있으며, 이벤트를 추가해 사용자의 편의성을 높일 수 있습니다. 또한 인포윈도우를 활용하여 정보를 지도 위에 띄워봅니다.

Section 4. MongoDB와 Mongoose 활용

NoSQL의 대표적인 DB인 MongoDB를 소개하고, 호스팅 해보는 방법에 대해 소개합니다. 또한 Compass라는 DB관리 툴을 설치해보고 실행해봅니다. 또한 Node.js와 MongoDB를 위한 ODM 패키지인 Mongoose를 소개하고 설치해보며, schema(스키마)를 작성해 봅니다. 

Section 5. 업로드 기능 초기환경 구축
카카오 API를 활용하여 키워드 검색 기능을 구현하고, 결과 데이터를 바탕으로 지도위에 표시하는 기능을 추가하여 업로드 기능을 위한 초기 환경을 구축해 봅니다.

Section 6. 업로드 기능 마무리
키워드 검색 결과 데이터를 MongoDB에 저장하고, 이를 지도 위에 표시하는 방법에 대해 알아봅니다. Postman으로 통신을 해보며 업로드 서버를 구축합니다.

Section 7. 마커 클러스터링 기능 구현
지도 서비스 최적화 방안 중 하나인 마커 클러스터링 기능을 소개하고 구현해 봅니다. 지도 서비스에서 보여줘야할 데이터가 많은 경우 클러스터링 기능을 통해 이를 모아서 보여줍니다.

Section 8. 행정구역(도) 데이터 레이어 표시
행정구역별로 구획을 나누어 시각화하는 방법에 대해 소개합니다. 또한 행정구역마다 해당 구역을 클릭했을 때, 마우스가 올라갔을 때, 내려갔을 때에 따른 이벤트를 추가하여 툴팁 및 해당 구역 색상을 변경하는 기능을 구현해봅니다. 

자주 묻는 질문

지도 서비스 제작,
완전 기초부터 시작하고 싶다면?

"웹 기초부터 차근차근,
지도서비스 제작하기" 로드맵 바로가기