웹 표준

웹 표준은 월드 와이드 웹의 측면을 서술하고 정의하는 공식 표준이나 다른 기술 규격을 가리키는 일반적인 용어이다.

http://ko.wikipedia.org/wiki/웹_표준

웹 표준 관련기구

• W3C(World Wide Web Consortium)
• ISO(International Organization for Standardization)
• IETF(The Internet Engineering Task Force)
• ECMA(European Computer Manufacturers Association) International
• OASIS(Organization for the Advancement of Structured Information Standards)

웹 표준을 조금 더 자세히 들여다보면

웹 표준은 '올바른 HTML, CSS, Javascript 로 문서를 작성하는 것'입니다.
구조와 스타일을 분리하여 HTML(XHTML) 에서는 문서의 논리적인 구조만은 묘사하는 것을 의미하기도 합니다. 즉, 각 태그가 가진 목적에 따라 적합하게 문서를 작성하는 것인데요.
여전히 오래된 경력개발자 분들이 레이아웃을 작성하실 때 선호하시는 <table> 이 좋은 예이면서 나쁜 예입니다. :p
<table> 은 레이아웃용 태그가 아닌 '표'형태의 데이터, 정보를 전달하기 위한 태그인데, 크로스브라우징이나 초기 작업 시에 편리함 등으로 널리 쓰여 왔지요.
앞으로 우리가 웹 표준화 강좌를 함께 하면서 자주 참고하게 될 W3C 에서는 <table> 태그로 레이아웃을 작성하는 방법에 대해 어떻게 설명하고 있는지 보겠습니다.

테이블을 레이아웃 용도로 사용해서는 안됩니다. 그동안 몇몇 웹 저작자들이 HTML 테이블을 페이지 레이아웃을 잡는 용도로 잘못 사용해 왔습니다. 이러한 사용은 잘못된 것입니다. 그러한 페이지에서는 표 형태의 데이터를 추출하고자 하는 도구들이 대단히 혼란스러운 결과를 얻을 것이기 때문입니다. 특히 스크린 리더 같은 접근성 도구를 사용하는 사람들은 레이아웃을 위해 테이블을 사용한 페이지를 이용하는 것이 대단히 어려울 것입니다.

HTML5 table 요소

그러면 <table> 태그 대신 무엇을 사용할 수 있을까요?
대안으로 <div> 태그가 있습니다. 그런데 이번 강좌에서 채택한 HTML5 에서는 <div> 태그마저도 완전한 대안은 아니라고 말하고 있습니다.

div 요소는 다른 적절한 요소가 전혀 없을 때 최후의 방편으로만 사용하기를 강력히 권장합니다. 좀 더 적절한 요소 대신에 div를 사용하면 사용자에게는 빈곤한 접근성을, 저자에게는 관리의 어려움을 초래합니다.

예를 들어 블로그 포스트는 article, 챕터는 section, 페이지 내비게이션 그룹은 nav, 폼 컨트롤 그룹은 fieldset 요소로 묶을 수 있습니다.

HTML5 div 요소

한 마디로 웹 표준이란?

W3C 에서 제공하는 각각 요소들의 W3C Spec 을 참고하여 마크업을 작성하면 웹 표준을 지키는 건가요? 라고 생각하실 수도 있겠습니다.
맞습니다. 그런데 유의하셔야 할 것은 W3C Spec 은 4단계로 구분되며, 우리 강좌에서 채택한 HTML5 의 경우에는 규격의 초안을 잡는 단계로 아직 권고안이 아니라는 점을 알아두시기 바랍니다. 즉, 완성된 규격이 아니라는 말이지요.

W3C의 최종 표준 채택은 4단계를 거친다. 4단계는 '초안'(Working Draft, WD), '권고 후보안'(Candidate Recommendation, RC), '권고 제안'(Proposed Recommendation, PR), '권고안'(Recommendation, REC)의 순서로 '권고안'이 최종 표준이 된다.

