IR(image replacement)의 문제점들을 해결할 수 있는 기법?

IR(image replacement)을 쉽게 설명하자면 이미지는 통으로 잘라서 쓰고 이미지에 들어있는 컨텐츠 내용은 텍스트로 코드에 심어놓은 뒤 텍스트를 숨기는 기법입니다. 얼핏 보면 왜 저런 짓을 하느냐고 생각할 수도 있는데 제가 볼때 제일 장점은 구축 및 운영의 시간절약, HTTP Request의 감소 부분인 것 같습니다.

웹 에이젼시에서 있을때는 저런 부분이 별로 와닿지 않아서 관심이 별로 없었는데, 아무래도 지금은 업무특성상 컨텐츠 자체가 이미지로 나오는 게 대부분이고 HTTP Request를 최소한으로 해야하는 입장인지라 IR을 꽤 사용하고 있습니다. 이것은 뭐 회사의 방향성의 부분이기 때문에…

그런데 이 IR 기법은 문제가 아주 많다는 것인데, 다들 아시는 것처럼 윈도우 CSS를 이용하여 백그라운드 처리를 하다 보니 고대비 모드, CSS on - image off의 경우, 프린트시, 불필요한 태그의 사용 등이 있죠. 그래서 항상 사용하면서도 꺼림칙했었는데, 어제 퇴근을 하면서 문득 재밌는 방법을 생각해 냈습니다.

Image Replace Code

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<title>Image Replacement Sample </title>

	<style type="text/css" media="screen">
	.IRContents	 {position:relative;}
	.IRContents	 img	{position:absolute;top:0;left:0;width:400px;height:400px;z-index:10;}
	.replacement	{width:400px;height:400px;overflow:scroll;}
	</style>
	</head>

	<body>

	<div class="IRContents">
		<img src="profile_nowis_img.gif" width="0" height="0" alt="" class="image" />

		<div class="replacement">
			<h1>프로필</h1>
			<ul>
				<li>본명 ...</li>
				<li>출생 ...</li>
				<li>학력 ...</li>
				<li>싫어하는거 ...</li>
				<li>좋아하는거 ...</li>
			</ul>

			<h1>현재</h1>
			<p>경기도 파주에서 ...</p>

			<h1>기타</h1>
			<p>어쩌구 저쩌구 ...</p>

			<h1>기타</h1>
			<p>어쩌구 저쩌구 ...</p>
		</div>
	</div>

	</body>
	</html>

이것이 제가 생각한 코드인데요. 이 방식이 다른 IR 기법과 다른것은 CSS로 Background 처리를 하지 않은 것입니다… 사실 이 코드는 엄밀히 말해서 대체(replacement)한다는 의미는 아닙니다… 그래서 어이없는 방법이기도 합니다 -_-;; 하지만 이 방식은 기존의 IR의 단점을 대부분 커버할 수 있습니다.

단점1. 고대비 모드

윈도우의 고대비 모드 기능을 하용하면 background가 off 되기 때문에 이미지도 안보이고 숨겨놓은 대체 컨텐츠도 안보이게 되는데, 이 코드는 img 태그가 살아있기 때문에 문제가 해결됩니다

단점2. CSS on - image off

이 코드의 대체컨텐츠는 단순히 이미지 뒤에 같은 크기의 박스로 숨어 있을 뿐입니다. 여기에 overflow 속성으로 스크롤만 주면 이미지가 없을때도 컨텐츠를 읽는데 무리가 없어집니다

부가사항. CSS off

하지만 img 태그를 사용하는 방식이기 때문에 css만을 off 했을때, 이미지와 대체 컨텐츠가 중복으로 나오는 문제가 있습니다. 이를 대비하여 img 태그에는 width, height를 0으로 주어 css가 off 됐을땐 이미지가 보이지 않게 합니다.

단점3. 프린트시

뭐 프린트에 대한 경우는 기존의 IR 방식에서도 media type를 이용하여 충분히 커버가 가능한 부분이니 생략하도록 하겠습니다.

단점4. 불필요한 태그의 사용

이 부분은 해결 못한 부분입니다. 결국 시각적으로 ‘중복적인 컨텐츠를 담은’으로 볼 수도 있고, 코드적으로 ‘불필요한 태그’가 들어갔습니다.

뭐 좀 어이없기도 하고, 제가 놓친 문제점도 있긴 하겠지만 IR에 대해 좀 깊이 생각해본 계기였습니다. 그리고 오늘 IR에 대한 글들을 보다가 윤좌진님께서 차라리 longdesc를 사용하는 게 어떻냐는 의견을 봤는데, 센스리더가 longdesc를 지원한다고 하니 그 방법이 오히려 괜찮은 것 같습니다. 대신 longdesc라고 해서 한개당 한페이지를 추가하는게 아니라 책의 ‘역주’를 맨 뒤에 몰아 넣는 것 처럼 longdesc.html 페이지를 하나 만들고 longdesc=”longdesc.html#contents3″ 이런식으로 id값으로 링크를 잡으면 괜찮을 것 같네요. 그럼 이미지와 컨텐츠의 업데이트에 대한 유지보수도 편해질 것 같습니다 :)