맨위로가기

이미지 맵

"오늘의AI위키"는 AI 기술로 일관성 있고 체계적인 최신 지식을 제공하는 혁신 플랫폼입니다.
"오늘의AI위키"의 AI를 통해 더욱 풍부하고 폭넓은 지식 경험을 누리세요.
목차

1. 개요

이미지 맵은 웹 페이지에서 이미지의 특정 부분을 클릭 가능하게 만들어 다른 페이지로 이동하거나 특정 기능을 수행하도록 하는 기술을 의미한다. 크게 서버 사이드 이미지 맵과 클라이언트 사이드 이미지 맵으로 구분된다. 서버 사이드 이미지 맵은 초기 웹 브라우저에서 지원되었으며, 클릭된 좌표 정보를 서버로 전송하여 서버에서 해당 정보를 처리한다. 클라이언트 사이드 이미지 맵은 HTML 3.2 버전부터 지원되었으며, HTML의 ``과 `` 태그를 사용하여 이미지 내의 클릭 가능한 영역을 정의한다. 이미지 맵은 과거 텍스트 편집기로 수동 생성되었지만, 현재는 드림위버, KImageMapEditor, GIMP 등의 다양한 응용 프로그램을 통해 쉽게 제작할 수 있다. SVG 이미지 형식은 자체적인 하이퍼링크 및 상호 작용 기능을 제공하므로, SVG 이미지 작업 시 기존 이미지 맵 기술은 일반적으로 필요하지 않다.

더 읽어볼만한 페이지

  • HTML - Alt 속성
    `alt` 속성은 HTML의 `img` 및 `area` 태그에서 이미지를 로드할 수 없을 때 대체 텍스트를 지정하며, 스크린 리더 및 SEO에 영향을 미치고, W3C 지침에 따라 이미지의 의미를 전달하거나 장식용 이미지는 빈 문자열로 지정해야 한다.
  • HTML - 폰트 패밀리 (HTML)
    폰트 패밀리(HTML)는 CSS 스타일 시트, 인라인 CSS, HTML `font` 태그를 통해 웹 페이지 글꼴을 지정하는 방법으로, 사용자 기기에 설치된 글꼴에 따라 표현이 달라지며, CSS의 `font-family` 속성은 글꼴 모양을 식별하고 제네릭 폰트와 글꼴 대체 메커니즘을 통해 일관된 글꼴 표현을 가능하게 한다.
이미지 맵

2. 서버 사이드 이미지맵 (Server-side Image Map)

서버 사이드 이미지맵은 초기 웹 브라우저인 모자이크 (웹 브라우저)에서 처음 지원되기 시작했다.[8] 사용자가 이미지의 특정 부분을 클릭하면, 웹 브라우저는 해당 위치 정보를 서버로 전송한다. 서버는 이 정보를 픽셀 단위로 계산하여 어떤 콘텐츠를 사용자에게 반환할지 결정하며, 이미지 마스크 레이어, 데이터베이스 쿼리, 서버 설정 파일 등을 활용한다.

HTML에서 서버 사이드 이미지맵을 구현하려면 `` 태그 안에 `` 태그를 넣고, `` 태그에 `ismap` 속성을 추가해야 한다. 사용자가 이미지를 클릭하면, 브라우저는 이미지 왼쪽 상단 모서리를 기준으로 X, Y 좌표를 앵커 URL에 쿼리 스트링 형태로 덧붙인다.[9] 브라우저가 `ismap` 속성을 지원하지 않는 경우, 서버는 텍스트 전용 탐색 페이지를 반환하는 등 적절히 응답해야 한다.

2. 1. 작동 원리

서버 사이드 이미지맵은 모자이크 (웹 브라우저) 버전 1.1[8]에서 처음으로 지원하기 시작했다. 서버 사이드 이미지맵은 사용자가 이미지 내부의 어느 부분을 클릭했는지에 대한 위치 정보를 웹 브라우저에서 서버로 전송 할 수 있게 해준다. 서버에서는 이 정보를 가지고 픽셀 단위로 계산해서 어떤 콘텐츠를 사용자에게 리턴해야 하는지를 결정해서 보내줄 수 있다. 이때 서버에서 리턴되어야 할 콘텐츠를 계산하기 위해서는 이미지 마스크 레이어, 데이터베이스 쿼리, 또는 서버 상의 설정 파일 등을 이용할 수 있다.

