코로나맵 개발자와 함께하는 지도서비스 만들기
코로나맵 개발자와 함께하는 지도서비스 만들기
수강정보
(11개의 수강평)
90명의 수강생
스킬태그 #웹앱, #Node.js, #Express, #VSCode
33,000원
지식공유자 : 이동훈
21회 수업 · 총 1시간 34분 수업
기간 : 평생 무제한 시청
수료증 : 발급 강의
수강 난이도 : 초급
이동훈의 다른 강의 연관 로드맵

이 강의는

코로나맵 개발자가 알려주는 지도서비스 만들기 강의입니다.

이런 걸 배울 수 있어요

  • 웹을 개발하기 위한 기본적인 초기환경 구축
  • 네이버 지도 api를 통한 웹 기반 지도서비스 구축
  • 기본적인 지도서비스에 필요한 마커, 인포윈도우, 인포박스 생성
  • 웹 개발에 필요한 html, css, js 관련 지식

코로나맵 개발자와 함께 배우는 실제 지도서비스 구현!

<출처 : KTV, EBS>

안녕하세요, 개발자 이동훈입니다.
저는 이번에 1400만명이 이용하고, 4400만 조회수를 넘긴 코로나맵과 
마스크 실시간 재고현황을 보여주는 마스크맵을 기획하고 개발하였습니다.

서비스 운영을 하면서 가장 많이 받았던 질문 중에 하나가
'코로나맵과 같은 서비스를 만들어보고 싶은데, 어디서 어떻게 시작해야할지 모르겠습니다' 였습니다.
그래서 강의 제작을 생각하게 되었고, 정말 좋은 기회로 이번 강의를 만들게 되었습니다.

첫 강의라 많이 어색하고 서툴지만 많은 분들에게 도움이 되었으면 좋겠습니다.
정말 다시 한 번 감사드립니다!! 언제든 피드백 부탁드립니다. 

지도서비스 개발, 왜 배우면 좋을까요?

<출처 : 조선일보>

청와대 업무보고에 참석했을 때 들었던 것 중 가장 인상깊었던 말은

'코로나맵은 정부가 정보를 공개하는 방법 면에서 새로운 발상이다. 정부의 홍보방식에 '발상의 전환'을 해야 한다. 특별히 당부한다'였습니다. 코로나맵의 기반이 되는 새로운 발상으로 인식되는 지도UI는 사용자에게 가장 효율적이고 직관적으로 정보를 표시하는 방법입니다.

서비스를 기획하거나 개발할 때, 사용자에게 직관적이며 쉽고 빠르게 정보를 제공하는 것이 점점 더 중요해지고 있는 현 상황에서 본 강의를 통해 지도서비스를 만들기 위한 기본 세팅부터 활용하는 방법을 여러분들께 알려드리고자 합니다.

직접 지도서비스를 만들어보세요.

아래는 본 강의에서 제작할 지도서비스입니다.

본 강의에서는 지도서비스를 만들기 위한 기본지식을 배울 예정입니다.

  1. 네이버 지도 api를 통한 웹 지도 띄우기
  2. 정보 제공에 필요한 배너와 인포박스 만들기
  3. 다수의 마커를 생성하여 지도위에 띄우고, 클릭이벤트를 추가하기
  4. 현재 위치를 받고, 애니메이션이 적용된 마커를 지도위에 표시하기

강의에서 배우는 지식은 현재 코로나맵에서 활용되는 지식입니다. 이처럼 본 강의를 통해 수강생 여러분들께서 앞으로 지도 서비스를 제작할 때 도움을 드릴 수 있다고 생각합니다.

어떤 걸 배울까요?

Section 0 - 강의 소개

본 강의와 앞으로 만들게 될 프로젝트에 대한 소개와 웹개발을 시작할 때 코로나맵 클론 프로젝트에서 얻을 수 있는 기초적인 지식에 대해 설명하고 있습니다.

Section 1 - 초기환경 구축

프로젝트를 진행하기 위한 초기환경을 설치하고 셋팅하는 방법에 대한 강좌가 담겨있습니다. 본 강의에서는 VS Code, 
node.js, express를 설치하고 프로젝트를 진행하기 위한 초기환경 셋팅을 설명하고 있습니다.

Section 2 - 지도 api 소개 및 설정

지도 서비스의 핵심인 지도 api를 설정하고 적용하는 강의를 담았습니다.

본 강의 에서는 네이버 지도 api를 사용하고 있어, application 생성 및 api key 발급, 그리고 웹에서 네이버 지도 api를 띄우는 방법에 대해 설명하고 있습니다.

Section 3 - 배너 및 인포박스 생성하기

지도서비스에서 보여지는 배너 부분과 인포박스를 생성하는 강의를 담았습니다. 

지도 서비스 및 웹 서비스에 필요한 상단 배너와 인포박스를 생성하고, css를 통해 사용자에게 보여지게 하는 작업을 설명하는 강의입니다. 본 강의를 통해서 지도 위에 정보를 표시하는 방법인 배너와 인포박스를 만드는 방법을 알 수 있습니다.

Section 4 - 마커 생성 및 이벤트 설정

지도 서비스에서 데이터를 표시하는 방법 중 하나인 마커에 대해 설명하는 섹션입니다.

여러 개의 마커를 생성하고 지도 위에 표시하고, 클릭 이벤트를 추가하는 방법을 설명하는 강의 입니다. 마커를 클릭 시 인포윈도우를 표시하고 사라지게 하는 기능을 만들고, 지도에도 클릭 이벤트를 추가하는 방법을 설명합니다.

Section 5 - 현재 위치를 지도위에 표시하기

지도 서비스에서 가장 많이 활용되고, 기본이 되는 현재위치를 받고 이를 지도위에 마커를 통해 표시하는 방법에 대해 설명하는 섹션입니다.

