대체텍스트에 관한 심각한 고민

[박민권]

<h1><img src="photo" alt="대체문자" /></h1>

이렇게 하더라도 검색엔진이 alt의 대체문자를 아래처럼 인식할까요?

<h1>대체문자</h1>

<h1><span>숨긴문자</span></h1>

이런식으로 해서 h1에 백그라운드 이미지를 심어주는 방법도 생각해봤지만
이럴경우 사용자가 img를 보이지 않게 설정했다면 숨긴문자가 표시가 안되니
alt보다 못하다는 느낌이 듭니다. CSS해지를 통해서 볼 수 있지만 단순히 이미지만
꺼놓은 사람에게는 문제가 있지 않을까 싶네요.

둘중 무엇으로 해야할지 고민입니다.

[hyeonseok]

XHTML 2.0 에서는

<h1 src="photo">대체문자</h1>

정말 훌륭하지 않습니까?
한 3~4 년 지나면 가능 할까? -_-;;

[소프트원트]

한 가지를 선택해야 하지 않을까요? 검색엔진이냐 사용자냐라는 선택.

그리고 하나의 문서가 있을 때, 검색엔진이 모든 내용을 검색대상으로 삼지않는다고 들었습니다. 즉 일정 바이트에서 끊어서 검색을 합니다. 또 검색엔진마다 메타태그를 제외하는 경우도 있고, 숨김처리된 텍스트는 아예 제외하는 것으로 압니다. 사기성 웹사이트들이 있어서,
그러니 키워드 하이재킹 액티브X 플러그인이 넘쳐나고 그게 영업적으로 효과가 있죠. 이젠 웹문서 내부가 아닌 돌아다니며 유포되는 애드웨어가 효과적인 웹사이트 홍보일 것입니다. 그러나 이건 기술을 이용한 사기행위이자 도둑질이죠.

그리고 국내사용자들 이미지 꺼놓은 경우 거의 없습니다. 초고속 인터넷 환경에서는 그럴 이유가 없죠. 그 부분에 신경쓰지 않는 게 좋을 듯싶습니다. 글로벌 환경을 고려한다면, 이미지보단 텍스트 위주가 가장 합리적이겠죠. MS 사이트가 화려할 뿐, 글로벌 기업 사이트가면 사실 좀 초라하다고 느끼죠. 방송국 사이트도 그렇고.

차니님 강연에서 그랬나요? 독일에서 KBS방문하면 너무 더디다고.. 우리는 실감하지 못하고 있죠. ^^

[박민권]

XHTML 2.0 에서는

<h1 src="photo">대체문자</h1>

정말 훌륭하지 않습니까?
한 3~4 년 지나면 가능 할까? -_-;;

이런게 있다면 정말 좋을텐데요. ㅋ~

대체텍스트와 숨김문자 둘다 완벽할 수 없으니 아무래도 가장 최적이라 생각되는 곳에 써야겠네요.

[신승식]

Code: Select all

<h1><img src="photo" alt="대체문자" /></h1>

이 방법에 아무 문제가 없습니다. W3C 첫 페이지에서도 위와 같은 방법을 쓰고 있습니다. 그리고 구글 등에서 제목으로 아주 잘 인식해줍니다. 아래는 W3C(World wide Web Consortium) 첫 페이지에서 쓴 예제입니다.

Code: Select all

<h1 id="logo"><img alt="The World Wide Web Consortium (W3C)" height="48" width="315" src="/Icons/w3c_main" /></h1>

그러니 아래와 같은 꼼수를 쓸 필요가 별로 없습니다. 이미지도 대체 텍스트를 달면 충분히 텍스트와 동일한 데이터로서의 가치가 있습니다.

Code: Select all

<h1>대체문자</h1>
<h1><span>숨긴문자</span></h1>

위와 같은 방법이 사실 http://www.csszengarden.com과 같은 곳에서 CSS의 막강함을 보여주기 위해 사용되는 방법과 비슷한 방법이지만, 이미지로서 가치가 있는 이미지는 백그라운드로 쓰는 것보다는 이미지 자체를 소스에 드러내는 것이 의미적(semantic)으로도 더 바람직한 방법이 아닐까 생각합니다.

