아임웹 이미지맵 위젯 소개 (설정 방법, 활용법)

1. 시작하며

아임웹에서 이미지 위젯은 자주 사용되지만, 이미지맵 위젯은 다소 생소하게 느껴질 수 있습니다.
그러나 이 기능을 잘 활용하면 하나의 이미지에 여러 개의 링크를 추가하여 방문자의 편의성을 높일 수 있습니다!

이번 글에서는 이미지맵 위젯의 개념, 설정 방법, 그리고 실전 활용법을 소개해 드리겠습니다.

2. 이미지맵 위젯이란?

• 하나의 이미지에 여러 개의 링크 영역을 넣고 싶을 때 사용하는 위젯
• 각 링크 영역을 클릭하면 설정한 특정 페이지, 외부 URL 등으로 이동 가능
• 인터랙티브한 이미지 활용이 필요한 경우 유용

예를 들어, 서울시 행정구역 지도 이미지를 활용하여 ‘종로구’를 클릭하면 종로구청 홈페이지로 이동하고, ‘성북구’를 클릭하면 성북구청 홈페이지로 연결할 수 있습니다.

3. 아임웹 이미지맵 위젯 설정 방법

예시 상황: 서울시 종로구를 클릭하면, 해당 행정 구역의 공식 홈페이지로 이동되도록 구현

1. 이미지맵 위젯 추가하기

   
   

   아임웹 디자인 모드에서 이미지맵 위젯을 추가합니다.



2. 이미지맵 위젯 설정

   
   

   이미지맵 위젯을 우클릭하여 이미지맵 설정을 선택합니다.
   이미지 업로드 버튼을 클릭하여 사용할 1장의 이미지 파일을 선택합니다.







3. 링크 영역 추가 및 설정

   
   

   설정 창 왼쪽 상단에서 추가 버튼을 클릭한 후 링크 방식을 선택합니다.

   링크 방식은 다음과 같습니다.

   • 링크: 내부 메뉴 또는 외부 URL 연결
   • 전화 걸기: 클릭 시 입력한 전화번호로 연결 (PC에서는 제한)
   • 문자 발송: 문자 작성 앱 실행 (PC에서는 제한)
   • 이메일: 클릭 시 메일 앱 실행
   • 파일 다운로드: 클릭 시 첨부된 파일(최대 100Mb) 다운로드
   • 동영상: 클릭 시 동영상 재생
   • 소셜 공유: 클릭 시 SNS 공유 창 실행
   • 말풍선: 클릭 시 말풍선 표시
   • 코드: 입력한 코드 실행
   • 최신 상품: 클릭 시 지정한 카테고리의 최신 상품 상세페이지로 이동
   • 모달: 클릭 시 모달창 표시





4. 링크 배치 및 크기 조절

   
   

   이미지 위에 생긴 파란색 네모 링크 영역을 마우스로 클릭한 후 적절하게 배치하고 크기를를 조절합니다.



5. 설정 완료 후 미리보기로 확인

   
   

   설정이 정상적으로 적용되었는지 미리보기 모드에서 확인합니다.
   링크 영역에 마우스 오버를 하면 커서가 손 모양으로 바뀌고, 클릭하면 설정한 URL로 이동됩니다.

4. 이미지맵 활용 사례

부동산 사이트의 지역별 매물 검색

• 부동산 중개 사이트에서 지도 이미지의 특정 지역을 클릭하면 해당 지역의 매물 목록이 표시되도록 연결할 수 있습니다.

관광 안내 사이트

• 제주도 관광 안내 사이트에서 각 관광지에 대한 정보를 클릭하여 상세 페이지로 이동하도록 설정하면 사용자의 편의성이 높아집니다.

이벤트 및 프로모션 페이지

• 이벤트 프로모션 페이지에서 경품 목록 이미지 위에 각 상품을 클릭하면 응모 페이지로 이동하도록 설정할 수 있습니다.

대학 캠퍼스 지도 및 매장 안내

• 대학 캠퍼스 지도에서 건물을 클릭하면 해당 학과의 소개 페이지로 이동하거나, 쇼핑몰 매장에서 각 브랜드를 클릭하면 해당 브랜드 페이지로 연결하는 방식으로 활용할 수 있습니다.

5. 마무리

아임웹 이미지맵 위젯의 개념, 설정 방법, 그리고 실전 활용법을 살펴보았습니다.
이미지맵 위젯을 활용하면 더욱 직관적이고 편리한 인터페이스를 구축할 수 있으며, 방문자가 원하는 정보를 보다 쉽게 찾을 수 있습니다.

아임웹에서 제공하는 기본 위젯을 효과적으로 활용하여 홈페이지 제작 시간을 단축하고, 더욱 유용한 기능을 추가해 보시기 바랍니다!