map, area tag로 간단하게 페이지 개발하기

• 키워드: image map, map tag, area tag, image map generator
• 상황
  1. 구글의 뉴스레터를 보게 되었는데 페이지를 구성하는 방식이 특이했다.
     https://gpjedm.artique.co.kr/Google_40/Google_40.html
     

     

     뉴스레터 페이지

     HTML markup으로 각 텍스트를 적은 것이 아니라, 뉴스레터를 캡쳐한 듯한 이미지를 통째로 넣어두었다.
     
     
  2. 이미지이지만 하단에 있는 '지금 등록하기' 버튼은 잘 클릭이 되길래 어떻게 구현했는지 궁금했다.
  3. 개발자 도구를 확인해보니 img, map, area tag의 조합으로 구현한 것 같아 해당 태그들을 더 알아보기로 했다.
     

     

     구글 뉴스레터 Elements

• 해결과정
  1. MDN 문서로 map/area tag를 학습한다.
     https://developer.mozilla.org/ko/docs/Web/HTML/Element/area
     

       <map name="infographic">
         <area shape="rect" coords="184,6,253,27"
               href="https://mozilla.org"
               target="_blank" alt="Mozilla">
         <area shape="circle" coords="130,136,60"
               href="https://developer.mozilla.org/"
               target="_blank" alt="MDN">
         <area shape="poly" coords="130,6,253,96,223,106,130,39"
               href="https://developer.mozilla.org/docs/Web/Guide/Graphics"
               target="_blank" alt="Graphics">
         <area shape="poly" coords="253,96,207,241,189,217,223,103"
               href="https://developer.mozilla.org/docs/Web/HTML"
               target="_blank" alt="HTML">
         <area shape="poly" coords="207,241,54,241,72,217,189,217"
               href="https://developer.mozilla.org/docs/Web/JavaScript"
               target="_blank" alt="JavaScript">
         <area shape="poly" coords="54,241,6,97,36,107,72,217"
               href="https://developer.mozilla.org/docs/Web/API"
               target="_blank" alt="Web APIs">
         <area shape="poly" coords="6,97,130,6,130,39,36,107"
               href="https://developer.mozilla.org/docs/Web/CSS"
               target="_blank" alt="CSS">
     </map>
     <img usemap="#infographic" src="/media/examples/mdn-info.png" alt="MDN infographic">

     사용법은 위와 같으며 'img의 usemap'과 'map의 name' 속성이 짝을 이룬다.
     area tag는 map tag와 함께 사용해야하며, map 안에서 rect, circle, poly 등의 모양의 영역을 지정할 수 있다.
     area 영역을 누르면 href 속성 등을 통해 지정한 동작을 수행한다.
     
     
  2. 클릭 가능 영역의 좌표를 지정하기 위해선 coords 속성을 채워넣어야하는데, 정확한 좌표를 아는 것이 쉽지 않을 수 있다. 그럴 땐 image map generator 사이트들을 이용하면 쉽게 해결할 수 있다.
     https://imagemap.org/
     

     Image Map Generator

  3. 사진을 불러와 도형을 그리면 자동으로 area tag를 만들어준다.
     

     

     map, area 속성 자동 생성

     (area coords 속성에 사용되는 값의 단위는 css pixel이다.)
     
     
  4. 구글 뉴스레터 페이지만 해도 이미지의 화질이 좋지 않고 접근성도 좋지 않지만, 간단한 이벤트용 페이지를 빠르게 개발해야하는 상황 등에선 유용하게 사용할 수 있을 것 같다!