그누보드 반응형 게시판 이미지맵(Image Map) 링크 어긋남 해결

• 목록
• 스크랩

그누보드 반응형 게시판 이미지맵(Image Map) 링크 어긋남 해결

반응형 웹 환경에서 이미지 크기가 변할 때 고정 좌표를 사용하는 이미지맵 링크가 어긋나는 문제를 해결하기 위해, 외부 라이브러리를 연동하여 좌표를 동적으로 재계산하는 방법을 안내합니다.

모바일 및 반응형 화면에서 이미지맵 링크가 어긋나는 이유

반응형 웹이나 모바일 환경에서 이미지맵(Image Map)의 링크 영역이 어긋나는 근본적인 원인은 HTML의 area 태그가 고정된 픽셀(px) 좌표값(coords)을 사용하기 때문입니다.

• 현상: 브라우저 창 크기가 변하면 이미지는 반응형 CSS 설정에 따라 가변적으로 크기가 조절됩니다.
• 원인: 이미지는 비율에 맞춰 줄어들거나 늘어나지만, area 태그에 지정된 좌표값은 원본 이미지 크기를 기준으로 고정되어 있어 이미지의 변화를 따라가지 못합니다. 이로 인해 링크 포커스가 이미지상의 원래 위치를 벗어나게 됩니다.

해결 방법: Image Map Resize 라이브러리 적용

이 문제를 해결하려면 이미지 크기 변화에 맞춰 좌표값을 실시간으로 재계산해주는 외부 라이브러리를 사용해야 합니다.

1. 라이브러리 파일 업로드

Image Map Resize 라이브러리에서 imageMapResizer.min.js 파일을 다운로드하여 그누보드 설치 경로의 /js 폴더에 업로드합니다.

2. 게시판 스킨에 스크립트 추가

이미지맵을 적용할 게시판 스킨의 view.skin.php 파일 하단(스크립트 영역)에 아래 코드를 추가합니다.

<script src="<?php echo G5_JS_URL?>/imageMapResizer.min.js"></script>
<script type="text/javascript">
 $('map').imageMapResize();
</script>

3. 주의사항 및 확인 사항

• 에디터 보안 설정: 그누보드 게시판 에디터는 보안상 map이나 area 태그를 필터링할 수 있습니다. 이미지가 정상적으로 출력되더라도 태그가 제거되지 않았는지 관리자 설정에서 확인이 필요합니다.
• 테마 경로: 사용 중인 테마가 'basic'이 아닌 경우, view.skin.php 파일의 위치가 theme/사용테마명/skin/board/게시판스킨명/view.skin.php와 같이 다를 수 있으므로 실제 경로를 확인하여 수정하십시오.
• 동작 확인: 적용 후 브라우저 창 크기를 조절하며 이미지 내 링크 영역이 이미지 축소/확대 비율에 맞춰 정상적으로 따라오는지 확인합니다.

반응형 이미지맵 좌표 자동 조절 라이브러리

반응형 웹 환경에서 이미지 크기가 변할 때 고정된 픽셀 좌표를 사용하는 imageMap 태그의 링크 영역이 어긋나는 문제를 해결하려면, 좌표를 실시간으로 재계산해주는 jQuery 기반의 외부 라이브러리를 사용해야 합니다. 대표적으로 다음 두 가지 라이브러리가 널리 활용됩니다.

1. 추천 라이브러리

• image-map-resizer: 그누보드 환경에서 가장 권장되는 라이브러리로, 이미지 크기 변화에 맞춰 area 태그의 좌표를 동적으로 조정합니다.
• rwdImageMaps: jQuery 기반의 또 다른 반응형 이미지맵 플러그인으로, 동일한 목적으로 사용됩니다.

2. 그누보드 적용 절차 (image-map-resizer 기준)

1. 라이브러리 준비: GitHub(davidjbradshaw/image-map-resizer)에서 파일을 다운로드한 후 imageMapResizer.min.js 파일을 그누보드 설치 경로의 /js 폴더에 업로드합니다.
2. 스크립트 호출 및 실행: 적용하려는 게시판 스킨의 view.skin.php 파일 하단(스크립트 영역)에 아래 코드를 추가합니다.

   <script src="<?php echo G5_JS_URL?>/imageMapResizer.min.js"></script>
   <script type="text/javascript">
   $('map').imageMapResize();
   </script>

3. 주의사항

• 경로 확인: 사용하는 테마가 basic이 아닌 경우, G5_JS_URL 경로가 실제 파일 위치와 일치하는지 확인하십시오.
• 에디터 보안: 게시판 에디터로 작성 시 보안 필터링으로 인해 map이나 area 태그가 제거될 수 있습니다. 관리자 설정에서 해당 태그가 허용되어 있는지 확인이 필요합니다.
• 렌더링 시점: 반드시 이미지가 로드된 이후에 스크립트가 실행되어야 좌표 계산이 정상적으로 이루어집니다.

그누보드 반응형 이미지맵 리사이즈 적용 방법

반응형 웹 환경에서는 이미지 크기가 브라우저 너비에 따라 가변적으로 변하지만, HTML <map> 태그의 area 좌표는 고정된 픽셀값을 사용합니다. 이로 인해 이미지 크기가 줄어들면 링크 영역이 어긋나는 현상이 발생합니다. 이를 해결하기 위해 Image Map Resize 라이브러리를 사용하여 좌표를 동적으로 재계산해야 합니다.

1. 라이브러리 파일 준비 및 업로드

1. Image Map Resize GitHub에서 라이브러리를 다운로드합니다.
2. 압축을 푼 후 js/imageMapResizer.min.js 파일을 그누보드 설치 경로의 /js 폴더에 업로드합니다.

2. 스크립트 적용 및 실행

