이번 강의에서는 MongoDB, Mongoose, 업로드 기능, 마커클러스터링, 행정구역 시각화 등 좀 더 심화된 내용을 추가하였으며, 코로나맵을 현재까지 운영하면서 얻은 지도서비스 제작 노하우를 담았습니다. 코로나맵에서 사용한 기능들, 최적화 방법 및 라이브러리 활용 방법 등을 최대한 알기 쉽게 강의에 풀어냈습니다.
여러분들의 지도서비스 실력 향상에 많은 도움이 되었으면 좋겠습니다. 감사합니다:)
왜 지도 서비스일까요?
출처: 젠리 공식 홈페이지
현재 1000만 다운로드 앱 “Zenly(젠리) - 친한 친구끼리”를 아시나요?
소위 Z 세대들이 자주 이용하는 서비스로 지도 위에 친구들의 위치, 배터리, 이동 속도 등을 표시하여 서로 공유하는 서비스입니다. 이를 통해 젠리는 새로운 소통 방식으로 급부상하여 인기를 얻고 있습니다. 오늘날 Z 세대는 자신의 현재 위치와 이동 경로를 남들과 공유하는데 친숙하다고 표현할 수 있겠죠.
출처: 젠리 공식 홈페이지
이는 현재 트렌드로 자리잡아 계속해서 지속되고 있습니다. 때문에 위치정보와 이동경로를 시각화하는 지도 서비스의 중요성 역시 크게 증가할 것이라 예상합니다. 위치 정보를 시각화 하는데 가장 좋은 UI는 바로 지도이기 때문이죠.
현재는 코로나19 때문에 외부 출입이 자유롭지 않지만, 만약 코로나 19를 극복하는 시기가 온다면 필연적으로 오프라인 활동에 대한 수요 역시 증가할 것이며, 관련 사업 역시 성장할 것이라 생각합니다. 이러한 오프라인 활동을 도와주는 것이 바로 장소, 좌표를 한눈에 시각화할 수 있는 지도 UI입니다.
코로나맵 역시 지도 UI를 채택하여 1400만명이 넘는 사용자에게 많은 도움을 주었습니다. 이처럼 지도 서비스는 다양한 서비스와 결합이 가능하고 폭발적인 잠재력을 가지고 있습니다.
남들과 차별화된 자신만의 강점을 키우고 싶은 분들에게 이 강의를 추천드립니다.
무엇을 배우나요? 학습 내용 & 강의 특징
국내 유일! 지도 서비스 제작 강의
MongoDB / Mongoose / Node.js / Express / Naver map API / Kakao map API
데이터를 바탕으로 마커를 생성하고 인포윈도우를 띄워주는 기능
카카오 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. 행정구역(도) 데이터 레이어 표시 행정구역별로 구획을 나누어 시각화하는 방법에 대해 소개합니다. 또한 행정구역마다 해당 구역을 클릭했을 때, 마우스가 올라갔을 때, 내려갔을 때에 따른 이벤트를 추가하여 툴팁 및 해당 구역 색상을 변경하는 기능을 구현해봅니다.
자주 묻는 질문
Q. 수업 내용을 어느 정도 수준까지 다루나요?
본 강의는 지도 서비스를 만들기 위한 기초적인 내용부터 보다 심화적인 내용까지 넓은 스펙트럼을 제공할 예정입니다. 때문에 초급~중급까지의 난이도를 가지고 있습니다.
Q. 네이버 API와 카카오 API를 둘 다 쓴 이유가 있나요?
각각 장점이 있기 때문에 이를 최대로 활용하고 싶기 때문입니다. 네이버 지도 API는 부가적인 기능 및 최적화가 잘 되어 있다고 생각하고, 카카오 API의 경우 키워드 검색 기능의 성능이 매우 좋기 때문에 2개를 모두 채택하여 두 장점을 극대화 하려 합니다.
Q. 비전공자도 들을 수 있나요?
당연히 가능합니다. 다만 지도 서비스 특성상 JavaScript를 많이 사용해야 하기 때문에 기초적인 지식이 요구될 수 있습니다. 그렇기 때문에 관련 지식이 부족하다면 해당 강의에서 제공하는 로드맵을 통해 HTML, CSS, JS 관련 기초 지식을 습득 후 수강하기를 추천드립니다.
Q. 이전 강의와 다른 점은 무엇인가요?
이전 강의 '코로나맵 개발자와 함께하는 지도서비스 만들기'의 경우 지도서비스 제작 입문을 위한 강의였습니다~!! 단순하게 지도를 띄우거나 마커를 표시하는 등의 기본적인 기능만 배우고 싶다면 이전 강의를 수강하길 추천드립니다. 본 강의는 서버통신, MongoDB와 Mongoose를 통한 데이터 핸들링, 마커 클러스터링, Ajax, 데이터 레이어 표시 등과 같이 초급부터 중급까지의 내용을 담고 있습니다. 때문에 좀 더 많은 기능을 학습하고 싶으신 분들에게 추천드립니다.
지도 서비스 제작, 완전 기초부터 시작하고 싶다면?
이런 분들께 추천드려요
학습 대상은 누구일까요?
코로나맵과 같은 지도서비스를 만들어보고 싶은 분들
지도관련 api를 사용하고 싶지만 어떻게 해야할지 모르는 분들
DB와 연동된 지도서비스를 만들고 싶은 분들
지도서비스의 다양한 기능을 배워보고 싶은 분들
선수 지식, 필요할까요?
HTML
CSS
Javascript
안녕하세요 입니다.
1,334
명
수강생
119
개
수강평
165
개
답변
4.8
점
강의 평점
3
개
강의
안녕하세요 개발자 이동훈입니다.
4400만 조회수가 넘는 코로나맵을 최초로 기획하고 개발하였으며, 마스크맵, 코로나미를 통해 많은 사용자분들의 불편함을 해소하는 서비스를 운영하고 있습니다.
Just like the previous lecture, this was a lecture that explained things in an easy-to-understand way~!!
It was easy to follow because there were subtitles.
It was very helpful for my learning that you explained how to use Naver and Kakao Maps easily. Since you are creating a service, you need to have basic concepts such as Javascript, jQuery, ajax, and DB.
I learned it by repeating and correcting errors in code input several times, and it worked well. It was a lecture that allowed me to learn about various programs and application methods. Thank you for your hard work.