반응형 이미지맵 안될 때/ 카페24 모바일 이미지맵 안될 때 해결법

 

 

인터넷 쇼핑몰을 관리하다보면, 제작된 프로모션페이지 속의 상품 위치나 바로가기 버튼 위치에 해당 상품으로 이동할 수 있는 이미지맵을 자주 사용합니다.

 

 

이미지맵은 원하는 이미지만 있다면 코드 자체는 아래 사이트에서 쉽게 생성할 수 있습니다.

http://maschek.hu/imagemap/imgmap/

maschek.hu - Online Image Map Editor

 

하지만 위 사이트에서 생성된 코드는 이미지맵이 좌표로 이루어져있어 이미지의 비율이 줄어들어도 좌표는 그대로 유지되기 때문에 반응형 사이트에서 활용하기에는 무리가 있습니다.

 

 

 

아래의 링크는 이미지맵을 반응형으로 만들어주는 제이쿼리 플러그인 데모사이트입니다.

보통의 사이트는 아래 링크에서 깃허브 파일을 다운받아 html파일에 추가하면 문제 없이 작동이 됩니다.

http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html#bubbles

Responsive Image Maps jQuery Plugin

 

 

---

 

 

하지만 어찌된 일인지 카페24 기반 모바일사이트에서는 위 스크립트를 추가해도 제대로 작동하지 않습니다.

사용중인 쇼핑몰 디자인(스킨)에 있는 코드들과 충돌이 일어난건지, 카페24 사이트 문제인건지 정확하게는 알 수는 없었지만 오랜시간 고통을 받다 다른 방법을 찾았기에 스크립트 없이 반응형 이미지맵을 만드는 방법을 기록하고자 합니다.

 

 

 

---

 

 

svg파일 이용해서 반응형 만들기

 

 

 

svg파일을 만들기 위해서는 이미지 jpg파일과 어도비 일러스트레이터가 필요합니다.

일러스트에서 이미지를 열고, 왼쪽 아트보드툴을 이용하여(빨간 동그라미) 아트보드 사이즈를 이미지 사이즈에 맞게 조절해줍니다.

• 아트보드툴을 선택 한 상태에서 이미지를 클릭하면 이미지 사이즈에 맞게 아트보드가 생성됩니다.
• 기존에 있던 흰색 아트보드는 클릭하여 delete, 삭제해줍니다.

 

 

 

왼쪽 툴바에서 rectangle tool을 이용해 이미지맵이 들어갈 자리에 박스를 만든 뒤,

모든 박스의 투명도(opacity)를 0으로 낮춰 박스가 위치에 존재하지만 눈에 보이지 않게 만들어줍니다.

 

 

 

 

File > Save As 파일형식을 svg로 선택한 후 저장을 누르면 오른쪽과 같은 창이 뜨고,

다른 옵션은 건들일 것 없이 아래 svg code버튼을 누르면 메모장이 열리고 생성된 코드가 뜹니다.

 

 

 

 

아래는 생성된 코드로 여기서 약간만 수정해주면 됩니다.

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 1300 1855" style="enable-background:new 0 0 1300 1855;" xml:space="preserve">
<style type="text/css">
	.st0{opacity:0;}
</style>
<image style="overflow:visible;" width="1300" height="1855" xlink:href="예시이미지.jpg" >
</image>
<rect x="695.6" y="557.4" class="st0" width="215" height="69"/>
<rect x="368.1" y="871" class="st0" width="215" height="69"/>
<rect x="695.6" y="1259.6" class="st0" width="215" height="69"/>
<rect x="366.1" y="1573.3" class="st0" width="215" height="69"/>
</svg>

 

 

 

 

<image style="overflow:visible;" width="1300" height="1855" xlink:href="예시이미지.jpg" >
</image>

생성된 코드에서 image태그의  xlink:href 속성을 찾아서 "예시이미지.jpg" 이미지의 경로를 수정해줍니다.

카페24 같은 경우엔 ftp에 올린 이미지의 위치로 수정합니다.

 

 

 

 

 

<a xlink:href="이동할 페이지 주소"><rect x="695.6" y="557.4" class="st0" width="215" height="69"/></a>
<a xlink:href="이동할 페이지 주소"><rect x="368.1" y="871" class="st0" width="215" height="69"/></a>
<a xlink:href="이동할 페이지 주소"><rect x="695.6" y="1259.6" class="st0" width="215" height="69"/></a>
<a xlink:href="이동할 페이지 주소"><rect x="366.1" y="1573.3" class="st0" width="215" height="69"/></a>

그리고 각각의 ract 태그를 a태그로 감싸서 xlink:href를 추가하여 클릭시 이동할 수 있도록해줍니다.

새창으로 열리게 하고 싶다면, target=_blank를 a태그 안에 추가합니다.

 

 

 

 

 

---

 

 

 

 

이 방법으로 사각형 뿐만 아니라 원형, 패스를 이용하여 다양한 모양도 반응형 이미지맵을 만들 수 있습니다.

스크립트를 이용하는 것보다는 복잡하지만 해결방법이 없을 때 시도해보시기를 추천드립니다.