대부분의 개발자들이 거대한 데이터베이스나 기술 체계를 구축하기란 어려운 일이다. 카카오, 네이버, 구글 등의 회사들에서는 이런 개발자들을 위해 자신의 데이터베이스를 비롯한 다양한 기술들을 빌려쓸 수 있는 API를 제공하고 있다. 사용 횟수 또는 플랫폼 등에 따라 유료, 무료가 나뉘어지기도 하는데 본 펜타애플 팀은 비용, 사용 편의성, 접근성 등을 감안하여 카카오 API 를 선택하였다. 참고로 카카오 API 는 카카오 계정 로그인, 검색 엔진 등 다양한 서비스를 제공하고 있는데, 우리는 그 중에서도 지도 API를 중점적으로 사용하였다.
API란?
API는 개발자가 소프트웨어 상의 여러 가지 처리를 할 수 있도록 그 사이에서 도와주는 일종의 프로그램 인터페이스다. 예를 들어, 우리가 C언어로 printf("Hello world!"); 를 입력했을 때, 사실 컴퓨터 입장에서는 저 문장만 보고 어떠한 수행을 바라는지 알 수 없다. 이 때, printf를 입력받으면 해당 문자열을 출력하도록 컴퓨터 내 여러 함수들을 짜놓은 C언어 API가 작동함으로써 'Hello world!'를 우리가 볼 수 있게 되는 것이다.
이 원리를 우리가 사용한 카카오 지도 API에 적용해보자.
var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다위는 가장 기본적인 카카오 지도를 생성하는 코드이다. mapContainer와 mapOption은 변수명이지만, kakao.maps.Map은 css, JS, html 어디에서도 일반적으로 사용되는 함수가 아니라 카카오라는 기업의 거대한 데이터베이스에 접근할 수 있도록 해주는 카카오의 함수이다. 그러니까 우리는
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 사용하세요"></script>APP KEY를 발급받고 이 간단한 한 줄의 코드를 써주는 것만으로 카카오에서 미리 만들어놓은 수많은 함수들, 즉 카카오 API를 통해 카카오의 수많은 기능들을 가져와 개발 중인 웹/앱에 적용시킬 수 있는 것이다. (자신의 카카오 계정과 자신이 만들 홈페이지의 도메인 등을 통해 kakao developers에서 자신만의 APP KEY를 발급받아야 한다.)
사용 방법
우리의 친절한 카카오는 개발자들을 위해 정말 다양한 Sample들을 kakao developers에 업로드해놓았다. (https://apis.map.kakao.com/web/sample/)
이제 우리의 능력은 위 샘플 코드들을 보고 카카오 API 상에서의 제공 영역이라 우리가 임의로 변경하지 못하는 부분과 변경할 수 있는 부분을 잘 분리 및 파악하여, 제작하고자 하는 홈페이지에 자신이 원하는 방식으로 응용시키는 데에 달려있다.
예시
1. 다른 이미지로 마커 생성하기
여기 카카오 API Sample 홈페이지에 올라와 있는 지도 위 '다른 이미지로 마커 생성하기' 코드가 있다.
var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
var imageSrc = 'https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/marker_red.png', // 마커이미지의 주소입니다
imageSize = new kakao.maps.Size(64, 69), // 마커이미지의 크기입니다
imageOption = {offset: new kakao.maps.Point(27, 69)}; // 마커이미지의 옵션입니다. 마커의 좌표와 일치시킬 이미지 안에서의 좌표를 설정합니다.
// 마커의 이미지정보를 가지고 있는 마커이미지를 생성합니다
var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize, imageOption),
markerPosition = new kakao.maps.LatLng(37.54699, 127.09598); // 마커가 표시될 위치입니다
// 마커를 생성합니다
var marker = new kakao.maps.Marker({
position: markerPosition,
image: markerImage // 마커이미지 설정
});
// 마커가 지도 위에 표시되도록 설정합니다
marker.setMap(map); 
펜타애플의 잇토피아 홈페이지에서는 가게 별 등록된 사용자의 리뷰 수에 따라 가게 마커의 이미지를 씨앗-> 새싹-> 꽃 의 순으로 변경하고자 했다. 그리고 샘플 코드 분석을 통해 imageSrc, imageSize, imageOption, markerPosition 등의 변수 사용을 통해 마커의 위치, 이미지, 크기를 우리가 원하는 방식으로 응용시킬 수 있음을 확인하였다. 아래는 우리가 사용한 코드와 실행 결과이다.
이렇게 if문을 활용하여 review_num에 따른 각기 다른 마커 이미지를 생성시켜 주었다.
2. 키워드로 장소검색하고 목록으로 표출하기
이번엔 Sample 중 '키워드로 장소검색하고 목록으로 표출하기'를 한 번 살펴보자. 상당히 긴 코드로 이루어져 있지만 찬찬히 분석하다 보면 결국 카카오의 데이터베이스에 접근하여 키워드로 해당 검색 결과를 불러오는 코드는
var ps = new kakao.maps.services.Places(); 이 한 줄이라는 것을 알 수 있다.
그런데, kakao.maps.services.Places() 함수는 카카오 지도 검색 엔진에 접근만 시켜주기 때문에 그 검색 결과는 카카오 내 검색 알고리즘을 따를 수밖에 없다. 무슨 말이냐면, 우리는 분명 이대 근처 맛집 홈페이지를 만들고 있었는데 모미지를 치면
이렇게 1번에 광주의 모미지 가게가 뜨는 것뿐만 아니라 무려 히로시마까지 봐야 하는 상황에 직면하는 것이다.
이런 경우, 우리는 분명히 카카오의 API를 빌려와서 쓰고 있는 입장이기 때문에 이렇게 검색이 되는 과정이나 알고리즘 자체를 변경시킬 수는 없다. 대신, 결과물 자체는 그대로 받아오고 그걸 지도 위에 나타내는 과정에서 위치 필터링을 거쳐 구현시키는 것은 가능하다.
잇토피아에서 사용된 코드는 아래와 같다.
위 코드를 실행시킬 경우 경도, 위도를 이대 주변으로 제한시켜 해당 범위 내에 존재하는 마커만 지도 위에 생성되게 만들 뿐 아니라, search_num이라는 int 변수를 임의로 설정해줌으로써 검색된 가게가 해당 범위 내에 존재할 경우에만 수를 늘려줌으로써 생성된 마커의 숫자를 순차적으로 할당해주었다.
3. 카테고리 별 마커 생성하기
이번엔 카카오 API의 여러 샘플 코드를 응용하여 제작한 펜타애플의 서비스인 카테고리별 마커 생성하기를 살펴보자. 샘플 코드 중에서도 카테고리별 장소 검색이 있는데, 그 예시와 다른 점이 있다면 우리는 가게 측에서 입력한(카카오 서버 내에 저장되어 있는) 카테고리에 해당하는 장소들이 모두 검색되는 것이 아니라 사용자가 가게를 등록하며 입력한 카테고리에 따라 펜타애플 측 서버에 저장되어있는 카테고리로 필터링이 된다.
결과물부터 먼저 보자면
이렇게 일식 버튼을 누를 경우, 사용자가 일식으로 선택한 가게의 마커만 뜬다. (다시 재클릭을 통해 해제할 경우 원래대로 모든 가게의 마커 생성)
이 또한 onclick 이벤트를 통해 마커 생성에 필터링을 더해준 것인데,
위 코드를 통해 받은 this.value(여기서는 한식) 값이 change_btn 함수(버튼이 눌려져 있는 상태였는지 눌려있지 않은 상태였는지 판단해주는 함수)에서 filtering 함수로 넘어가면,
filtering로 일종의 마커를 만들어주는 함수인데 category로 받은 값을
if(food_category==category) 부분을 통해 저장된 가게들 중 해당 카테고리와 일치하는 가게들만 addMarker_reg 함수로 넘겨 마커가 생성될 수 있도록 만들어준 것이다.
총평
이처럼, 개인 또는 소수 팀 개발자들을 위해 카카오를 비롯한 다양한 기업에서는 상당히 친절한 형태로 소스 코드들을 제공해주고 있다. 이를 만들고자 하는 어플에 적절히 적용시킨다면, 사용자들에게 더 풍부하고 다양한 서비스를 제공할 수 있을 것이다.