이미지 위에 히트맵 추가하기 (이미지 맵 만들기)
⚠️ 주의사항:
이 글에서는 클라이언트 사이드(브라우저 단) 이미지 맵만 다룹니다. 사용자가 반드시 마우스를 사용해야만 작동하는 서버 사이드 이미지 맵은 절대 사용하지 마세요!
이미지 맵, 그리고 그 단점들
보통 이미지를 <a> 태그 안에 넣으면 이미지 전체가 단 하나의 웹페이지로 연결되잖아요? 반면에 이미지 맵은 이미지 안에 여러 개의 활성화된 영역(이걸 "핫스팟"이라고 불러요)을 만들어서, 각 영역마다 다른 리소스로 연결되게 해줍니다.
예전에는 이 이미지 맵이 내비게이션 요소로 꽤 인기가 있었어요. 하지만 지금은 성능과 웹 접근성(Accessibility) 측면에서 발생할 수 있는 문제점들을 아주 철저하게 따져봐야 합니다.
⚠️ 주의사항:
여러 개의 이미지가 똑같은 이미지 맵을 참조하게 되면 브라우저가 예상치 못한 방식으로 동작할 수 있고, 사용성과 접근성이 심각하게 떨어질 수 있어요.
예를 들어, Safari나 Chromium 기반(Chrome, Edge 등) 브라우저에서 키보드만으로 (Tab 키 등을 이용해) 탐색할 때, 같은 이미지 맵을 재사용하는 두 번째, 세 번째 이미지들은 아예 포커스를 건너뛰어버립니다.
Firefox의 경우는 더 이상해요. 모든 이미지 맵이 동시에 키보드 포커스를 받고, 사용자가 이미지를 지나쳐 계속 탐색하면 두 이미지 사이에 있는 모든 요소를 통째로 건너뛰어버린답니다.
이러한 여러 가지 이유로, 텍스트 링크(CSS로 예쁘게 꾸민 것)를 이미지 맵보다 훨씬 권장합니다. 텍스트 링크는 훨씬 가볍고, 유지보수하기도 쉬우며, 대개 검색 엔진 최적화(SEO)에도 훨씬 유리하거든요. 게다가 스크린 리더, 텍스트 전용 브라우저, 번역 서비스 같은 다양한 접근성 요구를 완벽하게 지원한답니다.
💡 [강사의 실무 & 면접 팁!]
기술 면접에서 웹 접근성이나 시맨틱(Semantic) 마크업에 관한 질문은 정말 단골로 등장합니다. 면접관이 "예전에 쓰던 이미지 맵을 요즘 왜 잘 안 쓰는지 아시나요?"라고 물어볼 수 있어요. 이때 위에서 나온 접근성 저하, SEO 불리함, 키보드 내비게이션 버그 등을 언급하시면 아주 좋은 인상을 남길 수 있습니다.
또한, 여러분이 주로 공부하고 계실 React.js나 Next.js 같은 모던 컴포넌트 환경에서는 이미지 맵 대신, SVG를 활용하여 각 패스(path)에 직접 클릭 이벤트를 달거나,position: absolute를 활용해 투명한 버튼(또는 링크) 요소들을 이미지 위에 덧씌우는 방식을 주로 사용한다는 점도 기억해 두시면 훌륭한 포트폴리오 면접 대비가 될 거예요!
이미지 맵을 올바르게 삽입하는 방법
1단계: 이미지 준비하기
아무 이미지나 쓴다고 다 되는 게 아니에요. 다음 조건들을 충족해야 합니다.
- 이미지만 봐도 링크를 클릭했을 때 어떤 일이 일어날지 사용자가 명확히 알 수 있어야 합니다.
alt(대체 텍스트) 속성은 당연히 필수지만, 모든 사람이 이 텍스트를 볼 수 있는 건 아니니까요 (화면으로 보는 분들을 위해서 시각적 단서도 중요해요). - 어디서부터 어디까지가 클릭 가능한 '핫스팟'인지 명확하게 표시되어 있어야 해요.
- 핫스팟은 어떤 화면 크기(뷰포트)에서든 손가락으로 편안하게 터치할 수 있을 만큼 충분히 커야 합니다. 얼마나 커야 적당할까요? 최소 72 × 72 CSS 픽셀 이상을 권장하며, 터치 영역 사이의 간격도 넉넉해야 합니다. 50languages.com의 세계 지도(글 작성 시점 기준)를 보면 이 문제가 뭔지 딱 알 수 있어요. 러시아나 북미 지역은 큼직해서 탭하기 쉽지만, 알바니아나 에스토니아 같은 작은 나라는 터치하기가 정말 어렵거든요.
이미지를 삽입하는 방법은 평소에 하시던 방식과 거의 똑같습니다 (<img> 태그와 alt 속성을 사용하죠). 만약 이 이미지가 오직 내비게이션 용도로만 쓰인다면 alt="" 처럼 빈 값으로 두셔도 괜찮아요. 단, 나중에 작성할 <area> 태그 안에 반드시 적절한 alt 텍스트를 넣어준다는 전제하에서요!
여기에 추가로 특별한 usemap 속성이 필요합니다. 이미지 맵에 사용할 고유한 이름(공백이 없어야 해요!)을 하나 지어주세요. 그리고 그 이름 앞에 해시 기호(#)를 붙여서 usemap 속성의 값으로 넣어줍니다.
<img src="image-map.png" alt="" usemap="#example-map-1" />2단계: 핫스팟 활성화하기
이번 단계에서는 작성할 코드를 <map> 태그 안에 넣을 거예요. <map> 태그에는 딱 하나의 속성만 있으면 되는데요, 바로 위에서 usemap 속성에 썼던 것과 동일한 지도 name 입니다. (여기선 해시(#)를 빼고 이름만 적습니다!)
<map name="example-map-1"> </map>이제 <map> 태그 안쪽에 <area> 태그들을 넣어줄 차례입니다. 하나의 <area> 태그가 곧 하나의 핫스팟(클릭 영역)을 의미해요. 키보드 내비게이션(Tab 키 이동)이 직관적으로 작동하도록 하려면, <area> 태그를 코드에 작성하는 순서를 실제 이미지가 보여지는 시각적인 순서(예: 좌측 상단에서 우측 하단으로)와 일치시키는 것이 좋습니다.
<area> 태그는 닫는 태그가 없는 빈 요소(void element)이지만, 다음 네 가지 속성이 반드시 필요합니다.
shape
shape속성에는circle(원형),rect(사각형),poly(다각형),default(기본값) 네 가지 값 중 하나를 쓸 수 있어요.shape를default로 설정하면 여러분이 지정한 다른 핫스팟들을 제외한 이미지의 나머지 전체 영역을 차지하게 됩니다.
만약 정의한 영역들끼리 겹치는 부분이 있다면, HTML 코드상에서 먼저 작성된 영역이 우선권을 가집니다. 여기서 어떤 모양을 선택하느냐에 따라 다음 속성인coords에 적어줘야 할 좌표 정보가 달라져요.coords
좌표는 CSS 픽셀 단위로 입력하며, 선택한shape값에 따라 입력 방식이 다릅니다.- circle (원형): 원의 중심점 x, y 좌표를 적고 그 뒤에 반지름의 길이를 적습니다. (총 3개 값)
- rect (사각형): 사각형의 왼쪽 위(좌상단) 모서리의 x, y 좌표와 오른쪽 아래(우하단) 모서리의 x, y 좌표를 적어줍니다. (총 4개 값)
- poly (다각형): 다각형의 각 꼭짓점의 x, y 좌표를 순서대로 적어줍니다. (꼭짓점이 3개면 최소 6개의 값이 필요하겠죠?)
href
링크를 연결할 목적지의 URL을 적습니다. 만약 현재 영역이 어디로도 연결되지 않게 만들고 싶다면 (예를 들어, 속이 빈 고리 모양의 영역을 만들 때) 이 속성을 비워두시면 됩니다.alt
링크가 어디로 이동하는지, 혹은 어떤 기능을 하는지 알려주는 필수 속성입니다.alt텍스트는 이미지를 불러올 수 없을 때만 화면에 표시돼요. 올바른 작성법은 접근성 높은 링크 텍스트 작성 가이드를 참고해 주세요.
만약href속성이 비어있고 동시에 이미 전체 이미지 태그(<img>)에alt속성이 제대로 작성되어 있다면, 여기에alt=""라고 적어도 무방합니다.
<map name="example-map-1">
<area
shape="circle"
coords="200,250,25"
href="page-2.html"
alt="circle example" />
<area
shape="rect"
coords="10, 5, 20, 15"
href="page-3.html"
alt="rectangle example" />
</map>3단계: 모든 사용자에게 잘 작동하는지 확인하기
다 만들었다고 끝이 아닙니다! 다양한 브라우저와 기기에서 이미지 맵을 꼼꼼하게 테스트해야 진짜 완성이에요. 오직 키보드만 사용해서 링크를 이동해 보시고, 이미지를 끈 상태에서도 기능이 작동하는지 확인해 보세요.
만약 이미지 맵의 너비가 240px 이상이라면, 웹사이트를 반응형으로 만들기 위해 추가적인 조정이 필요합니다. 작은 화면에 맞춰서 이미지 크기만 줄이는 것으로는 부족해요. 이미지가 줄어들어도 HTML에 적어둔 coords 좌표 값들은 그대로 유지되기 때문에 서로 위치가 엇갈려 버리거든요.
💡 [강사의 실무 팁!]
3단계에서 언급된 '반응형 문제'가 사실 실무에서 이미지 맵을 기피하는 가장 큰 이유 중 하나입니다. 모바일, 태블릿, 데스크탑 등 화면 크기가 휙휙 변하는 반응형 웹에서는 고정된 좌표값(
coords)을 쓰는 이미지 맵이 완전히 망가져 버립니다.
만약 굳이 좌표 기반의 인터랙션이 필요하다면 자바스크립트로 화면 비율에 따라 좌표를 동적으로 다시 계산해주거나, 앞서 말씀드린 SVG 방식을 사용하는 것이 훨씬 유지보수에 이롭답니다!
더 알아보기
