드림위버를 이용한 마크업 유효성(Markup Validation) 검사.
WCAG 3
마크업과 스타일 시트를 사용하되 적법하게 사용한다.
WCAG 11
W3C의 기술과 지침을 준수한다.
WCAG 부록 A. 유효성 검사.
자동 검사 도구와 수동 검사를 통해 접근성이 확보되었는지 검사를 한다. 자동 검사 도구를 쓰는 방법은 일반적으로 빠르고 편하지만 접근성에 관한 모든 문제점을 식별하지는 못 한다. 수동으로 직접 검사를 할 경우 언어의 명료성과 탐색의 용이성 등을 담보할 수 있다.
가장 신뢰할만한 웹 표준 마크업 문법 검사로는 ‘The W3C Markup Validation Service’ 를 이용하면 됩니다. CSS 표준문법 검사는 ‘The W3C Validation Service’ 를 이용하면 됩니다. 하지만 한번에 하나의 문서만 검사할 수 있다는 불편함이 존재하죠. 드림위버를 이용하면 웹사이트 문서 전체를 대상으로 (X)HTML 에 대한 ‘Markup Validation’ 검사를 진행해 줍니다. 단, 마크업 유효성 검사시 CSS에 대한 문법검사는 포함하지 않으며 CSS 에 대한 문법오류나 브라우저 비호환 속성/값에 대하여는 붉은색 밑줄로 경고해주는 기능이 별도로 존재 합니다. 이번 글에서는 (X)HTML 에 대한 마크업 문법 검사방법에 대하여만 다룹니다.
드림위버를 이용한 ‘Markup Validation’ 검사 방법
-
드림위버의 삽입메뉴에는 다음과 같이 ‘Validate markup’ 메뉴가 존재합니다.
-
클릭해 보면 아래와 같이 3가지 조건에 따라 유효성 검사를 진행 합니다.
- 현재 문서만 검사
- 현재 로컬사이트 전체 검사
- 선택된 파일/폴더만 검사
- 환경설정
-
유효성 검사를 진행함에 있어서 기준이 되는 것은 해당 문서의 ‘DTD’ 입니다.
하나의 사이트에 대한 DTD는 하나로 통일되어 있는 것이 좋겠지만 상황에 따라서 문서마다 DTD가 다를 수도 있습니다. 드림위버는 무조건 문서 첫줄에 코딩된 DTD를 기준으로 유효성 검사를 진행 합니다. 또한, 인클루드 되는 자식문서와 같은 경우는 DTD가 없기 때문에 이렇게 DTD가 없는 문서를 만나면 어떤 DTD를 기준으로 검사할 것인지 미리 설정해 두어야 합니다. 이렇게 DTD가 없는 문서를 만났을때 드림위버가 허둥대지 않고 유효성 검사를 진행하도록 미리 설정해 두는 곳이 바로 ‘Settings…’ 부분 입니다. ‘Settings…’ 를 클릭하면 다음과 같이 여러가지 DTD 가운데 하나를 선택하도록 묻는 환경설정 대화상자가 나타납니다.
위 설정에 따르면…
"If no DOCTYPE is detected, validate against: XHTML 1.0 transitional"
"문서형(DTD)이 발견되지 않으면 ‘XHTML 1.0 transitional’ 을 기준으로 검사"즉, DTD 가 있는 문서는 해당 문서의 DTD를 기준으로 각각의 문서에 대한 문법검사를 진행하고 DTD가 없는 문서는 드림위버에서 설정해 놓은 DTD를 기준으로 유효성 검사를 진행한다는 의미 입니다. 이곳에서 설정한 DTD는 모든 문서에 기준으로 대응하는 것이 아니라 DTD가 없는 문서에게만 해당된다는 사실에 유의 합니다.
-
실제로 유효성 검사기를 한번 돌려보겠습니다.
제가 웹 표준을 알기 이전에 코딩했던 개인 웹사이트에 대한 검사결과 입니다. 이 사이트의 경우 DTD만 HTML 에서 XHTML 으로 한꺼번에 찾아바꾸기 했습니다. 물론 잘못된 방식으로서 따라하시면 좋지 않습니다. DTD를 변경하려면 DTD 뿐만 아니라 HTML 코드의 문법도 변경되어야 합니다. 결과적으로 DTD만 ‘XHTML 1.0 Transition’ 이고 코드는 여전히 HTML 문법으로 코딩되어 있는 상태였습니다. 현재의 HTML 문법은 XHTML 기준으로 보았을 때 meta 태그에 대한 닫기 문법이 잘못(’>’ ≠ ‘ />’) 되었으므로 아래와 같은 오류가 발견되었습니다. meta 태그가 닫히지 않은 것으로 간주하여 title, link, script 태그의 위치가 잘못 되었다고 경고하고 있습니다. 각 오류항목을 더블클릭 하면 해당 문서가 열리면서 오류코드를 반전시켜 보여줍니다.
-
오류에 대한 자세한 정보확인 또는 리포트 내보내기.
각 오류목록 위에서 마우스 오른쪽 버튼을 클릭하면 다음과 같은 콘텍스트 메뉴가 펼쳐집니다. 오류에 대한 ‘Description’ 항목을 별도의 창에서 확인할 수 있습니다. 또는, 오류검사 결과에 대한 리포트를 웹 브라우저로 보여주기도 하고 XML 형태로도 저장할 수도 있습니다.
주의 : 현존하는 모든 ‘Markup Validation’ 검사도구는 (X)HTML 의 문법을 완벽하게 검사하지 못합니다. 시멘틱한(의미론적) 마크업이 작성 되었는지의 여부를 검증하지는 못하기 때문입니다. 따라서 ‘Markup Validation’ 검사에 통과하였다고 하더라도 그것이 진정한 웹 표준 사이트라고 보기는 어렵습니다. 예를 들면, 레이아웃용 table 태그를 사용하는 것은 분명히 잘못된 문법으로 간주해야 하지만 ‘Markup Validation’ 검사도구는 마크업에 포함되어 있는 table 이 레이아웃용인지 진짜 데이터 테이블인지 판단하지 못합니다. 또한, h1 태그를 엉뚱한 곳에 사용한다고 하더라도 그것이 잘못된 ‘Markup’ 이라는 것을 도구는 알지 못합니다. 왜냐하면 도구는 ‘Markup’ 문법만을 검증하고 해당 문법이 콘텐츠를 논리적으로 적절하게 담아내고 있는지의 여부는 사람만이 알 수 있기 때문입니다. 즉, 웹 표준의 조건은 ‘표준문법+시멘틱마크업’ 이고 ‘Markup Validation’ 검사도구는 완벽하지 않기에 무조건 신뢰할 수 없다는 의미 입니다.
