매장이나 사무실이 있는 업체라면 홈페이지에서 가장 조회수가 높은 페이지 중 하나가 ‘오시는길’입니다. 그런데 주소만 텍스트로 적어두면 방문자는 결국 지도 앱을 따로 열어야 합니다. 국내 사용자 대부분이 쓰는 네이버 지도를 페이지 안에 바로 넣어 두는 것이 정답입니다.

네이버 지도 임베드 코드 받기

PC에서 map.naver.com에 접속해 업체명이나 주소를 검색합니다. 장소 정보 화면의 공유 버튼을 누르면 URL 복사 외에 ‘HTML 코드'(지도 퍼가기) 옵션이 있습니다. 여기서 지도 크기를 지정하고 소스 코드를 복사하세요. 사업자라면 네이버 스마트플레이스에 업체 등록을 먼저 해두는 것이 좋습니다. 지도에 업체명 핀이 표시되어 훨씬 보기 좋습니다.

지도만 덜렁 넣지 말고 도로명 주소 복사 버튼, 주차 안내, 가까운 역에서 걸리는 도보 시간까지 한 페이지에 묶어주세요. 방문 고객이 실제로 찾는 정보는 지도보다 이 세 가지인 경우가 많습니다.

워드프레스 페이지에 붙여넣기

관리자에서 오시는길 페이지를 열고, 블록 편집기라면 ‘사용자 정의 HTML’ 블록을 추가해 복사한 코드를 붙여넣습니다. 엘리멘터를 쓴다면 HTML 위젯을 끌어다 놓고 같은 방식으로 넣으면 됩니다. 저장 후 반드시 스마트폰에서도 확인하세요. PC 기준 700px 너비로 넣은 지도가 모바일에서 화면을 뚫고 나가는 일이 흔합니다. 이런 차이가 왜 생기는지는 반응형과 적응형 웹사이트 비교 글(자세히 보기)을 참고하시면 이해가 빠릅니다.

구글맵도 함께 넣어야 하는 이유

외국인 고객이나 아이폰 기본 환경 사용자는 구글맵이 익숙합니다. 구글맵에서 장소 검색 후 공유 > 지도 퍼가기로 같은 방식의 코드를 받을 수 있습니다. 네이버 지도를 메인으로 크게, 구글맵은 아래에 작게 병행 배치하면 두 사용자층을 모두 챙길 수 있습니다. 해외 문의가 많은 업체라면 필수입니다.

오시는길 페이지, 지도만으로는 부족합니다

지도 아래에 도로명 주소(복사 버튼이 있으면 더 좋습니다), 대표 전화, 주차 안내, 지하철·버스 하차 정보를 목록으로 정리해 주세요.

• 도로명 주소와 우편번호
• 주차 가능 여부와 진입 경로
• 가까운 역·정류장과 도보 시간

※ 네이버 지도 임베드 코드는 너비 700px로 고정돼 모바일에서 화면 밖으로 넘칠 수 있습니다. iframe에 max-width를 지정해 반응형으로 감싸고, 스마트폰에서 좌우 스크롤이 생기지 않는지 확인하세요.

오시는길 하나 만드는 데도 지도 두 종류에 반응형 확인까지 손이 갑니다. 이런 페이지 구성을 처음부터 깔끔하게 갖춘 홈페이지가 필요하시다면 정찰제 19만원부터 제작하는 IDC.KR에 견적 문의(자세히 보기)를 남겨 주세요. 하루면 상담이 시작됩니다.