현재 학원에서 미니 프로젝트를 진행 중이다. 프로젝트에 도입 예정인 기능 중 주소 데이터를 지도에 마킹하는 기능이 있어 간단하게 리서치해봤다. 직접 담당하는 기능은 아니지만, 카카오 맵 API가 어떻게 동작하는지 궁금하여 직접 사용해보며 사용법을 정리했다.
1. 카카오 앱 생성 및 설정
1. https://developers.kakao.com/ 사이트 접속 > 로그인 > 앱 > 앱 생성
2. 생성한 앱 클릭 > 카카오맵 클릭 > 사용 설정 활성화
3. 플랫폼 키 선택 > JavaScript 키 추가 버튼 클릭
4. 키 이름 입력 > JavaScript SDK 도메인 입력 후 저장
도메인은 http://127.0.0.1:5500 으로 입력했다.
카카오 맵 API는 등록된 도메인에서만 동작하기 때문에 반드시 입력해야 한다.
로컬 개발 환경에서는 VS Code의 Live Server 확장을 사용했는데, Live Server가 기본적으로 127.0.0.1:5500 포트로 실행되기 때문에 해당 주소를 등록했다.
5. 생성된 키 값 복사
2. 지도에 주소 마킹하기
발급받은 JavaScript 키를 appkey 파라미터에 넣고, 원하는 좌표에 커스텀 마커를 표시하는 예제다.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>빵집 마커 띄우기</title>
</head>
<body>
<div id="map" style="width: 100%; height: 500px"></div>
<!-- 카카오 맵 SDK 로드 (appkey에 발급받은 JavaScript 키 입력) -->
<script
type="text/javascript"
src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은_JavaScript_키"
></script>
<script>
// 지도를 표시할 div와 옵션 설정
var mapContainer = document.getElementById("map"),
mapOption = {
center: new kakao.maps.LatLng(37.566826, 126.9786567), // 서울시청 기준
level: 4, // 지도 확대 레벨 (숫자가 작을수록 확대)
};
// 지도 생성
var map = new kakao.maps.Map(mapContainer, mapOption);
// 1. 마커 이미지 경로, 크기, 기준점 설정
var imageSrc = "/assets/images/bakery.png",
imageSize = new kakao.maps.Size(64, 64), // 마커 이미지 크기 (가로 64, 세로 64)
// ⭐ 가로 정중앙(32), 세로 바닥(64)을 지도의 좌표점과 일치시킴
imageOption = { offset: new kakao.maps.Point(32, 64) };
// 2. 마커 이미지 객체 생성
var markerImage = new kakao.maps.MarkerImage(
imageSrc,
imageSize,
imageOption,
),
markerPosition = new kakao.maps.LatLng(37.566826, 126.9786567);
// 3. 마커 생성 후 지도에 표시
var marker = new kakao.maps.Marker({
position: markerPosition,
image: markerImage,
});
marker.setMap(map);
</script>
</body>
</html>3. 실행 결과
4. 느낀 점
생각보다 초기 설정이 간단하고 공식 문서도 잘 정리되어 있어서 도입 난이도는 낮을 것 같다.
다만 JavaScript 키가 소스코드에 그대로 노출된다는 점이 신경 쓰였다. 순수 HTML/JS 환경에서는 Vite나 Webpack 같은 번들러가 없기 때문에 환경변수로 키를 숨기는 것이 불가능하다. 대신 아래 두 가지 방법을 조합해서 최소한의 보안을 유지할 수 있다.
- 도메인 허용 설정으로 제한
카카오 디벨로퍼스에서 허용 도메인을 엄격하게 설정하면, 키가 노출되더라도 등록되지 않은 도메인에서는 사용할 수 없다. - config.js 분리 + .gitignore 등록
키를 별도 파일로 분리하고 .gitignore에 추가해 깃헙에 올라가지 않도록 막는다.
미니 프로젝트 수준에서는 이 두 가지 조합으로 충분할 것 같다.
