웹표준

웹표준(Web Standards)

#웹표준 이란?

최근 국내 웹 관련 업계에서는 웹 접근성 수준 향상에 대한 요구로 인해 웹 표준에 대한 관심이 고조되고 있습니다. 이처럼 웹 접근성 이슈를 통해 웹 표준이 주목을 받고 있는 이유는 웹 접근성 수준을 향상시킬 수 있는 다양한 방법론의 중심에 웹표준이 있기 때문입니다.

웹접근성 수준 향상의 최적의 방법론으로 관심을 모으고 있는 웹 표준이란, ‘웹에서 표준적으로 사용되는 기술이나 규칙’을 의미하는데, 이는 우리가 흔히 생각하는 표준(standard)과는 조금 다릅니다. 웹에서의 표준은 W3C의 토론을 통해 나온 권고안(recomendation)을 말하며, 권고안 이외 단계 수준의 스펙은 비표준이거나 독자확장 요소를 의미하기 때문에 구분하여 사용해야 합니다.

웹표준 요소가 아닌 독자확장 요소의 대표적인 예로는 인터넷 익스플로러에서 지원했던 marquee 요소와 bgsound 요소, 넷스케이프 네비게이터에서 지원했던 layer 요소 등을 들 수 있습니다. 이러한 요소는 자사 웹 브라우저의 우수성을 홍보할 목적에서 경쟁적으로 지원했던 요소이기 때문에 웹표준 권고안에는 포함되어 있지 않습니다. 과거에는 비표준 요소나 독자확장 요소를 구분하지 않고 웹 사이트를 구축하였기 때문에 오히려 웹 표준을 지원하는 기기나 웹 브라우저에서 제대로 보이지 않는 문제가 발생하기도 하였습니다.

웹접근성의 수준을 보장하고 향상시키기 위해서는 이제부터라도 웹 표준에 대한 올바른 이해를 통해 비표준 요소나 독자 확장 요소를 배제하고 최대한 W3C의 웹 표준 권고안을 준수하여 웹 사이트를 구현할 수 있도록 노력해야 합니다.

웹표준의 장점

네이버(Naver)와 다음(Daum) 같은 국내 포털 사이트들은 일찍부터 웹 접근성 향상을 위한 첫걸음으로 웹 표준 준수를 위한 노력들을 꾸준히 기울여 왔습니다. 이러한 웹 표준 준수를 통한 일련의 노력들이 어떤 장점이 있는지 살펴보겠습니다.

📌 웹접근성 수준의 향상

웹표준을 준수하는 것만으로도 자연스럽게 웹 접근성이 향상됩니다. 스크린 리더, 최신의 웹 브라우저, 모바일 등 웹에 접근할 수 있는 환경은 매우 다양합니다. 이러한 다양성이 때로는 개발을 어렵게 만드는 원인이 되기도 합니다. 하지만 이러한 문제는 웹 표준을 준수하는 것만으로도 쉽게 해결할 수 있습니다. 웹 표준을 준수한 웹 사이트는 다양한 웹 브라우저나 새로운 기기에서도 올바르게 표시되기 때문입니다.

📌 검색 친화적인 웹 사이트 구현

meta 요소를 이용한 정확한 문서 정보의 제공과 적절한 제목(heading 요소)의 사용, 의미에 맞는 마크업은 검색 시 결과에 영향을 미칠 수 있는 중요한 정보입니다. 따로 홍보를 위한 비용을 지출하지 않더라도 충실하게 작성된 문서 정보만으로도 검색의 효율성을 높일 수 있습니다.

📌 구조와 표현의 분리

테이블(table)을 레이아웃의 용도로 활용하여 사용하던 과거의 방식은 구조와 표현이 뒤섞여 접근 및 사용을 어렵게 하는 원인으로 작용했습니다. 그러나 웹표준 방법론에서 구조는 HTML이나 XHTML 등의 마크업 언어를 구축하고, 디자인과 같은 표현 정보는 CSS를 이용함으로써 구조와 표현이 분리된 독립적인 구현이 가능하도록 도와줍니다.

📌 손쉬운 유지 보수 및 비용 절감 효과

구조와 표현을 분리하여 제작하면 유지 보수 시 많은 이점을 얻을 수 있습니다. 가령 리뉴얼을 위해 디자인만 변경하고자 할 경우 기존의 마크업 코드는 그대로 재사용하고 디자인을 위한 CSS 코드만을 재작성하면 되기 때문입니다. 또 구조와 표현을 분리했을 경우, 소스의 경량화로 인해 서버의 트래픽 비용이 감소하는 부수적인 효과도 얻을 수 있습니다.

