React + TypeScript로 네이버 지도 그리기 - 1.요금 정보 및 환경설정
React + Typescript로 개발 중인 앱에 지도 기능이 필요해서 구현하는 방법을 찾아보았다.
지도 서비스를 제공하는 플랫폼에는 카카오, 네이버, 구글 등이 있는데, 평소에 마음에 들어 자주 사용하는 네이버 지도를 선택했다.
사용자의 입장에서 개발하는 입장이 되니 비용, 구현 방법 등 알아야 할 것이 생각보다 많았고 궁금해졌다.
그래서 이번에 React + TypeScript 환경에서 Naver Maps로 지도를 그리기 위해 알아본 내용들을 글로 정리해 보았다.
쓰다 보니 내용이 길어져서 소개 및 환경설정에 대한 내용과 구현 내용을 분리하기로 했다.
이번 글에서는 소개 및 환경설정에 대한 내용을 다룬다.
개발을 시작하기 전에 알아두면 좋을 Naver Maps의 기능, 요금 안내, 환경 설정에 대해 정리해 보았다.
그럼 네이버 지도(이하 Naver Maps)를 적용해 보기 전에 요금에 대한 정보와 회원가입 하는 방법을 알아보자.
1. Naver Maps의 기능
Naver Maps는 다양한 기능을 제공한다.
지도 그리기, 지도 이동, 지도 레이어 구성, 마커 표시, 길 찾기 등 여러 기능이 있다.
나는 지도에 원하는 위치를 표시하거나 이동하는 기능이 필요했다.
Naver Maps는 개발문서에서 API 사용 방법과 예제를 제공하고 있어서 문서를 읽고 따라 하는 게 크게 어렵지는 않았다.
다만 조금 아쉬웠던 점은 요즘 프런트엔드 개발 환경의 트렌드인 React와 Typescript 기반의 설명이 아니라 Vanilla JS, jQuery 기반의 설명이라는 점이다.
React, Typescript에 능숙한 사용자라면 Vanilla JS로 작성된 부분을 React, Typescript의 구조에 맞게 변형해서 사용할 수 있을 것이다.
하지만 나처럼 React, Typescript와 아직 친하지 않은 사람에겐 구조에 맞게 변형하는 방법까지 공부해야 했기에 약간의 진입장벽으로 느껴졌다.
분명 나와 비슷하게 어려움을 겪는 사람도 있을 거란 생각이 들었고 이 글을 작성하는 계기가 되었다.
2. 요금 안내
사용 설명에 들어가기 앞서 비용에 대한 걱정을 줄이기 위해 요금과 관련된 내용을 먼저 소개하려고 한다.
아래는 Naver Maps의 이용 요금 안내표이다.
용도에 따라 나뉜 다양한 API가 있으며 기본적으로 모든 API에 무료 이용 횟수가 있다.
이번에 사용할 API는 Web Dynamic Map으로 1달에 10,000,000회를 무료로 사용할 수 있다.
하루 평균으로 따져봤을 때 300,000회를 무료로 사용하고도 남는 정도이기 때문에 토이프로젝트 또는 작은 규모의 서비스는 요금에 대한 걱정을 할 필요가 없다.
참고로 Web Dynamic Map은 지도에서 우리가 흔히 사용하는 지도서비스처럼 줌 인/아웃 및 지도에서 위치를 이동할 수 있는 기능을 제공하는 지도이다.
2.1. 무료 이용 한도와 대표 계정
네이버 클라우드 플랫폼에서 처음으로 생성하는 아이디가 '대표 계정'으로 등록된다.
대표 계정은 개인, 사업자 각 1개만 등록할 수 있고 네이버에서 제공하는 API 무료 이용 한도는 대표계정에만 제공된다.
예를 들어 '사용자 A'가 Naver Maps API 무료 이용 한도가 월 1,000회인 경우 계정을 3개 만든다고 해서 각각 1,000회씩 총합 3,000회를 이용할 수는 없다.
현재 계정은 가입 후 콘솔에서 '대표 계정 확인' 이라는 버튼을 클릭하면 아래와 같이 확인할 수 있다.
참고로 대표계정은 고객센터에 문의해서 변경이 가능하다.
자세한 정보는 고객센터의 F&Q 페이지에 나와있다.
2.2. 무료 이용 한도 설정
혹시 잘못된 케이스로 초과하면 어쩌나 걱정이 들 수도 있다.
하지만 걱정하지 않아도 괜찮다.
가입직후 콘솔에서 확인해 보면 Naver Maps의 초기 설정값은 무료 이용 한도만큼 설정되어 있다.
3. 네이버 클라우드 플랫폼 회원가입
먼저 네이버 클라우드 플랫폼 회원가입 페이지에서 회원가입을 진행한다.
링크로 이동하면 아래와 같은 화면이 나오는데 이메일 또는 네이버 계정으로 진행이 가능하다.
이메일 인증 및 결제 수단 등록의 추가 절차를 진행하면 가입이 완료된다.
이메일 인증은 등록한 이메일로 받게 되는 인증 메일의 링크를 클릭하면 완료된다.
결제 수단 등록은 체크카드나 신용카드를 등록해야 하니 미리 결제 가능한 카드를 준비한다.
4. 애플리케이션 등록
회원가입을 마치고 콘솔로 이동하면 대시보드에 접근할 수 있다.
좌측의 사이드 내비게이션에서 AI/NAVER API의 Application 메뉴를 클릭한다.
그러면 아래처럼 AI/NAVER API 이용 약관에 동의하라는 페이지가 나올텐데 동의함에 체크하고 확인을 누른다.
이용 약관에 대한 동의 절차가 끝나면 대시보드에서 Application 등록 이란 하늘색 버튼이 보인다.
버튼을 클릭하면 상세 정보를 입력하는 페이지가 나온다.
이번에는 웹 애플리케이션을 등록하는 예제를 진행하는 것이므로 Web Application 개발에 필요한 내용들을 입력했다.
아래를 참고해 Application 이름, Service 선택, 서비스 환경 등록의 정보를 입력하면 된다.
먼저 Application 이름은 본인의 앱 이름을 입력하면 된다.
네이버 클라우드 플랫폼에서 Application을 식별하기 위한 이름이기 때문에 실제 앱의 명칭과 달라도 상관없어 보인다.
다음은 Service 선택 항목이다.
웹 애플리케이션에 필요한 항목들을 모두 체크했다.
마지막은 서비스 환경 등록이다.
개발단계에서는 도메인을 등록하는 일이 없을 테니, http://localhost 라고 입력하면 된다.
등록되어있지 않은 도메인에서 요청이 오는 경우는 오류가 발생하니 나중에 서비스를 배포할 경우 도메인 주소를 추가해줘야 한다.
마무리
이번 글에서는 Naver Maps로 지도를 그리기 위해 사전 준비에 대해 알아봤다.
다음 글에서는 본격적으로 Naver Maps를 활용해 지도를 그리기 위한 개발환경을 설정하는 방법에 대해 알아볼 예정이다.