CSS를 이용한 Image Replacement 테크닉은 기본적으로 인터넷 상에 웹 디자이너가 원하는 글꼴을 사용자에게 보여주기 위해서 도입된 기법입니다. 사용자의 환경에 따라서 웹 브라우저가 출력하는 글꼴들이 모두 제각각이기 때문에 생겨났다고 할 수 있습니다. 즉, 디자인적 요소로소 특정 글꼴을 꼭 사용하고 싶을 경우, 혹은 사이트의 로고 등을 출력하기 위해 많이 사용됩니다.

이 기법들의 기본 골자는 원래 내용을 사용자에게 보이지 않도록 감추고 이를 이미지로 대치하는 것입니다. 이를 구현하기 위한 방법도 여러가지가 있는데 이를 한자리에 정리해보고자 합니다. 각 방법마다 장단점이 있으며 아직 각 방법의 단점을 모두 커버할만한 기법은 없는 것 같습니다. 어쨌든 이 자리에서 각 기법을 설명하고 각각의 장단점을 언급해보도록 하겠습니다.

※ 이 글은 Dave Shea씨가 정리한 Revised Image Replacement를 풀어 쓴 것이며 이 곳에 사용한 코드들 또한 Dave Shea씨의 예제를 그대로 빌려왔음을 미리 밝힙니다.

Farhner Image Replacement (FIR)

이 기법은 가장 먼저 소개된 Image Replacement 기법입니다. 이미지로 대치하고자 하는 내용(Revised Image Replacement)을 담고 있는 태그(<h3>)에 대치하고자 하는 이미지(sample-opaque.gif)의 크기를 지정하고 background-image 속성을 사용해서 이미지를 출력시킵니다. 그리고 대치하고자 하는 내용을 <span> 태그로 감싼 후 css로 display: none; 속성을 적용시켜 화면에 보이지 않도록 하여 배경에 지정한 이미지만 사용자에게 보여주는 기법입니다.

<h3 id="header">
	<span>Revised Image Replacement</span>
</h3>

/* css */
#header {
	width: 329px;
	height: 25px;
	background-image: url(sample-opaque.gif);
	}
#header span {
	display: none;
	}

하지만 이 기법은 추가적인 <span> 태그를 사용해야 한다는 것과 보다 빠른 웹 브라우징을 위해 CSS는 키고 이미지는 끄고 웹 브라우저를 사용하는 사용자들에게는 아무 것도 보이지 않는다는 단점이 있습니다. 또한 이미지 리더 사용자들도 아무런 정보를 얻을 수 없습니다. Image Replacement 기법의 대표적 단점을 모두 가지고 있다고 할 수 있습니다.

Single-pixel <img> Replacement

이 기법은 <h3> 태그 안에 <img> 태그를 사용하여 1 픽셀짜리 이미지를 삽입함으로서 <img> 태그의 alt 속성을 사용함으로서 스크린 리더 사용자들에게 정보를 제공할 수 있습니다.

<h3 id="header">
	<img src="shim.gif" alt="Revised Image Replacement" />
	<span>Revised Image Replacement</span>
</h3>

/* css */
#header {
	width: 329px;
	height: 25px;
	background-image: url(sample-opaque.gif);
	}
#header span {
	display: none;
	}

하지만 아무 의미 없는 <img> 태그가 하나 더 추가되었습니다. ㅡㅡ;

Radu Method

이 기법은 추가적인 태그는 사용하지 않습니다. <h3> 태그의 width 값과 margin 값을 이용하여 대치용 이미지의 크기를 정해줍니다. 이때 margin 값에 마이너스 값을 사용함으로서 <h3> 태그의 내용을 화면 밖으로 밀어내버립니다. 그리고 background-position 속성을 이용하여 배경에 사용된 이미지의 위치를 잡아줍니다.

<h3 id="header">
	Revised Image Replacement
</h3>

