brunch

매거진 워드프레스 활용 이야기

라이킷 7 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by oksambari Jul 21. 2022

#1. 카카오 지도 API 사용 설정

카카오 지도 API & 워드프레스 REST API

전체 과정 중 초기 카카오 지도 API를 워드프레스 사이트에서 사용하도록 하는 기본 연결 과정을 정리해 봅니다. 다음의 것들이 포함이 되겠네요.

1. 카카오 지도 API 사이트에서 웹용 js키 발급 (카카오 계정만 있으면 뚝딱)

2. 푸터(footer) 쪽에 wp_enqueue_script로 api 연결 (클러스터러, 주소 변환 서비스도 연결 : &libraries=services,clusterer)

3. 주소 표시를 위한 js 파일 연결 (api 연결 다음에 위치!)

카카오 지도 API란? (https://apis.map.kakao.com/)

Kakao 지도 API는 웹사이트와 모바일 애플리케이션에서 지도를 이용한 서비스를 제작할 수 있도록 다양한 기능을 제공하는 Application Programming Interface(애플리케이션 프로그램 인터페이스)입니다.

지도를 내 사이트의 일정 공간에 넣었을 때, 마우스를 가지고 드래그를 하거나 클릭을 하는 등 어떤 행동을 취하면, 지도가 확대도 되고 거기에 맞는 정보들도 표시가 되어야 합니다. 이러려면 지도의 정보들이 있는 서버와 계속 통신을 하면서 데이터를 가져다가 표시되어야 하겠죠. 이러한 복잡한 중간 단계는 이미 잘 개발이 되어 있는 겁니다.

API 소개 사이트에서 저는 워드프레스 사이트에 지도를 넣으려는 것이므로, 'Web'을 선택해서 클릭합니다.

지도 API를 가지고 할 수 있는 것들이 나옵니다. (이번 정리하는 내용은 최소한의 기본 골격 만들기까지만 다룸)

그럼 이제 본격적으로 사이트에 환경을 설정하는 것을 진행해 봅니다.

지도의 데이터가 있는 서버와 통신을 할 때, 서버는 아무 사이트에서 온 요청까지 다 처리를 할 수는 없겠죠. 그래서 최소한 키(key)와 사이트 지도가 사용될 주소를 미리 약속해 놓고 통신을 하게 됩니다.

1. 카카오 지도 API 사이트에서 웹용 js키 발급 (카카오 계정만 있으면 뚝딱)

카카오 개발자 사이트(https://developers.kakao.com/)에서 카카오 계정으로 로그인을 하면 '내 어플리케이션' 페이지에서 어플리케이션을 하나 만들 수 있습니다. 이름을 적고 저장을 하면 자동으로 키가 생성이 돼 있는 걸 볼 수 있습니다. 다음으로 할 것은 이게 어느 곳에서 쓰일지 '플랫폼' 메뉴를 클릭, Web에서 쓸 것이므로 사이트 도메인을 적고 저장합니다. 이러면 일단 개발자 도구에서 할 일은 끝났습니다.

> 키 발급, 사이트 주소 등록 끝.

2. 푸터(footer) 쪽에 wp_enqueue_script로 api 연결 (클러스터러, 주소 변환 서비스도 연결 : &libraries=services,clusterer)

지도 API를 페이지에 작동시키는 건 API 연결 스크립트를 지도를 표시할 페이지에 포함시키면 끝입니다.

워드프레스는 열리는 페이지의 헤드 태그 안이나 바디 태그가 끝나기 전에 스크립트 파일 또는 스타일 파일을 연결할 수 있는 Hook을 제공하고 있습니다.

> https://developer.wordpress.org/reference/hooks/wp_enqueue_scripts/

이 연결고리를 통해 다음 지도 API의 스크립트가 페이지에 동작하도록 조치합니다.

css 파일은 wp_enqueue_style로, js 파일은 wp_enqueue_script로 연결할 수 있습니다.

https://developer.wordpress.org/themes/basics/including-css-javascript/

코드는 익숙하질 않으면 문서에서 복사해다가 파일 이름만 바꿔서 쓰셔도 됩니다.

자식 테마의 functions.php 파일에 이 코드들을 적어주겠습니다.

내용 정리를 위해 'map-test'라는 슬러그를 가진 페이지를 하나 만들었고, 이 페이지에 카카오 지도 api가 동작할 스크립트 주소 > 그다음 지도 표시 및 컨트롤을 하기 위한 내 스크립트를 적기 위한 파일이 다음에 오게 조치한 내용입니다.

이제 브라우저에서 페이지 주소를 열어서 파일이 페이지에 제대로 포함이 되는지 확인합니다. 키값이 들어간 api 호출 주소를 등록만 했는데 그 아래로 알아서 지도 관련 스크립트도 3개 따라서 연결이 되었고, 내가 작성할 테스트용 js 파일도 맨 마지막에 연결된 것을 확인하면 됩니다.

※app key 다음에 기본 지도 기능 외에, 주소를 가지고 위도 경도를 계산해 주는 서비스와 마커들을 지도가 작을 때 합쳐서 보여주는 클러스터러 기능을 추가하려면 라이브러리를 추가하라는 문구만 살짝 더해주면 됩니다. >> ~~~(APP KEY값)&libraries=services,clusterer

위에서 로드될 파일의 순서대로 이렇게 정의를 해서 파일들이 순서대로 연결이 되었습니다.

1> wp_enqueue_script( 'kakao-map-api' );

그다음

2> wp_enqueue_script( 'kakao-map-test' );

3번도 자동으로 완료되었네요.

3. 주소 표시를 위한 js 파일 연결 (api 연결 다음에 위치!)

지도 API를 이용한 샘플들 중 간단한 마커를 지도에 표시하는 것을 테스트해 봤습니다.

> https://apis.map.kakao.com/web/sample/draggableMarker/

우선 페이지에 지도가 표시될 영역을 만들어 줘야겠지요. 페이지 편집에서 HTML 요소를 넣어서 ID는 'map', 그리고 최소 높이 500px을 가진 영역을 하나 만들어 줬습니다.

다음, 테스트할 샘플의 'Javascript' 코드들을 복사해다가 위에서 연결해 놓은 'kakao-map-test.js'에 그대로 붙여 넣기를 했습니다. 페이지 편집 시 'map'이라고 이름 지었던 html 영역은 document.getElementById('map') 코드를 통해 연결이 되는 겁니다. 즉 이 영역에다가 지도를 불러다 표시를 해 줍니다.