웹표준과 웹접근성의 이해와 테스트 방법
이번 호는 웹표준과 웹접근성에 대한 이해와 테스트 방법에 대해서 설명하려고 한다. 테크닉 북의 다른 강좌들은 그 프로그램의 기능을 충분히 알아야만 작업이 이루어지지만, 드림위버의 경우 웹 문서를 쉽게 구현하기 위해 만든 에디터이기 때문에, 앞서 드림위버 강좌에서 배운 정도의 기능만으로도 충분히 드림위버를 이용하여 웹 문서를 제작할 수 있다. 얼마나 월드 와이드 웹(World Wide Web : WWW)을 이해하고 있는 가에 따라 여러분은 의미를 살린 HTML Markup과 CSS로 디자인을 제대로 분리한 웹접근성이 좋은 웹문서를 만들 수 있게 된다.
글. 차영신.
웹표준 제작자.
Tag & Brace 대표.
아카데미정글 웹표준 강의.
www.tagnbrace.com/blog
- 드림위버 CS3에서 웹 표준 문서를 제작하기 [1] - 웹표준과 웹접근성의 이해와 테스트 방법
- 드림위버 CS3에서 웹 표준 문서를 제작하기 [2] - 의미를 살린 마크업과 유효성 검사
- 드림위버 CS3에서 웹 표준 문서를 제작하기 [3] - CSS의 작성과 유효성 검사
- 드림위버 CS3에서 웹 표준 문서를 제작하기 [4] - 블록레벨 엘리먼트와 인라인레벨 엘리먼트
- 드림위버 CS3에서 웹 표준 문서를 제작하기 [5] - DIV 엘리먼트와 레이아웃 만들기
- 드림위버 CS3에서 웹 표준 문서를 제작하기 [6] - UL, OL, DL 엘리먼트 사용하기
웹표준을 지켜서 웹접근성이 좋은 웹페이지를 만들기 위해서는 웹이 생겨나게 된 배경과 웹의 정신을 이해하고 지키려고 노력하면 많은 부분은 기본적으로 해결된다. 현재 웹 제작자 중 많은 사람들이 웹의 정신을 생각하지 않고, 비주얼적인 구현에만 치중하여 제작을 하고 있기 때문에 웹 표준과 웹 접근성이 생소하고 어렵게 느껴지는 것이라고 생각된다. 나 자신도 처음 웹 표준과 웹 접근성이라는 단어를 접했을 때 생소하고 어려운 느낌을 가졌고, 이것을 이해하기 위해서 많은 정보들을 접하면서 결국은 월드 와이드 웹(World Wide Web : WWW) 의 창시자인 팀 버너스 리(Tim Berners-Lee)의 생각에서 그 의미를 이해할 수 있었다. 물론 한국어로 잘 번역되어 있는 많은 정보들이 있지만 우리에게 제공되는 많은 웹 제작에 관한 정보들이 어디서 만들어지고 제공되고 있는지 알고 지속적으로 공부해 나간다면 다른 나라에 비해 유독 웹 표준과 멀어진 우리나라의 웹 환경이 빠른 시일 내에 다시 제자리로 돌아갈 수 있으리라 생각한다.
01. 웹의 역사
간략하게는 다들 알고 계실테지만, 웹의 역사를 좀 더 자세히 알아보기 위해 [ http://www.w3.org/Consortium/]를 방문해 보자. 사진의 분이 월드 와이드 웹(World Wide Web : WWW)을 만드신 팀 버너스 리(Tim Berners-Lee)이다. 오른쪽 메뉴에 보면 [History]도 있고, 사진 바로 위에서 언어선택을 할 수 있는데, 한국어도 있다.
그www.w3.org/Consortium/ 화면
그 화면에서 한국어를 클릭하면 반가운 한국어로 되어 있는 웹 페이지에서 간략하게 번역된 역사를 읽을 수 있다.
![[www.w3.org/Consortium/에서 한국어 링크 화면]](http://tagnbrace.com/blog/attach/1/1088456849.jpg "[www.w3.org/Consortium/에서 한국어 링크 화면]")
[www.w3.org/Consortium/에서 한국어 링크 화면]
02. 웹의 목표
그럼, 웹의 목표는 무엇일까요? 오른쪽 메뉴에서 [Goals]를 클릭하면 Web for Everyone, Web on Everything, Knowledge Base, Trust and Confidence 4개의 제목 아래 설명들이 되어 있다. 제목만 보더라도 요즘 이야기되고 있는 모든 이슈들이 담겨져 있는 것을 알 수 있다. 100% 완벽한 독해는 어려워도 원문을 접하는데 큰 의의를 가지며, 번역기를 사용하고 사전을 찾으면서 꼭 읽어 보기를 권한다. 인터넷에서 웹에 대한 내용들은 모두 이 곳에 있는 내용들을 토대로 작성된 것들이기 때문에 직접 원천적인 정보들을 접하고 정리하는 습관은 어떤 분야에 대한 전문성을 확보하고 발전을 위해 매우 중요하다고 생각된다.
![[www.w3.org/Consortium/에서 Goals 링크 화면]](http://tagnbrace.com/blog/attach/1/1144397635.jpg "[www.w3.org/Consortium/에서 Goals 링크 화면]")
[www.w3.org/Consortium/에서 Goals 링크 화면]
“웹은 세상의 모든 사람들이 다양한 환경에서 장애없이 쉽게 정보를 공유하고 이용할 수 있도록 하는 것” 이 창시자 팀 버너스 리의 정신이며, 곧 웹의 정신이기도 하며, 요즘 우리들이 이야기하고 있는 웹접근성, 웹2.0 서비스, 크로스 브라우징 등의 근원이다.
03. World Wide Web Consortium (W3C)
W3C는 웹을 위한 표준을 개발하고 장려하는 조직으로 회원기구, 정직원, 공공기관이 협력하여 웹 표준을 개발하는 국제 컨소시엄으로 [ http://www.w3.org/ ]에서 정보들을 찾을 수 있다. 다양한 표준에 관한 정보를 제공하며, 우리가 알아야할 HTML, XHTML, HTML5, HTML Validator, CSS, CSS2, CSS3, CSS Validator, DOM에 관한 규격과 정보들이 있는 곳이다. 처음 보면 CSS 로 디자인을 화려하게 입히지 않아서 굉장히 복잡스럽고 딱딱하게만 느껴지지만 방대한 정보를 웹표준을 지켜 잘 만들어져 있다는 것을 곧 알 수 있을 것이다.
![[www.w3.org/ 화면]](http://tagnbrace.com/blog/attach/1/1013476076.jpg "[www.w3.org/ 화면]")
[www.w3.org/ 화면]
![[그림5. www.w3.org/ 왼쪽 메뉴에서 원하는 정보를 선택한다. ]](http://tagnbrace.com/blog/attach/1/1028474958.jpg "[그림5. www.w3.org/ 왼쪽 메뉴에서 원하는 정보를 선택한다. ]")
[그림5. www.w3.org/ 왼쪽 메뉴에서 원하는 정보를 선택한다. ]
04. 웹표준
2007년 이맘 때 보다는 제법 많이 우리에게 익숙해진 단어인 웹 표준은 어떤 의미를 가지고 있을까요? W3C에서 XHTML(eXtensible HyperText Markup Language)과 CSS(Cascading Style Sheet)를 웹의 표준으로 삼고 있고 이것을 사용하기를 권고하고 있다. XHTML로 컨텐츠 내용을 작성하고 CSS 로 디자인을 적용하게 되면 웹표준을 지킨 것이 되지만, 제대로인 웹표준이 되려면 XHTML 작성시 의미를 살린 마크업( Semantic Markup)이 지켜져야 하고 웹접근성을 위한 크로스브라우징을 구현하기 위해서는 인터넷 익스플로러( Internet Explorer)의 각 버전별, 파이어 폭스( Fire Fox), 오페라(Opera), 맥용 브라우저인 사파리(Safari) 등에서 동일하게 디자인이 구현되도록 CSS를 작성해야 하는 정성이 필요하다.
XML(eXtensible Markup Language)이라는 확장성이 뛰어난 언어를 만들었지만 기존에 HTML로 작성된 수많은 웹 페이지를 대체하는 것이 어렵고 작성하기 쉬운 HTML을 계속 사용하기 위해, HTML4.0에 확장성이 뛰어난 XML1.0의 속성을 결합한 XHTML1.0을 만들어, 기존에 만들어진 수 많은 웹페이지를 XML의 몇 가지의 속성에 맞도록 변환하면 향후 다양한 환경의 디바이스에서도 정보를 제대로 전달할 수 있도록 한 것이다. 물론 처음 제작하는 웹 페이지는 XHTML로 바로 만들면 된다.
* XML의 속성을 따라가는 XHTML에서 꼭 지켜야할 문법은 아래와 같다.
- 모든 태그와 속성은 반드시 소문자로 작성해야 한다.
- Attribute Value(속성값)은 큰 따옴표 안에 써야만 한다.<br/> - 모든 태그를 올바로 닫아줘야 한다. End Tag가 없는 태그도 다음과 같이 닫아준다.
<img src="sample.jpg" />, <hr/>, <br/>,
05. 의미를 살린 마크업과 디자인의 분리
그럼, 의미를 살린 마크업이(Semantic Markup) 무엇인지를 살펴 볼 차례이다. 본래 HTML을 만들 때 표현하고 싶은 것에 맞게 엘리먼트(Element)를 쓰라고 권고한 것에 맞추어 작성하면 된다. 지금 우리가 만든 웹 페이지 대부분은 이것은 무시하고 무조건 이미지로 처리하거나 플래시로 작업하여 브라우저가 엘리먼트를 읽어서 컨텐츠의 중요도와 의미를 인식하지 못하도록 해 놓았다. 다음의 그림은 [ www.w3.org ] 의 첫 페이지의 HTML 소스이다. <body> 태그 바로 밑에 <h1> ~ </h1>태그가 마크업 되어 있다. W3C에서는 “Using h1-h6 to identify headings”(제목을 구분해 주고 싶을 때는 h1-h6을 사용하라)이라고 권고한다. 그러나 우리의 대부분의 웹 페이지에서 이러한 의미를 살려 마크업을 하지 않았기 때문에 h1 엘리먼트(Element)를 찾아보기는 매우 어렵다. cite 엘리먼트(Element)는 “Contains a citation or a reference to other sources” (다른 소스를 참조하거나 인용이 있는 경우 사용)를 표현하는 경우 사용하라고 권고한다.
![[http://www.w3.org 의 첫 페이지의 소스 화면]](http://tagnbrace.com/blog/attach/1/1394411277.jpg "[http://www.w3.org 의 첫 페이지의 소스 화면]")
[http://www.w3.org 의 첫 페이지의 소스 화면]
이러한 설명을 직접 접하고 싶다면 [ www.w3.org ] 왼쪽메뉴에서 [HTML]을 클릭하여 HTML 내용 페이지로 이동하여 찾으면 된다.
![[http://www.w3.org/html/ 화면]](http://tagnbrace.com/blog/attach/1/1130522045.jpg "[http://www.w3.org/html/ 화면]")
[http://www.w3.org/html/ 화면]
오른쪽에 [Work]라는 메뉴 밑에서 HTML4.01을 클릭하면 HTML4.01의 설명페이지가 나온다. 우리가 알고 있는 HTML에 관하여 가장 정확하고 방대한 정보를 제공하는 웹 페이지이다.
![[http://www.w3.org/TR/html401/ 화면] title=](http://tagnbrace.com/blog/attach/1/1098304727.jpg)
![[http://www.w3.org/TR/html401/ 스크롤하여 본 아래쪽 화면]](http://tagnbrace.com/blog/attach/1/1118047128.jpg "[http://www.w3.org/TR/html401/ 스크롤하여 본 아래쪽 화면]")
[http://www.w3.org/TR/html401/ 스크롤하여 본 아래쪽 화면]
그 중에서 [ 9. Text - Paragraphs, Lines, and Phrases ]를 클릭하면 Text에 관련된 엘리먼트(Element)에 관한 내용이 나온다.
![[http://www.w3.org/TR/html401/struct/text.html 화면]](http://tagnbrace.com/blog/attach/1/1106342899.jpg "[http://www.w3.org/TR/html401/struct/text.html 화면]")
[http://www.w3.org/TR/html401/struct/text.html 화면]
CITE: Contains a citation or a reference to other sources. 에 대한 설명을 볼 수 있다.
![[http://www.w3.org/TR/html401/struct/text.html 화면]](http://tagnbrace.com/blog/attach/1/1391578443.jpg "[http://www.w3.org/TR/html401/struct/text.html 화면]")
[http://www.w3.org/TR/html401/struct/text.html 화면]
이런 식으로 W3C에서 만든 엘리먼트의 용도에 맞게 마크업을 하고 몇 가자의 유의사항을 지키면 의미를 살린 마크업( Semantic Markup)이 된다. 자주 사용하게 되는 엘리먼트는 많지 않기 때문에 한 번만 엘리먼트를 정리해 두면 의미를 살린 마크업의 두려움에서 벗어날 수 있다.
* 의미를 살린 마크업을 할 때 몇 가지 유의사항
-h1 엘리먼트는 한 페이지 내에서 제일 중요한 제목에 한 번만 사용한다.
-h1 다음으로 중요한 제목의 표시는 h2 엘리먼트로 작성하고, h2 엘리먼트 없이 h3이나 h4로 건너 뛰게 되면 검색엔진이 웹페이지를 검색할 때 이 페이지는 더 이상 중요한 내용이 없으니 검색하지 않아도 된다고 생각하게 되어, 결국 검색에 덜 노출되게 된다. -인라인레벨 엘리먼트( Inline-level elements )는 블록레벨 엘리먼트( Block-level elements ) 안에 작성되어야 한다. p 태그는 블록레벨 엘리먼트이고 em 태그는 인라인레벨 엘리먼트이다. 예) <P>Some <EM>emphasized</em> text</P>
의미를 살린 마크업( Semantic Markup)이 정확하게 작성되었다면, 이제 디자인을 위해 여러분은 CSS(Cascading Style Sheet)를 작성하여 컨텐츠와 디자인을 분리하게 된다.
06. DOCTYPE
웹표준에서는 DOCTYPE이 중요하다. 브라우저는 HTML 상단에 작성된 DOCTYPE에 따라서 HTML을 해석하여 디스플레이하는 방식이 달라진다. 다음은 [ www.w3.org ] 의 DOCTYPE이다. 현재의 웹 문서는 XHTML 1.0의 권고를 엄격하게 지켜서 작성하였다고 나타내고 있고 브라우저도 그것에 맞게 해석한다. 여기서 엄격(Strict)하게 지킨다는 의미는 앞에서 살펴본 의미를 살린 마크업, XHTML 1.0의 작성법, 앞으로 없어질 엘리먼트를 사용하지 않는 것을 정확하게 지켜서 마크업을 했다는 것을 의미한다.
다양한 DOCTYPE의 종류와 사용하는 경우를 알고 싶다면 [ http://www.w3.org/QA/2002/04/valid-dtd-list.html ]에서 확인해보기 바란다.
![[http://www.w3.org/QA/2002/04/valid-dtd-list.html 화면]](http://tagnbrace.com/blog/attach/1/1005287778.jpg "[http://www.w3.org/QA/2002/04/valid-dtd-list.html 화면]")
[http://www.w3.org/QA/2002/04/valid-dtd-list.html 화면]
07. HTML Validator
W3C에서는 DOCTYPE에 맞게 제대로 마크업이 되었는지 직접 확인할 수 있는 기능을 제공하고 있다. [ www.w3.org ] 왼쪽 메뉴 중간쯤 [ HTML Validator ]를 클릭하면, [http://validator.w3.org/ ] 사이트가 연결되어 있다. 많이 들어 본 HTML 유효성 검사를 할 수 있는 사이트이다. 기본적으로 입력한 URL의 유효성 검사를 할 수 있게 되어 있다. 검사를 해 보고 싶은 URL을 입력하고 [Check] 버튼을 클릭 한다. 나는 [http://www.w3.org]를 입력하였다.
![[http://www.w3.org/ 왼쪽메뉴 화면]](http://tagnbrace.com/blog/attach/1/1020089957.jpg "[http://www.w3.org/ 왼쪽메뉴 화면]")
[http://www.w3.org/ 왼쪽메뉴 화면]
![[http://validator.w3.org/ 화면]](http://tagnbrace.com/blog/attach/1/1107148438.jpg "[http://validator.w3.org/ 화면]")
[http://validator.w3.org/ 화면]
결과 페이지에서 유효성 검사 결과를 상세하게 볼 수 있다. 지금 화면은 마크업의 유효성 검사가 통과되었을 경우 [Jump To: Congratulations · Icons] 문구가 나타난다. 통과되지 못한 경우 하단에 에러에 대한 정보들이 나타나고 HTML에서 에러부분을 수정하면서 통과될 때까지 계속 체크해야 한다.
![[http://validator.w3.org/ Check결과 화면]](http://tagnbrace.com/blog/attach/1/1338775554.jpg "[http://validator.w3.org/ Check결과 화면]")
[http://validator.w3.org/ Check결과 화면]
[Jump To: Congratulations · Icons]을 클릭하면 Congratulations 페이지에서 HTML 유효성 테스트를 통과한 웹 페이지에 붙일 수 있는 "valid" Icon(s)을 붙이는 방법을 설명하고 있다. CSS의 유효성 검사는 별도로 해야 한다.
![[Jump To: Congratulations·Icons 연결 화면]](http://tagnbrace.com/blog/attach/1/1330656456.jpg "[Jump To: Congratulations·Icons 연결 화면]")
[Jump To: Congratulations·Icons 연결 화면]
08. 웹접근성
웹표준을 지켜 마크업을 하면 기본적으로 웹접근성도 좋아진다. 세부적으로는 다양한 환경(컴퓨터 운영체제, 디바이스, 브라우저)에서 모두 동일하게 컨텐츠의 제공이 이루어지게 하려면 추가적인 작업들이 약간은 필요하다. 다양한 디바이스에서 동일하게 컨텐츠를 제공하기 위한 구조적인 설계가 필요할 것이고, 시각 장애인들이 사용하는 음성브라우저 환경까지 고려한다면 실제 음성브라우저에서 테스트를 통해 이론적인 마크업이 아닌 실제 접근하기 좋은 마크업을 만들어야 할 것이다. 다음 그림은 http://validator.w3.org/을 브라우저 크기를 조절할 때 변화되는 모습을 관찰한 화면이다. 아무런 감동이 없다면 웹 접근성의 의미를 조금 더 생각해 보기 바란다.
![[http://validator.w3.org/을 브라우저 크기를 조절하여 본 화면]](http://tagnbrace.com/blog/attach/1/1065498701.jpg "[http://validator.w3.org/을 브라우저 크기를 조절하여 본 화면]")
[http://validator.w3.org/을 브라우저 크기를 조절하여 본 화면]
09. 마치며
드림위버 CS3에서 웹표준 문서를 제작하기위해서의 첫 번째인 이번 호에서는 직접 웹의 규격을 만들고 관리하는 W3C를 살펴보면서 웹표준과 웹접근성의 이해와 테스트 방법을 살펴보았다. 혹시 드림위버를 미리 실행시키고 잔뜩 기대했던 분들은 다음 호부터 실습의 기회가 많을 것이니 기다려 주기 바란다. 이 외에 웹표준에 관한 정보들은 제 블로그인 www.tagnbrace.com/blog 에 앞으로 추가될 예정이다.
출처 : tagnbrace.com/blog
