Wix에 구글 지도 삽입하는 방법

방문객이 매장을 쉽게 찾아오게 하려면 “어떻게 가야 하나요?”라는 간단한 질문에 답해주면 됩니다.

매장을 운영하거나 부동산 매물을 등록하고, 혹은 이벤트를 주최한다면 방문객이 묻기 전에 웹사이트에서 미리 그 답을 제공해야 합니다. ‘문의하기’나 ‘오시는 길’ 페이지에 명확한 지도를 표시하면 사용자의 불편을 줄이고 실제 위치를 정확히 알려줄 수 있습니다. 단, 여기서 중요한 점은 흔한 기본 템플릿처럼 보이지 않으면서도 데스크톱과 모바일 환경 모두에서 원활하게 작동하는 지도를 구현하는 것입니다.

Wix 사이트 운영자는 크게 세 가지 방법을 사용할 수 있습니다. Wix 기본 지도 요소를 사용하거나, Wix 앱 마켓에서 지도 앱을 설치하거나, 무료 임베드 위젯을 활용하는 것입니다. 각 방법의 작동 방식과 단점을 자세히 살펴보겠습니다.

방법 1: Wix 기본 지도 요소 또는 HTML 임베드 상자 사용하기

Wix에는 자체 Google 지도(Wix Google Maps) 요소가 내장되어 있습니다. 이 요소를 페이지로 끌어다 놓고 주소를 입력하기만 하면 Wix가 알아서 핀을 추가해 줍니다. 일부 사이트 운영자는 이 기능을 건너뛰고 Google 지도에서 직접 가져온 원본 임베드 코드를 HTML 임베드 상자에 붙여넣기도 합니다.

기본 지도 추가 방법(Wix 도움말 센터 기준):

1. Wix 에디터에서 요소 추가(Add Elements)를 클릭한 다음, 문의 및 양식(Contact & Forms)을 선택하고 지도(Maps) 또는 전체 폭 지도(Full Width Maps)를 클릭합니다. 원하는 지도를 페이지로 끌어다 놓습니다.

2. 위치 관리(Manage Locations)를 클릭하고 단일(One) 또는 다중(Multiple)을 선택한 후 주소, 제목 및 간단한 설명을 입력합니다.

3. 디자인(Design) 아이콘을 클릭하여 색상 테마와 핀 스타일을 선택하거나, 직접 만든 핀 이미지를 업로드합니다.

단점:

• 부족한 위치 세부 정보: 각 핀에는 제목, 간단한 설명, 그리고 링크 하나만 추가할 수 있습니다. 검색창이나 카테고리 필터는 물론, 위치별 영업시간이나 사진을 표시하는 기능도 없습니다.
• 사전 설정만 사용 가능: 색상 테마와 핀을 변경할 수는 있지만, Wix가 제공하는 기본 옵션 내에서만 가능합니다.
• 반응형을 지원하지 않는 임베드 코드: Wix의 HTML 임베드 요소에 Google iframe 코드를 붙여넣는 경우, 원래 반응형 코드였더라도 Wix에서는 반응형으로 작동하지 않는다고 명시되어 있습니다. 따라서 직접 크기를 조정하고 모바일 화면에서 어떻게 보이는지 일일이 확인해야 합니다.

방법 2: Wix 앱 마켓에서 유료 지도 앱 설치하기

기본 요소만으로 세련된 디자인이나 다중 위치 레이아웃을 구현하기 어려울 때 일반적으로 사용하는 대안은 Wix 앱 마켓에서 매장 찾기(store locator) 같은 타사 앱을 설치하는 것입니다.

지도 앱 설치 방법:

1. Wix 앱 마켓을 열고 “store locator(매장 찾기)” 또는 “Google Maps(Google 지도)”를 검색합니다.

2. 원하는 앱에서 사이트에 추가(Add to Site)를 클릭하고 권한을 승인합니다.

3. 앱 대시보드를 열고 위치를 추가한 후 지도 디자인을 원하는 대로 설정합니다.

단점: 무료 요금제는 기능이 제한적인 경우가 많으며, 앱마다 가격 정책이 다릅니다. 다음은 현재 앱 마켓에 등록된 실제 앱들의 예시이며, 세부 조건은 변경될 수 있습니다.

• Map & Store Locator는 워터마크가 표시되고 위치 1개, 지도 조회수 최대 100회로 제한되는 무료 요금제를 제공합니다. 유료 요금제는 월 2달러부터 시작합니다.
• Store Locator는 3일 무료 체험 후 월 7.50달러부터 시작하는 사용량 기반 요금제를 적용합니다.
• Google Map by MakkPress는 7일 무료 체험을 제공하며, 유료인 Grow 요금제에서는 월간 페이지 조회수를 무제한으로 지원합니다.

