Thumbnail
개발 · 프로그래밍 풀스택

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

(4.5)
22개의 수강평 ∙  301명의 수강생

59,400원

지식공유자: 이동훈
총 33개 수업 (3시간 14분)
수강기한: 
무제한
수료증: 발급
난이도: 
입문
-
초급
-
중급이상
지식공유자 답변이 제공되는 강의입니다
폴더에 추가 공유

중급자를 위해 준비한
[웹 개발, 풀스택] 강의입니다.

코로나맵 개발자가 알려주는 지도 서비스 제작 심화 강의입니다.

✍️
이런 걸
배워요!
네이버 지도 api를 통한 웹 기반 지도서비스 구축
기본적인 지도서비스에 필요한 마커, 인포윈도우 생성
카카오 api를 통한 좌표 업로드 페이지 구축
MongoDB와 mongoose를 연동한 지도서비스 구축
지도 서비스 최적화를 위한 클러스터링 기능
행정구역(도) 시각화 및 이벤트 추가

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

지도 서비스 제작에 대한 수많은 고민들!

“지도 서비스를 만들고 싶은데, 어디서부터 시작해야 할지 모르겠어요.”
“장소에 대한 정보를 DB에 저장하고 싶은데 어떻게 해야 할까요?”
“지도 위에 데이터가 많아지다보니 최적화가 필요한데 어떻게 해야 할까요?”

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

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

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

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

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

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

이번 강의에서는 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

안녕하세요
이동훈 입니다.
이동훈의 썸네일

안녕하세요 개발자 이동훈입니다.

4400만 조회수가 넘는 코로나맵을 최초로 기획하고 개발하였으며, 마스크맵, 코로나미를 통해 많은 사용자분들의 불편함을 해소하는 서비스를 운영하고 있습니다.

현재는 작은 스타트업을 창업하여 CTO로서 열심히 개발을 하고 있습니다.

감사합니다.

커리큘럼 총 33 개 ˙ 3시간 14분의 수업
이 강의는 영상이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. 강의 소개
섹션 1. 초기환경 구축
VS Code 설치 및 확장프로그램 설치 미리보기 03:17
Node.js 소개 및 설치 04:29
필수 패키지 설치하기 01:43
섹션 2. 지도 서비스 프로젝트 구축
express 프로젝트 생성하기 01:38
express 서버 실행하기 05:36
네이버 지도 api 발급 및 적용 07:44
지도 서비스 CSS 적용하기 05:22
네비게이션 바 만들기 06:29
업로드 페이지 만들기 07:35
섹션 3. 마커 및 인포윈도우 생성
여러개의 마커 표시하기 06:27
마커 CSS 적용하기 02:23
인포윈도우 소개 및 정의하기 05:07
인포윈도우 생성 함수 적용하기 05:07
인포윈도우 CSS 적용하기 01:39
인포윈도우 지도 클릭 이벤트 추가하기 02:15
섹션 4. MongoDB와 mongoose 활용
MongoDB 및 mongoose 소개 01:37
MongoDB 호스팅 및 Compass 설치 / 실행 05:52
mongoose 패키지 설치 및 설정 06:15
mongoose 스키마 소개 및 설정 03:35
섹션 5. 업로드 기능 초기환경 구축
카카오 api 발급 및 적용 미리보기 06:42
업로드 페이지 CSS 적용 07:46
키워드 검색 데이터 받아오기 10:57
키워드 검색 데이터 지도위에 표시하기 15:06
검색 데이터 초기화 하기 04:11
섹션 6. 업로드 기능 마무리
Postman 소개 및 설치 / 테스트 해보기 미리보기 09:40
지도 서비스 업로드 서버 구축하기 09:15
좌표 데이터 MongoDB에 저장하기 05:58
지도 위에 저장한 데이터 표시하기 07:49
섹션 7. 마커 클러스터링 기능 구현
마커 클러스터링 소개 미리보기 01:18
마커 클러스터링 기능 구현 10:51
섹션 8. 행정구역(도) 데이터 레이어 표시
행정구역 데이터 레이어 소개 및 표시하기 12:10
행정구역 데이터 레이어 클릭 / 마우스 이벤트 추가하기 06:41
강의 게시일 : 2021년 01월 28일 (마지막 업데이트일 : 2021년 01월 28일)
수강평 총 22개
수강생분들이 직접 작성하신 수강평입니다.
4.5
22개의 수강평
5점
4점
3점
2점
1점
VIEW 추천 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
로빈(Robin) thumbnail
5
지도 API를 이해하고 활용하는데에 큰 도움이 되었습니다.
2022-01-14
mini0204 thumbnail
5
중간, 중간에 코드 입력 오류로 여러 번 반복하면서 수정하며 학습했더니, 잘되네요. 다양한 프로그램 및 적용 방법에 대하여 알 수 있었던 강의였습니다. 수고 많으셨습니다.
2021-11-09
유경식 thumbnail
5
네이버, 카카오 맵을 쉽게 사용하게 알려주셔서 학습에 많은 도움이 되었습니다. 서비스를 만드는 것인 만큼 Javascript, jQuery, ajax, DB 등 기본 개념은 있어야 하네요.
2022-04-06
이호진 thumbnail
5
이전 강의와 마찬가지로 알기쉽게 설명해주는 강의였습니다~!! 자막이 있어 따라가기가 편하네요
2021-01-28
지식공유자 이동훈
감사합니다 호진님:) 앞으로 더 좋은 컨텐츠로 보답하도록 하겠습니다~!!
2021-01-31
권지원 thumbnail
5
사용하기 어려웠던 지도 API 들을 다루는 방법에 대해 배울 수 있어 좋았습니다. 가볍게 나만의 지도서비스 만드는 방법을 배우는 좋은 강의입니다
2021-09-26
연관 로드맵
이 강의가 포함된 잘 짜여진 로드맵을 따라 학습해 보세요!