그누보드 반응형 사이트에서 이미지맵(Image Map)이 깨질 때 해결하는 방법

• 목록
• 스크랩

그누보드 반응형 사이트에서 이미지맵(Image Map)이 깨질 때 해결하는 방법

반응형 웹 환경이나 모바일 화면에서 이미지 크기에 따라 이미지맵(area) 좌표가 어긋나는 문제를 해결하기 위해, jQuery Image Map Resize 라이브러리를 그누보드 테마에 적용하고 설정하는 구체적인 절차를 얻을 수 있습니다.

반응형 사이트 이미지맵 좌표 어긋나 김 현상 원인

모바일이나 반응형 사이트에서 이미지맵을 적용했을 때 링크 영역이 어긋나는 원인은 이미지맵(area 태그)이 고정된 좌표값(coords)을 사용하기 때문입니다.

웹페이지의 해상도나 화면 크기가 축소·확대될 때 이미지는 반응형 스타일에 맞춰 크기가 가변적으로 변하지만, area 태그에 지정된 픽셀 좌표값은 고정되어 있어 화면 크기 변화에 비례하여 자동 조절되지 못하기 때문에 링크 영역이 일치하지 않고 어긋나는 문제가 발생합니다.

Image Map Resize 라이브러리 파일 다운로드 및 업로드 방법

그누보드 기본(basic) 테마 환경에서 반응형 이미지맵 좌표 어긋남 문제를 해결하기 위해 Image Map Resize 라이브러리를 설치하려면 다음 경로와 파일 구성에 따라 진행합니다.

1. 라이브러리 파일 다운로드

• 지정된 GitHub 저장소(https://github.com/davidjbradshaw/image-map-resizer)에서 파일을 다운로드한 후 압축을 풉니다.
• 압축을 해제한 폴더 내의 image-map-resizer-master/js/imageMapResizer.min.js 경로에 있는 파일만 준비합니다.

2. 그누보드 서버 업로드

• 준비한 imageMapResizer.min.js 파일을 그누보드가 설치된 루트 디렉토리 하위의 js 폴더에 업로드합니다.

head.sub.php에 자바스크립트 추가 위치와 코드

그누보드 테마의 공통 파일인 theme/basic/head.sub.php 파일에서 자바스크립트를 추가하는 올바른 위치와 코드는 다음과 같습니다.

수정 위치

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); // 이미지맵 리사이즈

tail.php에 imageMapResize 실행 코드 추가 방법

페이지가 여러 군데에 있어서 스크립트를 개별 페이지마다 중복해서 넣을 필요 없이, 그누보드 공통 파일인 tail.php를 활용해 일괄 적용할 수 있습니다.

적용 방법

1. 이미지맵이 적용된 페이지에 넣는 기본 실행 스크립트 코드를 준비합니다.

    <script>
    $('map').imageMapResize();
    </script>

2. 해당 코드를 개별 페이지에 각각 넣지 않고, 그누보드 공통 파일인 theme/basic/mobile/tail.php 파일에 추가합니다.

주의사항

• 사용하는 테마가 기본 basic 테마가 아닐 경우, 테마 경로(theme/사용테마명/)에 맞춰 파일 경로를 수정해야 합니다.

그누보드 커스텀 테마 환경에서 파일 경로 수정 방법

그누보드 기본 테마(basic)가 아닌 커스텀 테마를 사용하는 경우, 사용하는 테마 폴더 구조에 맞춰 경로를 수정해야 합니다.

테마 경로 수정 기준

• 원문 가이드는 theme/basic 테마의 mobile 폴더 등을 기준으로 작성되었습니다.
• 사용하는 테마가 다를 경우, theme/사용테마명/ 경로에 맞추어 head.sub.php와 tail.php 등의 파일 경로를 수정해야 합니다.
• 만약 커스텀 테마 내에 모바일 폴더 구조나 공통 파일 경로가 다르다면, 실제 테마 디렉토리의 파일 위치를 확인한 후 스크립트 추가 위치를 조정해야 합니다.

게시판 에디터 이미지맵 작동 오류 원인

게시판 글쓰기 과정에서 HTML 기능을 켜고 이미지맵 소스를 입력했을 때, 에디터 화면에서는 링크가 정상적으로 잡히지만 글 등록 후 보기 화면에서는 이미지만 나오고 이미지맵이 작동하지 않는 현상은 게시판 에디터의 보안 정책 때문에 발생합니다. 개발자 커뮤니티 사례에 따르면, 게시판 에디터는 보안 문제로 인해 본문 내 스크립트 삽입 및 특정 속성을 제한하므로 등록 시 필터링되어 스나이퍼나 관련 속성이 누락될 수 있습니다.

대처 방안

• 직접 페이지를 생성하여 적용합니다.
• 해당 스크립트만 예외 처리를 적용합니다.
• 특정 글쓴이가 스크립트 필터링에 걸리지 않도록 소스 코드를 수정합니다.

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

내 상황

• 그누보드 기반 반응형 사이트에서 이미지맵(area 태그)을 적용했으나, 해상도와 화면 크기 변화에 따라 링크 영역이 어긋나는 문제 발생

선택 기준

• jQuery 기반의 Image Map Resize 라이브러리를 사용하여 화면 크기 변화에 비례해 area 좌표를 동적으로 조정
• 그누보드 기본 basic 테마의 파일 구조 및 공통 파일을 활용하여 스크립트 적용

다음 행동

1. 라이브러리 준비: GitHub(https://github.com/davidjbradshaw/image-map-resizer)에서 파일을 다운로드 후 imageMapResizer.min.js 파일을 그누보드 설치 경로의 js 폴더에 업로드합니다.
2. 스크립트 로드: theme/basic/head.sub.php 파일 내 modernizr.custom.70111.js 로드 코드 바로 밑에 add_javascript('<script src="'.G5_JS_URL.'/imageMapResizer.min.js"></script>', 1);를 추가합니다.
3. 실행 코드 적용: 이미지맵이 적용된 페이지에 <script>$('map').imageMapResize();</script>를 추가합니다. 여러 페이지에 일괄 적용 시 theme/basic/mobile/tail.php 파일에 해당 코드를 추가하십시오. (사용 테마가 basic이 아닌 경우 해당 테마 경로에 맞게 수정 필요)

실전 FAQ

Q. 게시판 에디터에 이미지맵 소스를 넣었는데 등록 후 작동하지 않습니다.

• 원인: 게시판 에디터는 보안 정책상 본문 내 스크립트 삽입 및 특정 속성을 제한하여 등록 시 필터링합니다.
• 대안: 직접 페이지를 생성하여 적용하거나, 관리자 설정에서 해당 스크립트 영역의 예외 처리를 적용해야 합니다.

Q. 기본 테마가 아닌 커스텀 테마를 사용 중입니다.

• 대안: 원문 가이드는 theme/basic을 기준으로 합니다. 커스텀 테마 사용 시 theme/사용테마명/ 경로 내의 head.sub.php 및 tail.php 파일 위치를 확인하여 동일한 로직을 적용하십시오.

참고자료

기타 참고자료

• gnustudy.com — 모바일 페이지나 반응형 사이트에 이미지맵 적용 Image Map Resize 사용 - 그누보드팁
• sir.kr — 게시판 보기화면에서 이미지맵 적용이 안됩니다. - SIR - 개발자 커뮤니티
• note.chanyeongpark.com — DevNote - Javascript - jQuery 이미지맵 반응형 적용하기 (area 태그)