페이지마다 개별적으로 스크립트를 추가할 수도 있으나, 그누보드 공통 파일인 tail.php를 활용하면 일괄 적용이 가능합니다.

• 적용 위치: tail.php 파일 내 스크립트 영역
• 추가 코드:

  <script src="<?php echo G5_JS_URL?>/imageMapResizer.min.js"></script>
  <script type="text/javascript">
  $('map').imageMapResize();
  </script>

3. 주의사항 및 확인

• 테마 경로: 사용 중인 테마가 'basic'이 아닌 커스텀 테마라면, theme/사용테마명/ 경로 내의 tail.php 또는 해당 게시판 스킨의 view.skin.php를 수정해야 합니다.
• 에디터 보안: 게시판 에디터로 직접 <map> 태그를 삽입할 경우, 그누보드 보안 설정에 의해 태그가 필터링될 수 있습니다. 태그가 정상적으로 출력되는지 먼저 확인하십시오.
• 동작 확인: 적용 후 브라우저 창 크기를 조절하며 이미지 내 링크 영역이 이미지 축소/확대 비율에 맞춰 정상적으로 따라오는지 확인합니다.

게시판 에디터 내 이미지맵(Image Map) 작동 오류 해결

게시판 에디터에 이미지맵 소스를 입력했음에도 등록 후 작동하지 않는 현상은 그누보드 에디터의 보안 정책 때문입니다. 에디터는 본문 내 스크립트 삽입이나 특정 HTML 속성을 보안상의 이유로 제한하며, 이 과정에서 이미지맵 관련 태그나 속성이 필터링되어 삭제될 수 있습니다.

해결 방법

1. 관리자 설정 확인: 관리자 페이지의 게시판 설정에서 해당 에디터가 스크립트나 특정 태그를 허용하도록 설정되어 있는지 확인하십시오.
2. 직접 페이지 생성: 에디터의 보안 필터링을 우회하기 위해, 게시판 본문에 직접 소스를 넣는 대신 별도의 PHP 페이지를 생성하여 적용하는 것이 권장됩니다.
3. 예외 처리: 관리자 설정에서 해당 스크립트 영역에 대한 예외 처리를 적용하여 필터링을 방지하십시오.

반응형 환경에서 링크 영역이 어긋나는 경우

이미지맵은 고정된 픽셀 좌표를 사용하므로, 반응형 웹에서 이미지가 축소/확대되면 링크 영역이 어긋납니다. 이를 해결하려면 image-map-resizer 라이브러리를 사용해야 합니다.

1. 라이브러리 업로드: imageMapResizer.min.js 파일을 그누보드 /js 폴더에 업로드합니다.
2. 스크립트 로드: theme/basic/head.sub.php 파일 내 modernizr 로드 코드 아래에 다음 코드를 추가합니다.add_javascript('<script src="'.G5_JS_URL.'/imageMapResizer.min.js"></script>', 1);
3. 실행 코드 적용: 이미지맵이 적용된 페이지 하단(또는 공통 tail.php)에 다음 코드를 추가합니다.<script>$('map').imageMapResize();</script>

참고: 사용 중인 테마가 'basic'이 아닌 경우, theme/사용테마명/ 경로 내의 head.sub.php 및 tail.php 파일 위치를 확인하여 적용하십시오.

반응형 이미지맵 좌표 어긋남 해결 가이드

반응형 웹에서 이미지 크기가 변할 때 고정된 픽셀 좌표를 사용하는 <map> 태그의 링크 영역이 어긋나는 문제를 해결하기 위한 단계별 가이드입니다.

내 상황	선택 기준	다음 행동
반응형 화면에서 링크 위치가 어긋남	좌표 동적 재계산 라이브러리 도입	imageMapResizer.min.js를 /js 폴더에 업로드 후 스크립트 실행
게시판 에디터에 태그를 넣어도 작동 안 함	에디터 보안 필터링 확인	관리자 설정에서 태그 허용 확인 또는 별도 PHP 페이지 생성
커스텀 테마를 사용 중임	테마별 파일 경로 확인	theme/사용테마명/ 경로 내의 head.sub.php 및 tail.php 수정

실전 FAQ

Q. 라이브러리를 적용했는데도 반응형에서 링크가 여전히 어긋납니다.

• 예외: 이미지가 완전히 로드되기 전에 스크립트가 실행되면 좌표 계산이 실패할 수 있습니다.
• 대안: 스크립트 실행 코드($('map').imageMapResize();)를 페이지 하단 tail.php 또는 view.skin.php의 가장 마지막 부분에 배치하여 DOM 로드 이후 실행되도록 하십시오.

Q. 커스텀 테마를 사용 중인데 가이드대로 해도 적용되지 않습니다.

• 예외: theme/basic 경로를 기준으로 작성된 가이드는 커스텀 테마의 파일 구조와 다를 수 있습니다.
• 대안: 사용 중인 테마 디렉토리(theme/사용테마명/) 내의 head.sub.php와 tail.php 위치를 확인하여 동일한 로직을 해당 경로에 맞게 수정하십시오.

함께 보면 좋은 글

• 그누보드 반응형 사이트에서 이미지맵(Image Map)이 깨질 때 해결하는 방법
• 그누보드 반응형 웹에서 이미지맵(imageMap) 링크 영역 유지하는 방법
• 그누보드 본문 HTMLPurifier 이미지맵 태그(usemap, map, area) 허용 방법

참고자료

기타 참고자료

• mercury-seed.com — 그누보드 반응형 사이트에서 이미지맵(Image Map)이 깨질 때 해결하는 방법 | 데빈포 : 그누보드 포럼
• usingu.co.kr — 반응형 이미지맵 - HTML | UsingU