이미지 맵(Image Map)은 HTML과 XHTML에서 하나의 이미지 안에 여러 개의 클릭 가능한 영역(핫스팟, hotspot)을 지정하여, 각 영역이 서로 다른 하이퍼링크나 동작을 수행하도록 설정하는 웹 기술이다. 사용자에게는 하나의 온전한 이미지로 보이지만, 실제로는 이미지의 특정 좌표 영역별로 독립적인 링크가 연결된 구조를 가진다.
기술적 구성
이미지 맵은 크게 두 가지 방식으로 구현된다.
1. 서버 사이드 이미지맵 (Server-side Image Map)
- 모자이크 웹 브라우저 1.1에서 처음 지원되었다.
- 사용자가 이미지 내 특정 위치를 클릭하면, 클릭 좌표(X, Y)가 서버로 전송된다.
- 서버는 전송받은 좌표를 픽셀 단위로 계산하여 적절한 콘텐츠를 반환한다.
- HTML에서는
<a>태그 내부의<img>태그에ismap속성을 추가하여 구현한다. - 클릭 시 좌표가 쿼리 스트링 형태(예:
/imagemapper?3,9)로 URL에 붙어 서버에 전달된다.
2. 클라이언트 사이드 이미지맵 (Client-side Image Map)
- HTML 3.2 버전에서 처음 소개되었으며, 현재 가장 널리 사용되는 방식이다.
- 모든 로직이 클라이언트(브라우저)에서 처리되므로 서버 측의 별도 로직이 필요하지 않다.
- HTML의
<map>태그와<area>태그를 사용하여 구현한다.
HTML 구현 구조
<img src="image.png" alt="웹사이트 맵" usemap="#mapname" />
<map name="mapname">
<area shape="rect" coords="9,372,66,397" href="https://example.com/" alt="링크 설명" title="툴팁 텍스트" />
</map>
<map>태그: 이미지 맵을 정의하며,name속성으로 고유 이름을 지정한다.<area>태그: 클릭 가능한 각 영역을 정의한다.shape속성: 영역의 모양을 지정한다.rect(직사각형),circle(원),poly(다각형),default(전체 영역) 중 선택한다.coords속성: 영역의 좌표를 지정한다. 모양에 따라 좌표 개수가 다르다.href속성: 클릭 시 이동할 URL을 지정한다.alt속성: 접근성을 위한 대체 텍스트를 제공한다.title속성: 마우스 호버 시 툴팁으로 표시된다.
usemap속성:<img>태그에서 사용할 이미지 맵의 이름을#맵이름형식으로 지정한다.
활용 분야
- 지도에서 각 국가/지역별 상세 정보 링크 연결
- 내비게이션 메뉴, SNS 아이콘 배치
- 제품 이미지에서 부위별 상세 페이지 연결
- 인포그래픽의 각 요소에 링크 부여
장점과 한계
- 장점: 하나의 이미지 파일로 여러 링크를 구현할 수 있어 이미지를 여러 조각으로 분할할 필요가 없다.
- 한계: 좌표를 수동으로 계산하기 어렵고, 반응형 웹에서 이미지 크기가 변할 때 좌표가 깨질 수 있다. 최근에는 CSS 절대 좌표 기법이나 SVG, 또는 JavaScript 기반의 대체 방법이 더 많이 사용되는 추세이다.
