내 가게 위치를 홈페이지에 넣고 싶거나, 블로그 포스팅에 특정 장소 지도를 삽입하고 싶을 때 카카오맵의 ‘지도 퍼가기’ 기능이 정말 유용해요. 별도로 개발자가 없어도, API 키 없이도 간단하게 지도를 웹페이지에 넣을 수 있거든요.
이 글에서는 카카오맵 지도 퍼가기 기능을 PC와 모바일에서 각각 어떻게 사용하는지, 퍼가기 코드를 어떻게 활용하는지 단계별로 설명해 드릴게요. 네이버 블로그, 티스토리, 워드프레스 등 다양한 플랫폼에서 적용하는 방법도 알아볼게요.
카카오맵 지도 퍼가기란 무엇인가요
퍼가기 기능의 개념과 장점
카카오맵 지도 퍼가기는 카카오맵에서 원하는 위치의 지도 HTML 코드를 생성해서 내 웹사이트나 블로그에 iframe 형태로 삽입할 수 있는 기능이에요. 개발 지식이 없어도 복사-붙여넣기만으로 지도를 넣을 수 있어요.
- 별도 비용 없음: API 키나 유료 플랜 없이 무료로 이용 가능
- 실시간 업데이트: 카카오맵이 업데이트되면 삽입된 지도도 자동 반영
- 다양한 크기 설정: 원하는 가로·세로 크기로 지도 사이즈 조절 가능
- 인터랙티브 지도: 방문자가 지도를 확대·축소·이동 가능
단순히 지도 이미지를 캡처해서 넣는 것과 달리, 퍼가기로 삽입한 지도는 방문자가 직접 조작할 수 있어서 훨씬 실용적이에요.
퍼가기 지도 vs API 지도 차이
카카오맵에는 퍼가기 외에도 카카오맵 API를 활용한 방법이 있어요. 두 가지는 용도가 달라요.
- 퍼가기: 코딩 불필요, API 키 불필요, 위치 표시·경로 안내 등 기본 기능만 가능
- API: 개발 지식 필요, API 키 발급 필요, 마커 커스터마이징·이벤트 처리 등 고급 기능 가능
단순히 위치를 보여주는 용도라면 퍼가기로 충분하고, 더 복잡한 기능이 필요하다면 API를 활용하는 것이 좋아요.
PC에서 카카오맵 지도 퍼가기 방법
1단계: 원하는 장소 검색하기
먼저 카카오맵(map.kakao.com)에 접속해서 퍼가기할 장소를 검색해요. 장소명이나 주소를 검색하면 해당 위치가 지도에 표시돼요.
- 카카오맵(map.kakao.com) 접속
- 검색창에 장소명 또는 주소 입력
- 검색 결과에서 원하는 장소 클릭
- 지도 중앙에 원하는 위치가 표시되는지 확인
2단계: 퍼가기 버튼 찾기
장소를 선택하면 왼쪽 패널에 장소 정보가 나타나요. 여기서 ‘공유하기’ 또는 장소 상세 페이지에서 ‘지도 퍼가기’ 옵션을 찾을 수 있어요.
- 장소 상세 정보 창의 상단 아이콘 메뉴 확인
- ‘공유’ 버튼 클릭 후 ‘지도 퍼가기’ 선택
- 또는 지도 우측 상단의 공유 아이콘 클릭
메뉴 위치는 카카오맵 UI 업데이트에 따라 약간 달라질 수 있어요. 보이지 않는다면 장소 정보 창 하단의 ‘더보기’를 눌러보세요.
3단계: 크기 설정 및 코드 복사
퍼가기 창이 열리면 지도 크기를 설정하고 HTML 코드를 복사할 수 있어요.
- 가로·세로 크기 설정: 픽셀 단위로 원하는 크기 입력 (기본값: 640×360)
- 미리보기 확인: 설정한 크기로 지도가 어떻게 보이는지 미리 확인
- 코드 복사: HTML 코드 영역에서 ‘복사’ 버튼 클릭
복사된 코드는 iframe 형태로 생성돼요. 이 코드를 웹사이트의 HTML 편집 창에 붙여넣으면 지도가 삽입돼요.
모바일에서 카카오맵 지도 퍼가기
카카오맵 앱에서 퍼가기
스마트폰 카카오맵 앱에서도 지도 퍼가기 기능을 이용할 수 있어요. 단, 모바일에서는 PC보다 접근 방법이 조금 달라요.
- 카카오맵 앱에서 장소 검색 및 선택
- 장소 상세 페이지에서 ‘공유하기’ 아이콘 탭
- ‘지도 퍼가기’ 또는 ‘HTML 코드’ 옵션 선택
- 코드 복사 후 메모장이나 메일로 전송
모바일에서 복사한 코드는 PC로 이동해서 웹사이트 편집에 활용하는 것이 더 편리해요.
모바일 브라우저에서 퍼가기
스마트폰 브라우저로 map.kakao.com에 접속해도 퍼가기 기능을 이용할 수 있어요. PC 버전 웹사이트를 요청하면 PC와 동일한 인터페이스로 이용할 수 있어요. 모바일 브라우저에서 ‘데스크톱 버전 보기’를 선택한 후 진행해 보세요.
다양한 플랫폼에 지도 삽입하는 방법
티스토리 블로그에 지도 삽입하기
티스토리는 HTML 편집 모드를 지원하기 때문에 카카오맵 퍼가기 코드를 쉽게 삽입할 수 있어요.
- 티스토리 글쓰기 창에서 ‘기본 모드’ 대신 ‘HTML’ 탭 선택
- 원하는 위치에 복사한 iframe 코드 붙여넣기
- 다시 ‘기본 모드’로 전환해 지도가 잘 표시되는지 확인
- 글 발행 후 실제 페이지에서 지도 작동 여부 확인
워드프레스에 지도 삽입하기
워드프레스 블록 에디터(구텐베르크)에서는 ‘HTML’ 블록을 추가해서 퍼가기 코드를 삽입할 수 있어요.
- 새 블록 추가 → ‘커스텀 HTML’ 블록 선택
- 복사한 iframe 코드 붙여넣기
- ‘미리보기’ 탭으로 전환해 지도 표시 확인
- 일부 보안 설정에서 iframe이 차단될 경우 플러그인(Advanced iFrame 등) 활용
네이버 블로그에 지도 삽입하기
네이버 블로그는 보안 정책상 외부 iframe 삽입이 제한돼요. 네이버 블로그에서는 카카오맵 퍼가기 대신 네이버 지도 퍼가기를 사용하거나, 카카오맵 링크를 텍스트로 안내하는 방법이 현실적이에요.
퍼가기 지도 활용 팁과 주의사항
반응형 지도 설정하기
모바일에서도 지도가 잘 보이려면 반응형으로 설정하는 것이 좋아요. iframe의 width를 픽셀 대신 100%로 설정하면 화면 크기에 따라 자동으로 조절돼요.
- 기본 코드: width=”640″ height=”360″
- 반응형 코드: width=”100%” height=”360″ (높이는 고정, 가로만 유동적)
- 완전 반응형은 CSS로 별도 처리 필요
퍼가기 지도의 제약 사항
카카오맵 퍼가기 지도를 사용할 때 알아두어야 할 제약 사항이 있어요.
- 상업적 목적의 대량 사용은 카카오 이용약관 확인 필요
- 오프라인 환경에서는 지도가 로드되지 않음
- 카카오맵 서비스 이용 약관 및 저작권을 준수해야 해요
- 일부 보안 강화 사이트에서는 iframe이 차단될 수 있음
카카오맵 지도 퍼가기 핵심 정리
카카오맵 지도 퍼가기는 개발 지식 없이도 내 웹사이트나 블로그에 인터랙티브 지도를 무료로 삽입할 수 있는 편리한 기능이에요. 가게 위치 안내, 행사 장소 안내, 여행 코스 표시 등 다양한 용도로 활용할 수 있어요.
PC에서 카카오맵 접속 → 장소 검색 → 퍼가기 버튼 → 크기 설정 → 코드 복사 → 웹사이트 HTML에 붙여넣기 순서로 진행하면 5분 안에 지도를 삽입할 수 있어요. 더 복잡한 기능이 필요하다면 카카오맵 API를 활용해 보세요.