워드프레스에 구글 지도 삽입하는 방법

워드프레스 웹사이트에 지도를 추가하는 것은 5분이면 끝나는 간단한 작업입니다. 이는 고객의 신뢰를 구축하고, 지역 SEO를 강화하며, 구매를 더 쉽게 유도하는 데 도움이 됩니다. 하지만 지도가 제대로 표시되고 필요한 기능을 갖추고 있는지 확인하는 데는 몇 시간이 걸릴 수도 있습니다. 또한 모바일 사용자를 고려하지 않으면, 작은 화면에서 지도가 잘려 보인다는 사실을 알아차리지 못할 수도 있습니다.

이 가이드에서는 워드프레스 사이트에 구글 지도를 추가하는 세 가지 옵션(기본 iFrame, 지도 플러그인, 무료 위젯)에 대해 자세히 설명합니다. 또한 어떤 방법이 가장 적합할지 결정할 수 있도록 각 옵션의 문제점과 장단점도 함께 다룹니다.

Watch on youtube

How to Customize and Embed Google Maps on Your WordPress Site

워드프레스에 구글 지도 삽입을 위한 3가지 옵션

옵션 1: 기본 구글 지도 iFrame 사용

구글 지도 iFrame 옵션은 웹사이트에 지도를 추가하는 가장 간단하고 빠른 방법입니다. 구글 지도에서 비즈니스를 검색하고 공유를 클릭한 후, 코드를 복사하여 워드프레스 페이지에 붙여넣기만 하면 됩니다. 빠르게 적용할 수 있도록 단계별 가이드를 제공합니다.

하지만 이러한 단순함 자체가 한계가 될 수도 있습니다. 지도의 모양을 사용자 정의하거나 여러 개의 핀을 추가할 수 없으며, 기본 보기 위에 추가 정보를 표시할 수도 없습니다. 또한 모바일에서 제대로 표시되는지 확인하기 위해 지도 크기와 워드프레스 페이지 레이아웃을 여러 번 테스트해야 할 수도 있습니다.

구글 지도 iFrame을 삽입하는 방법

시작하기 전에 구글 비즈니스 프로필(Google Business Profile) 플랫폼에 비즈니스를 등록하세요. 이렇게 하면 영업 시간, 리뷰 또는 음식 메뉴를 포함한 전체 정보를 구글 지도에 표시할 수 있습니다. 만약 본인 소유가 아닌 주소나 랜드마크를 가리키는 경우라면, 첫 번째 단계로 건너뛰세요.

구글 지도에서 임베드 코드 가져오기

1. google.com/maps에 접속하여 비즈니스 이름이나 주소를 검색합니다.

2. 화면 왼쪽에 있는 비즈니스 세부 정보를 확인하여 올바른 핀을 선택했는지 확인합니다.

3. 공유를 클릭합니다.

4. 화면에 팝업이 나타납니다. 지도 퍼가기 탭을 클릭합니다.

5. 웹사이트에 표시될 지도의 미리보기가 나타납니다. 기본적으로 중간 크기로 설정되어 있으며, 왼쪽 상단의 드롭다운을 사용하여 작거나 큰 지도를 표시하거나 사용자 지정 크기를 선택할 수도 있습니다.

6. 크기를 선택한 후 HTML 복사를 클릭합니다. 이렇게 하면 iFrame 코드 스니펫이 클립보드에 복사됩니다.

워드프레스에 삽입하기 (블록 에디터/구텐베르크)

7. 워드프레스에서 지도를 배치할 페이지나 포스트를 엽니다.
8. + 블록 삽입기 아이콘을 클릭하고, HTML을 입력하여 필터링한 후 사용자 정의 HTML을 클릭하여 페이지에 블록을 추가합니다.

9. 새 블록에서 HTML 편집을 클릭합니다.

10. 팝업에 iFrame 코드를 붙여넣습니다. 오른쪽에 미리보기가 표시됩니다. **업데이트**를 클릭하여 완료합니다.

11. 이제 페이지에 삽입된 iFrame 지도가 표시됩니다. **발행** 또는 **저장**을 클릭하여 웹사이트에 적용하고, 페이지를 보면서 어떻게 나타나는지 확인하세요.

이 방법이 현재 사용 중인 워드프레스 페이지 편집 방식과 다르다면, 다음 에디터 중 하나를 사용하여 HTML을 추가하는 방법을 확인해 보세요.

