> For the complete documentation index, see [llms.txt](https://help.qshop.ai/customer_support/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.qshop.ai/customer_support/guide/partner/navermap.md).

# 네이버 지도

네이버 지도 설정 방법에 대해 알아봅니다.

네이버 지도 블록을 사용하여 사용자에게 위치 정보를 알려줄 수 있습니다.

네이버 지도는 월 1,000만 건 무료로 제공이 되고 있습니다. 사이트에 지도가 표시 될 경우 1건이 차감이 되며, 새로고침 시에도 1건이 차감이 됩니다. 즉, 지도가 적용이 된 페이지를 월 1,000만번 볼 수 있는 것이며, 한도 초과 시 네이버 클라우드 플랫폼 가입 시 등록한 신용카드 정보로 건당 0.1원 이용 요금이 발생하게 됩니다.

{% hint style="info" %}
네이버 지도 API의 이용량 정책 및 상세요금은 아래 링크를 참고 부탁드립니다.

**\[**[**Maps API 무료 이용량 정책**](https://www.ncloud.com/support/faq/prod/2828)**] \[**[**Maps API 상세 요금 안내**](https://www.ncloud.com/product/applicationService/maps?region=KR#pricing)**]**
{% endhint %}

네이버 지도 사용을 위해서는 네이버 클라우드 플랫폼 가입 및 네이버 지도 API설정을 해주셔야합니다.

클라우드 플랫폼 가입 후 지도 블록 연동 과정은 아래 가이드를 참고 부탁드립니다.

{% hint style="info" %}
큐샵 도메인( \_\_\_.qshop.ai)만 사용할 경우 **\[5. 네이버 지도 블록 추가하기]** 과정만 진행을 해주시면 됩니다.
{% endhint %}

<details>

<summary><strong>1. 네이버 클라우드 플랫폼 가입하기</strong></summary>

1. [**네이버 클라우드 플랫폼**](https://www.ncloud.com/)에 접속합니다.
2. 오른쪽 위 회원 가입 버튼을 클릭합니다.

   <figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FAKIsfWMmNZCBQCm745LI%2F1_%ED%81%B4%EB%9D%BC%EC%9A%B0%EB%93%9C%20%ED%94%8C%EB%9E%AB%ED%8F%BC_%ED%9A%8C%EC%9B%90%EA%B0%80%EC%9E%85.png?alt=media&amp;token=3022aad1-41f3-4d20-a660-63a98b6469a3" alt=""><figcaption></figcaption></figure>
3. 계정으로 사용 할 이메일 주소를 입력합니다.
4. 가입 유형 항목의 거주 국가, 회원 유형, 사용 언어를 선택합니다.\
   💡거주 국가 선택에 따라 결제 통화가 결정되며, 이후 변경이 불가능합니다.

   <figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2Fshabyj2ZuNmUIOz2kOeb%2F2_%ED%9A%8C%EC%9B%90%20%EA%B0%80%EC%9E%85%20%EC%9C%A0%ED%98%95.png?alt=media&amp;token=502f5217-0dde-42ee-aad9-2df333402939" alt=""><figcaption></figcaption></figure>
5. 약관 동의를 진행합니다.
6. 로그인에 사용 할 아이디와 비밀번호를 입력합니다.\
   💡이 과정에서 이메일 인증을 거치게 되며, 인증 후 다음 버튼을 클릭합니다.

   <figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FPBlPGbQWeIVNRlfgMUIX%2F3_%EB%A1%9C%EA%B7%B8%EC%9D%B8%20%EC%A0%95%EB%B3%B4%20%EC%9E%85%EB%A0%A5.png?alt=media&amp;token=a7f94e9b-4da5-4041-aaf7-cb4b05a47f53" alt=""><figcaption></figcaption></figure>
7. 계정 소유자 정보의 이름, 휴대 전화번호, 주소를 입력합니다.\
   💡위 과정에서 회원유형을 “사업자 회원”으로 선택했을 경우 입력하는 소유자 정보가 달라질 수 있습니다.

   <figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FOqou95sYPxreYuvXMtUp%2F4_%EC%86%8C%EC%9C%A0%EC%9E%90%20%ED%99%95%EC%9D%B8.png?alt=media&amp;token=d4d3f8aa-447f-4f5d-bf7e-55d4eef0d09f" alt=""><figcaption></figcaption></figure>
8. 회원 가입이 완료 되었습니다.\
   이제 **\[2. 결제수단 등록하기]** 과정을 진행해주시면 됩니다.

   <figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FJtZUHumWElyKZSveH0SM%2F5_%EA%B0%80%EC%9E%85%20%EC%99%84%EB%A3%8C.png?alt=media&amp;token=494f8576-2876-4e88-90be-a6c6685f4ebc" alt=""><figcaption></figcaption></figure>

</details>

<details>

<summary><strong>2. 결제수단 등록하기</strong></summary>

1. 회원 가입 완료 페이지의 **\[결제 수단 등록]** 버튼을 클릭합니다.

   <figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2F6NsVsfH49naiSvbkSmBK%2F6_%EA%B2%B0%EC%A0%9C%20%EC%88%98%EB%8B%A8%20%EB%93%B1%EB%A1%9D.png?alt=media&amp;token=0a8186e9-f72f-4ba0-8920-9dff9cef7730" alt=""><figcaption></figcaption></figure>

   💡만약 페이지를 벗어났다면, 클라우드 플랫폼 오른쪽 위 **\[결제수단등록]**&#xBC84;튼을 통해 진행이 가능합니다.

   <figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FJJZBuZOYsBQWc2TaXibp%2F7_%EA%B2%B0%EC%A0%9C%20%EC%88%98%EB%8B%A8%20%EB%93%B1%EB%A1%9D2.png?alt=media&amp;token=be178ea1-019d-41f8-b126-c22e06120455" alt=""><figcaption></figcaption></figure>
2. 결제 수단을 선택합니다.

   💡결제수단은 신용카드 및 체크카드만 선택이 가능합니다.
3. 휴대폰 인증하기 버튼을 클릭하여 약관 동의 및 인증 과정을 진행합니다.
4. 인증이 완료 된 후 **카드번호**와 **유효기간**을 입력하여, 결제 수단을 등록합니다.\
   💡등록 과정에서는 과금이 발생하지 않습니다.
5. 결제수단 등록이 완료됩니다.

</details>

<details>

<summary><strong>3. Application 만들기</strong></summary>

1. 클라우드 플랫폼 오른쪽 위 **\[콘솔]**&#xBC84;튼을 클릭합니다.

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FwQaD9Iqk8mXS2KexTc20%2F8_%EC%BD%98%EC%86%94.png?alt=media&amp;token=dccc91ee-1243-48d5-837c-9263437e73bd" alt=""><figcaption></figcaption></figure>

2. 왼쪽 메뉴의 **\[Services > Application Services > Maps]**&#xB97C; 클릭합니다

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2Fq7E7UFAevxaugl1CzAyI%2F9_API2.png?alt=media&amp;token=773ebf62-1dda-4b75-b8ec-d17311bef3b3" alt=""><figcaption></figcaption></figure>

3. Maps 페이지로 이동한 후 아래 **\[+ 이용 신청]** 버튼을 클릭하여, 약관 동의를 진행합니다.\
   만약 이용 신청이 된 상태라면, 다음 과정으로 넘어갑니다.

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FJr44jU27mbuSrEhDWCf0%2F10_APP%EB%93%B1%EB%A1%9D2.png?alt=media&amp;token=23b7db22-30f3-4d24-afcd-4ced880f7349" alt=""><figcaption></figcaption></figure>

4.이용 신청 및 약관 동의를 진행한 후 **\[+ Application 등록]** 버튼을 클릭합니다.

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FPsUXGnXHPXrIM1QjhF6c%2F10_1__APP%EB%93%B1%EB%A1%9D2.png?alt=media&amp;token=5a4b2eea-e736-4752-8ddf-eae71d37afb9" alt=""><figcaption></figcaption></figure>

5. **Application 이름**을 입력합니다.

{% hint style="info" %}
영문자, 숫자, 특수문자(-)만 입력할 수 있으며, 영문자로 시작해야 합니다.
{% endhint %}

6. API 선택 항목 중  **Dynamic Map** 과 **Geocoding** 두 가지를 선택합니다.

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2F1vudJURLjs29wfqDLXIE%2F11_APP%EC%9D%B4%EB%A6%842.png?alt=media&amp;token=3ce29d9e-6e1b-4d05-8ef0-6247e562aa00" alt=""><figcaption></figcaption></figure>

7. 서비스 환경 등록 항목에, 아래 내용을 참고하여 네이버 지도를 표시할 모든 도메인 주소를 추가합니다.

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FFBPh8yHUQt68G8YEC8Hl%2F12_%EC%84%9C%EB%B9%84%EC%8A%A4%20URL2.png?alt=media&amp;token=3e734132-4401-45b0-9b51-175ac9c698fd" alt=""><figcaption></figcaption></figure>

* Web 서비스 URL 입력 칸에 <http://qshop.ai> 를 입력하고, **\[＋ 추가]** 버튼을 클릭합니다.
* Web 서비스 URL 입력 칸에 사용하시는 커스텀 도메인을 예시와 같은 형태로 입력하고, **\[＋ 추가]**&#xBC84;튼을 클릭합니다. (예 - <http://mydomain.com>)

{% hint style="info" %}
한글도메인을 사용하시는 경우, 아래 링크를 통해 퓨니코드로 변환하여 등록을 합니다.\
\[[한글도메인 퓨니코드 변환하기](https://www.inplaza.com/puny/index.php)]
{% endhint %}

8. 입력한 정보를 확인하신 후 **\[등록]**&#xBC84;튼을 클릭하여 Application 생성을 마무리 합니다.

</details>

<details>

<summary><strong>4. Application key 적용하기</strong></summary>

1. \[**3.** **Application 만들기]**&#xACFC;정에서 등록한 Application의 **\[인증 정보]** 버튼을 클릭합니다.

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2Fm7CMZWE9jl6ZUtyd2mhB%2F13_%EC%9D%B8%EC%A6%9D%EC%A0%95%EB%B3%B42.png?alt=media&amp;token=b5fdc8c6-4f1a-43c2-b6cb-b407726f41b2" alt=""><figcaption></figcaption></figure>

2. Application key 항목의 **Client ID** 와 **Client Secret** 값을 복사합니다.

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FvJpVikBviclWx7LrrLB0%2F14_KEY2.png?alt=media&amp;token=038c6067-458e-4586-8342-87e3e00fdbf6" alt=""><figcaption></figcaption></figure>

3. 4-3. 사이트 **\[관리자 페이지 > 성장센터 > 네이버]** 페이지의 **네이버 지도** 탭으로 이동합니다.
4. 사용함 체크를 한 후 \[2번 과정]에서 복사한 **Client ID 와 Client Secret** 값을 붙여넣고 오른쪽 위 저장 버튼을 클릭합니다.

<figure><img src="https://641624378-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqwj5uwp8v68jk4VznncE%2Fuploads%2FqMJbYeR7BeweGviF2hN3%2F15_AD.png?alt=media&amp;token=fa48a356-fcb5-42c4-bf19-e3eae7f70e0e" alt=""><figcaption></figcaption></figure>

</details>

<details>

<summary><strong>5. 네이버 지도 블록 추가하기</strong></summary>

1. 에디터에 들어갑니다.
2. 왼쪽 추가 패널을 통해 네이버 지도 블록을 추가합니다.
3. \[[네이버 지도 블록](/customer_support/guide/design/editor/contents/advanced/navermap.md)] 가이드를 참고하여 지도 등록 및 설정을 합니다.

</details>