카카오맵 지도 홈페이지에 넣기 — HTML 태그 복사·반응형·안 뜰 때
키를 발급받지 않아도 됩니다. 카카오맵에서 지도를 찾아 「내보내기」를 누르면 붙여넣을 태그를 그대로 줍니다. 5분이면 끝납니다.
「개발자 등록」이니 「API 키」니 하는 말을 보고 덮으셨다면, 그건 다른 방법입니다. 아래는 그게 필요 없는 쪽입니다.
카카오맵을 엽니다
map.kakao.com 으로 갑니다. 로그인은 필요 없습니다.
내 주소를 찾습니다
검색창에 주소나 상호를 넣고 목록에서 내 위치를 고릅니다. 예를 들어 경복궁을 찾는다면 「경복궁」이라고 치면 됩니다.
「내보내기」를 누릅니다
지도 오른쪽 위에 내보내기가 있습니다.
「HTML 태그 복사」를 누릅니다
몇 가지가 뜨는데 그중 HTML 태그 복사입니다. 누르면 소스가 나옵니다. 그대로 복사하시면 됩니다.
복사한 것은 이렇게 생겼습니다. 길지만 손대실 필요 없습니다.
<a href="https://map.kakao.com/?urlX=494895&urlY=1132792…" target="_blank">
<img width="504" height="310" src="https://staticmap.kakao.com/map/mapservice?…">
</a>…사이트에 붙여넣습니다
중요한 것은 「HTML 을 받는 칸」에 넣는 것입니다. 글자만 받는 칸에 넣으면 지도 대신 태그가 글자로 보입니다.
지도를 넣을 페이지를 편집기로 열고 「사용자 정의 HTML」 블록을 추가한 뒤 그 안에 붙여넣습니다. 클래식 편집기라면 「텍스트」 탭으로 바꾸고 붙여넣으시면 됩니다.
「비주얼」 탭에 그냥 붙이면 안 됩니다. 편집기가 꺾쇠를 글자로 바꿔 버립니다.
워드프레스 관리자에서 왼쪽 「사이트 관리」를 누르고, 그 아래 「설정」으로 들어갑니다. 「지도」 묶음에 「카카오맵 지도 HTML 붙여넣기 (선택)」 칸이 있습니다. 복사한 것을 그 칸에 붙여넣고 저장을 누르면 끝입니다.
홈페이지의 「오시는 길」 자리에 바로 나옵니다. 이 칸을 비워 두시면 약도 그림이 대신 나옵니다 — 지도를 넣기 전에도 그 자리가 비어 보이지는 않습니다.
자주 막히는 곳
모바일에서 오른쪽이 잘려요
카카오가 주는 태그는 가로 504픽셀로 고정되어 있습니다. 그래서 좁은 화면에서는 오른쪽이 잘립니다.
지도를 감싼 자리에 이 두 줄을 넣으면 화면 폭에 맞게 줄어듭니다.
.map-wrap{max-width:100%}
.map-wrap img{max-width:100%;height:auto}붙여넣으시면 화면 폭에 맞게 저희가 줄여 드립니다. 태그를 고치실 필요 없습니다.
지도 아래 「카카오맵 · 지도 크게 보기」 줄이 안 보여요
카카오가 그 줄에 hide 라는 이름을 붙여서 보냅니다. 테마에 따라 그 이름이 「숨김」으로 읽혀 줄이 사라집니다.
.hide{display:block} 한 줄로 다시 보이게 할 수 있습니다. 카카오 로고와 「지도 크게 보기」는 출처 표기라 남겨 두는 것이 맞습니다.
지도가 아예 안 떠요
세 가지를 봐 주세요.
| 확인할 것 | 어떻게 |
|---|---|
| 태그가 잘려서 붙었나 | 처음 <a 부터 마지막 </div> 까지 전부 들어갔는지 |
| 붙인 칸이 HTML 을 받는 칸인가 | 「글자만」 받는 칸에 넣으면 태그가 글자로 보입니다 |
| 편집기가 꺾쇠를 바꿔 놓지 않았나 | 화면에 <a href… 처럼 보이면 그렇습니다. 코드 칸에 다시 넣으십시오 |
확대·축소가 안 돼요
이 방법으로 넣은 지도는 움직이지 않는 사진입니다. 대신 누르면 카카오맵으로 넘어갑니다.
오시는 길 약도로는 이걸로 충분합니다. 손으로 끌어 옮기는 지도가 필요하시면 그건 앱키를 발급받는 다른 방법이라, 필요하시면 말씀해 주세요.
한 줄 정리
| 키 발급 | 필요 없습니다 |
| 걸리는 시간 | 5분 |
| 나오는 것 | 정적 지도 사진 + 카카오맵 링크 |
| 확인일 | 2026년 9월 4일 · 경복궁으로 확인 |
직접 하기 어려우신가요?
읽으신 내용대로 저희가 대신 해 드립니다. 무엇이 필요한지부터 함께 정해요.