• 워드프레스 고전 편집기
• 엘리멘터(Elementor) HTML 위젯
• 디비(Divi) 코드 모듈

옵션 2: 전용 워드프레스 지도 플러그인 설치하기

옵션 1과 비교할 때, 전용 워드프레스 플러그인은 더 많은 사용자 지정 옵션과 기능을 제공합니다. 다른 플러그인을 설치하는 것과 동일한 방법으로 사이트에 설치하고, 구글 지도 API 키를 생성하여 설정에 붙여넣은 다음 페이지에 지도 요소를 추가하면 됩니다.

이 옵션은 약간의 복잡성이 따릅니다. 구글 지도 API 키를 얻으려면 Google Cloud Platform 계정을 생성하고, 결제 계정을 설정하며, 기술적인 설정 단계를 거쳐야 합니다. 또한, 지도 플러그인은 프리미엄(Freemium) 모델로 작동하여 기본 기능을 갖춘 괜찮은 무료 버전을 제공하지만, 최고의 기능은 일회성 라이선스나 연간 요금을 지불해야 사용할 수 있습니다.

플러그인을 추가하는 것이므로 설정 완료 후 웹사이트 속도를 테스트해 보세요. 저렴한 호스팅 요금제를 사용하는 경우 너무 많은 플러그인이 전체 속도를 크게 저하시켜 사용자 경험에 악영향을 미치고 방문자 이탈을 유발할 수 있습니다.

모바일 사용자에게 지도가 제대로 작동하도록 만드는 것은 플러그인과 설정 방식에 따라 다릅니다. 예를 들어, WP Go Maps는 답답한 화면 구성을 피하기 위해 특정 높이와 너비 값을 설정할 것을 권장합니다.

워드프레스 지도 플러그인 설정 방법

이 예시에서는 가장 인기 있는 워드프레스용 구글 지도 플러그인 중 하나인 WP Go Maps를 사용하겠습니다.

WP Go Maps 설정하기

1. WP Go Maps를 설치하고 활성화합니다.

2. 설정을 완료하려면 소개 건너뛰기(Skip Introduction)를 클릭합니다.

3. 왼쪽 메뉴에서 설정(Settings)을 클릭합니다.

4. 일반(General) 탭에서 지도 엔진으로 Google Maps를 선택합니다.

구글 지도 API 키 얻기

구글 플랫폼에서 지도 데이터를 가져오려면 먼저 계정을 등록하여 API 키를 발급받아야 합니다.

5. 구글 지도 플랫폼 웹사이트로 이동하여 계정을 만듭니다.

6. Google Cloud Platform의 설정 단계로 이동하게 됩니다. 이름, 국가, 통화를 설정하여 새 결제 계정을 만듭니다.

7. 연락처 정보와 결제 수단을 추가합니다. 완료되면 제출 및 결제 활성화(Submit and Enable Billing) 버튼을 클릭합니다.



이 옵션을 사용하면 월 10,000회의 무료 지도 로드가 제공됩니다. 이를 초과하면 1,000회당 7달러가 청구됩니다. 한도를 넘지 않으면 카드로 요금이 청구되지 않지만, 어느 쪽이든 결제 계정은 필수입니다. (2025년 3월, 구글은 기존의 월 200달러 크레딧 제공 방식을 각 API에 대한 별도의 무료 허용량으로 대체했습니다. 이전의 많은 튜토리얼에서 여전히 이 크레딧을 언급하지만 현재는 더 이상 존재하지 않습니다.)

8. 구글에서 지도 서비스를 어떻게 사용할 계획인지 묻는 몇 가지 질문이 표시됩니다. 답변을 작성한 후 제출(Submit)을 클릭합니다.

9. 왼쪽 메뉴에서 키 및 사용자 인증 정보(Keys & Credentials)를 클릭합니다.

10. 사용자 인증 정보 만들기(Create Credentials) 드롭다운을 클릭한 다음 API 키(API Key)를 선택합니다.

11. 나타나는 모달창에서 새 API 키의 이름과 권한을 설정할 수 있습니다. 이 설정을 변경할 필요는 없으며, 맨 아래로 스크롤하여 만들기(Create)를 클릭합니다.

12. API 키를 복사합니다.

사이트를 정식으로 운영하기 전에 키 사용을 제한하는 것이 중요합니다. 페이지 소스에 제한이 없는 키가 노출되면 다른 사람이 이를 복사해 요금이 과도하게 청구되도록 악용할 수 있습니다. 구글의 API 키 모범 사례를 따라 본인의 도메인에 키를 고정하세요.