[박민권]

이 방법에 아무 문제가 없습니다. W3C 첫 페이지에서도 위와 같은 방법을 쓰고 있습니다. 그리고 구글 등에서 제목으로 아주 잘 인식해줍니다. 아래는 W3C(World wide Web Consortium) 첫 페이지에서 쓴 예제입니다.

Code: Select all

<h1 id="logo"><img alt="The World Wide Web Consortium (W3C)" height="48" width="315" src="/Icons/w3c_main" /></h1>

그러니 아래와 같은 꼼수를 쓸 필요가 별로 없습니다. 이미지도 대체 텍스트를 달면 충분히 텍스트와 동일한 데이터로서의 가치가 있습니다.

Code: Select all

<h1>대체문자</h1>
<h1><span>숨긴문자</span></h1>

감사합니다. 텍스트로써의 가치를 가진다니 다행이네요.

[okoru]

저의 경우 이럴 땐

Code: Select all

<h1>타이틀</h1>

이라고 써서 구조적으로 만들고 CSS에서

Code: Select all

h1 {
	width: 200px;  //그림 파일('image.gif')의 폭
	height: 40px;  //그림 파일의 높이
	background: url('image.gif') no-repeat;  //그림 파일의 주소
	text-indent: -8000em;  //글자를 숨기기 위한 트릭
	text-decoration: none;  //링크 된 경우 밑줄 재거
}

라고 쓰는 방식으로 해결하고 있습니다만, 이렇게 하는 편이 h1에 src를 넣는 것 보다 더 구조 적이고 CSS 적용에 있어서도 유연하지 않을까요?

[yser]

박민권 님이 무엇을 바라시는 건지 잘 이해가 안되지만..

대체 텍스트? 이미지에 관한 것이라면.. 외국에서 잘 쓰이는 팁 중 바로 윗분이 쓰는 방법이 있는데요. 그런데 저 방법의 경우, css 는 켜되 이미지를 꺼버리면 아예 텍스트도 이미지도 없어서 아무 것도 안보이는 사태가 일어날 수 있다는 단점이 있습니다. 그래서, 그 편법으로 어떤 외국 블로그에서는 트릭을 쓰기도 하더군요.

바로 이미지에 쓰이는 배경색을 글자색과 같이 하는 것입니다. 이렇게 하면 텍스트 인덴트로 좌측 밀어버리기로 글자를 숨기지 않고, 배경색이 글자색과 같으므로 글자가 비록 있더라도 배경색에 묻혀 버리는거죠. 단 ctrl+a 나 마우스 드래그시 글자가 보이긴 하겠죠. 단점으로는 이미지에 따라 한계가 있다는 점.. 배경색이 그라데이션 등이 들어가면 적용하기 힘들다는 점이 있겠군요.

xhtml 2.0 은 고사하고 아직 xhtml 1.0 조차 인식이 거의 퍼져 있지 않은 국내 현실을 볼 때, 2.0 이 draft 라고는 하나 1.0 이 일반적으로 쓰일려면 한 2~3년 정도 걸리지 않을까 생각합니다. 너무 기나요? 여튼 조금씩이라도 옮겨가야 하는데 브라우저들의 css 버그 문제도 그렇고 이런 팁들이 차후에는 도리어 걸림돌이 될지도 모르겠다는 생각이 듭니다. 그냥 참고만 하세요.

[박민권]

박민권 님이 무엇을 바라시는 건지 잘 이해가 안되지만..

이미지에 alt를 쓰자니 검색엔진이 텍스트로 인식하지 않을 것 같고
css를 이용해 숨기자니 단순히 이미지 숨김을 해버리면 아무것도 안보이니
둘다 만족하는 것을 생각하다가 뭐 alt도 텍스트로 인식해주고 이래저래 생각해
봤는데 둘다 장단점이 있어서 적재적소에 알아서 쓰기로 했습니다.