웹 디자이너를 위한 HTML5, 제레미 키스 Jeremy Keith, 김중철, Webactually

W3C 에서 규격을 확인하실 때 창의 왼쪽 상단을 보시면 위와 같은 이미지가 나옵니다. 권고후보안과 권고제안은 캡쳐를 못했습니다. 꾸벅 ㅠ
아래는 각 버전별 명세입니다.

• HTML4.01 Recommendation
• XHTML1.0 Recommendation
• HTML5 Working Draft

그런데 웹 브라우저 제작사마다 표준 스펙에 대한 해석과 구현에 차이가 있기 때문에 웹 표준을 준수한다고 해서 100% 브라우저별 호환성이 보장되는 것은 아닙니다.
각각의 브라우저에 대응하는 추가 작업이 필요할 수 있다는 것인데, 최근에는 이러한 간격이 점점 좁혀지고 있는 추세입니다. (국내에서는 여전히 ie6가 악명을 떨치고 있지만요.)
이를테면, 텍스트를 랜더링하는 방식 차이 등이 있습니다.

익숙한 방식을 버리고 웹 표준을 준수해서 얻는 이득은?

논리적으로 선형화 된 문서 작성으로, SEO 향상

검색엔진의 크롤러는 (X)HTML 소스를 거의 액면 그대로 해석하기 때문에 적절하게 구조화 된 소스는 검색엔진이 더 잘 찾아낼 수 있습니다.

유지/보수 용이

구조와 스타일이 분리되어 유지/보수에 들어가는 시간이 단축됩니다.

호환성 확보

오래된 브라우저에서도 컨텐츠가 적절하게 표시되고 호환성과 운용성이 확보됩니다.

파일 사이즈 축소와 효율 증가

논리적이고 효율적으로 작성된 웹 문서는 대개 기존의 방식보다 소스 코드의 양이 줄어들어, 파일 크기가 줄어들고 자연스럽게 서버 부담의 감소로 이어집니다. 서버 부담의 감소는 사이트 로딩시간을 단축시켜 줍니다.

웹 접근성 향상

스크린 리더기 등 보조공학 기기 사용자들이 조금 더 정확한 정보를 얻을 수 있도록 돕습니다.

웹 접근성

문제는 대부분의 웹사이트들이 많은 장애인으로 하여금 해당 웹 사이트의 사용을 어렵게 하거나 불가능하게 만드는 접근성 장애 요소들을 지닌다는 점이다. 또한 대부분의 웹 소프트웨어 도구들도 장애인들에게 충분한 접근성을 제공하지 않아 장애인들이 웹에 기여하기 어렵게 하거나 불가능하게 한다. 이것은 매우 심각한 일이다. 수백만 명이 웹을 사용하는 데 영향을 받는 장애를 지니고 있기 때문이다.

웹 접근성이란 이런 장애 요소들을 제거함으로써 장애인들이 웹을 활용하고 웹에 기여할 수 있게 하는 것이다.

웹 접근성 & 웹 표준 완벽 가이드 p.73, 숀 로튼 헨리 Shawn Lawton Henry, 노석준, 에이콘

웹 접근성은 장애인만을 위한 것입니까?

그렇지 않습니다. 물론 웹 접근성에 의무를 부여하는 장애인차별금지법이 '장애인'에게 초점을 맞추고 있는 것은 사실입니다. 하지만 신체/정신(인지) 장애가 아닌 환경적 장애가 발생할 수도 있습니다.

자막은 사람들이 말을 하거나 다른 중요한 음향 같이 비디오나 오디오 속에 담겨있는 소리를 기술하는 텍스트다. 자막은 농아인들에게는 필수 불가결한 요소다. 자막은 또한 오디오를 들을 수 없는 매우 시끄러운 환경에 있는 사람들뿐만 아니라 오디오를 켜는 것이 적절치 못한 매우 조용한 환경에 있는 사람들도 사용 가능하다.

