DEVINFO 데빈포 그누보드 포럼 쉽게 찾는 그누보드 실전 정보
BOARD

문제 해결

BOARD 문제 해결

그누보드 반응형 웹에서 이미지맵(imageMap) 링크 영역 유지하는 방법

페이지 정보

profile_image
작성자 최고관리자
댓글 0건 조회 9회 작성일 26-09-24 03:28

본문

그누보드 반응형 웹에서 이미지맵(imageMap) 링크 영역 유지하는 방법

반응형 웹 환경이나 모바일 화면에서 이미지 크기가 가변적으로 변할 때 이미지맵의 좌표가 어긋나는 문제를 해결하기 위해, 라이브러리를 적용하고 그누보드 에디터 환경에서 발생할 수 있는 소스 누락 문제를 보완하는 구체적인 방법을 제공합니다.

반응형 웹에서 이미지맵 링크 영역 유지 방법

반응형 사이트나 모바일 페이지에서는 화면 해상도와 이미지 크기가 가변적으로 변하기 때문에, 고정된 좌표값(coords)을 사용하는 일반적인 이미지맵(Image Map)은 링크 영역이 어긋나는 문제가 발생합니다. 이 문제를 해결하기 위해 이미지 사이즈 변화에 맞춰 좌표를 재계산해주는 라이브러리를 사용할 수 있습니다.

추천 라이브러리

  • Image Map Resize: https://github.com/davidjbradshaw/image-map-resizer
  • jQuery RWD Image Maps: https://github.com/stowball/jQuery-rwdImageMaps

적용 및 초기화 방법

  1. 다운로드받은 라이브러리 파일(예: imageMapResizer.min.js 또는 jquery.rwdImageMaps.min.js)을 서버의 /js/ 디렉토리에 업로드합니다.
  2. 페이지 하단 또는 공통 레이아웃 파일에 jQuery와 해당 라이브러리를 불러온 뒤 스크립트를 실행하여 초기화합니다.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="/js/jquery.rwdImageMaps.min.js"></script>
<script>
 $('img[usemap]').rwdImageMaps();
</script>

주의사항 및 확인 사항

  • 그누보드 에디터 종류(예: 스마트에디터 등)에 따라 에디터에서 입력한 이미지맵 태그가 저장 과정에서 제거되거나 정상 출력되지 않는 문제가 발생할 수 있으므로 에디터 설정 및 스크립트 허용 여부를 먼저 확인해야 합니다.
  • 사용 중인 환경과 에디터 종류에 따라 구체적인 적용 방법과 스크립트 삽입 위치에 차이가 있을 수 있습니다.

그누보드 이미지맵 리사이즈 자바스크립트 업로드 및 호출 방법

반응형 웹 환경에서 이미지 크기 변화에 따라 이미지맵 링크 영역을 유지하려면 라이브러리 파일을 서버에 업로드한 뒤 테마 파일에 등록해야 합니다.

1. 자바스크립트 파일 업로드

  • Image Map Resize 라이브러리의 압축 파일을 내려받은 후, image-map-resizer-master/js/imageMapResizer.min.js 경로의 파일만 복사합니다.
  • 복사한 imageMapResizer.min.js 파일을 그누보드가 설치된 서버의 js 폴더에 업로드합니다. (일반적으로 /js/ 디렉토리에 위치시킵니다.)

2. 테마 파일에 스크립트 추가

  • 그누보드 원본 basic 테마의 모바일 폴더 등을 기준으로 theme/basic/head.sub.php 파일을 수정합니다.
  • 파일 내에서 add_javascript('<script src="'.G5_JS_URL.'/modernizr.custom.70111.js"></script>', 1); // overflow scroll 감지 코드를 찾은 후, 바로 밑에 아래 코드를 추가합니다.
     add_javascript('<script src="'.G5_JS_URL.'/imageMapResizer.min.js"></script>', 1); // 이미지맵 리사이즈

3. 페이지 내 스크립트 실행

  • 이미지맵이 적용된 페이지에 진입할 때 다음 스크립트를 실행하여 리사이즈 기능을 활성화합니다.
     <script>
 $('map').imageMapResize();
 </script>

그누보드 에디터 이미지맵 태그 삭제 방지 및 출력 설정

