실전 웹 표준 가이드

- 1 -

실전 웹 표준 가이드 The Practice Guide for Development

based on Web Standards

2005.12

한국소프트웨어진흥원

실전 웹 표준 가이드

- 2 -

Web Standard Practice by KIPA

Edited by Seokchan Yun, Jungsik Shin, Hyeonseok Shin, Sungno Lee

Copyright ⓒ 2005 KIPA. All rights reserved.

This book is restricted by the confidential policy of KIPA. Anyone cannot distribute or copy this book without acceptance of the company.

이 가이드의 내용에 대한 모든 저작권은 한국소프트웨어진흥원에 있으며, 본 원 문서 정책 및 저작권법에 따라 보호 받는 저작물이므로 무단 전재와 복제를 금합니다.

실전 웹 표준 가이드

- 3 -

목차 목차 ························································································································································ 3

그림 목차················································································································································ 7

저자 소개················································································································································ 10

서론 ························································································································································ 11

이 가이드의 목적 ······························································································································· 12 웹 표준에 대한 오해·························································································································· 16 웹 표준이란 무엇인가?······················································································································ 17 웹 표준 스펙 소개 ····························································································································· 19 웹 표준 홈페이지 방법론 ·················································································································· 23 우리 나라 웹 표준 현실 및 과제 ······································································································ 30

실전 XHTML 가이드 ·····················································································36

XTHML 소개········································································································································· 37

XTHML이란 무엇인가? ····················································································································· 37 왜 XTHML을 사용해야 하는가? ······································································································· 38 XTHML 문서 구조····························································································································· 39 XHTML 일반 문법 준수···················································································································· 41

구조적 XHTML 사용 방법···················································································································· 44

잘못 사용하고 있는 태그 ·················································································································· 44 그룹 요소: div, span··························································································································· 46 표제(Heading) ···································································································································· 46 문단(paragraph)································································································································· 46 구문(em, strong, dfn, code, samp, kbd, var, cite, abbr, acronym)······················································ 47 형식을 가지고 있는 컨텐츠 (pre) ····································································································· 48 추가 및 삭제(ins, del) ························································································································ 48 목록 (ul, ol, dl)··································································································································· 48

실전 CSS 레이아웃························································································50

CSS 제대로 사용하기 ···························································································································· 51

CSS 개념 및 소개 ·································································································································· 53

CSS(Cascading Style Sheet)란 무엇인가? ························································································· 53 CSS 선택자(Selector)························································································································· 54 CSS 선언 방법 ··································································································································· 65 CSS 적용의 체크 포인트 4가지 ········································································································ 66

CSS 레이아웃(LAYOUT) 기초 ··············································································································· 70

실전 웹 표준 가이드

- 4 -

테이블 레이아웃 ································································································································· 70 CSS 레이아웃이란?···························································································································· 70 기본 레이아웃 ···································································································································· 72 컬럼형 레이아웃 ································································································································· 77 목록(List) ············································································································································ 81 박스 모델(Box Model)························································································································ 83 테이블(Tables)···································································································································· 90 CSS Hack············································································································································ 93

실전 예제를 통한 CSS 레이아웃 ··········································································································· 95

