[PHP + HTML] map 태그 - 이미지 맵 링크 이동 안 할 때

서론

회사에는 많은 이벤트들이 열리고 그중 몇은 링크로 이동이 필요합니다.

 

DB에 url과 버튼 사용여부만 저장해서 대응하기엔

다양한 디자인을 적용하기 어렵고

롤링(이벤트 설명 이미지)과 따로 노는 문제가 있습니다.

그렇다고 이벤트가 있을 때마다 하드코딩을 하기엔 인력이 없습니다...

 

 

해결책으로 디자인팀이 롤링에 버튼 이미지를 넣어주면

개발팀은 해당 이미지에 <map> 태그를 이용해 링크를 맵핑합니다.

 

하지만 이것도 약간의 하드코딩이 필요하기에

저는 관리자 서버에 맵핑 정보를 등록하는 기능을 만들었습니다.

 

1. 아래 링크를 통해 이미지의 버튼 위치 coords값을 추출
   이미지 coords값 찾아주는 곳 : https://www.image-map.net/
2. 게시글 작성시 링크 추가 버튼 누름 ('shape값', 'coords값', '링크 url'를 입력할 수 있는 <input type="text"> 생성)
3. 작성 완료 후 등록하면 ['게시글 index', 'shape값', 'coords값', '링크 url']가 게시글 링크 테이블에 등록됨
4. 게시글 뷰어로 접속할 때 게시글 index로 게시글 링크 테이블을 조회해 링크 정보 배열을 받아오기
5. 반복문으로 <area> 추가

분명 좋은 아이디어였고 앱에서는 동작했습니다.

 

하지만 웹에서는 맵 링크가 동작하지 않았습니다...

 

---

오류 분석

이미지가 다른 요소 뒤로 가려진 건가 하고 z-index:1000;를 추가해봐도 안되고

웹 서버에서 보안상 외부 링크를 차단하나 하고 <a>태그를 추가해 보았으나 이동됐고

이미지 요소에 클릭 이벤트가 안 먹히나 하고 javascript로 addEventListener를 추가했으나 동작합니다...

 

이유가 뭘까 하고 이미지 이곳저곳을 클릭하는데 문득

버튼 위치보다 한참 아랫부분에서 링크가 동작하는 것을 보고 문제를 알았습니다!

 

 

웹에선 게시글을 보여줄 수 있는 공간이 제한되다 보니

이미지를 불러올 때 width: 100%로 사이즈를 조절합니다.

 

하지만 <map> 태그의 원리는 이미지의 픽셀 포인트값을 coords로 설정하여

해당 이미지의 해당 픽셀 포인트값 내에서 클릭이 발생하면 링크 이동이 발생합니다.

 

즉!! 이미지 사이즈가 조정되면서 링크 연결될 픽셀 포인트값이 어긋났고

원본 위치를 한참 넘어선 위치에 링크가 연결된 것입니다!!!

 

 

---

해결

해결은 수학을 이용하면 간단합니다!

 

이미지 축소비율 = 웹에 게시될 이미지 width / 원본 이미지 width

 

이렇게 이미지 축소비율을 구해서 coords의 값에 일일이 곱해주면 되는 겁니다!

 

 

저는 PHP의 getimagesize()를 이용해 원본 이미지 width 값을 구했고

웹에 게시될 이미지는 width: 1000px;로 고정한 다음

explode()로 coords를 배열로 해체하고

foreach()로 각 값에 이미지 축소비율값을 곱해준 다음

다시 implode()를 사용해 문자열로 바꿨습니다.

 

// 이미지 축소 비율 구하기
list($width, $height, $type, $attr) = getimagesize("img/flag.jpg");
$per = 1000 / (int)$width;

// coords 조정
foreach($map_arr as $map_k => $map_v) {
    $coo_arr = explode(',', $map_v['coords']);
    foreach($coo_arr as $k => $v) {
        $num = str_replace(' ', '', $v);
        $res = (int)$num * $per;
        $coo_arr[$k]  = (int)$res; // 소숫점 버리고 정수로 만들기
    }
    $map_arr[$map_k]['coords'] = implode(',', $coo_arr);
}

 

---

덧붙이는 말

앱이 웹뷰로 되어있어서 <map>을 이용한 링크 이동을 사용할 수 있었는데

웹에서는 coords를 조정해주는 과정이 필요했지만 앱은 필요 없는 걸 보면

뭔가 내장된 기능이라도 있는 걸까요..?

 

아니면 디스플레이 폭에 이미지가 맞춰질 경우 coords 값도 자동 조정되는 건가..?

 

 

 

시간 나면 앱 개발자 분과 이야기해 봐도 좋을 것 같습니다. ㅎㅎ

오늘도 이렇게 포스팅 하나 끗~!