카페, 병원, 스튜디오, 플리마켓 매장이라면 프로필 링크 뒤에 연결된 페이지의 가장 중요한 역할은 방문객이 실제 장소까지 찾아오게 하는 것입니다. Digily Link 페이지에 지도를 넣는 방법은 3가지이며, 사용 중인 요금제와 페이지에서 지도를 직접 보여줄지, 내비게이션을 실행하는 버튼을 둘지에 따라 선택하면 됩니다.
방법 1. 지도 앱을 여는 길찾기 버튼
Free를 포함한 모든 요금제에서 사용할 수 있으며, 실제로 대부분의 방문객에게 가장 유용한 방법입니다. 휴대전화에서 지도를 손가락으로 확대하고 축소하기보다는 "길찾기"를 누르자마자 내비게이션이 시작되기를 기대하기 때문입니다.
- Google Maps에서 사업장이나 매장을 찾은 다음 공유를 누르고 링크를 복사합니다.
- 대시보드에서 복사한 주소를 목적지로 설정해 단축 링크를 만들고 "모바일에서 앱 자동 열기"를 켭니다. Digily Link는 Google Maps와 Waze 링크를 인식하므로 앱이 설치된 휴대전화에서는 단축 링크를 통해 내비게이션이 바로 열립니다. 이 기능이 중요한 이유는 딥 링크 안내에서 확인할 수 있습니다.
- 페이지에 링크 블록을 추가하고 단축 링크를 붙여 넣은 뒤 버튼 이름을 "길찾기"로 설정합니다.
버튼이 단축 링크를 가리키므로 클릭 수가 통계에 집계되며, 매장을 이전해도 목적지만 바꿀 수 있습니다.
방법 2. iframe 블록으로 지도 삽입하기
iframe 블록은 Starter와 Pro 요금제에서 사용할 수 있으며, 페이지 안에 지도를 직접 표시합니다.
- Google Maps에서 장소를 찾고 공유를 연 다음 "지도 퍼가기" 탭으로 이동합니다.
- Google에서 제공하는 HTML을 복사합니다. 필요한 부분은 src="..." 안에 있으며 https://www.google.com/maps/embed로 시작하는 주소입니다. 주소만 추려내기 어렵다면 코드 전체를 URL 파서에 붙여 넣으세요.
- 페이지에 iframe 블록을 추가하고 해당 주소를 URL로 붙여 넣은 뒤 높이를 약 300픽셀로 설정합니다.
지도 바로 아래에는 방법 1에서 만든 길찾기 버튼을 배치하세요. 지도는 위치를 보여주고, 버튼은 방문객이 그곳까지 찾아가도록 돕습니다.
방법 3. 맞춤 HTML로 반응형 지도 만들기
맞춤 HTML 블록은 Pro 요금제에서 제공되며, 모든 화면 크기에서 비율을 유지하는 지도를 비롯해 표시 방식을 세밀하게 제어할 수 있습니다. 아래 코드를 블록에 붙여 넣고 YOUR_EMBED_URL을 "지도 퍼가기" 탭에서 가져온 주소로 바꾸세요.
<div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:12px"><iframe src="YOUR_EMBED_URL" style="position:absolute;top:0;left:0;width:100%;height:100%;border:0" loading="lazy" allowfullscreen referrerpolicy="no-referrer-when-downgrade"></iframe></div>
padding-bottom 값은 지도의 비율을 정합니다. 56.25%는 16:9 직사각형, 75%는 정사각형에 가까운 4:3 지도, 100%는 정사각형입니다. loading="lazy" 속성을 사용하면 방문객이 지도 위치까지 스크롤하기 전에 지도가 페이지 로딩을 늦추는 것을 막을 수 있습니다. 다른 곳에서 가져온 코드를 붙여 넣는다면 불필요한 줄바꿈으로 블록이 깨지지 않도록 먼저 HTML 미니파이어로 정리하세요.
어떤 방법을 선택해야 하나요?
| 원하는 기능 | 사용할 방법 | 요금제 |
|---|---|---|
| 한 번 눌러 내비게이션 시작 | 앱 연결을 적용한 길찾기 버튼 | Free 이상 |
| 페이지에 지도 표시 | iframe 블록 | Starter와 Pro |
| 모양과 스타일을 조정할 수 있는 지도 | 맞춤 HTML 블록 | Pro |
| 여러 장소 표시 | 장소마다 제목과 길찾기 버튼을 하나씩 추가하거나, 맞춤 Google My Maps 지도를 방법 2 또는 3으로 삽입 | 사용하는 블록에 따라 다름 |
지역 매장을 위한 팁
- 자신이 쓰는 지도 앱에 주소를 직접 입력하려는 방문객을 위해 지도 위의 문단 블록에 도로명 주소를 적어 두세요.
- 방문객이 지금 출발해도 되는지 확인할 수 있도록 Free 요금제에서 제공되는 영업시간 블록을 추가하세요.
- 페이지 하나에는 지도 하나만 두세요. 지도를 2개 삽입하면 얻는 이점은 거의 없지만 로딩 시간은 2배로 늘어납니다.
- 페이지의 QR 코드를 만들어 매장 유리창과 전단지에 인쇄하세요. 매장 페이지 구성은 소상공인을 위한 링크 인 바이오에서 확인할 수 있습니다.
- iPhone과 Android 휴대전화의 Instagram 앱 안에서 길찾기 버튼을 테스트하세요. 데스크톱에서 단축 링크가 어떻게 작동하는지는 URL 리디렉션 검사기로 확인할 수 있습니다.
팝업 매장, 플리마켓과 행사
주말마다 장소를 옮기는 판매 부스라면 매번 새 지도를 만들 필요가 없습니다. 길찾기 버튼은 단축 링크에 계속 연결해 두고 금요일에 목적지만 이번 주말의 판매 장소로 바꾸세요. 페이지의 주소와 현수막의 QR 코드, 프로필 링크는 그대로 유지됩니다. Starter와 Pro 요금제에서는 단축 링크를 예약할 수도 있으므로, 누군가 따로 기억해 두지 않아도 토요일 장소가 자정에 일요일 장소로 자동 전환되게 할 수 있습니다. 미리 일정을 계획하려는 사람을 위해 날짜와 도로명 주소를 적은 문단 블록도 추가하세요.
Apple Maps와 Waze
앱 연결 기능은 Google Maps와 Waze 주소를 인식합니다. Apple Maps를 선호하는 iPhone 사용자를 위해 주소가 포함된 maps.apple.com 일반 링크를 추가하면 iPhone에서는 Apple Maps가, 다른 환경에서는 웹 지도가 열립니다. 별도 설정 없이 Apple 링크 자체가 이렇게 작동합니다. "Google Maps"와 "Apple Maps" 버튼 2개를 두면 국내에서 사용하는 거의 모든 휴대전화를 지원할 수 있으며, 클릭 수를 통해 방문객이 실제로 어떤 지도를 쓰는지도 확인할 수 있습니다.
자주 묻는 질문
Google Maps API 키가 필요한가요?
아니요. "지도 퍼가기" 코드와 공유 링크는 무료로 사용할 수 있으며 키가 필요하지 않습니다. API 키는 자체 지도 애플리케이션을 개발할 때만 필요합니다.
지도에 핀을 여러 개 표시할 수 있나요?
Google My Maps에서 모든 장소를 담은 맞춤 지도를 만들고 공개로 공유한 다음, 해당 삽입 주소를 iframe 또는 맞춤 HTML 블록에 사용하세요.
지도를 삽입하면 페이지가 느려지나요?
조금 느려질 수 있으므로 위 코드에서는 지연 로딩을 사용합니다. 방문객을 실제 장소로 안내하는 것이 목적인 페이지라면 지도 이미지보다 길찾기 버튼이 더 중요합니다.
Free 요금제에서도 지도를 추가할 수 있나요?
길찾기 버튼은 가능합니다. iframe 블록은 Starter, 맞춤 HTML 블록은 Pro가 필요합니다. 각 요금제에 포함된 기능은 요금제 페이지에서 확인할 수 있습니다.
매장을 이전하면 무엇을 바꿔야 하나요?
길찾기 버튼에 연결된 단축 링크의 목적지를 변경하고 삽입 주소를 교체하면 됩니다. 이미 인쇄한 자료는 바꿀 필요가 없습니다.
마지막 점검 사항
- 길찾기 버튼을 누르면 휴대전화에서는 지도 앱이, 데스크톱에서는 지도 페이지가 열립니다.
- 삽입한 지도에 올바른 핀이 표시되고 휴대전화에서 페이지 너비에 맞게 보입니다.
- 페이지에 도로명 주소와 영업시간이 적혀 있습니다.
- 페이지에 지도는 하나만 있습니다.
- 브라우저뿐 아니라 Instagram 앱 안에서도 테스트했습니다.