워드프레스에서 플러그인 설정 완료하기

13. 워드프레스에 설치된 WP Go Maps 플러그인 설정 페이지로 돌아가서 구글 지도 API 키(Google Maps API Key) 필드에 복사한 API 키를 붙여넣습니다. 그런 다음 설정 저장(Save Settings) 버튼을 클릭합니다.

14. 왼쪽 메뉴에서 지도(Maps)를 클릭합니다.

15. 플러그인이 이미 첫 번째 지도를 생성해 두었습니다. 확인하려면 **편집(Edit)** 버튼을 클릭하세요.

16. 이곳에서 웹사이트에 지도가 표시되는 방식을 설정할 수 있습니다. 마커(Markers) 탭을 클릭하여 비즈니스 위치를 추가해 보세요.

17. 점 3개 메뉴를 클릭하고 미리 지정된 지도 마커를 삭제합니다.

18. 상단의 마커 추가(Add Marker)를 클릭합니다.

19. 비즈니스 주소를 검색하고 목록에 나타나면 선택합니다.

20. 마커 추가(Add Marker) 버튼을 클릭하여 완료합니다.

21. 이제 지도에 비즈니스 위치가 표시됩니다. 뒤로 돌아가서 설정(Settings) 버튼을 클릭하면 확대/축소 수준 및 기타 시각적 설정을 사용자 정의할 수 있습니다. 완료되면 화면 하단의 지도 저장(Save Map)을 클릭하는 것을 잊지 마세요.

22. 웹사이트 페이지에 지도를 배치할 준비가 되면 왼쪽 하단의 숏코드 가져오기(Get Shortcode) 버튼을 클릭합니다. 이렇게 하면 숏코드가 클립보드에 복사됩니다.

23. 지도를 추가하려는 페이지로 이동하여 새 블록을 추가하기 위해 클릭한 다음, 숏코드(Shortcode)를 입력하여 옵션을 필터링합니다. 목록에 나타나면 클릭하세요.

24. 입력 필드에 숏코드를 붙여넣고 발행(Publish) 또는 저장(Save)을 클릭합니다.

25. 페이지를 방문하면, 설정한 내용이 반영된 마커가 포함된 지도가 표시됩니다.

옵션 3: 무료로 커스터마이징 가능한 구글 지도 위젯 추가 (권장)

Jform 구글 지도 위젯은 플러그인을 설치하거나 라이선스 비용을 지불할 필요가 없는 무료이며 완벽하게 커스터마이징할 수 있는 지도입니다. 이를 통해 다음을 수행할 수 있습니다.

• 동일한 지도에 표시할 하나 또는 여러 개의 위치를 추가할 수 있습니다.
• 일반 지도(도로망) 또는 위성 지도를 포함한 지도 보기를 선택할 수 있습니다.
• 라이트 또는 다크 테마를 적용하고 상자의 모서리 둥글기를 제어할 수 있습니다.
• 지도의 크기, 레이아웃 및 확대/축소 수준을 설정할 수 있습니다.

기본 iFrame과 비교할 때 커스터마이징이 가능하고, 동일한 지도에 여러 위치 핀을 추가할 수 있으며, 기본적으로 반응형을 지원합니다. 플러그인과 비교할 때 웹사이트 속도를 저하시키지 않으며 모든 기능을 잠금 해제하기 위해 유료 요금제를 사용할 필요가 없습니다.

이러한 장점에도 불구하고 Jform 구글 지도 위젯을 사용하려면 여전히 구글 지도 API 키가 필요합니다. 설정 단계를 거쳐 구글에서 결제 계정을 생성해야 합니다.

웹사이트에 Jform 구글 지도 위젯을 추가하는 방법

1. Jform 구글 지도 위젯 페이지를 방문합니다. 대부분의 경우 구성 도구가 자동으로 로드되지만, 그렇지 않은 경우 새 웹사이트 위젯 만들기(Create New Website Widget)를 클릭하여 시작하세요.

2. 구글 지도 API 키를 가져오는 방법에 대한 이 가이드를 따르세요. 옵션 2에 자세히 설명된 모든 단계와 키를 안전하게 보호하기 위해 제한을 설정하는 방법이 포함되어 있습니다. (구글 지도는 매월 10,000회의 무료 지도 로드를 제공하며, 그 이후에는 1,000회 로드당 7달러의 비용이 청구됩니다.) 완료되면 구글 지도 API 키를 입력 필드에 붙여넣습니다.

