정보를 꾸며주기 위한 <img> 태그

<img> 태그는 사전적으로는 정보를 지닌 – 의미 있는 – 시각 요소를 문서에 삽입하기 위한 태그이지만, 앞서 언급한 표현의 제약으로 인해 폰트 등을 원하는 대로 표현하기 위한 용도로 사용하기도 하다. 예전부터 – 대다수의 웹 제작자들이 마크업을 표현을 위한 용도로 사용하던 시절부터 – 국내의 거의 모든 사이트들이 사용하는 방법이기도 하다.

문제점

우선 <img> 태그의 남용이 마크업의 의미를 떨어뜨린다. 단순 텍스트와 <img> 태그는 기본적으로 의미하는 바가 다르다. 이미지 검색엔진의 결과물로 나타나는 수많은 텍스트 꾸밈용 이미지들을 보면 <img> 태그의 남용이 잘못된 마크업이라는 생각을 할 수 있다.

또, 남용된 <img> 태그는 구조와 표현의 분리라는 CSS의 목적을 달성하는 데 장애물이 된다. 마크업에 박혀있는 특정 시각 디자인 결과물을 위한 <img> 태그들은 다양한 표현의 걸림돌이다. <img> 태그가 남용된 사이트에서 프린트를 위한 CSS를 제작한다면 그 결과물은 어쩔 수 없이 스크린의 그것에서 크게 달라질 수 없을 것이다. 스크린 디자인을 위해 사용된 <img> 태그의 모양새는 바꾸기가 어렵기 때문이다.

CSS를 이용한 이미지 대치법(Image Replacement)

문제점

앞서 언급한것처럼 <img> 태그는 많은 문제점이 있지만 CSS를 이용한 이미지 대치법 역시 많은 문제를 가지고 있다. 가장 대표적으로 대다수의 이미지 대치법이 텍스트를 숨기거나(display: none;) 화면 밖으로 위치시키는 방법(text-indent: -999em;)을 사용하기 때문에 CSS 활성화·이미지 비활성화 상태에서 화면 상에 아무것도 출력하지 못하며 이 방법을 프린트용 CSS에 동일하게 적용하였을 때 보통의 웹 브라우저들이 기본적으로 배경 이미지를 출력하지 않기 때문에 백지 상태의 인쇄물을 보게되는 경우가 생긴다. (<img> 태그 사용시에는 사용자가 의도하지 않은 사이에 프린터의 잉크나 토너가 낭비된다!)

약간의 해결책

CSS 활성화·이미지 비활성화 상태의 경우 Gilder/Levin의 방법이나 Gilder Levin Ryznar Jacoubsen의 방법을 통해 해결할 수 있다. 하지만 이 방법은 이미지 뒤에 가려진 텍스트가 표시될 수 있는 충분한 공간이 확보되지 않으면 무용지물이 될 수 있다. z-index를 이용한 이미지 대치법도 하나의 방법인데 대치할 요소의 부모 요소에 배경색이 들어가있거나 한 경우에 문제가 생길 수 있다. 그리고 앞의 방법들과 마찬가지로 텍스트의 공간에 대한 문제가 있다. 그리고 이 모든 방법들은 의미없는 추가적인 마크업을 필요로 한다.

프린트 시의 문제는? 프린트용 CSS를 별도로 제작하면 바로 해결된다. 설마 로고와 메뉴가 덕지덕지 붙은 화면을 사용자에게 그대로 출력시키게 하는 것을 그냥 지켜보고 있다면 바로 당신이 관리하는 사이트에 프린트용 CSS를 추가하라.

어떤 것을 선택하느냐?

<img> 태그, 이미지 대치법(Image Replace). 이 방법들 중 어떤 것도 완벽하지 않다. 다만 각 방법들이 서로 다른 문제를 가지고 있고 어떤 것을 선택하느냐에 앞서 이 방법들의 문제점들에 대해 이해한 후에 선택하는 것이 필요하다.

웹 페이지를 제작하면서 자바스크립트를 어떤 부분에 사용해야겠다라고 마음 먹으면 우리는 자바스크립트를 표시하는 <script> 태그를 쓴다. 앞서 얘기한 설계대로 <script> 태그의 사용 가능하지 않은 경우를 위해 <noscript> 태그를 쓸 수 있다. 어플리케이션 레벨이 아닌 마크업이 잘 되어 정상적인 기능을 하는 HTML 문서에 부가적인 사용자 편의성의 증대를 목적으로 사용하는 자바스크립트라면 <script> 태그가 동작하지 않을 경우 자바스크립트가 없는 HTML 문서와 같이 작동하게 되므로 굳이 <noscript> 태그가 필요하지 않을 것이다.

<form action="insert" id="f">
    <fieldset>
        <label for="yourjob">당신의 직업</label>
        <input type="text" name="job" id="yourjob" />
        <a href="javascript:checkForm();">전송</a>
    </fieldset>
</form>

<script type="text/javascript">
// <![CDATA[
function checkForm() {
    var form = document.getElementById("f");
    if (form.elements["job"].value == "") {
        alert("직업을 입력해주세요.&quot);
    } else {
        form.submit();
    };
};
// ]]>
</script>

<form action="insert" id="f">
    <fieldset>
        <label for="yourjob">당신의 직업</label>
        <input type="text" name="job" id="yourjob" />
        <input type="submit" value="전송" />
    </fieldset>
</form>

<script type="text/javascript">
// <![CDATA[
if (document.getElementById && document.getElementById("f")) {
    var form = document.getElementById("f");
    form.onsubmit = function() {
        if (this.elements["job"].value == "") {
            alert("직업을 입력해주세요.&quot);
            return false;
        };
    };
};
// ]]>
</script>

모든 사용자가 당신의 자바스크립트 코드를 실행할 수 있을 것이라고 기대하지 말아야 한다. 또, 어떤 사용자는 당신의 자바스크립트 코드 중 어떤 부분을 제대로 해석하지 못한다는 것을 알아야 한다.

자바스크립트는 플래시, ActiveX와 같은 외부 플러그인과 개념 상 다르지 않다. 오히려 언급한 것처럼 사용자에 따라 불완전하게 실행될 가능성이 있기 때문에 더 다루기 어려운 기술임을 인식하여야 한다.

참고 링크

• Unobtrusive JavaScript – wikipedia
• Behavior Seperation – A List Apart
• 자바스크립트를 올바르게 사용하기 – Sangini World
• 접근성을 해치지 않는 자바스크립트의 사용 – 신현석

마지막 업데이트: 2008년 4월 25일 04시 30분