드림위버를 이용하여 새 문서에 대한 표준 DTD 설정하기.
KADO 에서 주최한 제1회 웹 접근성 경진대회에 개발자 교육과정 강사로 참여하면서 만든 교재가 PDF(다운로드) 형식으로 되어 있는데 웹 문서 형태로 가공하여 공개하는 것이 바람직 하다고 판단하였습니다. PPT 형식으로 되어 있는 파일을 그냥 올리는 것이 웹에 대한 예의가 아니라는 것을 누구보다도 잘 알고 있고 또 교재만으로는 설명이 불충분하기 때문에 이곳에서 틈나는 대로 보충수업 합니다. 강의 주제는 ‘드림위버를 이용한 접근성 제고방안’ 이었으며 W3C 의 Web Content Accessibility Guidelines 1.0(이하 WCAG 1.0)과 한국형 웹 콘텐츠 접근성 지침 1.0(PDF버전) (이하 KWCAG 1.0) 을 단원별로 소개하면서 학습동기를 유발하고 드림위버를 이용하여 보다 쉽고 빠르게 웹 표준을 준수하면서 접근성을 개선하는 방법을 설명 하였습니다. 본 게시물의 목적은 드림위버의 우수성을 알리기 위함이 아니라 단지 적절한 도구를 사용하여 웹 표준 및 접근성을 향상시키려는 목적을 가진 사용자들과 경험치를 공유하려는 의도 이며 대상은 초-중 급 정도의 드림위버 사용자(디자이너 및 퍼블리셔)와 직무 관계자를 대상으로 하고 있습니다. 접근성이 높은 사이트를 구축하기 위하여 가장 먼저 해야할 일은 웹 표준을 따르는 일이고 그 중에서도 가장 먼저 해야 할 일은 바로 문서의 Document Type Definition(이하 DTD 또는 문서형 정의)를 바르게 설정해 주는 일입니다. W3C에서 권고하는 현재의 HTML 버전은 XHTML 1.x 이므로 XHTML DTD를 선언하고 이것을 사용하는 것이 바람직 하며, DTD를 선언하지 않는 경우를 흔히 볼 수 있는데 이것은 문법에도 맞지 않을 뿐더러 웹 브라우저마다 다른 렌더링이 나타나는 곤혹스러운 결과를 가져오게 되므로 반드시 DTD를 올바르게 정의해 주어야 합니다. 흔히 국내에서는 표준 DTD를 사용하면 IE 전용 JAVASCRIPT 를 사용할 수 없기 때문에 DTD를 제거한 상태로 웹 문서를 출판하는 경우가 많은데 이는 잘못된 관행으로서 IE 전용 JAVASCRIPT 사용도 지양해야 합니다. 지금부터 시작합니다. W3C의 WCAG 1.0 지침과 함께 이것을 지켜내기 위하여 무엇을 할 수 있는지.
WCAG 3.2
공식 문법에 맞도록 문서를 작성하라.[중요도2] 예를 들면, 문서의 시작 부분에는 기존에 정의된 DTD(예를 들면, strict HTML 4.0 DTD)를 참조하도록 문서 형식(document type)을 선언해 주어야 한다.
WCAG 1.0 지침에는 항목마다 중요도가 1~3 까지 다른데 중요도 1은 반드시 지켜야 할 필수 지침, 중요도 2는 가급적 지켜야할 중요한 지침, 중요도 3은 지킬수록 좋은 지침 입니다. 이것을 얼마나 지켜내는지에 따라서 W3C 에서 제공하는 작은 배너(마치 성적표 같은)를 달 수 있는데 배너에는 A, AA, AAA 형식으로 접근성 준수 정도가 표현되어 있습니다. 중요도 1을 모두 준수하는 경우 A, 중요도 1~2를 모두 준수하는 경우 AA, 중요도 1~3까지 모두 준수하는 경우 AAA 마크가 찍힌 배너를 달 수 있습니다. 배너를 게시하는 방법은 다음 링크를 참조하세요.
http://www.w3.org/WAI/WCAG1-Conformance
그러나 아직 이러한 접근성 준수 정도를 자동으로 측정해 주는 도구는 없습니다. 국내의 KADO-WAH 라는 웹 접근성 도우미 프로그램이 있긴 하지만 오직 표준문법 검사를 하는 수준으로서 오히려 이것을 맹신하면 안됩니다. 접근성 측정은 웹 접근성 지침을 완전히 이해하고 있는 사람(전문가)이 웹 문서를 평가함으로서만 정확히 판단할 수 있습니다. 예를 들어 제목이 아닌 곳에 <h1> 태그를 사용했다고 가정 하는 경우 주변 문장과의 논리적 관계를 따져서 저렇게 마크업하는 것이 적절한지 아닌지를 판단할 수 있는 것은 오직 사람이기 때문입니다. 이런 이유로 도구를 이용하여 웹 접근성을 자동으로 측정한다는 것은 매우 어려운 일이며 거의 불가능한 일입니다. 웹 접근성을 높이기 위하여는 웹 표준 문법 뿐만 아니라 <h1> 태그와 같이 의미론적(시멘틱) 마크업도 반드시 병행되어야 합니다. 즉, 웹 표준이란 ‘표준 문법+의미 적절한 마크업’ 이며 이것이 웹 접근성의 필수 조건 입니다. 웹 표준은 본래 웹 접근성을 고려하여 제정되어 있기 때문에 웹 표준을 준수하는 작업만으로도 웹 접근성은 거의 대부분 지켜지게 됩니다. 서두가 길었습니다. 본론(드림위버를 이용하여 표준 DTD 설정하기)으로 들어가는데 본론은 오히려 간단 합니다. 아래 단계를 따라하면 드림위버에서 새 문서를 열 때 사용자가 선택한 DTD가 기본값으로 코딩되어 열리게 됩니다.
- 드림위버를 실행한 다음 환경설정 단축키 Ctrl+U 를 눌러 Preferences 대화상자를 띄웁니다.
- 화면 좌측의 Category 에서 New Document 를 선택 합니다.
- Default Document Type (DTD) 항목에서 XHTML 1.x 버전을 선택합니다.
- 새 문서를 열어서 문서 첫 줄에 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> 형식의 바른 DTD가 코딩되어 있는지 확인 합니다.
이렇게 표준 DTD를 사용자의 판단에 따라 설정하고 활용함으로서 대부분의 웹 브라우저에서 동일한(표준) 렌더링을 얻을 수 있게 됩니다. 서로 다른 기종 및 버전의 브라우저간 렌더링 호환성을 유지하는 것도 접근성을 높이는 방법으로서 이는 KWCAG 1.0 제4장 지침이기도 합니다. 가장 표준을 지키지 않는다는 IE 브라우저도 DTD를 바르게 설정하면 표준에 가깝게 렌더링 합니다. 물론 다른 브라우저(OP, FF)만 못하지만. 다음 단원은 이렇게 사전에 설정된 DTD를 사용자의 선택에 따라 다른 종류의(버전 업 또는 버전 다운) DTD로 변환하는 과정을 설명 합니다. DTD에 따라 코드의 표준 문법이 약간씩 달라지는데 드림위버는 이렇게 DTD가 변경될 때 마다 자동으로 마크업 문법을 표준에 알맞게 수정해 줍니다. 다음 단원을 기대 하세요!
안녕 하세요^^ 영자님~~!! 웹표준으로 코딩을 해보렬구 노력 중인데…. 잘 되지가 않군요^^
아직까지 저희 나라에서는 웹표준이라는 것이 많이 생소 한데요!!
조금더 이해 하기 쉽게 좀 설명 해주시면…. 초보인 저같은 사람도 조금더 이해가 되지 않을까 생각 해봅니다~~!!ㅋㅋ
아무쪼록 열심히 할터이니…… 도와 주세요^^
네, 물론이죠~ 제 깜냥껏 열심히 노력해 보겠습니다 ^^
저희 나라 ;ㅁ; 우리나라라고 해줘요…