전체적인 구조와 마크업 ···················································································································· 95 상단 부분(#head) ······························································································································· 97 좌측 영역 (#sub)································································································································ 101 본문 영역 (#body) ····························································································································· 105 하단 영역 (#foot) ······························································································································· 107 완료····················································································································································· 109

고급 CSS 레이 아웃 ······························································································································ 110

CSS를 이용한 디자인 팁 ··················································································································· 110 CSS 개발 및 검증 도구····················································································································· 115

실전 DOM/Script 가이드 ···············································································122

표준 DOM 기반 개발 ···························································································································· 123

W3C DOM vs. MS DOM···················································································································· 123 DOM 기본 기능································································································································· 125 DOM 호환 기능································································································································· 128 이벤트(Events) 기능··························································································································· 131 XML 기능··········································································································································· 133

표준 JAVASCRIPT 사용 방법 ················································································································· 136

ECMAscript vs. Jscript?····················································································································· 136 스크립트 개발시 유의점 ···················································································································· 137

디버깅 및 품질 관리 ······························································································································ 143

기본 디버깅 방법론 ··························································································································· 143 디버깅 도구 이용 ······························································································································· 144

올바른 플러그인(PLUGIN) 사용 ············································································································· 149

외부 객체 이용 방법·························································································································· 149 ActiveX와 대안 Plugin 기술 ············································································································· 152 브라우저 내장 기술 ··························································································································· 156 웹 어플리케이션 표준화 동향 ··········································································································· 158

실전 웹 표준 가이드

- 5 -

실전 표준 웹 프로그래밍··················································································162

표준 MIME 타입 설정··························································································································· 163

Apache에서 설정 방법······················································································································· 165 IIS에서 설정 방법 ······························································································································ 167 PHP에서 설정 방법 ··························································································································· 168 Apache Tomcat에서 설정 방법·········································································································· 168 Perl/Python 등으로 쓴 CGI·············································································································· 170

표준 문자 인코딩 지정··························································································································· 171

문서에서 지정 ···································································································································· 173 웹 서버 프로그램에서 지정 ··············································································································· 175

참고 문헌················································································································································ 179

실전 웹 표준 개발 프로세스··············································································181

기존 웹 개발 프로세스··························································································································· 182

현재 프로세스 소개(Waterfall 방식)································································································· 182 역할을 중심으로 한 개발 공정 ········································································································· 187 개선된 모델(퍼블리셔 중심) ·············································································································· 192

새로운 개발 프로세스 ···························································································································· 195

기획/분석/회의 ···································································································································· 195 기획자 공정 ········································································································································ 196 퍼블리셔 공정 ···································································································································· 199 디자이너 공정 ···································································································································· 209 프로그래머 공정································································································································· 210

맺음말····················································································································································· 213

부록. 웹 표준 브라우저 호환표 ··········································································214

웹 브라우저 현황 ··································································································································· 215

인터넷 익스플로러7 ··························································································································· 215 모질라(Mozilla) 계열 웹브라우저 : 파이어폭스··············································································· 216 오페라 브라우저 ································································································································· 217 사파리 ················································································································································· 218

장애인 웹 접근성 체크 리스트 ·············································································································· 220

HTML 브라우저 호환표 ························································································································ 223

윈도우에서 주요 웹브라우저 별 HTML 지원 내역 ········································································· 223 브라우저별 HTML3/4 지원 일람표··································································································· 224

표준 HTML4.01/XHTML 브라우저 호환 차트 ···················································································· 228

실전 웹 표준 가이드

- 6 -

HTML 4.01 ········································································································································· 228 XHTML 1.0········································································································································· 241 XHTML 1.1········································································································································· 241

표준 CSS 브라우저 호환 차트··············································································································· 243

CSS 2.1 Unit ······································································································································· 243 CSS 2.1 Importance···························································································································· 245 CSS 2.1 At-rules ································································································································· 245 CSS 2.1 Selectors ······························································································································· 245 CSS 2.1 Pseudo-classes······················································································································ 246 CSS 2.1 Pseudo-elements ··················································································································· 246 CSS 2.1 Basic properties···················································································································· 246 CSS 2.1 Print properties····················································································································· 261 CSS 2.1 Voice properties···················································································································· 261 CSS 2.1 Conformance ························································································································ 264 CSS 3 Units ········································································································································ 265 CSS 3 At-rules ···································································································································· 268 CSS 3 Selectors ·································································································································· 270 CSS 3 Pseudo-classes························································································································· 270 CSS 3 Pseudo-elements ······················································································································ 272 CSS 3 Basic properties······················································································································· 272 CSS 3 Print properties ······················································································································· 275

표준 DOM 2/3 브라우저 호환 차트 ······································································································ 277

DOM Level 3 Core ····························································································································· 277 DOM Level 2 Events ·························································································································· 281 DOM Level 2 HTML ·························································································································· 283 DOM Level 3 Load and Save ············································································································· 293 DOM Level 2 Style ····························································································································· 294 DOM Level 2 Traversal and Range ··································································································· 300 DOM Level 3 Validation ···················································································································· 301 DOM Level 2 Views ··························································································································· 302

참고 사이트 ············································································································································ 303

각 웹 표준 브라우저별 호환 여부 ···································································································· 303 국내 웹 표준 커뮤니티 ······················································································································ 303

실전 웹 표준 가이드

- 7 -

그림 목차 그림 1 역사상의 웹 브라우저 ······················································································ 11

그림 2 웹 표준에서 구조, 표현, 행동의 분리 ··································································· 13

그림 3 W3C HTML Validator의 실행 모습 ···································································· 15

그림 4 웹 표준을 제정하는 표준화 기구, 웹 컨소시움(http://w3.org) ·································· 18

그림 5 웹 표준이 정해 지는 순서················································································· 18

그림 6 웹 접근성 평가 도구, KADO-WAH ···································································· 23

그림 7 구조적으로 표현한것과 태그로만 표현한 페이지······················································ 24

그림 8 구조와 표현의 분리를 통해 디자인 및 접근성이 확보된 웹 페이지 (1)은 기본 스타일 양식, (2)는 구조적 마크업을 통한 HTML소스 (3)은 스타일을 걷어 냈을 때 시맨틱 내용만 있는 모습 ······ 27

그림 9 패널 번호를 누르면 내용이 바뀌는 예제 ······························································· 28

그림 10 CSS Zen Garden은 하나의 HTML에 스타일 변경 만으로 다양한 디자인을 선보이고 있다.··························································································································· 53

그림 11 일반 선택자 개념도 (출처: http://andsite.net)····················································· 55

그림 12 복합 선택자의 종류 (출처: http://andsite.net/)··················································· 56

그림 13 인접 선택자 사용 예제 ··················································································· 59

그림 14. 가상 클래스 선택자 종류 (출처: http://andsite.net/) ··········································· 59

그림 15 동적 수도 클래스 사용 예제············································································· 60

그림 16 동적 선택자 종류 (출처: http://andsite.net/) ····················································· 61

그림 17 focus 수도 클래스 사용 예제 ··········································································· 62

그림 18 :first-child 수도 클래스 사용 예제····································································· 63

그림 19 first-line, first-letter 수도 클래스 사용 예제························································· 64

그림 20 사용자가 스타일을 선택 가능하도록한 표준 기반 예제 ············································ 66

그림 21 W3C CSS Validator ······················································································ 67

그림 22 일반인들에게 표준 웹 브라우저를 홍보하는 BrowseHappy ····································· 69

그림 23웹페이지를 그리드로 바라보고 접근한 것(좌측)과 구성요소로 구분하여 접근한 측면(우측) · 71

그림 24 CSS 박스 모델 ····························································································· 83

그림 25 라운드 박스 표현을 위한 배경 분리 ··································································· 110

실전 웹 표준 가이드

- 8 -

그림 26 Wired.com을 통해 본 CSS 파일 상속 사례 ························································· 112

그림 27 정보통신부의 텍스트, 시각 장애인, 모바일 페이지 ················································· 113

그림 28 스타일 변경으로 레이아웃 변경 사례 (http://PhonoPhunk.phreakin.com) ················ 115

그림 29 드림위버 MX 2004를 통해 본 CSS 레이아웃 기능 ················································· 116

그림 30 HTML Tidy를 통한 유효성 검사······································································· 121

그림 31 다양한 웹 브라우저를 한번에 띄워 테스트 하는 모습 ············································· 144

그림 32 IE 개발자 툴바를 통한 DOM 스크립트 디버깅 ····················································· 145

그림 33 Venkman을 통한 스크립트 디버깅 ···································································· 146

그림 34 DOM Inspector를 통한 DOM 디버깅 (Firefox 내장) ············································ 147

그림 35 Firefox 자바스크립트 콘솔을 통한 디버깅···························································· 148

그림 36 파이어폭스에서 윈도우 미디어 플레이어 액티브X가 실행되는 모습····························· 154

그림 37 XUL로 개발한 아마존 서비스 브라우저 ······························································· 155

그림 38 Flex의 서비스 플랫폼 구조 ·············································································· 156

그림 39 Ajax로 구현한 Google Maps ··········································································· 157

그림 40 Canvas를 이용한 3D 게임 ·············································································· 158

그림 41 XForm과 WebForm의 관계도·········································································· 160

그림 42 W3C의 웹 어플리케이션 포맷 워킹 그룹 ····························································· 161

그림 43 기존 웹 개발 공정표 ······················································································ 183

그림 44 협업을 이루어 내지 못하는 개발 공정표······························································ 184

그림 45 의존적인 스토리 보드의 전형적인 예·································································· 185

그림 46 디자이너 중심 개발 공정표 ·············································································· 189

그림 47 개발자 중심 개발 공정표················································································· 190

그림 48 기획자 중심 개발 공정표················································································· 191

그림 49 개선된 개발 공정 도표 ··················································································· 193

그림 50 스토리 보드 예제 ·························································································· 197

그림 51 CSS 스타일 가이드 예제 ················································································· 205

그림 52 Opera에 내장된 디버거 ·················································································· 207

그림 53 Firefox Web Developer Extensions을 이용한 디버깅············································· 208

그림 54 다음커뮤니케이션에서 사용하는 UI 가이드라인 ····················································· 209

실전 웹 표준 가이드

- 9 -

그림 55 비지니스 로직 분석도····················································································· 210

그림 56 MVC 모델 설명도 ························································································· 211

그림 57 브라우저 시장 점유율 (2005.10현재) ·································································· 215

실전 웹 표준 가이드

- 10 -

저자 소개

윤석찬 (E-mail) channy@gmail.com (Blog) http://channy.creation.net/blog

신현석 (E-mail) hyeonseok@gmail.com (Blog) http://hyeonseok.com/blog

이성노 (E-mail) eouia0819@gmail.com (Blog) http://eouia0.cafe24.com/blog

신정식 (E-mail) jshin@i18nl10n.com

실전 웹 표준 가이드

- 11 -

서론 1993년 4월 22일 미국 일리노이 대학에서 일단의 학생들이 개발한 모자이크(Mosaic)라는 작은 공개 소프트웨어 웹브라우저는 오늘날 웹이 전 세계에 영향을 끼치게 하는 혁명적인 첫 출발이었다. 이 웹브라우저의 근본 아이디어를 기초로 마이크로소프트와 넷스케이프사 등에서 개발한 유수의 웹브라우저 들이 나와 각축을 벌이고, 이제는 넷스케이프 네비게이터가 시장 선점에 실패하면서 MS사의 인터넷 익스플로러가 시장 지배적인 위치에 들어서 있다.

브라우저 시장점유 전쟁 동안 서로간의 웹브라우저에 배타적인 기술을 도입하던 나머지 똑 같은 웹페이지가 다르게 보이고 서로에서 구현하지 못하는 기술 때문에 많은 혼란을 겪어 왔다. 이러한 상호 호환 미성숙으로 말미암아 웹기술이 혼란 상태에 있어 왔던 것이 사실이다. 현재에는 이미 마이크로소프트가 IE로 시장 지배력을 넓히고 있는 이 시점인 데다 더 이상 웹브라우저가 신기한 도구이지 않기 때문에, 다양한 인터넷 환경에서 어떠한 웹브라우저가 가장 최적의 구현을 제공하느냐가 관건이 되었다.

그림 1 역사상의 웹 브라우저

그러나 넷스케이프사가 자사의 웹브라우저 소스를 공개 소프트웨어로 전환시키면서 탄생한 모질라(Mozilla) 재단은 전 세계 개발자들의 노력에 힘입어 경량의 오픈 소스 웹브라우저인 파이어폭스(Firefox) 1.0을 내 놓으면서, 출시 된지 몇 개월 만에 인터넷 익스플로러의 브라우저 점유율을 90% 아래로 끌어 내리고 넷스케이프 이후 사상 최초로 10% 점유율을 바라보고 있다. 노르웨이의 Opera 브라우저는 가볍고, 각종 OS 플랫폼과 표준 호환성이 뛰어난 기능을 무기로 시장을 개척해 나가고 있다. 뿐만 아니라 유닉스 기반 오픈소스 프로젝트 KDE(K Desktop Environment)에서 개발한 KHTML 브라우징 엔진은 애플이 사파리 브라우저에 채택되었고 PDA 및 Embedded Linux 등 소형 기기에 탑재될 수 있는 가능성으로 웹 브라우저의 다양한 엔진 전쟁이 예고 되고 있다.

이러한 현재 상황을 두고 많은 웹 서비스 개발자들이 마치 90년대 중반의 브라우저 전쟁 중에 있었던 비호환성을 고려해야 하는 크로스 브라우징 문제가 다시 대두되는 게 아닌가 염려하고 있다. 즉, 다양한 브라우저 지원이 결국 시간과 비용을 들여야 하는 문제이며 소수 브라우저에 굳이 비용을 투여할 필요가 있는가 하는 오해가 존재하는 것이다.

본 가이드에서는 현대 웹브라우저들이 과거와는 달리 웹 표준을 준수하고 있고 계속적으로 이를 지원하기 시작했기 때문에 이를 배우고 따르기만 하면 보다 저렴한 비용으로 홈

실전 웹 표준 가이드

- 12 -

페이지를 구축 및 유지 보수 할 수 있다는 것을 보여 줄 수 있음을 보여 주고자 한다. 또한, 웹의 근본적인 목표인 기기 및 운영 체제 독립적인 보편적인 웹을 만들 수 있도록 하고 있다. 전 세계의 많은 웹사이트들이 이미 웹 표준에 기반한 홈페이지 제작 방식을 도입하고 있으며 이를 통해 매우 효과적인 웹서비스 체계를 갖추기 시작하고 있다.

이 가이드의 목적

1989년 웹(World-wide Web)을 처음 발명한 팀 버너스 리(Tim Berners-Lees)는 CERN연구소의 수 천명 연구자들이 이기종 OS와 개발 환경에서 정보를 공유할 수 있도록 기종이나 환경과 상관없이 어떤 컴퓨터에서도 정보 자원에 접근할 수 있는 웹을 만들게 되었다. 이러한 웹의 근본 취지에는 보편적 디자인(universal design), 보편적 접근(universal access) 개념이 뿌리내려 있으며 웹을 사용하고 접하는 다양한 환경과 사람들을 위해 공통적인 정보 소통 통로를 만드는 것은 정보의 가치와 비례하여 중요하다고 하겠다. 이러한 꿈을 이루기 위해 Tim과 CERN은 웹의 발명품을 아무나 사용할 수 있는 무제한으로 특허를 사용할 수 있도록 하였다.

우리들 중에는 노인, 장애인, 어린이 등의 다양한 계층과 윈도우, 매킨토시, 리눅스 등 다른 OS, IE와 파이어폭스, 오페라 등 다른 브라우저를 사용하는 사람이 존재한다. 또한, 향후 TV 브라우저, PDA 등의 다양한 휴대 기기를 사용하는 사람과 시력이 약해서 화면을 확대해 봐야 하는 사람들이 있다. 다양한 사용자들이 어떻게 하면 편하게 웹을 이용할 수 있을까? 어떻게 하면 저비용으로 접근성 문제를 해결할 수 있을지를 고민하여 실마리를 풀어 나가야 한다. 특정 플랫폼의 사용자만이 향유할 수 있는 웹을 만들면 만들수록 더 많은 정보가 웹으로 쏟아져 나오기 때문에, 장애인, 노인, 외국인, 매킨토시 사용자, 리눅스 사용자는 점점 더 소외 계층으로 전락하여 이른바 정보화의 폐해가 드러나게 되기 때문이다.

이러한 문제를 해결하기 위한 구체적인 방법은 무엇일까? 본 가이드에서 설명하고자 하는 핵심 요지는 아래에서 말하는 세 가지로 요약 할 수 있다.

미션1. 웹 표준을 지켜라

전 세계적인 웹 기술 표준을 주도하고 있는 W3C의 HTML4.1, XHTML1.0, CSS1/2, DOM 등의 구현 스펙이 매우 상세하고 이를 지원하는 브라우저들이 계속 늘어 남에 따라 더 이상 웹페이지가 다르게 보이거나 동작하지 않는 현상은 거의 사라지게 되었다. 다만 웹브라우저간 이종 기능이 아직은 상존하고 있고 예전에 개발되어 사용된 오래된 브라우저 사용자들의 불편함을 고려해 같은 기능이라도 호환 가능하도록 해 주는 표준을 통한 웹페이지 제작이 요구되고 있다.

그러나 이것이 웹브라우저에서 지원하는 버전 호환성 유지(backward compatibility)라는 괴물과 충돌하게 된다. 일반적으로 프로그램을 개발할 때, 버전이 올라가면 갈수록 새로운 기능을 추가하고 이전 기능은 폐기하게 된다. 그러나 사용자의 측면에서는 예전 기능을 계속 유지해 주어 개발 호환성을 유지해 줄 필요성이 생긴다. 즉, 버전 호환성 유지는 예전에 사용되는 기능이나 태그를 그대로 사용하도록 해 주는데 이 때 사용된 비표준 문법들이 계속 확대 재생산 되어 결국 접근성에 심각한 위해를 주게 된다. 여기에는 취약한 우리나라 웹 생산 시스템의 문제도 있다. 주로 나모 웹 에디터, 드림 위버와 같은 저작 도구에

실전 웹 표준 가이드

- 13 -

의존하여 표준을 무시하고, 그냥 남의 코드를 따다가 적당히 익스플로러에서만 돌려보고 개발을 끝내는 풍토와 그런 정보 가공자들을 계속 양산 하는 교육 시스템에 문제가 있다.

이와 반대로 XHTML 1.x이나 HTML 4.x 표준에 맞추어진 문서는 99% 접근성이 높은 사이트들이다. 기존에 흔히 사용되는 table 구조를 div 바꾸고 font, b 같은 태그들을 스타일시트(CSS)로 사용하게 되면, HTML 코드 양은 약간 과장해서 반 이하로 줄어든다. 구조와 표현이 엄격히 분리되면, 사이트의 로딩 속도도 빨라지며, 코딩과 유지 보수의 효율성은 두 배로 늘어난다. 표준을 지킨 사이트에서는 오히려 코드의 양이 줄고 속도가 늘어나며 재개발 효율성이 증대 된다.

미션2. 구조와 표현, 동작을 분리하라

웹 표준에서 HTML과 함께 중요한 또 다른 요소인 스타일시트(CSS)는 단순히 링크의 색상, 글자 모양 바꾸는 정도만 할 수 있는 것이 아니고, 문서의 배치, 여백 조정, 색깔, 요소 자체의 성격 변화, 클래스를 통한 디자인의 일관성 확보, 서로 다른 미디어에 따른 최적화된 디자인 템플릿 적용 등 이루 말할 수 없이 많은 역할을 할 수 있다.

그림 2 웹 표준에서 구조, 표현, 행동의 분리

HTML 에서는 철저하게 구조화된 마크업만을 사용하고, 모양이나 디자인에 관한 것은 CSS로 완전히 분리함으로써, 구조는 변하지 않은 채 여러 가지 디자인을 적용한다거나, 상황에 따라 쉽게 디자인을 변경하는 것이 가능해진다. 또한, 똑같은 디자인 템플릿에 다른 내용을 담는 여러 가지 문서를 만드는 것도 가능해진다. 또는 디자인에 전혀 영향을 주지 않고 문서의 내용을 바꾸는 것이 쉬워지기 때문에 장애인의 접근성에 엄청난 도움을 준다. 예를 들어, 한 개의 HTML 문서에 시각 장애인용 CSS와 텍스트용 CSS 그리고 기존의 CSS 등 세 개의 스타일시트를 만들어 변경해 줌에 따라 문서의 구조가 내용과 섞이지 않고 제공 될 수 있다.

우리나라 대부분의 웹사이트들이 문서의 구조적인 요소인 h1, ul, strong, blockquote, cite 등 보다는 font, table, br 등의 요소가 의미적인 내용과 섞여 있어 문서 중에서 도대체 어

실전 웹 표준 가이드

- 14 -

떤 것이 중요한 지, 제목에 해당되는 지, 강조할 것과 인용된 것이 어떤 것이지 하는 것을 이해할 수 없게 된다. 문서의 내용이 구조화 되어 있지 않다는 것은 결국 장애인용 보조 기기, 또는 PDA, TV, 음성 브라우저 등을 통해서도 접근할 수 없거나, 접근했을 때에 바른 결과를 얻어 낼 수 없다는 이야기가 된다. 디자인 요소가 CSS로 완전히 분리되면, 의미 있고 구조화된 내용만 남게 되며, 문서의 표현에도 제약 사항이 발생하지 않게 되는 것이다. 최악의 경우, CSS가 제거되어도 의미를 이해하는 데에는 아무런 문제가 없게 되며 이것이 웹 접근성 문제를 해결하는데도 도움을 준다.

또한, 구조와 표현에서 행동을 분리하는 것도 매우 중요하다. 웹 문서의 내용을 자바 스크립트를 통해 동적으로 사용하고, 사용자의 반응을 주고 받는 행동(Behavior)도 중요한 부분으로 인식되고 있다. 이러한 클라이언트 스크립팅을 기본으로하는 동적인 행동 양식이 사실 접근성 및 사용성을 저해하고 및 복잡성을 높이는 요소로 생각되어 왔다. 그러나, 최근 구조에서 행동 양식을 분리하는 다양한 방법론이 제안되면서 접근성을 해치지 않으면서 코드를 간단하게 하는 다양한 방법들을 적용할 수 있게 되었다. 자바스크립트를 홈페이지에 마구 쑤셔 넣는 개발 방식에서 변화할 수 있다는 것이다.

미션3. 최소한의 디버깅을 거쳐라.

W3C에서 제시한 HTML 혹은 XHTML 표준을 지키고, CSS를 통해 구조와 표현을 분리하였다 하더라도 이것을 검증해 볼 수 있는 방법이 없다면 역시 그 문제 해결이 쉽지 않을 것이다. 다행히 W3C에서는 이러한 문제를 검증 해주는 유효성 검사(Validation) 도구들이 제공되고 있다. doctype에 규정된 문서 형식에 따라 유효한 코드가 사용되었는지를 알 수 있게 해준다. (http://validator.w3.org)

HTML과 XHTML 문서뿐만 아니라 CSS 역시 자신이 사용한 표현식과 문법이 제대로 되어 있는지 알려 주는 도구가 존재 한다. 처음 이 검사기를 돌려 보면 수 많은 문제들이 나오게 될 수도 있다. 그러나 대부분의 문제들은 요소를 따옴표 등으로 묶지 않았거나, ?, & 같은 특수 문자를 특수 코드로 쓰지 않는 등 반복되는 몇 가지 실수를 포함 하고 있으므로 간단한 수정 만으로 유효성 검사를 통과 할 수 있다.

또한, 문서 안에 들어 있는 요소를 객체화 시켜 사용하는 DOM(Document Object Method)과 이를 이용하는 자바 스크립트(JavaScript) 등을 사용하는데 있어도 표준 문법을 사용했는지 확인하는 과정이 필요하다. 오픈소스 브라우저인 Mozilla Firefox의 탑재된 자바 스크립트 디버거 만으로도 인터넷 익스플로러와 공통으로 생기는 문제점을 발견 해결할 수 있고, 비표준으로 사용된 문법을 판별해 낼 수 있다. 그러나 웹사이트 가공자들이 이러한 디버깅 과정을 빠뜨리고 납품을 하거나 완성하는 경우가 대부분이기 때문에, 웹 사이트 관리자들이 검수(Quality Assurance) 과정에서 이러한 유효성 통과와 표준 문법 사용 검증 결과를 첨부하도록 가이드 한다면 보다 좋은 품질을 가진 결과물을 얻을 수 있을 것이다.

실전 웹 표준 가이드

- 15 -

그림 3 W3C HTML Validator의 실행 모습

미션4. 효율적인 웹 개발 방법론을 가져라.

웹을 생산하는 시스템 안에는 웹 기획자와 웹 개발자라는 직군이 함께 존재한다. 웹 생산 공정에서 웹 디자인까지 이들은 삼각 구도를 이루고 있으며, 서로 간의 업무 역할이나 관심 영역에서 확연한 차이가 드러난다. 따라서 웹사이트를 만드는 이들이 서로 협력하지 않는 다면 프로젝트는 산으로 가며 따라서 웹사이트는 제대로 된 품질을 지킬 수 없다.

웹사이트를 만드는 일은 기획->디자인->개발이라는 컨베이어 벨트 위에 놓은 물건과 같다. 이게 공장이라면 컨베이어 벨트만 통과하면 완성품이 하나 나오지만, 문제는 이 컨베이어 벨트에 탄 물건은 사용자 테스트나 요구 사항 변경에 따라 이 컨베이어 벨트를 몇 번씩 옮겨진다는 데 있다. 이 과정에서 누가 컨베이어 벨트에 새로 올려 놓았느냐에 따라 서로간에 피해 의식이 생기게 된다.

서로를 탓할 순 없고 맘속으로만 삭일 수 밖에 없다. 문제를 해결하는 방법은 서로 영역을 나누어 공동 작업을 하는 것이다. 마치 시계의 부품을 각자 작업해서 조립만 될 수 있도록 하는 것이다. 그러기 위해서는 웹 표준을 통한 공정이 매우 생산적이다.

웹 표준에서 말하는 웹은 내용을 담는 구조(HTML, XHTML), 표현(CSS), 양식(자바스크립트, 서버 측 개발)을 분리시켜 개발하도록 권장하고 있다. 구조는 단순한 HTML로 이 페이지에서 넣고 싶은 내용만을 간추릴 수 있다. 간단한 템플릿을 사용하면 기획자들이 쓰는 스토리 보드처럼 레이아웃을 만드는 것이 가능하다.

HTML에 표현과 내용을 분리하지 않고 다 집어 넣는 풍토가 바뀌면 기획자와 디자이너, 개발자가 같은 시간에 같은 일을 하는 것이 가능하게 된다. 기획자가 기획안을 넘기고 다른 기획에 투입되며 디자이너는 디자인만 넘기고 다른 프로젝트에 투입되고, 개발자가 코딩만 하고 다른 개발을 하게 되는 일이 없어지면 상호간 하나의 팀으로서 같은 일을 같은 시선으로 바라볼 수 있는 것이다.

기획자와 개발자, 그리고 디자이너들은 서로 다른 사고 방식과 생각을 가진 사람들이다. 기획자들은 비즈니스를 생각하고 디자이너들은 시각적인 요소를 더 중시한다. 개발자들은

실전 웹 표준 가이드

- 16 -

그들이 사용하는 기술에 관심이 있는 것은 두말할 나위가 없다.

그럼에도 불구하고 그들을 모두 엮는 것은 웹(Web)이라는 테두리이다. 웹 기획자가 아니라면 그들이 HTML을 이해할 필요도 없고, DB와 서버를 알 필요도 없다. 따라서 이러한 직군에 근무하는 사람들은 웹에 대한 의미와 인식을 같이하는 공감대를 가질 필요가 있다.

웹 표준에 대한 오해

웹 표준과 웹 접근성을 강조하다 보면 사람들로부터 다음과 같은 질문을 받게 된다. 웹 표준과 접근성을을 지키는 것이 어떤 혜택을 얻을 수 있는지 알아 본다.

화려하고 세련된 웹페이지를 만들 수 없다?

흔히들 우리나라 웹페이지는 외국보다 역동적이고 화려하게 하는 것을 좋아하기 때문에 접근성을 강조하면 그것을 달성하기 어렵다고들 한다. 그러나 어떠한 접근성 지침에서도 그림이나 멀티미디어 쓰지 말라고 하지 않으며, 그림을 못 보는 사람들을 위해 대체 텍스트를 함께 넣으라는 것뿐이다. 레이아웃 장식을 위해 그림을 많이 사용하는 경우, CSS의 배경(background)으로 그림을 넣어버리면 가능하며 플래쉬를 이용해 메뉴를 구성 하는 경우, 대체 텍스트 메뉴를 플래쉬를 표현하는 object 사이에 포함시켜 주기만 해도 된다.

접근성 높은 사이트가 온통 텍스트로만 구성된 지루하고, 멋없는 사이트라고 생각하는 것은 잘못된 편견이다. 접근성 지침에서 결코 디자인과 타협하거나 상충되는 부분은 거의 없으며, 이미 CSS를 활용한 외국의 사이트들은 접근성이 높으면서도 화려하고, 깔끔한 사이트가 대부분이다. 우리 나라는 오히려 웹 서비스 가공자들에 대한 재교육 부재와 기존의 비효율적이고 표준을 활용하지 못하는 작업 행태에서 문제가 시작 되는 것이다.

접근성이 높은 사이트는 비용이 훨씬 증가한다?

물론 기존에 접근성을 전혀 고려하지 않고 만든 사이트를 고치려면 상당한 비용이 들어가는 것이 사실이다. 그러나 대부분의 웹사이트들이 여러 번 리뉴얼이라는 과정을 통해 계속 변경하고 있으며, 이러한 리뉴얼을 시작할 때 처음부터 접근성을 염두해 두고 엄격한 웹 표준에 입각해 개발하면, 결코 비용이 많이 들어가지 않는다.

이 렇게 개발된 접근성이 높은 사이트를 다시 재개발하는데 드는 효율성도 매우 높다. 왜냐하면, 구조와 표현을 분리하여 만들어져 있으므로, 컨텐츠 담당자는 오로지 구조와 내용에만 신경을 쓰고, 디자인 담당자는 내용을 표현하기 위한 외양적 디자인에만 관심을 기울일 수 있기 때문이다. 프로그래머는 이미 HTML과 CSS로 UI가 분리되어 있으므로, 복잡한 HTML 코드를 이해하고 다뤄야 하는 대신 프로그램 코드에만 신경 쓰면 된다. 즉, 내용이 바뀌면 디자인까지 다 뜯어고쳐야 한다거나, 디자인이 바뀌면서 내용이 타협을 해야 한다거나 하는 일들이 줄어들게 된다. 그리고 한 번 이렇게 만들어진 사이트를 다른 사람이 유지 보수를 할 때에도 소스 코드도 훨씬 이해하기가 쉽고 간결해서 완전 재개발 해야 하는 경우가 발생하지 않아 유지 보수 비용도 줄일 수 있다.

특수 계층을 위한 별도의 사이트가 필요하다?

가뜩이나 다수의 논리에 의해 소수는 쉽게 무시되어버리는 우리 나라 사회에서 웹 접근성

실전 웹 표준 가이드

- 17 -

을 이야기하면 효율과 속도를 중시하는 풍조에서 누가 과연 몇 퍼센트나 있을 지 모르는 장애인과 매킨토시, 리눅스 사용자와 비 IE 사용자를 배려할 수 있을 것인가라는 의문을 제기한다. 그리고는 마치 그들을 위해 뭔가 선심이라도 써야 할 듯이 별도의 사이트를 만들고 비용과 인력을 들여야 할 듯이 말한다. 웹에서 표준안의 사용과 접근성 가이드에 대한 준수 만으로도 이들 계층들을 위한 별도의 웹사이트는 필요치 않다. 별도의 사이트를 만드는 것이야 말로 오히려 비용을 증가 시켜 효율성을 떨어 뜨리는 것이다.

접 근성이 높은 웹사이트는 결코 이들 특수 계층에게만 좋은 것이 아니다. 사용 편의성이 높아지고, 문서가 분명하며 이해하기 쉽게 되면 아이들이나 노인들에게도 도움이 되며, 이것을 개선하여 작업하는 웹 사이트 운영자도 편해 진다. 곳곳에 설명 도구(tooltip)들이 생겨서 일반인들에게도 웹을 친근하게 사용하는 데에 도움이 되며, 그림과 멀티미디어 요소가 의미있는 대체 텍스트를 달게 하면 검색 엔진이 그림과 멀티미디어를 일반인들이 검색하는 데에 큰 도움을 준다.

웹 표준이란 무엇인가?

전 세계적인 웹 기술 표준을 주도하고 있는 W3C의 HTML4.0, XHTML, CSS1/2 등의 구현 스펙이 매우 상세하고 이를 지원하는 현대적인 브라우저들이 계속 늘어남에 따라 더 이상 웹페이지가 다르게 보이거나 동작되지 않는 현상은 거의 사라지게 되었다. 옛날 웹브라우저간 이종 기능이 아직은 상존하고 있기 때문에 오래된 브라우저 사용자들의 불편함을 고려해 주는 상호 호환성(Cross Browsing)과 최신 웹 표준 기술 적용 그리고 접근성 높은 웹페이지를 통해 향후 표준 기술에 적합하게 만드는 상위 호환성(Forward Compatibility)가 현재 웹 서비스 제공자들의 공통된 숙제가 되고 있다.

이것은 하위 버전 호환성 유지(Backward Compatibility)와 구분해야 한다. 일반적으로 프로그램을 개발할 때, 버전이 올라가면 갈수록 새로운 기능을 추가하고 이전 기능은 폐기하게 된다. 그러나 사용자의 측면에서는 예전 기능을 계속 유지해 주어 개발 호환성을 유지해 줄 필요성이 생긴다. 웹브라우저에서 하위 버전 호환성 유지는 예전에 사용되는 기능이나 태그를 표준 태그로 치환해 주는 것이다. 이를 통해 대부분의 웹디자이너는 예전 지식에 따라 웹페이지를 코딩해 주어도 그대로 구현되는 것으로 생각하게 되는 것이다. 그러나, 하위 버전 호환성 유지는 웹브라우저의 벤더에 따라 지원 가능 정도가 약해 질 뿐만 아니라 웹 표준 기술에 대한 지식 습득을 가로막는 장애가 된다.

이에 반해 상호 호환성은 표준 웹 기술을 채용하여 다른 기종 혹은 플랫폼에 따라 달리 구현되는 기술을 비슷하게 만듦과 동시에 어느 한쪽에 최적화되어 치우치지 않도록 공통 요소를 사용하여 웹페이지를 제작하는 기법을 말하는 것이다. 또한, 지원할 수 없는 다른 웹브라우저를 위한 장치를 만들어 모든 웹브라우저 사용자가 방문했을 때 정보로서의 소외감을 느끼지 않도록 하는 방법론적 가이드를 의미하는 것이다. 또한, 장기적인 웹 표준을 지원하는 상위 호환성은 미래에 어떠한 웹 브라우저나 단말 장치가 나오더라도 웹을 이용할 수 있다는 측면에서 매우 중요하다고 하겠다.

웹 표준이 만들어 지는 방법

웹사이트에 적용하는 HTML, CSS, 자바스크립트 같은 것은 어디에서 정해져서 사용되는 것일까? 이 같은 승인된 개방형 인터넷 표준은 즉 World Wide Web Consortium (W3C,

실전 웹 표준 가이드

- 18 -

http://www.w3c.org) 에서 만들어 진다. W3C는 1994년 10월 미국의 MIT 컴퓨터 과학 연구소(MIT LCS), 정보 수학 유럽 연구 컨소시움(ERCIM), 그리고 일본의 게이오 대학이 연합하여 만들어진 국제적인 웹 기술 표준 기구이다.

그림 4 웹 표준을 제정하는 표준화 기구, 웹 컨소시움(http://w3.org)

언뜻 보기에는 연구 기관으로만 이루어진 것 같으나 웹과 관련된 510여 개의 국제적인 다국적 IT 기업체가 참여하여 자사의 하드웨어와 소프트웨어에 웹 표준 기술을 탑재하거나 자사의 기술을 표준화 하고자 하는 치열한 전투장 이기도 하다. W3C의 역할은 정보, 의견 교환, 아이디어 창출, 독립적 사고, 그리고 공동의 이해를 위하여 명세, 가이드 라인, 소프트웨어, 그리고 도구 및 규칙 등의 표준안을 제정함으로써 웹의 모든 잠재력을 이끌어 내는 것이다.

웹에 관련한 표준에는 우리가 흔히 말하는 표준(Standard)은 존재하지 않으며, W3C의 토론을 통해 나온 권고안(Recomendation)이 가장 최상위 이다. 표준의 종류에는 제안된 표준(Draft), 작업하는 표준(Working Draft, WD), 확정될 권고안(Candidate Recommendation, RC), 확정된 권고안(Recommendation)이 있다.

그림 5 웹 표준이 정해 지는 순서

권고안을 제정하는 방법은 1) 어떤 기능을 Draft로서 제안하고, 2) 드래프트를 실제로 적용할 수 있게 기술적인 작업을 하고(Working Draft), 3) 이를 다시 논리 오류가 없는지, 실제 하드웨어에서 지원이 가능한지를 살피고, 4) 정식 권고안이 되기 전에 기업체에 공개하여 토론을 거친 후(Recommendate Candidation), 5) 마지막으로 권고안(Recommendation)을 확정한다.

실전 웹 표준 가이드

- 19 -

웹브라우저 중 모질라 파이어폭스, 오페라 등은 문서로서 확정된 권고안(Recomendation)등 다양한 표준 가운데 확정된 표준을 지원한다. 다시 말해 모질라는 HTML 4.0도 지원하지만, HTML4.01을 더 잘 지원해 준다. 특히 W3C 전용 브라우저인 Amaya 브라우저가 했던 표준의 기술 지원 시험을 요즘에는 모질라에서 하고 있어 더욱 빠르게 표준 기술이 적용되고 있다. 모질라 계열 제품들의 최신 버전은 XHTML, CSS 1/2를 모두 지원하고 있다. 오페라도 비슷한 정도로 표준을 지원해 주지만, 빠른 속도를 유지하기 위해 MathML 등을 제대로 해석하지 못하기도 한다.

인터넷 익스플로러는 지원하는 표준의 종류만을 보자면, 다른 두 가지 브라우저보다 더 뛰어나다. 그러나, 지원하는 표준이 권고안(Recomendation)이 아니라는 데 문제가 있다. IE는 Microsoft가 제안했던 내용만을 지원하는데, 권고안에 자신들이 제안했던 내용이 적고, 권고안 후보나 작업안 또는 기초안에 자신들이 제안한 내용이 많다면 그것을 지원한다. 대표적인 예가 HTML 4.0과 XHTML 1.0/1.1이다. HTML 4.0은 거의 모든 부분에서 마이크로소프트의 의견이 반영되어 있다. 그럼에도 불구하고 HTML4.0의 후속 버전인 XHTML 1.0/1.1은 제대로 지원하지 않고 있다. 왜냐 하면, HTML을 모듈화하면서 마이크로소프트의 의견이 상당 부분 표준에 채택되지 못했기 때문이다. 또한 CSS Level 2(흔히 CSS2) 지원도 미흡하다. 그러나, 마이크로소프트는 CSS3 표준안에 열심히 참여하고 있다. 웹브라우저가 W3C의 권고안을 지원하는 데는 이러한 복잡한 관계가 얽혀 있다.

이에 반해 모질라 파이어폭스 1.5의 최신 버전은 XTHML 1.0을 모두 지원할 뿐만 아니라 Draft상태에 있는 CSS2.1 전체 기능과 CSS3의 일부 기능을 이미 구현했다. 인터넷 익스플로러 6.0이 출시된 지 4년 만에 IE팀을 새로 꾸린 마이크로소프트는 IE7 버전에 CSS2에 대한 지원을 강화하기로 하는 등 표준 지원에 대해 모든 브라우저가 활발히 움직이고 있다.

웹 표준 스펙 소개

지금부터는 W3C에서 제공하는 각종 웹 표준 권고안에 대해 간단하게 살펴본다.

(X)HTML (eXtensible Hypertext Markup Language)

HTML(Hypertext Markup Language) 는 웹페이지를 표시하는데 기본 언어로서 사용된다. 웹 컨텐츠의 내용은 표준 HTML 포맷으로 적용해야 하며 정보가 독점적인 고유 포맷으로 제공되는 경우, HTML 포맷도 제공되어야 한다. 브라우저 호환성은 모든 경우에 있어 고려되어야 하며, 웹사이트는 단일 웹 브라우저에 맞추어 제작되어서는 안되며, 클라이언트 그룹에 의해 빈번하게 사용되는 웹 브라우저에서 올바르게 작동해야 한다.

최신의 HTML 표준은 4.01이지만 HTML을 XML과 결합한 XHTML이 권고안으로 나와 있다. HTML2/3와 달리 최신 XHTML 표준은 , , 같은 표현 요소들을 배제하고, 태그를 모두 닫도록 권고하는 등 정확한 문서 규격을 요구하고 있다. 이것은 손으로 코딩을 하는 게 아니라 점점 전문적인 저작 도구를 사용함에 따라 구조적인 HTML템플리트를 생성하고 스타일(Cascade Style Sheet, CSS)을 관리함으로서 비 전문 설계자도 웹 페이지를 손쉽게 제작 관리 할 수 있게 해 준다.

실전 웹 표준 가이드

- 20 -

CSS(Cascading Style Sheets)

CSS는 사용자 정의의 디자인 속성, 즉 글꼴, 크기, 색상, 이벤트 등을 지정할 수 있으며 CSS를 사용한 모든 페이지는 기존 버전과의 호환성 되게 어떤 브라우저에서도 내용을 열람할 수 있다. CSS를 이용하여 설계자는 서로 다른 화면 해상도와 브라우저 상에서, 테이블 없이도 동일하게 보여질 수 있는 페이지를 생성할 수 있다. 단 IE4.0 이하와 넷스케이프4 이하의 오래된 웹브라우저에서는 CSS를 지원하지 못한다. CSS를 사용하여 생성한 페이지와 템플리트는 다양한 브라우저, 화면 해상도 및 액세스 기술을 사용하여 테스트하여야 하며, 최신 시스템 사용자가 아니더라도 적합한 접근이 보장되어야 한다.

XML(eXtensible Markup Language)

XML(eXtensible Markup Language)은 HTML이나 CSS로서 표현되지 못하는 영역을 DTD를 이용하여 정의하여 사용자 정의의 태그를 생성하여 제작할 수 있는 메타 마크업 언어이다. XML 사용 분야를 검토하여 적절한 용도에 맞게 사용하여야 한다. XML이 고려되는 애플리케이션은 사용자가 필요한 정보를 얻기 위해 하나 이상의 데이터베이스와 상호 작용할 필요가 있는 경우, 작업이 사용자에게 전달되어 사용자가 자신의 기록 혹은 문서에 액세스할 것이 예상되는 경우, 서로 다른 세트의 데이터가 서로 다른 사용자에게 디스플레이 되어야 하는 경우, 정보 검색 및 디스플레이와 관련하여 사용자 선호 프로파일을 구축해야 할 필요가 있는 경우, 각 개인이 스타일 시트를 사용하여 다양한 포맷으로 문서를 갱신해야 할 필요가 있는 경우에 사용 가능하다. XML은 다양한 인터넷 비즈니스 환경에 손쉽게 적응 가능하여 웹 표준 분야에서 가장 활발한 표준 제정 활동이 이루어 지고 있다.

DOM(Document Object Model)

DOM(Document Object Model)은 웹페이지에 표현되는 모든 속성에 대해 객체화 하여 이를 자유 자재로 사용할 수 있도록 만든 것이다. document, from, window 등 각각의 속성을 객체화 하여 트리 구조로 형상화 하여 이에 대한 이벤트 처리 같은 것이 가능하다. DOM에는 크게 W3C DOM과 MS DOM이 있는데, IE6.0은 아직 하위 버전 호환성을 위해 MS DOM을 지원하고 있지만, IE6.0 이전 브라우저를 제외하고는 거의 모든 브라우저가 표준 W3C DOM을 지원한다.

ECMAScript

자바 스크립트는 W3C 표준으로 제정된 것은 아니다. 또한, 모든 웹 브라우저 사용자가 자바 스크립트를 볼 수 있는 것은 아니다. 특정 방화벽은 자바 스크립트가 통과하는 것을 허용하지 않는다. 그럼에도 자바 스크립트는 DOM이 표준화 되면서 웹 브라우저에 널리 쓰이고 있다. 주의할 점은 클라이언트 측 스크립트는 여러 브라우저에서 폭 넓게 검사되어야 한다. 핵심 기능은 자바 스크립트에 의해서만 제공되어서는 안 된다. 또 자바 스크립트는 주석 코드를 사용하여 비 호환성의 웹 브라우저로부터 숨겨져야 한다. 자바 스크립트는 HTML 문서의 Head 내에 위치해야 제대로 동작한다 따라서 문서의 Body 내에 자바 스크립트를 위치시키는 것은 피해야 한다.

자바스크립트의 경우, 넷스케이프사가 ECMA라는 표준 기구로 제안하여 채택된 바 있어

실전 웹 표준 가이드

- 21 -

ECMA -262 표준안(http://www.ecma-international.org/publications/standards/Ecma-262.htm)을 공부하면 된다. ECMASCript는 IE6.0, Firefox 1.0, Safari 1.0, Opera8에서 거의 100% 지원하고 있다.

웹 표준 목록

웹 표준을 지킨다고 하는 것은 W3C의 표준안을 지킨다는 것을 말한다. W3C의 표준 활동을 지속적으로 살펴보고 표준 권고안을 공부할 필요가 있는 것이다. 또한 웹 브라우저에 따라 지원 정도가 다르므로 부록에서 제공하는 호환 차트(Web Standard-Broweser Compatiblity Chart)를 통해 공부 해야 한다. 아래는 웹사이트 개발에 필요한 주요 표준안들에 대한 목록이다.

[HTML 4.01] “HTML 4.01 Recommandation”, David Raggett, Arnaud Le Hors, Ian Jacobs, http://www.w3.org/TR/1999/REC-html401-19991224 , HTML 4.0의 수정 표준 (http://www.w3.org/TR/1998/REC-html40-19980424 )

[XHTML1.0] “XTHML 1.0 Recommandation”, 26 January 2000, revised 1 August 2002, Steven Pemberton http://www.w3.org/TR/2002/REC-xhtml1-20020801 최신 버전: http://www.w3.org/TR/xhtml1

[XHTML 1.1] “ Module-based XHTML”, 31 May 2001, Murray Altheim, Shane McCarron http://www.w3.org/TR/2001/REC-xhtml11-20010531

[CSS1] "CSS, level 1 Recommendation", B. Bos, H. Wium Lie, eds., 17 December 1996, revised 11 January 1999. CSS1 권고안: http://www.w3.org/TR/1999/REC-CSS1-19990111 . CSS1 최신 버전: http://www.w3.org/TR/REC-CSS1 .

[CSS2.1] "CSS, level 2.1 Draft", Bert Bos, Tantek Çelik , Ian Hickson, Håkon, Wium Lie eds., 12 May 1998. CSS2 드래프트: http://www.w3.org/TR/2005/WD-CSS21-20050613 . CSS2.1 최신 버전: http://www.w3.org/TR/CSS21.

[DOM Level 1, Level 2, Level 3] "Document Object Model (DOM) Level 1,2,3 Recomandation", 최신 버전 http://www.w3.org/DOM/DOMTR

[XML] "Extensible Markup Language (XML) 1.0.", T. Bray, J. Paoli, C.M. Sperberg-McQueen, eds., 10 February 1998. http://www.w3.org/TR/1998/REC-xml-19980210 .[XML 1.1] XML 1.1 (http://www.w3.org/TR/xml11

[HTTP] http://www.w3.org/Protocols/, HTTP 1.0, 1.1을 비롯한 여러 가지 표준 웹 프로토콜에 대한 IETF(http://www.ietf.org) 표준이 있음.

웹에서 쓰이는 표준 중 HTTP등과 같은 프로토콜 표준은 W3C에서 만드는 것이 아니다. W3C 뿐만 아니라 인터넷에서 사용되는 모든 표준을 RFC라는 문서로 규정하는 IETF도 중요한 표준 기구이다. W3C 표준뿐 아니라 IETF에서 제정하는 표준 가운데 적어도 HTTP와 MIME에 대한 표준은 매우 중요하다. 왜냐하면 우리가 만드는 웹 문서를 인터넷으로 전달하는 기본적인 방법에 대한 것이기 때문이다.

다행히 이들 웹 표준 문서 중 일부는 W3C 한국사무국(http://w3c.or.kr)을 통해 한국어 번역(http://w3.org/2003/03/Translations/byLanguage?language=ko)을 접할 수 있다. 또한 이들 중 일부는 한국정보통신표준협회(TTA)의 국내 표준으로 정해진 것도 있다.

TTA, TTAS.KO-10.0085, "웹 구축 지침서", 1998-10 TTA, TTAS.W3-XHTML1.0, “XHTML 1.0 표준", 2001.12.

실전 웹 표준 가이드

- 22 -

TTA, TTAS.W3-DOM "문서 객체 모델 레벨 1", 2003.10. TTA, TTAS.OT-10.0003 "한국형 웹 콘텐츠 접근성 지침", 2004.12

아래는 웹사이트의 접근성을 높이기 위한 표준안들 이다.

[WCAG 1.0] Web Content Accessibility Guidelines 1.0, 5 May 1999, Wendy Chisholm, Gregg Vanderheiden, Ian Jacobs, http://www.w3.org/TR/1999/WAI-WEBCONTENT-19990505

[WAI-AUTOOLS] "Authoring Tool Accessibility Guidelines", J. Treviranus, J. Richards, I. Jacobs, C. McCathieNevile, eds. 저작 도구 접근성 지침에 대한 가장 최신 작업 초안(Working Draft): http://www.w3.org/TR/WAI-AUTOOLS/

[WAI-UA-SUPPORT] 이 문서에서는 (보조 기술을 포함하여) 웹 표시 장치들이 여기에서 언급된 접근성 관련 기능을 얼마나 지원하는지에 대해 언급하고 있다. 문서 있는 곳: http://www.w3.org/WAI/Resources/WAI-UA-Support

[WAI-USERAGENT] "User Agent Accessibility Guidelines", J. Gunderson and I. Jacobs, eds. 접근성이 높은 웹 표시 장치를 설계하기 위한 이 지침에 대한 최신 작업 초안: http://www.w3.org/TR/WAI-USERAGENT

[TECHNIQUES] "Techniques for Web Content Accessibility Guidelines 1.0", W. Chisholm, G. Vanderheiden, I. Jacobs, eds. 이 문서에서는 "웹 콘텐츠 접근성 지침 1.0"에서 정의한 체크포인트를 어떻게 구현하는지에 대해 설명하고 있다. 이 기술 문서의 최신 버전: http://www.w3.org/TR/WAI-WEBCONTENT-TECHS

웹 표준 검사 방법

W3C에서는 웹페이지가 표준안에 따라 만들어 졌는지, 접근성에 대한 고려가 이루어 졌는지 유효성 검사(Validation)에 대한 정보를 제공하고 있다. 개발의 맨 첫 단계에서부터 여러 가지 검사를 시작하면, 초기에 식별한 접근성 관련 문제점은 더 수정하기 쉽고, 피해 갈 수 있다.

아래는 몇 개의 중요한 유효성 검사 방법으로 제시되는 것이다. 먼저 자동화된 접근성 검사 도구와 브라우저 유효성 검사 도구(http://validation.w3.org)를 사용한다. 한국어 번역이 제공되는 http://validator.kldp.net 을 이용하면 유효성 에러에 대한 설명과 해결을 한국어로 볼수 있다. 이 외에도 CSS 유효성 확인(http://jigsaw.w3.org/css-validator/)페이지와 XML에 대한 유효성 확인(http://www.stg.brown.edu/service/xmlvalid)를 사용할 수 있다.

이러한 웹 표준 문법에 대한 유효성 확인 도구가 모든 접근성 관련 문제점을 다룰 수는 없다는 점을 유의 해야한다. 예를 들면 링크 텍스트의 의미가 적절한지 여부나, 대체 텍스트(text equivalent)의 적용 가능성(applicability) 등은 다룰 수 없다. 따라서 W3C의 웹 접근성 체크 리스트를 체크해 볼 필요가 있는데, 한국형 웹 접근성 평가도구인 KADO-WAH(http://www.iabf.or.kr/web/kadowah.asp)라는 소프트웨어를 이용할 수 있다. 이 프로그램은 웹 페이지의 접근성 준수여부를 평가하고 접근성의 오류들