웹 접근성 & 웹 표준 완벽 가이드 p.78, 숀 로튼 헨리 Shawn Lawton Henry, 노석준, 에이콘

실제로 웹 접근성의 목표는 장애인뿐만 아니라 모든 사람이 정보통신 기기나 서비스를 손쉽게 활용할 수 있도록 만드는 것입니다. 더 세부적으로는 표준 브라우저 뿐만 아니라 다양한 사용자 에이전트를 사용하는 사람들이 웹 페이지에 접근하기 쉽게 만드는 것으로, 이를 통해 장애인들도 혜택을 받게 된다는 것입니다.

• 고령자
• 정보 습득 능력literacy이 낮은 사람과 언어 유창성이 떨어지는 사람
• 저대역low-bandwidth 인터넷 접속률과 오래된 기술을 사용하는 사람
• 신규 사용자나 웹을 빈번하게 사용하지 못하는 웹 사용자

웹 접근성 & 웹 표준 완벽 가이드 p.82, 숀 로튼 헨리 Shawn Lawton Henry, 노석준, 에이콘

저대역low-bandwidth 인터넷 접속률과 오래된 기술을 사용하는 사람과 신규 사용자나 웹을 빈번하게 사용하지 못하는 웹 사용자에 이르면 웹 접근성이 정보 격차에 어떻게 기여하는지 알 수 있습니다.

보조기기의 종류

장애인 혹은 특수환경에 처한 사용자를 위한 보조기기 몇 종을 소개해보겠습니다.

정보이용 기회를 제공해주는 보조기기의 종류

사진	이름	설명
	Korean JAWS (스크린리더)	컴퓨터를 사용하는 전문직 종사자, 대학 이상 학생 시각장애인에게 적합한 고급기능을 갖춘 화면읽기프로그램 자세히
	얼티메이트스위치 (입력보조장치)	운동 기능의 장애 등으로 인해 키보드를 제대로 누를 수 없거나 마우스를 효과 적으로 사용하지 못하는 장애 아동을 위한 입력 보조 장치 자세히
	스마트뷰 익스탠드 (스크린 확대)	모니터가 본체에 붙어있는 일체형으로 상하좌우 조절이 가능하여 독서에 획기적인 도움을 제공 - 리모콘이 제공되는 유일한 제품으로 밝기조절, 비교감도, 칼라 농도를 손쉽게 조절할 수 있음 자세히
	반디 (휴대용 독서 확대)	반디는 초소형, 초경량 설계로 무광택 4인치 액정을 장착, 어떠한 환경에서도 뛰어난 성능으로, 남녀노소 누구나 쉽게 사용할 수 있는 휴대용 독서 확대기 자세히
	헤드마우스 익스트림 (헤드마우스)	타켓이라는 반사체를 머리의 이마나 인중 등에 부착하여 반사체의 움직임에 따 라 컴퓨터의 커서를 움직일 수 있는 특수 마우스 자세히
	발마우스 (마우스)	손을 사용할 수 업는 분들에게 발을 사용해서 마우스의 기능을 쓸 수 있게 해줌 자세히
	킹키보드 (키보드)	키보드의 글자가 커서 시력이 약한 분이나 손 떨림이 있는 뇌성마비 장애인이 사용하기에 알맞은 키보드 자세히
	한손사용자용키보드 (키보드)	한손으로 타이핑하게 디자인 되어있는 키보드 자세히
	한소네포켓 (휴대용 점자정보단말기)	시각장애인의 모바일 환경을 고려하여 설계한 제품으로 휴대가 간편한 18셀의 최소형 점자정보단말기, 기존 한소네의 모든 응용프로그램 사용이 가능함 자세히
	엔에이블러조이스틱 (조이스틱)	팔의 움직임이 원활하지 못해 일반 마우스를 사용하기 어려운 분들을 위한 조이스틱형 마우스입니다. 자세히