현재 위치를 받기 위한 버튼을 만들고, jQuery를 사용하여 click 이벤트를 부여하고, 현재 위치에 마커를 생성하는 방법을 설명합니다. 또한 마커 주위에 퍼져나가는 애니메이션 효과를 부여하는 방법에 대해서도 다루고 있습니다.

Section 6 - [부록] 코로나맵 일지

코로나맵을 언제, 어떻게 기획했는지 개발일지로 풀어냈습니다. 현재 운영되고 있는 코로나맵이 어떻게 탄생하게 되었으며 어떠한 계기로 기획하였고, 운영하고 있는지 간단하게 소개했습니다.

이 강의만의 특징 

코로나맵 개발자가 직접 초기환경 셋팅부터 지도서비스 구현까지 알려주는 강의입니다.

때문에 지도 서비스를 처음 경험하는 개발자들도 쉽게 접근할 수 있도록 제작하였으며, 현재 많은 이용자들이 사용하는 지도 서비스를 클론함으로써
단순 프로젝트가 아니라 기획, 개발 과정에서 얻은 노하우는 물론 코로나맵에서 실제로 이용하는 코드까지 확인할 수 있습니다.  

다루는 툴 

  • VS Code - 개발을 하기 위한 IDE(통합 개발 환경) 
  • express - 웹 어플리케이션 프레임워크
  • naver map api - 네이버 지도를 띄워주기 위한 api

 

웹 개발을 전혀 배워보지 않았던 입문자라면? 👀

도움 되는 분들

  • 코로나맵과 같은 지도서비스를 만들어보고 싶은 분들
  • 지도관련 api를 사용하고 싶지만 어떻게 해야할지 모르는 분들
  • 자신만의 웹서비스를 만들어보고 싶은 분들

선수 지식

  • HTML
  • CSS
  • Javascript

지식공유자 소개

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

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

현재는 작은 스타트업을 창업하여 CTO로서 열심히 개발을 하고 있습니다. 잘 부탁드립니다.>_<

교육과정

모두 펼치기 21 강의 1시간 34분
섹션 0. [부록] 코로나맵 개발일지
1 강의 06 : 50
[부록] 코로나맵 개발일지
06 : 50
섹션 2. 초기환경 구축
3 강의 07 : 51
VS Code 설치 및 초기 셋팅
02 : 20
node.js 소개 및 설치
02 : 19
express 및 nodemon 설치, 실행하기
03 : 12
섹션 3. 지도 api 소개 및 설정
3 강의 08 : 39
개발자 페이지 소개 및 지도 api 발급
01 : 47
지도 api 초기 설정 및 실행
02 : 42
지도 페이지 CSS 적용하기
04 : 10
섹션 4. 배너 및 인포박스 만들기
2 강의 09 : 09
지도 배너 만들기
03 : 01
인포박스 만들기
06 : 08
섹션 5. 마커 생성 및 이벤트 설정
5 강의 34 : 14
마커 만들고 지도위에 표시하기
04 : 43
여러개의 마커 생성하기
09 : 23
infowindow 생성 준비
07 : 50
infowindow 만들고 클릭 이벤트 추가하기
09 : 04
지도 클릭 이벤트 설정하기
03 : 14
섹션 6. (7/21 업데이트) 현재 위치를 지도위에 표시하는 기능 만들기
5 강의 23 : 33
현재 위치 버튼 만들기
02 : 51
jQuery 적용 및 사용 해보기
02 : 46
기본 마커를 활용해서 현재 위치 표시하기
06 : 49
현재 위치 마커에 css적용하기
02 : 58
현재 위치 마커에 애니메이션 적용하기
08 : 09

공개 일자

2020년 7월 7일 (마지막 업데이트 일자 : 2020년 7월 7일)

수강 후기

5.0
11개의 수강평
default_profile.png
신은경 1달 전
목소리가 너무 좋아요. 강의에 적합한 몯소리같아요.알기쉽게 설명해줘서 이해가팍팍갑니다.늘 코로나맵의 서비스과정이 궁금했는데...이런 기회를 주시니 감사합니다.화이팅하세요!!!!
이동훈

이동훈 1달 전
안녕하세요 은경님~!! 다소 부족할 수 있는 강의에도 좋은 평가 주셔서 감사드립니다~!! 코로나맵을 기획하고 개발하면서 얻은 노하우를 앞으로 지속적으로 업데이트할 예정이오니 많은 관심 부탁드립니다.

default_profile.png
이영석 1달 전
처음 해보는 지도 앱 작성 법인데도 쉽게 가르쳐 주셔서 누구나 쉽게 따라할수있는 강의 였습니다. 큰도움이 되었습니다. 감사합니다.
이동훈

이동훈 1달 전
안녕하세요 영석님~~🤗🤗 강의평가 감사드립니다!!! 좋은 피드백 감사드리며, 첫 지도앱에 제 강의가 도움이 되었다고 말씀해주시니 정말 다행입니다~!! 첫 강의라 많이 부족한 점이 많을텐데 좋게 봐주셔서 다시한번 감사드립니다. 앞으로 개발자로서 더 좋은 모습을 보여드릴 수 있도록 노력하겠습니다.😆

default_profile.png
김호정 1달 전
강의마다 자막이 달려 있어서 보기에 편했어요~!! 지도서비스 기본지식을 배우는데 좋았어요
이동훈

이동훈 1달 전
안녕하세요 호정님~😆 첫 강의라 많이 부족했지만 도움이 되었다니 정말 감사드립니다. 앞으로 계속해서 강의를 업데이트 할 예정이니 많은 관심 부탁드립니다🤗🤗🤗

지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의들을
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스