HTML 코드에서 이러한 형태의 서버 사이드 이미지맵을 구현하기 위해서는 앵커(anchor) 태그 `...` 내부에 존재하는 `` 태그가 필요하며, `` 태그는 `ismap` 속성을 가져야만 한다.

```html



```

사용자가 이미지 내부의 한 부분을 클릭하게 되면, 브라우저는 이때의 (이미지의 우측 상단을 기준으로) X, Y 좌표 값을 앵커 URL에 쿼리 스트링 형태로 붙여서 접근한다[9] (예: `/imagemapper?3,9`).

만약 브라우저가 `ismap` 속성을 지원하지 않는다면, 당연히 클릭 좌표에 해당하는 쿼리 스트링이 앵커 URL에 포함되어 있지 않게 될 것이며, 이런 경우에도 서버는 텍스트만 있는 네비게이션 페이지를 리턴하는 등의 적절한 응답을 보내주어야 한다.

2. 2. HTML 구현

HTML 코드에서 서버 사이드 이미지맵을 구현하려면 `` 태그 내부에 `` 태그를 넣고, `` 태그에 `ismap` 속성을 추가해야 한다.[9]

```html



```

사용자가 이미지 내부를 클릭하면, 브라우저는 이미지의 왼쪽 상단을 기준으로 X, Y 좌표 값을 앵커 URL에 쿼리 스트링 형태로 붙여서 접근한다.[9] (예: `/imagemapper?3,9`).

브라우저가 `ismap` 속성을 지원하지 않는 경우, 쿼리 스트링이 앵커 URL에 포함되지 않는다. 이러한 경우에도 서버는 텍스트만 있는 네비게이션 페이지를 반환하는 등 적절하게 응답해야 한다.

3. 클라이언트 사이드 이미지맵 (Client-side Image Map)

클라이언트 사이드 이미지맵은 HTML 3.2 버전부터 도입되었다. 이 방식에서는 모든 로직이 클라이언트에 존재하므로, 서버에 특별한 로직이 필요하지 않다. 또한 이미지 맵 구현을 위한 자바 스크립트도 더 이상 필요하지 않다. 이러한 변화로 서버 부하를 줄이고 더 빠른 반응 속도를 제공할 수 있게 되었다.

3. 1. HTML

HTML을 사용하여 클라이언트 사이드 이미지맵을 구현할 수 있다.[10]

HTML에서 클라이언트 사이드 이미지맵은 다음과 같은 두 가지 부분으로 구성된다.[10]

  • `` 태그로 둘러싸인 실제 이미지. 이 이미지 태그는 해당 이미지맵의 이름을 지정해주는 `usemap` 속성을 가지고 있어야 하며, 이는 여러 개의 이미지맵이 하나의 페이지에 존재 할 수도 있어야 하기 때문이다.
  • `` 엘리먼트와, 이미지맵 내부에서 클릭할 수 있는 각각의 영역을 정의해 주는 `` 엘리먼트들. 이것들은 보통의 웹 링크(web link)에서 어떤 URL이 열려야 하는지를 정의해 주는 ` 태그`와 비슷하다.


`` 태그에는 `title` 속성을 추가하여 데스크탑 사용자가 마우스 포인터를 해당 영역에 올렸을 때 툴팁이 나타나도록 할 수 있다. 또한 `alt` 속성을 추가하여 스크린 리더와 같은 프로그램이 시각 장애를 가진 사용자에게 링크를 설명할 수 있도록 웹 접근성을 높일 수 있으며, 이는 법적/계약적 요구사항이 될 수도 있다.[10]

아래는 이미지맵 예제이다.

```html

Website map



위키백과


3. 1. 1. 도형 정의

`` 태그는 `shape` 속성을 사용하여 사각형(`rect`), 다각형(`poly`), 원(`circle`) 형태의 클릭 가능한 영역을 정의할 수 있다.[3]

`shape` 속성 값은 좌표 쌍으로 나타내며, 각 쌍은 이미지의 왼쪽/상단 기준 X 값과 Y 값을 쉼표로 구분하여 표시한다.[3]

  • 사각형: `x1,y1,x2,y2` 형태의 네 개 좌표를 설정한다.[3]
  • 다각형: `x1,y1,x2,y2, [...] xn,yn` 형태로 원하는 만큼 좌표(2의 배수)를 설정한다.[3]
  • 원: `x1,y1,radius` 형태로 하나의 좌표 쌍과 반지름 값을 설정한다.[3]


아래 코드는 (9,372,66,397) 크기의 사각형 영역을 정의하며, 사용자가 이 영역 안을 클릭하면 영어 위키백과 홈페이지로 이동하는 예시이다.[3]

```html