📌 호환성 확보

올바른 마크업과 CSS를 이용하여 웹 사이트를 제작하면 오래된 버전의 웹 브라우저에서도 콘텐츠가 적절하게 표시되고 웹 표준을 지원하는 최신의 기기나 환경에서도 항상 동일한 결과를 기대할 수 있기 때문에 하위 호환성이나 상위 호환성을 확보할 수 있습니다.

자바스크립트의 실행 속도

자바스크립트 실행 속도는 Ajax(에이젝스)로 구현된 웹 사이트들이나 지메일과 같은 웹 어플리케이션 등이 사용자의 요구에 좀 더 빨리 응답할 수 있게 됨을 의미합니다. 아래 테스트는 선스파이더 자바스크립트 벤치마크(SunSpider JavaScript Benchmark)를 이용하여 자바스크립트의 실행 속도를 측정한 것입니다. 측정 결과 542.3ms로 크롬이 가장 빠른 속도를 보였으며, 인터넷 익스플로러가 6,305.5ms로 크롬과 큰 격차를 보인 것을 확인할 수 있습니다.

📌CPU 사용률

다음은 각 웹 브라우저들이 실행될 때 어느 정도의 CPU 자원이 요구되는지를 나타낸 지표입니다. 이러한 CPU 자원의 점유율 확인에는 선스파이더와 윈도우 리소스 모니터(Windows Resource Monitor)가 사용되었습니다.

📌DOM 객체 선택

이 테스트에서는 슬랙스피드(SlickSpeed)를 이용하여 JQuery가 엘리먼트를 얼마나 빨리 선택하는 하는지 측정하였으며, 크롬보다 오페라의 싱크율이 가장 높았습니다. 웹 브라우저가 웹 페이지에서 엘리먼트를 더 빨리 선택할수록 갱신 정보를 더 빠르게 업데이트 시킬 수 있습니다.

📌CSS 렌더링 속도

CSS 렌더링 속도가 빠른 웹브라우저들은 페이지 응답 속도가 빠르다는 것을 의미합니다. Nontroppo.org에서 제공하는 CSS 렌더링 벤치마크(CSS Rendering Benchmark)를 이용하여 table을 div로 변환하는데 걸리는 시간을 측정한 결과, 크롬이 91ms로 가장 빠른 속도를 나타내고 있습니다.

📌페이지 로딩 시간

mion Stopwatch를 사용하여 Yahoo.com의 초기 화면을 로딩하는 데에 필요한 시간을 측정한 결과입니다. 로딩 테스트는 순간의 네트워크 트래픽과 서버 로딩 시 발생하는 지연 시간의 차이 때문에 결과에 오차가 있을 수도 있습니다.

📌웹 브라우저 캐시의 성능

이미 방문했던 웹 사이트를 재방문했을 때 웹 브라우저가 얼마나 잘 수행하는지를 측정한 결과입니다. 웹 브라우저 캐시의 성능 측정은 페이지 로딩 시간 측정 때와 마찬가지로 지연 시간의 차이로 인한 오차가 있을 수 있습니다.

📌전체 성능

위의 결과들을 기준으로 각 웹 브라우저들의 성능을 평가한 결과는 아래와 같습니다.

📌테스트에 사용된 웹 브라우저

위의 비교 결과에서 알 수 있듯이 국내 점유율이 가장 높은 인터넷 익스플로러의 경우 대부분의 항목에서 좋지 못한 결과를 보이고 있습니다. 특정 테스트만을 기준으로 판단하는 것은 무리가 있을 수 있지만 한 가지 웹 브라우저가 독점적으로 시장을 지배하는 것은 여러 가지 문제점을 야기시킬 수 있으므로 현재 사용하고 있는 인터넷 환경이나 작업에 맞게 효율적인 웹 브라우저를 선택하는 것이 바람직할 것입니다.

웹접근성과 웹표준에 대한 뜨거운 관심과 더불어 웹접근성이나 웹표준에 대한 오해도 많은 듯합니다. 몇 가지 예를 들어 보겠습니다.

• “table을 활용하여 웹 사이트를 제작했던 방식은 절대로 사용하면 안된다.”
• “table을 모두 div로 바꾸기만 하면 된다.”
• “웹 접근성은 장애인을 위한 것이다.”
• “웹 접근성을 향상시키기 위해서는 많은 시간과 비용이 들어간다.”
• “웹 접근성은 퍼블리셔가 구현하는 것이다.”
• “드림위버를 사용하면 안된다.”
• “인터넷 익스플로러 6 때문에 적용할 수 없다.”
• “특별한 솔루션을 구입하여 적용하면 구현될 수 있다.”