‘웹 표준을 지킨다는 것’의 의미와 그럼으로써 얻을 수 있는 이점에 관해 적어볼까 합니다.
웹 표준을 지키려면 먼저 그 의미를 알아야겠지요? 웹 표준에 관한 글을 읽다 보면 다음과 같은 생각을 하는 분들을 볼 수 있습니다.
“테이블 대신 div 태그와 CSS로 레이아웃을 만들고, XHTML 검증(Validation)을 통과하면 웹 표준을 지키는 것이다.”
틀린 얘기는 아닙니다. 하지만 웹 표준을 준수하려면 더 많은 것을 고려해야 합니다. 단순히 기술적인 면에 국한된 문제가 아니지요.
‘웹 표준’을 이해하기 위해서는 웹 표준을 제정하는 ‘월드 와이드 웹 컨소시엄(World Wide Web Consortium: 이하 W3C)’이 지향하는 바가 무엇인지를 알아야 합니다. W3C는 그들의 존재 이유를 다음과 같이 밝히고 있지요.
“웹(월드 와이드 웹)이 최대한의 능력을 발휘할 수 있도록 지침(Guideline)을 만을어서 웹의 장기적인 발전을 도모한다.”
즉, W3C의 목표는 웹의 지속적인 발전입니다. 그러기 위해서 아래와 같은 몇 가지 세부 목표를 세워서 추진하고 있지요.
- 모든 사람들을 위한 웹: 사람들이 생각과 정보를 나누고 경제 활동을 하는데 있어서 웹은 큰 비중을 갖습니다. 이런 이익을 하드웨어나 네트워크 인프라, 언어, 문화, 지역적인 차이, 육체적 또는 정신적 차이와 상관없이 모든 사람들이 누릴 수 있도록 하자는 것이지요.
- 모든 장치를 위한 웹: 컴퓨터나 핸드폰, 스마트폰 등의 어떤 장치로도 웹을 이용할 수 있도록 지원하고 있습니다.
- 정보의 기반: 웹의 힘은 단순히 나열된 정보에 기반하지 않습니다. 잘 구조화된 정보를 통해서 웹은 최대한의 힘을 발휘할 수 있지요. 이를 위해서 사람과 처리 장치 모두를 위한 정보를 담을 수 있는 표준을 만들고 있습니다.
- 믿을 수 있고 확실한 웹: 더 많은 사람들이 안전하게 참여할 수 있도록 신뢰성 향상을 위해 노력하고 있습니다.
이런 목표 달성을 돕기 위해서 XHTML, CSS, XML 등의 표준을 만들어내는 것이지요. 하지만 XHTML과 CSS 표준을 지켰다고 해서 위에 열거한 목표가 자동적으로 충족되는 것은 아닙니다.
많은 분들이 웹 표준을 지킴으로써 얻는 이점을 접근성 향상이라고 생각하시는데 물론 맞는 말씀입니다. 그 목적을 위해서 만들어진 표준이니까요. 하지만 XHTML과 CSS를 문법에 맞게 사용했다고 해서 접근성이 높고, 테이블을 썼다고 해서 접근성이 떨어지는 것은 아닙니다. 예를 들어볼까요?
지금 보시는 페이지는 엄격한(Strict) XHTML 1.0 규격을 준수합니다. 왼쪽 하단의 ‘valid XHTML’ 링크를 클릭하면 검증 결과를 보실 수 있지요. 하지만 이 페이지가 접근성이 높은 것은 아닙니다. W3C는 접근성에 관한 권고안도 제안했는데 사실상 접근성에 관한 표준이라 할 수 있습니다. 이 권고안이 제안하는 첫 번째 지침은 이렇습니다.
“눈으로 보거나 들을 수 있는 모든 정보의 대체 표현 수단을 제공하라!”
즉 보거나 들을 수 없는 사람들도 이용할 수 있도록 해야 한다는 것이지요. ‘스크린 리더’를 이용하면 되지 않느냐고 생각하실 분들도 계실겁니다. 물론 스크린 리더가 텍스트를 읽어줄 수 있습니다. 하지만 스크린 리더에게 충분한 정보를 제공하는건 아닙니다^^;
하나씩 생각해보지요. 먼저 이 블로그의 모든 링크에는 title 속성이 지정되지 않았습니다. 글에 삽입된 이미지에는 대체 문자열(alt 속성)을 입력하지 않았고, 키보드 접근키(Access Key)도 설정하지 않았습니다. 이밖에도 많은 요소들이 이 페이지의 접근성을 떨어뜨리고 있습니다.
반면에 테이블로 레이아웃을 작성했지만 위에 언급한 모든 요소들을 충실히 지켰다면 어떨까요?
‘테이블 레이아웃’이 무조건 복잡하고 중첩된 테이블 구조를 의미하지는 않습니다. 접근성을 최대한으로 고려한 테이블 레이아웃도 있으니까요. 이런 테크닉에 관심 있으신 분들은 Web Access Centre의 Layout tables 문서를 참고하시기 바랍니다.
사실 접근성에 대해서 자신있게 말하기는 어렵습니다. 그 문제에 대해서 직접 체험하지 못하기 때문이지요. 저만해도 이 글을 모든 분들이 ‘읽을’ 것이라고 생각하지 ‘들을’거라고 생각하지 않으니까요.
제가 생각하는 웹 표준 준수는 XHTML과 CSS 문법을 올바르게 사용하고, 더 나아가 열린 마음으로 접근성 향상을 위해 관심과 노력을 기울이는 것을 의미합니다. 그래야만 웹 표준을 지키는것이 접근성을 향상시킨다고 자신있게 말할 수 있으니까요.
웹 표준을 준수해서 누구나 평등하게 이용할 수 있을거라고 말하는 블로거들의 글 대부분은 접근성 향상을 위한 정보를 제대로 제공하지 않습니다.
어떤 분들은 XHTML과 CSS를 사용하면 ‘크로스 브라우징’을 제공할 수 있다고 말합니다. 하지만 사실은 그렇지 않지요. 테이블을 사용하는 레이아웃이 오랫동안 대세가 되었던 것은 대부분의 브라우저가 동일한 결과물을 보여주었기 때문입니다. 반면에 CSS로 인터넷 익스플로러와 파이어폭스에서 같은 화면을 보여주기 위해서 여러가지 핵(Hack)이 고안되었다는 것은 CSS 만으로는 크로스 브라우징에 한계가 있음을 잘 보여줍니다. 물론 MS 브라우저를 탓할 수 있지만 그렇다고 해서 표준 문법을 지켰으니 제대로 안보이는건 브라우저 책임이라고 말하기에는 무리가 있습니다.
그럼에도 불구하고 XHTML과 CSS를 올바르게 사용하는 ‘제한적인 웹 표준’을 지키는 것은 중요합니다. 많은 이점이 있기 때문이지요.
사실 “테이블 대신 div 레이아웃을 사용한다.”는 말에는 문서의 ‘구조’와 ‘표현’을 분리한다는 의미가 담겨 있습니다. 즉, 문서의 구조를 알려주는 div, p, blockquoe, h1 등의 태그로 내용을 체계화시키고, font, b, i 등의 표현을 담당하는 태그는 CSS로 대체한다는 뜻이지요. 이렇게 하면 위에서 언급한 W3C의 세 번째 세부 목표 달성에 큰 도움이 됩니다.
사람의 입장에서는 문서를 쉽게 작성하고 읽을 수 있게 됩니다. 레이아웃을 여러 개의 중첩된 테이블로 디자인 할 경우에는 어디에 어떤 정보가 있는지 찾기도 어렵지만 잘 구조화된 문서는 화면에 보이는 순서대로 표현되므로 관리가 쉽습니다. 전체적인 디자인을 수정하기 편해지고 표현을 담당하는 요소가 제거되니 입력해야 할 텍스트의 양도 많이 줄어들게 되고요.
또한 장치의 측면에서 잘 구조화된 문서는 브라우저가 더 빨리 페이지를 렌더링하게 해줍니다. 복잡한 중첩 테이블을 표현하려면 많은 연산이 필요하니까요. 또 전체적인 파일 크기가 작아져서 네트워크 트래픽을 아낄 수 있습니다. 게다가 검색 엔진이 문서의 내용을 쉽게 분석해서 보다 정확한 검색 결과를 제공할 수 있게 됩니다.
반면에 문서의 구조와 표현을 섞어놓음으로써 얻는 이점은 무엇이 있을까요? XHTML과 CSS 사용에 부정적인 생각을 갖고 계신 분들께 묻고 싶습니다.
단지 익숙하다는 점 하나가 아닐까요? CSS를 익히는 것은 html 이 처음 등장했을 때 table 태그 사용법을 익히는 것과 같다고 생각합니다. 생소하지만 계속 연습하다 보면 익숙해지지요.
html을 전혀 다루지 못하는 사용자들에게 XHTML과 CSS는 큰 의미가 없습니다. 그 분들을 위해서 글을 쓰는 것도 아니고요. 다만 직접 html 코드를 작성하는 분들이라면 기왕이면 여러모로 장점이 많은 방법을 사용하는게 좋지 않을까요?
깊이 생각해서 써야 할 주제인데 너무 두서없이 떠들었네요. 사실 ‘웹 표준’은 다양한 의미를 갖습니다. 표준 규격을 지키는 것에서부터 넓게는 표준 규격에 맞게 웹 사이트를 제작하자는 최근의 트랜드를 의미하기도 하지요. 그래서 누군가가 ‘웹 표준을 지키자’라고 주장하면 어떤 사람은 XHTML과 CSS를 사용하는 디자인을 떠올리고, 어떤 사람은 접근성 향상을 위한 보이스 리더를 생각할 것입니다. 불여우와 익스플로러의 렌더링 차이를 생각하는 분들도 있겠지요.
의미가 다양한 만큼 웹 표준에 관해서 어떤 생각이 절대적으로 옳다고는 누구도 말할 수 없을겁니다. 하지만 한 때의 유행으로 끝나지는 않을거라는데 많은 분들이 동의하시리라 생각합니다. 웹 표준이 무시할 수 없는 흐름이라면 다양한 생각들을 교환하면서 이해의 폭을 넓혀가는게 좋지 않을까 하는 마음으로 제 생각을 적어봤답니다.