카카오맵 홈페이지에 넣는 방법: HTML 태그 복사와 지도 크기 설정

카카오맵을 홈페이지에 넣는 방법을 단계별로 안내합니다. 장소 검색, HTML 태그 복사, 지도 크기 설정, 일반지도와 이미지지도 선택, 워드프레스 삽입 방법을 확인하세요.

매장·학원·병원·사무실 홈페이지에 오시는 길을 안내하려면 카카오맵 지도를 페이지 안에 바로 넣는 방법이 편리합니다. 카카오맵의 HTML 태그 복사 기능을 쓰면 개발 작업 없이 지도를 넣을 수 있습니다.

먼저 알아두세요

이 방법은 카카오맵에서 생성한 코드를 복사해 붙여 넣는 방식이라 개발자 앱 키를 직접 만들 필요가 없습니다. 지도 기능을 자유롭게 개발하는 카카오맵 API는 별도의 설정과 앱 키가 필요한 다른 방식입니다.

카카오맵 홈페이지에 넣는 순서

카카오맵을 열고 홈페이지에 표시할 상호명이나 주소를 검색합니다. 검색 결과가 여러 개라면 주소와 전화번호를 확인해 정확한 장소를 선택하세요.

장소 정보 카드의 공유 아이콘을 누른 뒤 HTML 태그 복사를 선택합니다. URL 복사는 지도로 이동하는 링크만 복사하는 기능이므로, 페이지 안에 지도를 표시하려면 HTML 태그 복사를 선택해야 합니다.

HTML 태그 복사 창 위쪽의 지도크기에서 너비와 높이를 픽셀(px) 단위로 바꿀 수 있습니다. 예를 들어 640 × 360은 너비 640px, 높이 360px을 뜻합니다. 숫자를 변경하면 아래 미리보기에서 표시 범위를 확인할 수 있습니다.

모바일 화면도 함께 고려하세요.
PC 화면에 맞춰 지도를 너무 넓게 만들면 휴대전화에서 오른쪽이 잘릴 수 있습니다. 에코스튜디오가 제작한 홈페이지는 지도 영역을 화면 너비에 맞게 조정하지만, 다른 홈페이지에서는 반응형 처리가 별도로 필요할 수 있습니다.

소스 생성하기를 누르면 일반지도와 이미지지도를 선택할 수 있습니다. 일반지도는 방문자가 움직이고 확대할 수 있고, 이미지지도는 그럴 수 없습니다.

특별한 이유가 없다면 일반지도를 선택하세요. 방문자가 주변 도로나 건물을 살피고 위치를 확대해 볼 수 있어 오시는 길 안내에 더 적합합니다. 이미지지도는 화면에 고정된 지도 이미지이므로 확대·축소하거나 드래그해 이동할 수 없습니다.

코드 상자를 클릭한 뒤 전체 소스를 복사합니다. 처음부터 끝까지 일부가 빠지지 않게 복사해야 지도가 정상적으로 표시됩니다.

에코스튜디오 제작 홈페이지: 관리자 페이지에서 사이트 관리 → 설정 → 지도로 이동해 카카오맵 HTML 입력란에 붙여 넣고 저장합니다.
워드프레스 블록 편집기: 사용자 정의 HTML 블록을 추가해 코드를 붙여 넣습니다.
다른 편집기: 일반 문단이나 텍스트 입력란이 아닌 HTML·코드 입력 영역을 사용합니다.

저장한 뒤에는 실제 페이지를 새 창이나 시크릿 창에서 열어 지도 이동과 확대·축소가 잘 되는지 확인하세요.

이 글에서 설명한 HTML 태그 복사 방식은 앱 키를 직접 발급하지 않아도 됩니다. 검색 결과 연동이나 맞춤 마커처럼 기능을 직접 개발하는 카카오맵 API는 별도의 개발자 설정과 앱 키가 필요합니다.

일반지도를 선택하면 이동과 확대·축소가 가능합니다. 이미지지도는 고정된 이미지이므로 조작할 수 없습니다.

가능합니다. 카카오맵에서 원하는 크기로 소스를 다시 생성해 기존 코드를 교체하는 방법이 가장 쉽습니다. 홈페이지가 반응형으로 제작됐다면 화면 크기에 맞춰 자동 조정되도록 별도 설정할 수도 있습니다.

홈페이지 수정이 어렵다면

지도 삽입부터 모바일 화면 최적화까지 확인해 드립니다.

참고: 카카오의 지도 기능은 제공 방식에 따라 차이가 있습니다. 개발 기능이 필요한 경우 카카오맵 공식 문서와 카카오맵 Web API Wizard를 확인하세요.

홈페이지를 새로 만드실 계획이라면 홈페이지 제작 페이지에서 상품별 가격과 제작 범위를 안내해드립니다.