3. 일반 설정을 취향에 맞게 조정하세요. 여기에는 지도의 모양과 추가할 위치의 수가 포함됩니다. 여기에 있는 스크린샷은 Jform의 샌프란시스코 및 캐나다 사무실을 사용하여 다중 핀 지도를 보여주지만, 하나의 위치만 추가하거나 필요한 만큼 추가할 수 있습니다. 완료되면 계속(Continue)을 클릭하세요.

4. 테마, 글꼴 또는 사용자 정의 CSS와 같은 스타일 설정을 변경합니다. 완료되면 계속(Continue)을 클릭하세요.

5. 이 마지막 단계에서 레이아웃과 추가 기능을 커스터마이징합니다. 준비가 되면 웹사이트에서 무료로 체험하기(Try It on Your Website for Free)를 클릭하세요.

6. 무료 Jform 계정에 가입하거나 기존 계정에 로그인하세요. 로그인이 완료되면 임베드 코드가 나타납니다. 코드 복사(Copy Code)를 클릭합니다.

7. 옵션 1의 7~11단계에 따라 사용자 정의 HTML 블록을 사용하여 페이지에 임베드 코드를 추가합니다. 블록을 삽입하고, 코드를 붙여넣은 다음 발행(Publish) 또는 저장(Save)을 클릭합니다.

8. 스마트폰에서 페이지를 엽니다. 옵션 1의 기본 iFrame과 달리 위젯은 화면에 맞게 자체적으로 크기가 조정되므로, 모바일에서 잘렸던 지도가 여기서는 전체 화면으로 표시됩니다.

스마트한 서버리스 위젯으로 워드프레스 사이트 성장시키기

웹사이트에 스마트한 기능을 구축하려면 보통 새로운 플러그인에 비용을 지불하거나 코드와 씨름해야 합니다. Jform은 이러한 모든 과정을 생략할 수 있도록 도와줍니다. 구글 지도 위젯과 함께, Jform 웹사이트 위젯 디렉토리는 웹사이트에 간단한 HTML 스니펫을 붙여넣기만 하면 구성할 수 있는 150개 이상의 무료 노코드 위젯을 제공합니다.

이러한 옵션은 지도 위젯과 잘 어울립니다.

• 영업시간(Business Hours) 위젯: 이 위젯은 현재 영업 중인지 마감되었는지 실시간 상태를 포함한 영업시간을 표시합니다. 지도 옆에 배치할 수 있어 지도에서 비즈니스를 찾은 방문자가 영업 여부를 즉시 알 수 있습니다. API 키는 필요하지 않습니다.
• 예약(Appointment Booking) 위젯: 웹사이트에 예약 기능을 추가하여 사람들이 일정을 예약할 수 있게 하세요. 이 위젯은 예약 가능한 시간 추가, 소요 시간 및 가격이 포함된 서비스 유형 나열, 추가 도구 없이 예약 접수 기능을 지원합니다.
• FAQ 위젯: 이 위젯은 검색 가능한 아코디언 형태로 자주 묻는 질문에 대한 답변을 나열합니다. 워드프레스에서 동일한 작업을 수행하는 것은 쉽지만, 이 위젯이 제공하는 세련된 경험을 얻으려면 코드를 다루거나 또 다른 플러그인을 설치해야 합니다.

보급형 워드프레스 호스팅 요금제를 사용 중인 경우 플러그인이 필수 서버 리소스를 소비하여 웹사이트 속도를 저하시키고 방문자에게 열악한 사용자 경험을 제공할 수 있습니다. Jform의 위젯은 Jform의 인프라에서 실행되므로 웹사이트에 부하를 주지 않습니다. 이렇게 하면 서버 리소스가 확보되어 웹사이트를 더 빠르고 쉽게 사용할 수 있습니다.

워드프레스 사이트를 한 단계 업그레이드하고 싶으신가요? 다음을 확인해 보세요.

• 웹 디자인 코스에 투자하지 않고도 전문적인 웹사이트를 구축하는 방법을 배울 수 있는 워드프레스 사용 방법 가이드
• 단일 플랫폼에서 자동화, 결제 및 고급 기능을 통해 데이터 수집을 간소화하는 Jform의 워드프레스 연동