이미지맵 위젯 사용하는 방법

  아임웹 연구소 소장 해준  |  2017 . 11 . 27

시작에 앞서
아임웹에는 아주 독특한 기능을 가진 위젯이 하나 있습니다. 그건 바로 이미지맵 위젯입니다. 이미지맵 위젯은 텍스트 위젯과 이미지 위젯만으로 디자인이 어려운 경우 종종 사용되는데요. 그 이유는 이미지 내, 내가 원하는 영역에 링크를 넣을 수 있기 때문입니다.

그것도 아주 간단하게, 여러 개의 링크를 내가 원하는 만큼 추가할 수 있습니다. 결코 어렵지 않으니, 아래 9단계에 따라 직접 한 번 시도해보세요. :)

*빠른 연습을 위해 아래 이미지 파일을 사용해보세요.
http://bit.ly/2jYZ6Yb




1단계, 위젯 목록 창 열기
빈 섹션을 추가해 곧바로 + 아이콘을 클릭하거나, 좌측 툴바에서 + 아이콘을 클릭해 위젯 목록 창을 열어주세요.





2단계, 이미지맵 위젯 선택하기
위젯 목록이 나타나면, [이미지맵] 위젯을 선택해주세요.


3단계, 이미지맵 위젯 설정 창 열기
이미지맵 위젯에 마우스 커서를 올려놓고, 마우스 오른쪽 버튼을 클릭하면 나타나는 [이미지맵 설정]을 클릭해주세요.


4단계, 이미지 업로드하기
이미지맵 설정 창이 열리면 [이미지 업로드] 버튼을 클릭해주세요. 이미지맵으로 사용할 이미지 파일을 내 PC에서 선택해 업로드할 수 있습니다.


5단계, 이미지맵 링크 추가하기
1) 아래 그림 1번 영역에 이전 단계에서 업로드한 이미지가 표시됩니다.
2) 이미지 내 링크를 추가하기 위해 이미지맵 링크 [추가] 버튼을 클릭해주세요.


6단계, 링크 URL 및 클릭 영역 설정하기
1) 이미지맵 링크 [추가] 버튼을 클릭하면 아래 그림 1번처럼 링크 URL을 입력할 수 있는 칸이 나타납니다. URL 입력칸 우측에 있는 [새창] 옵션을 체크하면, 이 링크를 클릭했을 때 새 브라우저 창이 뜨도록 설정할 수 있습니다.

2) 이미지맵 링크를 추가하면 2번 영역에 반투명한 파란 네모가 함께 추가됩니다. 이 네모 영역은 방문자가 마우스로 클릭할 수 있는 영역을 가리키며, 그 크기는 마우스로 조절할 수 있습니다.


7단계, 모든 링크 설정하기
이미지맵 링크를 메뉴 수만큼 만들고, 링크 URL을 입력하면 아래 그림처럼 설정됩니다. 아래 그림은 한 개 이미지 내 버튼 수만큼 이미지맵 링크가 추가된 것을 보여줍니다.


8단계, 링크는 사이트 내부 메뉴도 연결 가능
링크 URL은 반드시 외부로만 연결하거나, URL을 입력해야 하는 건 아닙니다. 링크 입력란을 클릭하면 아래 그림처럼 내부 메뉴를 연결할 수도 있습니다. [링크] 대신 [전화걸기]나 [문자발송], [이메일] 방식으로도 설정 가능합니다.

*전화걸기 및 문자발송은 스마트폰에서만 정상적으로 작동합니다.
*PC 환경에 따라서는 스카이프 또는 페이스 타임으로 동작할 수도 있습니다.



TIP. 이미지맵 위젯의 이미지가 깨져 보인다면?
이미지 위젯에 사용한 이미지가 [공통 디자인 설정]에서 설정한 [본문폭] 보다 가로 길이가 긴 경우, 섹션 설정에 따라 이미지가 깨져 나올 수도 있습니다. 그런 경우 아래 그림처럼 섹션 설정 창에서 [좌우 여백] 크기를 0px로 바꿔주시면 이미지 깨짐 현상을 없앨 수 있습니다.

*공통 디자인 설정 또는 섹션 설정에 따라 이미지 깨짐 현상의 이유는 매우 다양합니다.
*아래 방법으로 이미지가 깨짐이 해결되지 않는 경우 이미지 크기에 영향을 주는 어떤 옵션을 사용 중인 건 아닌지 확인해주세요.


해준
배우고 익히고 나누는 | 해준씨 | 유용한 콘텐츠 마케팅 | 네이버 카페 '아임웹 연구소' 소장
jin@haejoon.com

아임웹 공식제휴사

아임웹은 페이팔, KG이니시스, 네이버페이, KCP 공식파트너입니다.