카페24 쇼핑몰과 함께 오프라인 매장을 운영하고 계신가요? 온라인에서 브랜드를 알게 된 고객이 오프라인 매장을 방문할 수 있도록 위치를 안내하고 싶으실 거예요.
단순히 주소 텍스트만 적어두면 고객이 직접 검색해야 하는 번거로움이 있죠. 그렇다고 이미지로 된 약도를 만들자니 모바일에서 확대도 안 되고, 길찾기 연동도 안 되니 불편합니다.
지도를 쇼핑몰에 바로 삽입할 수 있다면 고객 경험이 훨씬 좋아질 텐데요.
카페24 쇼핑몰에 네이버 지도를 삽입하는 것이 가능합니다. 네이버 클라우드 플랫폼에서 제공하는 Map API를 활용하면 되죠.
직접 작업해 본 경험을 바탕으로 삽입 방법과 주의할 점을 정리해 드릴게요.
- 카페24 쇼핑몰에 네이버 지도 삽입이 가능할까?
- 카페24 쇼핑몰 네이버 지도 삽입 시 어려웠던 점
- 카페24 쇼핑몰 네이버 지도 삽입 시 고려할 점
- 삽입된 네이버 지도 디자인 커스텀
카페24 쇼핑몰에 네이버 지도 삽입이 가능할까?
카페24 쇼핑몰도 HTML로 이루어진 웹페이지이기 때문에 네이버 지도 API를 어렵지 않게 삽입할 수 있어요. 구글 지도, 카카오 지도 등 다양한 지도 플랫폼이 있지만, 국내에서는 역시 네이버 지도 활용을 많이 하시죠.
네이버 지도 삽입 절차
간단하게 절차를 정리하면 다음과 같습니다:
- 네이버 클라우드 플랫폼 가입 – 결제 수단 등록
- Application 등록 – Maps 서비스 선택
- Client ID(Key) 확인 – 발급된 키 복사
- 호출 스크립트 삽입 – 카페24 쇼핑몰에 코드 적용
이 과정을 거치면 카페24 쇼핑몰 페이지에 네이버 지도가 표시되고, 고객이 매장 위치를 한눈에 확인할 수 있게 됩니다.
카페24 쇼핑몰 네이버 지도 삽입 시 어려웠던 점
이 작업을 AI와 함께 진행하다 보니 한 가지 문제가 있었어요. AI가 예전 버전의 호출 스크립트를 계속 제안해서, 키를 정상적으로 입력해도 API가 호출되지 않는 현상이 발생했습니다.
네이버 지도 API를 호출할 때는 반드시 "?ncpKeyId=" 파라미터를 사용해야 합니다.
예전에는 파라미터의 호출 스크립트를 사용했지만, 현재 네이버 클라우드 플랫폼에서는 ncpKeyId 파라미터로 Client ID를 전달하는 방식이 표준이에요.
이 부분을 놓치면 아무리 키를 정확하게 입력해도 지도가 표시되지 않으니 꼭 확인하세요.
카페24 쇼핑몰 네이버 지도 삽입 시 고려할 점
네이버 클라우드 플랫폼을 통해 제공되는 API들은 무료 사용량이 정해져 있고, 초과하면 비용이 청구됩니다. 이 부분을 꼭 인지하고 사용하셔야 해요.
네이버 지도 API 사용 비용
| API 종류 | 무료 제공량 | 용도 |
|---|---|---|
| Dynamic Map | 월 6,000,000회 | 지도 표시 |
| Geocoding | 월 3,000,000회 | 주소 → 좌표 변환 |
일반적인 쇼핑몰 트래픽이라면 무료 범위 내에서 충분히 사용할 수 있어요. 하지만 여러 매장 위치를 표시하거나 트래픽이 많은 쇼핑몰이라면 사용량을 주기적으로 확인하는 것이 좋습니다.
Geocoding API 절약 팁
Geocoding API는 주소를 좌표로 변환할 때 사용되는데, 표시하는 주소가 여러 개일수록 빠르게 소진될 수 있어요. 하지만 각 주소의 좌표를 한 번만 파악한 뒤 코드에 직접 입력(하드코딩)하면 Geocoding API 없이도 지도 표현이 가능합니다.
계정 연결 시 주의사항
네이버 클라우드 플랫폼 계정은 해당 브랜드의 계정으로 연결하는 것을 권장합니다. 개인 계정으로 연결하면 추후 담당자가 변경되거나 다양한 설정을 해야 할 때 관리가 어려워질 수 있거든요.
삽입된 네이버 지도 디자인 커스텀
네이버 지도를 삽입했다면, 브랜드에 맞게 디자인을 수정하고 싶으실 수 있어요. 다행히 몇 가지 요소는 커스텀이 가능합니다.
커스텀 가능한 요소
주소 말풍선 (InfoWindow)
지도에 표시되는 주소 정보 말풍선의 디자인을 수정할 수 있어요. HTML과 CSS를 활용해서 브랜드 컬러에 맞게 스타일링이 가능하죠.
위치 마커 (Marker)
기본으로 제공되는 빨간색 마커 대신, 브랜드 로고나 커스텀 아이콘으로 변경할 수 있습니다. 이미지 파일을 준비해서 마커 옵션에 적용하면 돼요.
이런 디자인 커스텀을 통해 단순히 지도만 삽입하는 것이 아니라, 브랜드 아이덴티티를 반영한 매장 안내 페이지를 만들 수 있습니다.
카페24 쇼핑몰에 네이버 지도를 삽입하면 고객에게 더 나은 매장 안내 경험을 제공할 수 있어요. 네이버 클라우드 플랫폼 가입부터 API 키 발급, 코드 삽입까지 한 번 세팅해 두면 이후에는 별도의 관리 없이도 지도가 잘 표시됩니다.
다만 API 호출 스크립트에서 “?ncpKeyId=” 파라미터를 사용해야 한다는 점, 그리고 무료 사용량 초과 시 비용이 발생할 수 있다는 점은 꼭 기억해 두세요.
오프라인 매장을 운영하고 계신다면 카페24 온라인 쇼핑몰에 네이버 지도를 삽입해서 온·오프라인 연결 경험을 강화해 보시는 것을 추천드립니다.