Website map



Wikipedia


3. 2. CSS

CSS의 절대 위치 지정을 사용하여 이미지 위에 링크를 겹쳐 놓는 방식으로 이미지맵을 구현할 수도 있다. 이 방식은 사각형 형태의 클릭 영역만 지원한다는 단점이 있지만, 아이폰과 같이 HTML 이미지맵의 크기 조절이 잘 안 되는 기기에서 유용하게 사용될 수 있다.[1]

3. 3. 자바스크립트

클라이언트 사이드 이미지맵은 자바스크립트를 이용해서 구현할 수도 있다.

4. 이미지맵의 생성 및 사용

과거에는 텍스트 편집기를 사용하여 수동으로 이미지맵을 생성해야 했기 때문에, 이미지맵의 형태가 단순한 다각형에 그치는 경우가 많았다. 이미지맵 생성의 어려움을 해결하기 위해, 어도비 드림위버나 KDE용 KImageMapEditor, GIMP의 imagemap plugin 등과 같이 이미지맵을 쉽게 만들 수 있는 다양한 응용 프로그램이 개발되었다.

4. 1. 미스터리 미트 내비게이션 문제

클릭할 수 있는 영역이나 링크가 불분명한 이미지 맵은 사용자가 원하는 정보를 찾기 어렵게 만드는 '미스터리 미트 탐색' 문제를 일으킬 수 있다. 예를 들어, 이미지 맵의 특정 영역을 클릭했을 때 어떤 페이지로 이동할지 예측하기 어려울 수 있다. 이러한 문제는 사용자가 마우스를 이미지 위로 가져갔을 때 해당 영역에 대한 설명을 보여주는 롤오버(rollover) 효과를 통해 부분적으로 해결할 수 있지만, 이미지 맵 설계 시 사용자 인터페이스를 신중하게 고려해야 한다.[11][5]

5. SVG 이미지맵

SVG 이미지 형식은 이미지에 하이퍼링크[6] 및 더 정교한 형태의 상호 작용[7]을 추가하는 자체 메커니즘을 제공하므로, SVG 형식의 벡터 이미지 작업 시 기존의 이미지 맵 기술은 일반적으로 필요하지 않다.

참조

[1] 웹사이트 IMG extension for Mosaic 1.1 http://1997.webhisto[...]
[2] 웹사이트 HTML: The Markup Language (an HTML language reference) http://www.w3.org/TR[...]
[3] 웹사이트 Image Maps in HTML http://accessibility[...] Penn State University 2013-10-06
[4] 웹사이트 LibreOffice ImageMap editor help https://help.libreof[...]
[5] 서적 Web Pages That Suck: Learn Good Design by Looking at Bad Design https://archive.org/[...] Sybex Inc 1998-03
[6] 웹사이트 SVG specification: Linking http://www.w3.org/TR[...] World Wide Web Consortium 2019-06-24
[7] 웹사이트 SVG specification: Interactivity http://www.w3.org/TR[...] World Wide Web Consortium 2019-06-24
[8] 웹인용 IMG extension for Mosaic 1.1 http://1997.webhisto[...]
[9] 웹인용 HTML: The Markup Language (an HTML language reference) http://www.w3.org/TR[...]
[10] 웹인용 Image Maps in HTML http://accessibility[...] Penn State University 2013-10-06
[11] 서적 Web Pages That Suck: Learn Good Design by Looking at Bad Design Sybex Inc 1998-03


본 사이트는 AI가 위키백과와 뉴스 기사,정부 간행물,학술 논문등을 바탕으로 정보를 가공하여 제공하는 백과사전형 서비스입니다.
모든 문서는 AI에 의해 자동 생성되며, CC BY-SA 4.0 라이선스에 따라 이용할 수 있습니다.
하지만, 위키백과나 뉴스 기사 자체에 오류, 부정확한 정보, 또는 가짜 뉴스가 포함될 수 있으며, AI는 이러한 내용을 완벽하게 걸러내지 못할 수 있습니다.
따라서 제공되는 정보에 일부 오류나 편향이 있을 수 있으므로, 중요한 정보는 반드시 다른 출처를 통해 교차 검증하시기 바랍니다.

문의하기 : help@durumis.com