웹표준이 유행처럼 번지면서 거의 반드시 쫓아다니는 테크닉을 한 가지 꼽으라면 CSS 롤오버를 빼놓을 수 없을 것입니다. 국내에 웹표준이 번지는데 절대적으로 공헌한 실용예제로 배우는 웹 표준에 소개된 기술이기도 하기 때문이기도 합니다만, 무엇보다도 자바스크립트를 쓰지 않고 CSS만으로 동적 메뉴를 구성할 수 있다는 점이 웹 종사자들로 하여금 이 테크닉에 매력을 느끼게 하는 게 아닌가 싶습니다.
그런데, 웹을 돌아다니다 보면 종종 이 경우는 CSS 롤오버를 쓰면 좋지 않은데... 하는 아쉬움이 남는 사이트를 만나게 됩니다. 오늘도 그런 곳을 한 곳 만났지요. 특히나 그 곳이 저의 출신(出身)상 각별한 곳이기에 이 글을 써보기로 했습니다. 얼마 전에 올렸던 배경색과 배경 이미지의 심화 주제라고 볼 수 있겠습니다.
앞서 apple.com에 해보았던 테스트를 tistory.com에도 해보았습니다만, 안타깝게도 결과는 위와 같았습니다. 특별기획의 이미지에는 alt가 빠져 있었고, 무엇보다도 특별기획 위의 메뉴가 사라졌습니다. apple.com에서 사용하던 그 방법, padding-top으로 텍스트를 overflow 영역 밖으로 밀어내면서 텍스트 자체가 사라지게 만든 방법 때문이었습니다. CSS 롤오버의 문제는 바로 이것과 깊은 관계가 있습니다.
텍스트를 숨기는 것이 적절한 방법인가?(Is it suitable that text is hidden?)
메뉴에 (숨겨진) 텍스트가 포함되어 있다는 점은 텍스트 기반 기기나 소프트웨어의 접근성을 보장해주는 적절한 조치입니다. Lynx나 스크린 리더로 tistory.com의 메뉴에 접근하면 이 (숨겨진) 메뉴 텍스트를 읽어줄 것입니다. 그러나 이미지가 로딩되지 않은 상황에서 숨겨진 텍스트는 말 그대로 숨겨진 상태이기 때문에 제 구실을 하지 못합니다. 숨겨진 텍스트가 접근성을 해치는 경우가 있을 수 있습니다. 그렇다면 CSS 롤오버는 웹 표준에 적절하지 않은 테크닉인가 하고 생각하실텐데, 요는 상황에 따라 CSS 롤오버를 골라서 사용해야 한다는 사실입니다. 어떤 경우에 CSS 롤오버를 사용하면 적절할까요?
디자인은 표현, 텍스트는 구조(Design is the expression, Text is the structure)
tistory.com에서는 CSS 롤오버가 사용되지는 않았지만, 문제가 되는 핵심은 텍스트를 숨기고 CSS의 background-image만으로 메뉴의 기능을 완전히 대체하고 있다는 점입니다. 그렇다면 텍스트를 숨기지 않고 background-image를 사용하는 경우라면 괜찮지 않을까요?
해외에서 국내로 이 CSS 롤오버 기술이 전파되면서 주목받은 이유는 CSS로 롤오버를 할 수 있으며, 텍스트도 살릴 수 있다는 점 때문이었습니다. 그러나, 이 뒤에 숨겨진 좀더 깊은 의미는 HTML과 CSS가 구조와 표현을 분리한 것처럼 CSS 롤오버가 텍스트와 디자인을 분리한다는 점입니다. 텍스트는 semantic에 가깝기 때문에 표현보다는 구조로 보아야 하고, 그렇기 때문에 비록 숨겨진 텍스트가 존재한다고 해도 이미지가 텍스트를 포함할 때는 주의를 기울이셔야 합니다. 이런 경우에 사용하는 것이 alternative text, 즉, alt attribute로써, 텍스트를 포함한 이미지를 사용하려 할 경우에는, 메뉴 자체를 img 요소로 대체하고 alt attribute에 메뉴명을 적어주는 방법을 사용할 수 있을 것입니다.
Internet Explorer 6에서 본 www.msnbc.msn.com. 일반적인 텍스트에 ClearType 기능이 적용되어 포토샵에서 가공된 것에 못지 않은 미려함을 보이고 있습니다. 한글 폰트는 웹에서 사용가능한 종류도 적을 뿐더러, 포토샵과 같은 프로그램으로 가공하지 않는 한 저 정도의 텍스트 퀄리티가 나오지 못하므로 국내 디자이너들은 보다 미관상 아름답게 보이려고 이미지에 텍스트를 넣어 가공하는 것을 선호합니다.
이 경우에는 롤오버 효과를 구현하려 할 때 필연적으로 DOM/ECMAScript를 도입하게 될텐데, DOM/ECMAScript를 HTML 소스 상에 바로 기입하시는 것보다 HTML 소스와 DOM/ECMAScript 소스를 분리하시는 편이 좋습니다. 국내에서는 아직 이 두 가지의 분리에 대한 관심이 일어나지 않고 있습니다만, DOM/ECMAScript 소스와 HTML 소스의 관계 역시 대부분 구조와 표현에 해당되는 문제이기 때문에, 이에 대해서도 적절한 관심과 고민이 필요합니다.
요약하면, 사용할 이미지의 텍스트 포함 여부에 따라 CSS 롤오버를 사용할 상황인지, DOM/ECMAscript 롤오버를 사용될 상황인지가 판가름 됩니다.
예상 질문(The predictable questions)
- HTML 소스 상에 이미지를 직접 넣는 것은 안 좋은 방법이 아닌가요?
전혀 그렇지 않습니다. 적절한 태그를 적절한 상황에 쓰는 것이 중요합니다. 단, 이미지를 사용하실 경우에는 alt 텍스트를 적절히 활용하셔야겠지요. 항간에는 CSS가 제거된 화면의 모양새에도 신경을 쓰시는 분이 계시는 듯 하던데, CSS가 제거된 화면이라는 말은 표현이 제거되었다는 의미이므로 그 화면의 모양새까지 신경 쓰실 필요는 없고, 구조에만 집중하시면 됩니다.
- 저렇게까지 할 필요가 있나요? 이미지가 안 나오는 건 특수한 상황이잖아요.
웹 표준과 웹 접근성의 모토가 무엇인지 다시 고민해 보시기 바랍니다. 이미지가 출력되지 않는 상황이 아주 특수한 경우임에는 분명합니다만, 사이트를 제작할 때 약간의 고민과 기술만으로 그 상황의 불편함을 해소할 수 있다면 해주는 편이 좋을까요, 안 해주는 편이 좋을까요?
- CSS 롤오버
- 링크 등에 마우스를 올리면 변화가 나타나는 웹 기술을 통칭 롤오버라고 하며, 이것을 CSS로 구현한 것을 CSS 롤오버라고 칭해 보았습니다.
- Lynx
- 대표적인 텍스트 브라우저입니다.
- CSS 롤오버가 텍스트와 디자인을 분리하고 있다
- 더 정확히 말하자면 backgroun-image가 디자인과 텍스트를 분리하는 기술적 배경이겠지요.
- 이미지가 텍스트를 포함할 때는
- 다른 표현으로, 이미지가 구조와 표현을 모두 감당할 때는.
- DOM/ECMAScript
- 통상적으로 JavaScript라고 생각하시면 됩니다.
- DOM/ECMAScript 소스와 HTML 소스의 관계 역시 대부분 구조와 표현에 해당되는 문제이기 때문에
- 정확하게 말하면 둘의 관계는 구조와 양식(행동)의 관계로 볼 수 있으나 롤오버의 경우는 표현과 관계되는 부분이라 위와 같이 적어보았습니다.