표시할 주소가 하나뿐이고 예산에 여유가 있다면 소액의 월 구독료를 지불하는 것도 괜찮은 선택입니다. 다만 결제하기 전에 조회수 제한과 워터마크 표시 규정을 반드시 확인하시기 바랍니다.

방법 3: 맞춤 설정이 가능한 무료 Google 지도 위젯 추가하기(추천)

월간 앱 구독료 없이 맞춤 스타일링과 다중 위치 표시 기능을 사용하고 싶다면 Jform Google 지도 위젯을 살펴보는 것이 좋습니다. 시각적인 인터페이스에서 위치를 설정한 후 임베드 코드를 복사하여 Wix의 기본 HTML 임베드 요소에 붙여넣기만 하면 됩니다.

미리 알아두어야 할 한 가지 조건은 이 위젯을 사용하려면 본인의 Google 지도 API 키가 필요하다는 점입니다. Jform의 설치 가이드에서 API 키 입력 위치를 안내하고 있으며, Google 문서에서 API 키 발급 방법을 확인할 수 있습니다. Google Maps Platform 요금은 사용량에 따라 부과되므로 예상 트래픽을 기준으로 현재 약관을 미리 검토하시기 바랍니다.

위젯 추가 방법:

1. Jform Google 지도 위젯 페이지로 이동하여 Google 지도 위젯 에디터까지 아래로 스크롤합니다. 위젯 속성(Widget Properties) 패널에 Google 지도 API 키를 붙여넣고 위치를 추가합니다.

2. 지도 스타일(테마, 레이아웃, 확대/축소 수준, 검색창, 카테고리 필터, 길찾기 버튼)을 지정한 후 게시(Publish)를 클릭하고 임베드 코드를 복사합니다.

3. Wix 에디터에서 요소 추가(Add Elements)를 클릭한 다음, 임베드 코드(Embed Code), HTML 임베드(Embed HTML)를 차례로 선택합니다. 코드 입력(Enter Code)을 클릭하고 코드를 붙여넣은 후 적용(Apply)을 클릭합니다. 마지막으로 사이트를 게시합니다.

Wix 사이트에 이 방법이 효과적인 이유:

• 부동산 중개인은 한 페이지의 지도에 여러 매물을 표시하고 방문객이 카테고리별로 필터링하도록 할 수 있습니다.
• 이벤트 기획자는 행사장, 주차장, 등록 데스크에 각각 핀을 꽂고 위치별 세부 정보를 안내할 수 있습니다.
• 여러 지점을 운영하는 로컬 비즈니스는 Wix 기본 지도에서는 지원하지 않는 지점별 영업시간, 전화번호, ‘길찾기’ 링크를 각각 표시할 수 있습니다.

이 위젯 역시 Wix의 HTML 임베드 요소 내에서 작동하므로 모바일 환경에서 어떻게 보이는지 간단히 확인해 보는 것이 좋습니다. Wix에서는 모바일 에디터에서 임베드 요소를 조정하는 방법을 안내하고 있습니다. 또한 데스크톱과 모바일 환경에 대해 위젯 표시 여부를 개별적으로 켜거나 끌 수도 있습니다.

플랫폼 자체에 대한 자세한 내용은 Jform의 Wix 웹사이트 빌더 가이드 및 Jform Wix 연동 페이지에서 확인하실 수 있습니다. 만약 워드프레스 사이트도 함께 관리하고 있다면 워드프레스에 Google 지도를 임베드하는 방법 글에서 동일한 위젯의 활용법을 살펴보세요.

스마트한 서버리스 위젯으로 Wix 사이트 기능 강화하기

방문객이 위치를 쉽게 찾도록 돕는 것은 전환율 높은 사이트를 만드는 요소 중 하나일 뿐입니다. 무료 웹사이트 위젯 디렉토리에서는 동일한 복사 및 붙여넣기 임베드 방식을 사용하여 Wix의 다른 부족한 기능들도 보완할 수 있습니다.

• 문의하기(Contact Us) 위젯: 지도 옆에서 메시지와 콜백 요청을 수집합니다.
• Google 리뷰(Google Reviews) 위젯: 위치 정보 옆에 고객 피드백을 표시합니다.
• 이벤트 캘린더(Event Calendar) 위젯: 예정된 이벤트 목록을 참가 등록 링크와 함께 보여줍니다.
• 일정 예약(Appointment Booking) 위젯: 방문객이 위치를 확인한 후 바로 예약할 수 있도록 합니다.

인터랙티브 지도를 사용하기 위해 매달 요금을 지불하기보다는 비즈니스 성장을 위해 예산을 투자하는 것이 훨씬 효율적입니다. 먼저 Jform Google 지도 위젯으로 시작하고, 사이트가 성장함에 따라 더 많은 위젯을 추가해 보세요.