/* css */
#header {
	background: url(sample-opaque.gif) no-repeat top right;
	width: 2329px;
	height: 25px;
	margin: 0 0 0 -2000px;
	}

이 방법은 IE 5에서도 제대로 출력되고 스크린 리더 사용자들에게 제대로 정보를 전달하며 추가적인 태그를 사용하지 않기는 하지만 CSS on/Image off 시의 문제는 해결하지 못합니다. 또한 레이아웃 잡을 때에도 여러 문제가 생길 수 있습니다.

Leahy/Langridge Method

이 방법은 <h3> 태그의 height 값을 0으로 지정하여 태그 내의 내용을 감추고 대신 padding 값을 사용하여 이미지의 크기를 지정해 줍니다.

<h3 id="header">
	Revised Image Replacement
</h3>

/* css */
#header {
	padding: 25px 0 0 0;
	overflow: hidden;
	background-image: url(sample-opaque.gif);
	background-repeat: no-repeat;
	height: 0px !important;
	height /**/:25px;
	}

하지만 이 방법을 사용하여 IE 5에서 제대로 출력하기 위해서는 Box model heck을 사용해야합니다. 게다가 이 방법도 CSS on/Image off 시의 문제는 해결하지 못합니다.

Phark Method

이 방법은 <h3> 태그 내의 내용을 화면 밖으로 밀어낸다는 점에서 Radu Method와 같습니다. 하지만 마이너스 margin 값을 이용하는 대신에 마이너스 text-indent 값을 사용합니다.

<h3 id="header">
	Revised Image Replacement
</h3>

/* css */
#header {
	text-indent: -100em;
	overflow: hidden;
	background: url(sample-opaque.gif);
	height: 25px;
	}

이 기법의 장점은 스크린 리더에서 제대로 정보를 전달한다는 것과 추가적인 태그를 사용하지 않는다는 것입니다. 하지만 역시 CSS on/Image off 문제는 해결을 못합니다. 게다가 IE 5와 Safari에서 제대로 적용되지 않습니다.

Phark Revisited

이 방법이 요즘 가장 많이 사용되는 방법이 아닐까 합니다. 위의 방법의 IE 5와 Safari 문제를 해결한 방법입니다.

<h3 id="header">
	Revised Image Replacement
</h3>

/* css */
#header {
	text-indent: -5000px;
	background: url(sample-opaque.gif);
	height: 25px;
	}

하지만 역시 CSS on/Image off 문제는 해결하지 못합니다.

Dwyer Method

이 기법은 FIR 기법과 상당히 유사합니다. 하지만 <span> 태그에 display: none;을 사용하는 대신 가로, 세로 크기를 0으로 지정함으로서 내용을 화면에 보이지 않도록 합니다.

<h3 id="header">
	<span>Revised Image Replacement</span>
</h3>

/* css */
#header {
	width: 329px;
	height: 25px;
	background-image: url(sample-opaque.gif);
	}
#header span {
	display: block;
	width: 0;
	height: 0;
	overflow: hidden;
	}

이 기법을 사용하면 스크린 리더에서 제대로 정보를 전달하지 못하던 문제는 해결되지만 FIR 기법과 마찬가지로 추가적 태그가 필요하고 CSS on/Image off 상황에서의 문제는 해결하지 못합니다.

Gilder/Levin Method

추가적 <span> 태그를 사용하지만 앞서 살펴본 기법들과는 달리 내용을 감싸는게 아니라 아무런 내용도 담지 않습니다. 이 <span> 태그에 배경 이미지를 지정함으로서 원래의 텍스트를 가려버리는 방법입니다.

<h3 id="header">
	<span></span>Revised Image Replacement
</h3>

/* css */
#header {
	width: 329px;
	height: 25px;
	position: relative;
	}
#header span {
	background: url(sample-opaque.gif) no-repeat;
	position: absolute;
	width: 100%;
	height: 100%;
	}

