인프런 영문 브랜드 로고
인프런 영문 브랜드 로고
로드맵 썸네일

웹 기초부터 차근차근, 지도서비스 제작하기

작성자 프로필 이미지

이동훈

HTML/CSS
Node.js
웹앱

입문 대상

로드맵 참여중인 유저 프로필 사진
로드맵 참여중인 유저 프로필 사진

343명 참여중

로드맵 코스

웹 서비스 개발,
어떻게 시작할 수 있을까요? 🗺️

웹 서비스를 처음부터 기획하고 개발하는 노하우를 배울 수 있어요.
• 실제 코로나맵 개발에 활용된 지식을 학습할 수 있어요.

안녕하세요,
코로나맵 개발자 이동훈입니다 👨‍💻

▲ 출처: KTV, EBS

 

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

서비스 운영을 하면서 가장 많이 받았던 질문 중에 하나가
'코로나맵과 같은 서비스를 만들어보고 싶은데, 어디서 어떻게 시작해야할지 모르겠습니다' 였습니다.

코로나맵과 같은 지도서비스를 만들어보고 싶은 분들,
그리고 자신만의 웹 서비스를 만들어보고 싶은 분들에게 도움이 되고자 
직접 지도서비스를 만들어볼 수 있도록 강의를 준비하게 되었습니다.

이 로드맵은 웹 개발, 프로그래밍에 대한 경험이 전혀 없는 분들을 대상으로
기초부터 웹 개발 지식을 차근차근 학습하고, 지도서비스를 따라 만들어볼 수 있도록 구성한 학습 로드맵입니다.

 

직접 만들어볼 수 있어요. 🧭

▲ 실제 코로나맵 서비스와 마찬가지로 네이버 지도 API를 이용한 지도서비스 웹앱을 만들어봅니다.

  

• 실제 서비스되고 있는 코로나맵 서비스와 유사한 지도서비스 웹앱을 만들어볼 수 있습니다.
• 웹 개발을 위한 기초 언어(HTML, CSS, JS)를 학습하고, 지도서비스 웹앱을 만들기 위한 초기환경 세팅, 지도 API 활용, 배너/인포박스/마커/클릭이벤트 추가까지 배우게 됩니다.

 

이 로드맵의 구성 🏃

웹 개발을 처음 배우는 사람도 따라할 수 있어요!

  1. 먼저, 웹의 기본 뼈대를 세우는 HTML을 배웁니다.
  2. 그 다음 웹 화면을 꾸며주는 CSS를 학습해 볼 거예요.
  3. 자바스크립트(JavaScript)로 웹 화면의 동작까지 조정할 수 있게 된다면 준비 끝!
  4. 이제 진짜 지도서비스 개발을 배워봅시다.

 

이런 분들께 추천합니다! 🙌

 

이 강의로 얻을 수 있는 것 🎓

 

로드맵 상세보기

5개 코스

로드맵에 포함된 강의 썸네일
인프런
컴퓨터, 웹, 코딩, 프로그래밍의 시작 - Web1
지도서비스를 만들기 위한 뼈대가 되는 생활코딩의 HTML 강의입니다. 본 강의를 통해서 서비스의 기본적인 뼈대를 구축하는 기본 지식을 배울 수 있습니다.

무료

로드맵에 포함된 강의 썸네일
인프런
WEB2 - CSS
지도서비스를 사용자가 보기 좋게 꾸미는 CSS 강의입니다. 강의를 통해 서비스의 레이아웃을 잡거나 꾸며주는 CSS 지식을 배우고 활용할 수 있습니다.

무료

로드맵에 포함된 강의 썸네일
지도서비스에서 가장 많은 부분을 차지하는 JavaScript를 변수부터 함수 설정까지 차근차근 배우고 활용해볼 수 있는 강의입니다. HTML, CSS에 대한 기본 지식이 있다면 이 강의부터 학습해보는 걸 추천합니다.

무료

로드맵에 포함된 강의 썸네일
코로나맵 개발자가 알려주는 지도서비스 강의입니다. 현재 서비스되고 있는 코로나맵을 클론하여 지도서비스의 기본적인 지식을 습득할 수 있습니다. 강의를 통해 웹 개발이 어떠한 방식으로 이뤄지는지, 지도를 띄우는 방법과 마커, 이벤트를 설정하는 방법 등을 습득할 수 있습니다.

24,750

33,000

로드맵에 포함된 강의 썸네일
지도 서비스 운영에 필요한 심화 기능을 구현하는 방법들에 대해 알아봅니다. MongoDB, Mongoose, Node.js, Express 등을 활용하여 위치 데이터를 저장하거나 마커 클러스터링, 행정구역 데이터 레이어 기능, 키워드 검색 등을 직접 따라 개발해볼 수 있습니다.

44,550

59,400

로드맵 코스 5