한국정보화진흥원 홈페이지의 보조기기신청을 이용하시면 http://www.at4u.or.kr/F02000000000/F02040000000.asp?UpCode=L1를 방문하시면 더 많은 종류의 보조기기를 찾아보실 수 있을 뿐만 아니라, 정부 지원도 받으실 수 있습니다.

웹 접근성의 기술적 혜택

사이트 개발과 유지 보수 시간 감소

스타일시트를 통해 표현 방법을 정의하고 구조를 위해 적절한 마크업을 사용하면 사이트 전체의 디자인을 변경하기가 수월해지며 이는 비용 감소로 이어집니다.

서버 부하량 감소

파일 크기와 이에 따른 다운로드 속도 증가 등은 추가적인 서버 구입비를 발생시키지 않습니다.

상호운용성 향상

웹 접근성은 서로 다른 브라우저, 운용시스템, 장치 등의 다양한 구성에서 웹 콘텐츠를 제시하고 상호작용할 수 있게 하며, 다음과 같은 W3C 기술들은 접근성을 위해 설계되었습니다.

• XHTML
• XML
• RDF
• SMIL
• CSS
• XSL
• XSLT
• PNG

고급 기술 수용을 위한 준비

적절한 마크업 구조를 사용하면서 표현은 CSS로 할 때, 이전migration과 호환성compatibility 문제를 간편하게 해결할 수 있습니다.

웹 접근성의 재정적 혜택

검색 엔진 최적화 SEO

일부 접근성 기법들은 SEO 기법과 정확히 일치합니다. 구글의 웹마스터 지침을 검토해 볼수 있습니다. 구글 웹마스터 지침

웹사이트 활용 증진

웹 접근성은 사용자들이 웹사이트를 더 쉽게 찾고, 접근하며, 성공적으로 사용할 수 있게 해주기 때문에 사용자들도 더 많아질 개연성이 높습니다. 특히 실버산업은 웹 접근성과 관련된 중요한 잠재시장입니다.

직접 비용 절감

사이트 유지 보수를 위한 인건비, 서버 부하량을 줄이고 부가적인 서버 구입비용을 줄일 수 있으며, 여러 버전의 웹 사이트를 만들지 않아도 되는 효과가 있습니다.

웹 표준과 웹 접근성의 차이

웹 표준의 혜택과 웹 접근성의 혜택만 살펴보면, "뭐야? 똑같잖아!"라는 반응이 나올 수 있습니다. 그렇지만 둘의 장점과 혜택이 비슷하다고 해서 둘의 개념까지 같은 것이라고 단정지을 수는 없습니다.

웹 표준은 웹 접근성을 구현하기 위한 부분적인 요소라고 볼 수 있는데, 웹 접근성을 실현하기 위한 논리적인 문서 구조를 구현하는 방법이 웹 표준을 준수하는 것이기 때문입니다.
그러나 웹 표준을 준수한 것이 웹 접근성을 향상시킬 수는 있어도 보장해주는 것은 아니라는 것에 유의하셔야 합니다.

일부 웹 디자이너와 개발자는 접근성을 단순히 이미지에 해당하는 대체 텍스트를 추가하는 것으로만 이해한다. 사람들이 여러해 전부터 그렇게 배워왔고, 실제로도 그렇게 해왔기 때문이다. 또는 사이트를 만든 후에 덧붙이는 사후 작업이라 간주하는 이들도 많다. 일부 순수하지 못한 집단은 자신들이 원하는 것을 얻어냈는지 전혀 알지 못하는 순진한 고객들에게 불필요하거나 부적절한 서비스를 판매하는 등 웹 접근성을 악용한다.

웹 접근성 & 웹 표준 완벽 가이드 p.6, 몰리 E. 홀즈쉬랙 Molly E. Holzschlag, 노석준, 에이콘

위에서 몰리 E. 홀즈쉬랙이 언급한 내용 중 이미지에 대체 텍스트를 추가하는 이슈로 웹 표준과 웹 접근성의 차이를 간략하게 설명하자면, 이미지에 alt 속성을 이용해 대체텍스트를 제공하는 것은 웹 표준을 준수하는 것입니다. 그런데 텍스트 전용 브라우저를 쓰거나, 사용하는 회선속도가 느려서 브라우저의 이미지 표시 기능을 끈 사용자들은 alt 속성에 접근할 수 있는 방법이 없습니다.

