이미지맵 생성 가이드

이미지맵이란?

하나의 이미지 안에 여러 클릭 영역을 지정하는 HTML 기능입니다. <img usemap>, <map>, <area> 요소를 함께 사용하며 배너, 안내도, 카탈로그와 지도에 활용할 수 있습니다.

도형별 좌표 형식

도형	shape	coords
사각형	`rect`	`x1,y1,x2,y2`
원	`circle`	`centerX,centerY,radius`
다각형	`poly`	`x1,y1,x2,y2,x3,y3...`

기본 코드

<img src="banner.jpg" usemap="#banner-map" alt="">

<map name="banner-map">
  <area shape="rect"
        coords="20,40,240,180"
        href="/product/1/"
        alt="첫 번째 제품">
</map>

반응형 이미지맵

이미지가 CSS로 축소되면 화면 크기만 바뀌고 좌표는 원본 픽셀에 남아 클릭 위치가 어긋납니다. 원본 좌표를 보관한 뒤 현재 표시 너비와 원본 너비의 비율만큼 모든 좌표를 다시 계산해야 합니다.

원본 좌표 보관

초기 coords 값을 data 속성 등에 저장합니다.

배율 계산

표시 너비 ÷ 원본 너비로 비율을 계산합니다.

리사이즈 반영

창 크기가 바뀔 때 각 좌표에 배율을 곱합니다.

비율 유지

이미지 가로·세로 비율이 변하면 클릭 영역도 왜곡됩니다.

접근성 설정

각 area에는 링크 목적을 설명하는 alt를 작성합니다.
title은 보조 설명이며 핵심 내용은 alt에 작성합니다.
새 창 링크에는 rel="noopener noreferrer"를 함께 사용합니다.
중요한 링크는 이미지맵 외에 텍스트 링크도 제공하는 것이 좋습니다.

사용 시 주의사항

모바일 터치

클릭 영역이 너무 작으면 손가락으로 누르기 어렵습니다.

이미지 교체

원본 크기나 구성이 바뀌면 좌표를 다시 만들어야 합니다.

이메일 호환성

일부 이메일 클라이언트는 이미지맵이나 스크립트를 제한합니다.

SVG 대안

복잡한 반응형 인터랙션은 SVG 링크가 더 적합할 수 있습니다.

이미지맵 만들기

이미지는 서버로 전송되지 않고 브라우저에서 처리됩니다.

이미지맵 생성기 열기