그누보드 에디터(스마트에디터 등)에서 이미지맵 태그(map, area)를 입력하고 저장할 때 태그가 사라지거나 출력되지 않는 현상은 에디터의 HTML 정화(필터링) 기능이나 태그 처리 방식 때문에 발생할 수 있습니다.

1. 에디터 설정 및 HTML 필터링 우회

  • 그누보드 에디터(스마트에디터 등)는 보안을 위해 map, area 태그를 불필요한 코드로 간주하여 저장 시 삭제할 수 있습니다.
  • 이를 방지하려면 에디터의 HTML 정화(Purifier) 설정을 수정하거나, 게시판 스킨의 write_update.php 등에서 입력값을 필터링하지 않도록 처리해야 합니다. 커뮤니티의 '그누보드 에디터 태그 삭제 방지' 관련 팁을 참고하여 에디터 설정 파일 내 허용 태그 목록에 해당 태그를 추가하는 조치가 필요합니다.

2. 스크립트 경로 및 적용 확인

  • 외부 라이브러리(jquery.rwdImageMaps.js 등)를 사용할 때 자바스크립트 파일은 서버의 /js/ 디렉토리 등에 업로드하고, 소스를 불러올 때의 경로를 정확히 맞춰야 합니다.
  • PC에서는 정상 출력되나 모바일에서 위치나 크기가 어긋나는 경우, 앞서 설정한 JS 파일과 페이지 내 초기화 스크립트가 모바일 환경에서 올바르게 호출되고 있는지 점검해야 합니다.

그누보드 공통 파일에 이미지맵 리사이즈 스크립트 일괄 적용하기

이미지맵 리사이즈 기능을 개별 페이지마다 넣지 않고 그누보드 공통 파일(tail.php 등)에 일괄 적용하면 여러 페이지에서 반복 작업을 줄일 수 있습니다.

1. 스크립트 파일 업로드 및 불러오기

  • imageMapResizer.min.js 등의 라이브러리 파일을 서버의 적절한 경로(예: /js/ 폴더)에 업로드합니다.
  • 공통 레이아웃 파일(예: theme/basic/head.sub.php)에서 add_javascript 함수를 사용하여 스크립트를 공통으로 불러오도록 설정합니다.

2. 공통 tail 파일에 초기화 코드 추가

  • 페이지가 여러 군데에 있어 중복해서 넣을 필요가 없을 때, 그누보드 공통 파일인 theme/basic/mobile/tail.php 파일(또는 사용하는 테마의 공통 tail.php)에 아래와 같이 초기화 코드를 추가합니다.
$('map').imageMapResize();

반응형 웹 이미지맵 링크 유지 가이드

  • 내 상황: 그누보드 기반 반응형 웹페이지에서 이미지 크기 변화에 따라 이미지맵(image map) 좌표가 어긋나 링크가 정상 동작하지 않는 경우
  • 선택 기준: 고정된 좌표값을 해상도 가변 크기에 맞춰 실시간으로 재계산하기 위해 전용 자바스크립트 라이브러리(Image Map Resize 또는 jQuery RWD Image Maps) 도입
  • 다음 행동: 라이브러리 JS 파일을 서버의 /js/ 폴더에 업로드한 뒤, head.sub.php 등의 공통 파일에 스크립트를 등록하고 페이지 또는 공통 tail.php에 $('map').imageMapResize(); 초기화 코드를 실행

실전 FAQ

Q. PC에서는 정상 작동하는데 모바일에서만 엉뚱한 위치가 클릭됩니다.

  • 예외 및 대안: 모바일 환경에서 뷰포트 크기에 맞춰 좌표 재계산 스크립트(rwdImageMaps 또는 imageMapResize)가 올바르게 로드되었는지 확인하고, 스크립트 초기화 코드가 모바일 전용 레이아웃(tail.php 등)에도 누락없이 포함되어 있는지 점검합니다.

Q. 그누보드 에디터에서 이미지맵 태그를 입력하고 저장하면 태그가 사라집니다.

  • 예외 및 대안: 에디터의 HTML 정화 기능이나 필터링 설정으로 인해 map 및 area 태그가 제거될 수 있습니다. 에디터 설정에서 스크립트 및 관련 태그가 유지되도록 외부 팁 설정을 선행해야 합니다.

함께 보면 좋은 글

참고자료

기타 참고자료

댓글목록

등록된 댓글이 없습니다.