예를 들어볼까요? 이제 다음과 같은 소스가 있다고 가정해보겠습니다.

<a href='http://www.sir.co.kr'><img src='img/sir.jpg' alt='SIR 바로가기'></a>

위의 코드는 img 태그에 alt 값을 적절하게 넣어준 좋은 예입니다.
일반적인 사용자는 위의 코드로 작성된 문서에서 SIR 로 바로가는 버튼(이미지)를 정상적으로 식별할 수 있습니다.
하지만 텍스트 전용 브라우저를 이용하거나 브라우저의 이미지 표시 기능을 끈 사용자는 위의 코드로 작성된 문서에서는 SIR로 바로가는 버튼(이미지)를 찾을 수 있는 방법이 없습니다. 즉 아래 그림과 같은 상황이 연출된다는 것입니다.

그림. 브라우저에서 이미지를 사용할 때, 2012년 10월 15일 캡쳐

그림. 브라우저에서 이미지를 사용하지 않을 때, 2012년 10월 15일 캡쳐

위의 이미지를 사용할 때와 이미지를 사용하지 않을 때 보여지는 차이점이 이해가 가시나요? SIR과 네이버, 네이트 모두 브라우저의 이미지 기능을 정상적으로 사용할 때는 사이트의 주메뉴를 정상적으로 식별할 수 있었습니다.
하지만 브라우저의 이미지 기능을 껐을 때, 네이트에서는 사이트의 주메뉴를 정상적으로 식별할 수 없었습니다.
이것이 단순히 웹 표준을 준수하는 것과 웹 접근성까지 고려했을 때의 차이점이라 할 수 있습니다. (추가적으로 다음을 확인해보니 대체텍스트를 잘 제공하고 있더군요.)

위의 예와 같이 웹 표준을 준수한다는 것은 논리적인 구조의 문서를 작성할 수 있게 도와줌으로써 웹 접근성을 향상시킬 수는 있지만, 웹 표준을 준수하는 것이 웹 접근성 자체를 보장하는 것은 아니라는 것을 알 수 있습니다.

또한 웹 표준이 접근성과 어떤 관련이 있는지에 대해 많은 논의가 있어왔다. 접근성은 웹 표준의 여러 측면과 관련 있지만 그 자체로서 하나의 과학, 예술, 실제로 발전됐다. 접근성은 고도의 전문 분야이며, 만약 특정인을 고려해 접근 가능한 웹페이지를 만든다면 부지불식간에 다른 사람은 접근 불가능하게 될 수도 있기 때문에 매우 골치 아픈 분야다.

웹 접근성 & 웹 표준 완벽 가이드 p.6, 몰리 E. 홀즈쉬랙 Molly E. Holzschlag, 노석준, 에이콘

여기까지 우리는 웹 표준과 웹 접근성의 기초 개념에 대해 살펴봤습니다. 또한 웹 표준과 웹 접근성의 차이점도 살펴봤지요.
아마 개념이 명확하게 정리되었다기보다는 의문만 더 깊어졌을 수도 있습니다. 저 또한 아직도 많은 의문점들이 남아 있는 상태이니까요. 하지만 이번 강좌는 그누보드를 웹 표준화하는 과정에 대해 이해하는 것을 목적으로 하기 때문에 웹 표준과 웹 접근성에 대한 내용은 이쯤에서 정리를 해볼까 합니다. 길고 지루한 글 읽느라 고생 많으셨습니다. 의견과 질문은 댓글을 이용해주시거나 '질문과 의견'을 참조해주십시오.
또한 아래 참고문헌에서 강좌 본문 중 언급한 서적들의 정보를 얻거나 구입하실 수 있습니다. 감사합니다.