NAVER Maps API v3

네이버 지도 API 개발자 Github.io 제작기

네이버 지도 API v3는 JavaScript 형태로 제공되는 NAVER 지도 플랫폼으로써, 웹 서비스 또는 어플리케이션에 NAVER 지도 기능을 구현할 수 있도록 다양한 클래스와 메서드를 제공한다. 특히, 높은 성능을 위해 Mobile과 PC 환경에 최적화된 코드를 제공하고, 주요 웹 브라우저를 완벽하게 지원할 수 있도록 새로 설계되었다.

네이버 지도 API v3가 개발되고, 개편된 네이버 개발자센터 Documents에 포함하기엔 무리가 있다고 판단하여 오픈소스 형태로 Github에 저장소를 따로 두기로 하였다. 서비스 소개를 위해 성능 및 서비스를 확인할 수 있는 랜딩 페이지와 각 기능을 빠르게 확인할 수 있는 예시 페이지, 그리고 모든 문서를 포괄하는 문서 페이지 개설이 필요하여 제작하게 되었다.

Landing Pages

Main

github에서 제공하는 io페이지에 랜딩 페이지를 개발하였다.
인터렉션 섹션에서 실제 동작하는 화면을 보여주기 위해 별도로 가상 api를 심어 작동하는 화면을 보여주었다. 쇼케이스 역역에서는 각 서비스에서 사용되고 있는 실사례를 보여주고 소개 페이지를 통해 랜딩할 수 있도록 하였다.

ShowCase

Showcase에서는 네이버 지도, 네이버 부동산, 네이버 데이터랩, 네이버 포스트, modoo 등의 서비스에서 지도 API를 활용하는 형태를 보여준다.

Docoments

문서 페이지는 개발 문서를 별도로 정리하고 기능을 쉽게 안내할 수 있도록 제작한 페이지다. UI Framework인 Bootstrap을 차용하여 docstrap으로 커스텀 개발하여 UI를 정리했다.
크게 일반 문서 페이지 구성과 튜토리얼, 예제페이지로 나뉜다.

Examples Digest

지도 활용 예제를 모아볼 수 있도록 설계한 페이지로, 유형을 분류하고 미리 볼 수 있도록 하였다. 클릭 후 각 예제를 빠르게 적용할 수 있도록 서브 페이지에서 개발코드를 제공하고 있다.

예제 튜토리얼 페이지

Document with Wikis

일반 문서 페이지로 Markdown으로 삽입할 수 있도록 설계하였다. 각 문서는 Index를 포함하며, Index가 없는 문서는 글 읽기 최적화를 위해 문서 컨테이너에 Grid column으로 제어하였다.

 

후기 또는 잡담

지도 API가 개발 완료됨가 동시에 주요 기능과 스펙을 정의하고 이를 표현하는데 고민이 많았던 프로젝트였다. 네이버의 다른 서비스와 달리 Github에 공개한 라이브러리였기 때문에 기능을 잘 보여주는 방법 외에도 설계하는데 최적화된 방법을 고민해야했다. 제공되고 있는 Documentation 라이브러리를 차용하고 이를 커스텀하기 위해 Bootstrap을 커스텀하고 여기에 브랜딩을 입히는데 꽤 많은 작업시간이 소요되었다.