Effective Java Review Tech Translate book java kotlin javascript react redux-saga kotlin tech translate

이미지 대치 기법

Posted on 2012-05-22

Image Replacement

이미지 대치 기법이라고 합니다.

먼저 Text + CSS로 마크업한 뒤 그 내용을 그것을 표현하는 이미지로 가려 실제 일반적인 환경(대표적으로 PC 브라우저)의 유저들에게 Text + CSS의 조합 대신 이미지를 노출하는 기법입니다.

왜 이런 쓰잘데기 없어보이는(?) 일을 할까요.

CSS3의 등장

CSS3 에 되어서는 이제 기존의 플래시나 이미지에 의존하지 않고도 애니메이션이나 재미있는 로고등을 만들어낼 수 있게 되었습니다.

transition 이나 transform 등을 사용해서 여러 효과를 주기도 하고, 예전에는 이미지로 표현했던 border-radius나 box-shadow 등….이제는 CSS로 거의 모든 걸 할 수 있게 되었죠.

하지만 만능은 아니다

하지만 Text + CSS로 모든 걸 할 수 있는 것은 아닙니다. 그리고 해 낸다 하더라도, 복잡한 CSS의 코드에 코드 리딩이 어려워지는 결과를 낳기도 합니다. (유지보수를 맡게 된 개발자의 한숨이 들릴지도 모르겠네요)

보통 CSS와 텍스트의 조합으로 표현하기 어려운 경우 기존에는 이미지로 디자인을 만들어 페이지에 img 태그나 css의 background 속성으로 표현하는게 일반적이었습니다. 보통 회사의 로고등에 그런 작업을 많이 쓰지요.

그러나 최근에는 이미지가 컨텐트의 내용을 직접적으로 표현하는 것은 비권장되며, 가능한 Text + CSS의 조합으로 컨텐트를 표현하는 것이 추천됩니다.

이유가 무엇일까요.

SEO 와 접근성

그 이유중 제일 큰 것은 SEO 때문입니다.

SEO는 검색 엔진 최적화(Search Engine Optimized) 의 약자입니다. 일반적인 브라우저에서 사람의 눈으로 보는 HTML문서와는 별개로 검색 엔진이 페이지를 읽었을 때 효율적으로 검색 엔진에게 정보를 전달할 수 있도록 최적화 마크업을 하는 것을 말합니다.

검색 엔진에게 최적화된 문서는

알맞은 태그를 써서
문자열 형식으로
깨진 링크가 없이 전부 도메인의 페이지가 연결

된 페이지를 말합니다.

Semantic Markup 의 방향과 같다고 볼 수 있죠. 둘이 합쳐지면 SEO++ 가 된다 더군요.

또한 사용자가 HTML을 보는 방식은 PC 브라우저뿐이 아닙니다.

맹인을 위한 스크린 리더, 제한적인 모바일 환경의 브라우저…드물지만 텍스트 브라우저 등, 하나의 HTML에 접근하는 방법은 여러개일 수 있습니다. 이럴 경우 이미지로 표현된 컨텐트는 아무래도 접근성이 떨어지며 해석도 힘듭니다. alt 속성에도 한계가 있습니다.

방법

서론이 길었네요. 다시 본론으로 돌아오죠.

위에 설명한 SEO와 접근성을 높이기 위해 이미지 대치 기법을 사용합니다.

기본 방식은 다음과 같습니다.

텍스트 + CSS로 마크업
텍스트를 안보이게 조작
이미지 CSS 속성 등으로 대신 표시

코드를 예로 들어보죠

요새 제가 관심있어하는 RequireJS 에 대한 포스팅을 쓴다고 가정합니다

1 2	<h1>RequireJS 짱좋네</h1> <p>어저고저쩌고.....더이상의 자세한 설명은 생략한다.</p>

이렇게 마크업할 경우 일단은 SEO와 접근성에서 합격점을 받을 수 있습니다. 그러나 문서의 제목을 좀더 돋보이고 화려한 효과를 줘서 강조하고 싶습니다.

SEO와 접근성을 해치지 않으면서 스타일을 적용하여 이미지 대치 기법을 적용해야 하는 상황이 된거죠.

예전에는 원래 표현할 내용을 span 태그 등으로 감싼 뒤 display를 hidden 등으로 감추거나(파너 이미지 대치 기법), h1안의 텍스트를 text-indent 등의 속성으로 글자를 안보이게 한 뒤에 이미지를 h1의 background 속성으로 지정하는 방법(파크 방법)을 많이 썼습니다.

그러나 이 방법들에는 치명적인 문제가 있는데 첫번째 방법의 경우, 일반적인 스크린 리더등에서는 display: none 등의 비가시성 요소를 해석하지 않아서 문제가 되며, 두번째 방법의 경우에는 브라우저가 CSS를 사용하지만 이미지를 해석할 수 없을 경우 아무것도 볼 수 없습니다.

위 두 방법보다 그나마 제일 안정적이고 어떤 환경에서도 잘 해석되는 방법으로 알려진 방법을 하나 소개합니다. (길더/레빈 방법)

<h1>
    <span></span>RequireJS 짱좋네
</h1>
<p>어저고저쩌고.....더이상의 자세한 설명은 생략한다.</p>

마크업을 위와 같이 의미없는 span 태그를 문자열 앞에 삽입합니다. (이 부분이 이 방법의 최대 단점입니다. 의미없는 마크업이 추가되어야 합니다.)

이제 스타일을 줍니다. h1을 위치지정으로 바꿉니다

h1 {
    position: relative;
    width: 860px;
    height: 40px;
}

그 다음 span을 절대영역으로 지정하고 크기를 100%로 주고 컨텐트 이미지를 배경으로 지정합니다.

h1 span {
    background: url(requirejs) no-repeat;
    position: absolute;
    width: 100%;
    height: 100%;
}

이렇게 하면 CSS를 꺼도, 이미지를 꺼도 어디서든 텍스트나 이미지 둘중 하나는 볼 수 있습니다.

덧붙여…

사실 위와 같은 방법에 더해, 추가적인 정보를 다른 특이한 브라우저나 리더, 검색엔진에 주고 싶다면 img의 alt 속성을 활용할 수 있습니다.

실제 W3C 사이트의 로고는 다음과 같이 구성되어 있습니다.

<h1 class="logo">
    <a tabindex="2" accesskey="1" href="/">
        <img src="/2008/site/images/logo-w3c-mobile-lg" width="90" height="53" alt="W3C">
    </a>
    <span class="alt-logo">W3C</span>
</h1>

W3C 로고를 텍스트로 코딩해두고, 그 위를 로고 이미지로 덮은 뒤에 그 이미지에도 alt 속성으로 W3C임을 나타내고 있죠.

사람에게 잘보이는 것 외에도 기계에게까지 잘 보여야 하다니 웹 접근성과 SEO는 참 어려운 것 같네요.

css seo