아임웹 팁&테크

다양한 활용법, 최신 기능을 알고 싶을 땐 아임웹 팁&테크

사이트 관리네이버 지도 API 설정하기 2부 | 네이버 클라우드 플랫폼


시작에 앞서

이번 강좌에서는 [네이버 클라우드 플랫폼 지도 API] 설정을 어떻게 하는지 상세히 알아보겠습니다. 그러나 그 전에 앞서 한 가지 알려드릴 중요한 점이 있습니다. 이번 네이버 지도 API는 업데이트되면서 지도 사용량에 따라 과금하는 형식으로 바뀌었습니다.


네이버 클라우드 플랫폼 지도 Maps API 서비스별 이용요금


단순히 우리 회사 위치를 지도로 표시하기만 한다면 그리 과한 요금은 아닙니다. 일반적으로 상위 2개 서비스(Web Dynamic Map, Mobile Dynamic Map)를 사용하기 때문이죠. 더구나 모바일은 무료기 때문에 여간해서는 큰 비용은 나오지 않을 것입니다.

단, 여러분의 사이트에서 지도가 매우 중요한 역할을 하는 경우 과금액은 높아질 수 있습니다. 따라서 우선적으로 설치 후 서비스 초반에는 자주 지도 사용량을 모니터링 해주는 게 좋겠습니다. 사용량 모니터링 하는 방법은 아래에서 간단히 알려드리도록 하겠습니다. 자, 그럼 지도 설치를 시작해볼까요?




1단계, Console 접속하기

네이버 클라우드 플랫폼 메인페이지에서 로그인 후 Console 버튼을 클릭합니다.



2단계, All Products 클릭하기

좌측 패널에서 All Products 메뉴를 찾아 클릭해주세요.



3단계, AI. NAVER API 클릭하기

우측에 모든 제품 메뉴가 나오면 AI.NAVER API를 클릭해주세요.



4단계, Application 등록 클릭하기

AI.NAVER API 목록이 나오면 하단에 파란색 버튼으로 된 Application 등록을 클릭해주세요.



5단계, 이용약관 동의

AI.NAVER API 이용약관에 동의 체크를 한 후 [확인] 버튼을 클릭해 다음으로 넘어갑니다.



6단계, Application 이름 및 사용할 지도 서비스 선택하기

1) 등록할 애플리케이션의 이름을 작성해줍니다. 이름에 한글은 작성이 불가합니다.

2) 내 사이트에 지도를 표시하기만 할 용도라면 상위 2개만 체크해주세요. 아래 기능들은 체크한다 하더라도 사용에 제한이 있을 수 있습니다.

체크가 끝났으면 마우스 스크롤해 아래로 내려가 서비스 환경을 등록할 것입니다.



7단계, 서비스 환경 등록하기

3) [Web 서비스 URL]에 아임웹 서브 도메인을 입력하고 [추가]를 클릭합니다. *예 : https://imwebcampus.imweb.me
다음으로 연결하신 개인 도메인이 있는 경우 바로 윗칸에 입력한 다음 [추가]를 클릭합니다. *예: https://imwebcampus.com

4) Web 서비스 URL 입력을 마치셨다면 [등록]을 클릭합니다.


*만약 사용하시는 개인 도메인에 SSL 보안인증서를 설치하셨다면 주소 앞에는 반드시 https:// 를 추가하셔야 합니다.
*Android 앱 패키지 이름 및 iOS 번들 ID는 아임웹으로 앱을 사용하시는 분들께만 해당됩니다. 이 값들을 찾는 방법은 다른 글에서 알려드릴게요.



8단계, 인증 정보 확인하기

등록을 마치면 아래 스크린샷처럼 사용 중인 API 목록이 나타납니다. 우리가 등록한 API 이름 아래 보시면 [인증 정보]라는 버튼이 있습니다. 이 버튼을 클릭해주세요.



9단계, 인증 정보 복사하기

아래 화면처럼 인증 정보 팝업창이 나타나면, Client ID와 Client Secret 값을 복사합니다.



10단계, 아임웹으로 이동 및 API 설정 메뉴로 이동

1) 아임웹으로 돌아와서 [환경설정 - 소셜 로그인/API 설정] 메뉴로 이동합니다.
2) 상단에 [공유 및 API 설정] 메뉴를 클릭합니다.
3) 네이버 지도 API 항목에서 [네이버 클라우드 플랫폼 지도 API]를 선택합니다.



11단계, Client ID 및 Client Secret 붙여넣기

1) 위 9단계에서 복사한 Client ID와 Client Secret 값을 붙여 넣어줍니다.
2) [저장]을 눌러 설정을 저장합니다.



12단계, 디자인모드 및 사이트에서 확인하기

이제 디자인모드 및 사이트에 접속해 정상적으로 지도가 표시되는지 확인합니다.


서울특별시 마포구 동교로 194 혜원빌딩 2F, Imweb Campus
이메일 : edu@imweb.me  |  실시간 채팅 : 문의하기  |  오시는 길 : 지도보기