이 방법을 사용하여 앞서 말한 문제점들을 대부분 해결합니다. 스크린 리더에서도 제대로 정보를 전달하고 CSS on/Image off 시에도 <h3> 태그 내의 내용을 제공합니다. 하지만 추가적인 <span> 태그를 사용해야 한다는 것과 투명한 배경을 사용한 이미지를 사용할 경우 이미지 밑의 텍스트가 비친다는 문제점이 있습니다.

Lindsay Method

이 방법은 폰트 크기를 1 픽셀로 지정하고 폰트의 색상을 바탕 색과 같은 값을 사용함으로서 텍스트를 감춥니다.

<h3 id="header">
	Revised Image Replacement
</h3>

/* css */
#header {
	background: url(sample-opaque.gif) no-repeat;
	width: 329px;
	height: 25px;
	font-size: 1px;
	color: #xxxxxx;
	}

하지만 역시 CSS on/Image off 시에 아무 것도 보여주지 않으며 이미지의 배경이 단색일 경우에만 사용할 수 있습니다.

CSS on/Image off?

간단하게 Image Replacement 기법들을 살펴보았습니다. 이쯤에서 CSS on/Image off 문제를 한번 언급해야 할 것 같습니다.

각 인터넷 제공업체마다 광속을 자랑하는 우리에게는 별로 와닿지 않겠지만 해외에는 아직도 모뎀 사용자가 많습니다. 따라서 속도를 위해 이미지를 끄고 브라우징을 하는 경우도 있을 수 있습니다. 하지만 대부분의 사용자는 웹 브라우저에 그런 기능이 있는지도 모르는게 사실입니다. 그런데 이게 왜 그렇게 문제가 되냐고요? 문제는 속도입니다. 예전에 모뎀으로 인터넷을 사용해보신 분들은 아시겠지만 웹 페이지 하나 뜨는데 몇년 걸립니다. 이미지나 플래쉬를 많이 사용한 경우에는 더 말할 것도 없고요. 이럴 경우 이미지가 다 로딩되기 전까지는 Image Replacement 기법을 사용한 부분의 내용을 알 수 없습니다. 의도하지 않았지만 웹 브라우저에서 이미지를 끈 경우와 같은 상황이 벌어지는 것입니다. 실제로 저희 집에서 웹 서핑을 할 때도 이미지를 많이 사용한 사이트들의 로딩이 늦는 경우가 종종 있습니다. 따라서 CSS on/Image off 시의 문제점을 염려하는 것은 이러한 모든 경우를 고려해야 된다는 것입니다.

그럼 어느 기법을 사용해야 하나?

앞서 살펴본 여러 기법이 있지만 대체 어느 기법을 사용해야 하는지 고민이 생길 수도 있겠습니다. 이는 선택의 문제입니다. 모든 경우에 제대로 정보를 제공하기를 원한다면 추가적인 태그를 사용하더라도 Gilder/Levin Method를 사용해야할 것이고 반대로 HTML 문서를 시멘틱하게 유지하고자 한다면 CSS on/Image off 시의 문제점을 감수하더라도 Phark Revisited 등의 기법을 사용해야 하겠습니다.

Dave Shea씨의 글에 따르면 근본적인 해결법은 CSS 3에서 제공하는 content 속성을 이용해서 content: url(image.gif);와 같은 방법으로 내용을 이미지로 대치하는 것이라고 합니다. 하지만 CSS 3 스펙이 완성되고 모든 브라우저에서 이를 제대로 제공하기까지는 앞으로 몇년이 걸릴지 알 수 없는 지금 상황에서는 어쩔 수 없이 위 방법들 중에서 선택하여 사용해야할 것 같습니다. ㅡㅡ;

이상. 긴 글 읽어주셔서 감사합니다. 도움이 되셨기를…

※ Image Replacement를 위해서 플래쉬를 이용하는 방법 등도 있지만 제가 사용해 본 적도 없고 이 글은 CSS를 사용한 테크닉들을 정리한 글이기에 다루지 않았습니다.