웹에 대한 중요성이 갈수록 대두되면서, 그에 따라서 웹접근성, 웹표준, 웹호환성이라는 단어를 자주 접하게 됩니다.
오늘 제가 이야기할 내용은 웹이란 어떤것이가, 그리고 웹표준, 웹호환성은 무엇을 의미하는가 정도를 이야기 드리고, 국내 웹환경의 현실을 짚어보면서 어떻게 하는것이 좋을까 같이 고민해보도록 하겠습니다.
웹호환성에 대한 이야기를 하기위해서 우선 웹이 어떻게, 왜 시작되었는지를 알 필요가 있습니다.
오늘날 웹이라부르는 월드와이드웹은 영국의물리학자 팀버너스리에 의해서 탄생되게 됩니다. 팀버너스리는 CERN연구소의 수천명 연구자들이 이기종 OS와 개발 환경에서 정보를 공유할 수 있도록 어떤 컴퓨터에서도 접근할 수 있는 리소스를 쉽게 제공하려는 목적으로 웹을 만들게 되었습니다.
그러므로 웹이 탄생한 이유는 "정보의연결을통한 지식의 공유와 학습"이라고 할 수 있습니다.
팀버너스리는 1980년 후반 다양한 환경에서 정보공유를 계속 고민하게 되었고, 1990년 최초의 인터넷주소 info.cern.ch 를 탄생시킵니다. 바로 제 1호 인터넷주소가 생긴 1990년을 인터넷의 시작이라고 볼수 있습니다
그후 1994년 월드와이드웹콘소시업 줄여서 W3C라고 부르는 웹을 위한 단체가 결성되어
현재는 510여개의 IT기업이 참여하여 세계 웹표준을 주도하고 있습니다.
웹표준 주도단체 W3C에서 이야기하는 웹의 주요이념은 7가지가 있는데
그중 웹표준, 웹호환성과 관련이 있는 3가지 이념에 대해서 알아보도록 하겠습니다.
첫째 Universal Access가 있습니다.
보편적접근이란 언어나 지역 그리고 계층, SW나 단말기, 운영체제등에 상관없이 웹을 사용할수 있어야 한다는 의미입니다
두번째 Semantic Web이 있습니다.
요즘 웹2.0을 기반으로한 기술을 논의하면서 자주 나타나는 용어인데 사람 뿐 아니라 컴퓨터도 이해 가능한 의미론적 웹을 말합니다.
세번째는 Interoperability 가 있습니다. 정보처리 상호운용성을 의미하죠.
상호운용성이란 어떠한 소프트웨어,하드웨어를 이용해서 웹을 보더라도 웹서비스에 이상이 없어야 한다는것을 의미합니다.
이전장에서 웹이 어떻게 생겨난 것인지를 살펴보았습니다.
이번에는 웹이 어떤것인지를 살펴보고, 웹표준이란 무엇을 말하는지 알아보도록 하겠습니다.
일반적으로 웹의 구성요소를 나누어보면 텍스트, 이미지, 동영상, 사운드, 기타플러그인 프로그램(인증서,파일업로드등)으로 구성되어 있습니다.
이런 콘텐츠를 표현하기 위한 웹의 기술은 HTML, CSS, ECMAScript, XML, DOM, AciveX 등이 벡엔드에서 사용되고 있습니다.
여러가지 다양한 기술요소들이 있는데 이것들은 크게 3가지 그룹으로 나누어집니다.
내용을 구성하는 기술(HTML,XHTML,XML)
표현을 담당하는 기술(CSS,XSL)
행동을 담당하는 기술(DOM & ECMAScript) 로 나누어지는데 가장 핵심적인 기술요소 3가지만 알아보도록 하겠습니다.
첫째 HTML
HTML(Hypertext Markup Languege) HTML은 웹페이지의 내용을 구성하는 대표적인 표준 언어를 말한다
Hypertext란 웹페이지에서 링크를 포함시켜 그 링크를 클릭했을 때 다른 웹페이지 또는 문서로 이동할 수 있게 해주는 기능을 의미하며 예전의 문서를 읽는 선형읽기 구조에서 비선형읽기가 가능하게 해주는 핵심적인 요소입니다. 그외 내용을 표현하는 요소들로는 데이터구조를 유연하게 표현할수있는 XML, XML과HTML의 중간단계 XHTML이 있습니다
두번째 CSS
CSS(Cascading Stylesheet)는 웹문서의 표현을 담당하는 언어입니다.
CSS는 주로 HTML을 구조적으로 출력하고, 외관을 장식하기 위한 역할을 하며, XML 문서를 간단한 방법으로 출력하는 방법으로는 XSL을 사용합니다.
세번째 DOM & ECMAScript
DOM
DOM은 문서의구조를 트리형태로 접근가능한 인터페이스 즉 각종 프로그램이나 스크립트를 통해 HTML을 동적으로 변화기키고자 할때 제공해주는 프로그램을 위한 문서구조입니다
ECMAScript
ECMAScript는 ECMA International의 ECMA-262 기술 명세에 정의된 표준화된 스크립트 프로그래밍 언어.
즉 ECMAscript 는 공통 javascript를 의미합니다.
웹 브라우저시장은 90년대 초반에 두개의 대표적인 회사의 제품이 대표적이었습니다
마이크로소프트사의 인터넷 익스플로러와 넷스케이프사의 넷스케이프 네비게이터(또는 커뮤니케이터)가 그것입니다. 두 회사는 각각 브라우저를 업데이트를 할 때마다 새로운 HTML에 대한 동적인 기능구현을 위해 각각의 javascript를 추가시켜 왔고 그로인해 넷스케이프사와 마이크로소프트사는 서로 다른 스크립트를 각자의 브라우저에서 사용하게 되었습니다 (넷스케이프는 Javascript, 마이크로소프트의 Jscript)
그러던 중 넷스케이프에서 ECMA International 에 웹문서 스크립트표준에 대한 명세를 제출하여 서로 규정을 맺고 javascript 1.5를 기준으로 표준 script 즉 ECMAScript 3rd 가 나왔으며, 이를 스크립트 표준 언어라고 이야기합니다.
지금도 각각 개발하긴 하지만 ECMAscript의 기본에 충실히 개발하고 있기 때문에 점차로 호환적인 측면에서 나아지고 있는 현실입니다. 물론 다른 웹브라우저(오페라나 모질라 등등) 에서도 이 표준을 따릅니다.
웹표준이란 지금까지 이야기한 W3C에서 제시하는 웹의 내용, 표현, 행동에 관련된 각종 기술표준을 의미하는것입니다.
지금까지 웹이란 어떤것인가, 그리고 웹표준은 무엇을 의미하는가에 대해서 알아보았습니다.
이번장부터는 국내웹환경의 문제점들을 짚어보고, 어떻게 해야할지에 대해서 고민해보도록 하겠습니다
국내웹환경의 첫번째문제는 브라우저호환성의 무시입니다.
대부분의 사람들에게 인터넷이 무엇이냐고 묻는다면 데스크탑바탕화면에 설치된 푸른색e아이콘 즉 마이크로소프트의 인터넷 익스플로러라고 이야기 할 것입니다.
그러나. 인터넷을 사용할수 있는 웹브라우저는 보시는 것처럼 인터넷익스플로러 이외에도 파이어폭스, 오페라, 사파리, 그외에도 퀑쿼러 링스등 다양하게 존재하고 있습니다.
실제 전세계 브라우저 사용량을 보면 90프로는 IE를 그외 10프로는 파이어폭스를 사용하고 있으며 그외의 브라우저들도 소수 사용되고 있습니다.
국내 웹환경의 두 번째 문제는 단말기접근성을 제공하지 않는다는 점입니다.
화면은 일반적으로 흔히 볼수 있는 웹사이트의 구조입니다.
텍스트버전,모바일버전,시각장애인용등의 웹사이트를 각각 제공하고 있는데 , 이것은 웹사이트를 제작할때 웹표준을 준수하지 않았기 때문에 중복개발비용이 발생되고있는 사례입니다 웹표준을 준수한다면 별도로 각각의 버전을 제작하는것이 아니라 CSS, 즉 내용과는 별개로 표현만 변경하는 방식을 적용하여 개발비용을 절감할수 있습니다.
CSS Zen Garden에서 보여주는 웹사이트들입니다.
이 사이트들은 모두 동일한 내용에 CSS만 변경한 같은 사이트입니다.
금방 이야기했던 표현과 구조의 분리를 통한 웹표준 개발을 하였을 때 한 개의 내용으로 표현할 수 있는 다양한 웹사이트의 사례입니다.
국내 웹환경의 세 번째 문제는 모든 레이아웃을 테이블로 처리하는 것입니다.
실제 HTML소스를 열어서 내용을 확인하면 콘텐츠간의 간격이나 레이아웃의 배치를 위해서, 테이블안의 테이블 또 그안의 테이블. 이런 형식으로 중첩된 테이블을 사용하고 있습니다.
구조와 표현을 분리하는 웹표준 개발방식을 적용한다면 테이블 레이아웃은 CSS레이아웃으로 대체되고 웹페이지는 용량이 줄어들게 되므로 트래픽 감소효과를 가져오게 됩니다.
실제 마이크로소프트는 2004년 테이블을 모두 빼고 웹표준 개발방식을 적용하여 CSS레이아웃을 사용하여 웹사이트 전면 개편 하였습니다. 그 결과 하루에 924GB의 트래픽을 감소시키게 되었고 속도향상을 가져왔습니다.
국내 웹환경의 4번째 문제는 비표준 스크립트의 남용입니다.
한국소프트웨어진흥원에서 실시한 2006년 1007개 국내 공공 및 민간 홈페이지에 대한 웹호환성 조사결과에 따르면 국내 스크립트 표준 준수율은 16.8% 입니다.
대부분의 웹사이트가 웹표준 비준수로인한 오류를 다수포함하고 있으며, 특히 스크립트표준 비준수로 인한 브라우저간 상호운용성이 심각한 수준입니다
마지막으로 정보접근성에 대한 배려가 없는점을 들수있습니다.
- 소수 운영체제 및 브라우저 사용자(리눅스의 파이어폭스, 매킨토시의 사파리등)
- 비 PC단말기 사용자 (PDA, Phone)
- 인터넷 환경이 열악한 제3세계 재한국인
- 정보 소외 계층(노인 및 장애인, 농민 및 빈민)
이 부분은 오늘 많이 들으신 내용이죠.
지금까지 국내 웹환경의 현실에 대해서 전반적으로 살펴보았습니다.
여기에서 한가지 의문사항이 있습니다. 웹접근성, 웹표준, 웹호환성은 어떤차이가 있는걸까요?
웹표준이란 앞에서 이야기드린것처럼 W3C에서 제시하는 웹의 내용,표현,행동에 관련된 각종 기술표준을 이야기합니다.
웹접근성과 웹호환성은 화면에 보시는것처럼 웹표준을 공통으로 포함하고 있습니다.
이 이야기는 웹표준을 준수하는것 만으로는 웹접근성이나 웹호환성이 보장되지 않는 다는 것을 의미합니다.
그리고 웹호환성을 준수하더라도 웹접근성은 보장되지 않는다는 이야기이기도 합니다.
웹접근성이란 보편적접근성 확보를 우선시하고, 웹호환성은 OS,SW에 독립적인 상호운용성 확보를 우선시합니다.
처음부분에서 설명드린것 처럼 웹의 이념은 유니버셜액세스(보편적 접근성)도 필요하고, 시맨틱웹(컴퓨터가 이해가능한웹), 인터오퍼러빌리티(상호운용성)까지 모두 포함하고 있습니다.
그러므로, 웹2.0시대에 맞는 웹서비스를 위해서는 웹표준을 준수하면서 웹접근성과 웹호환성을 다같이 고민해야 하는것입니다.
이 내용은 한국소프트웨어진흥원에서 2006년 실시한 웹호환성 준수검사의 평가항목입니다.
평가항목은 앞에서 이야기드린것처럼 웹표준준수여부에 대한 3가지항목 HTML , CSS, ECMAScript 준수여부와 함께 인터넷익스플로러, 파이어폭스, 사파리를 이용한 브라우저간 상호운용성 9개항목으로 웹표준과 상호운용성을 포함하여 구성되어 있습니다.
보시는 화면은 국내 웹사이트 호환성을 조사한 결과입니다.
전체 호환성 준수율은 66.5점, 공공부문이 민간부문보다는 조금 높은 수준이었고, 민간부문중 금융부문은 ActiveX의 과다한 사용으로인해 매우낮은 수준으로 조사되었습니다.
도대체 그럼 왜 웹호환성이 이렇게 나빠진것일까 요.
외부적인 요인으로
첫째, 96~99년간 소위 브라우저 전쟁기간 동안 IE vs. Netscape의 비표준을 기반한 경쟁 후 IE 전용 기술만 잔재로 남게 되었기 때문입니다.
다른 브라우저를 고려할 필요가 없는 현실이었다는 이야기입니다
둘째, 표준 기술에 대한 웹디자이너/UI 개발자 등 웹 생산 종사자 재교육 및 자기 개발 부재입니다.
다른 브라우저를 고려할 필요가 없으니 당연히, 가르칠필요도 배울필요도 없는 현실이 되었던 것입니다.
내부적인 요인으로는
첫째, 국내 인터넷 환경의 급격한 성장을 꼽을수 있습니다.
급격한 인터넷 산업화로 인해서 엔터테인먼트 인터넷으로 진화하게 되었고, 세계에서 첫째가는 IT인프라를 보유하게 되었습니다. 그러다보니 더많은 기능을 요구하게 되었고, 웹에 대한 기본 인식 및 개발 방식에 대한 이해가 없는 상황에서 공공재로서의 웹이라는 인식없이 각종 비표준 플러그인기술을 발전시키게 되었습니다.
그 결과 엄청난 비표준 웹페이지가 양산되었고 현재 국내의 웹페이지를 보면 테이블 레이아웃을 사용하는것이 거의 100%, 링크 대신 자바스크립트 액션을 사용하는것이 80% 정도로 판단하고 있습니다
비 표준 주요 실례를 보면
- MS 기반 태그 : <marquee>, <object>, <iframe>
- W3C DOM vs. MS DOM
- document.all -> document.getElementByID
- MS 기반 Java Script/VBScript vs. ECMA Script (스크립트 표준)등을 들 수 있으며
뿐만 아니라 Windows Media Player 호환 포맷만 사용함으로 인해서 다른 운영체제 사용자는 해당 콘텐츠를 볼 수 없는 상황이므로 Cross Platform 미디어 포맷에 대한 고려가 필요합니다.
호환성이 안지켜지는 또다른문제는 ActiveX입니다.
ActiveX는 특정 OS 및 브라우저에 종속적인 기술로 국내 ActiveX 사용량은 세계 최고입니다.
-코드사인 인증서 배포율 1위 (Verisign:Thawte=320:720 per year)
-1400여개가 넘는 배포 사이트 존재 (거의 대부분 기업 웹사이트)
-외국에서는 주요 플러그인 외에는 스파이웨어 취급을 당하고 있음.
ActiveX 문제가 발생한 주요 원인
- 일찍 수립된 공인 인증 체계: IE 브라우저 독점화에 기술 종속
- 빠른 브로드 밴드 진입 : 플러그인 다운로드가 쉬움
- 어플리케이션 웹: 정보 제공 수단이 아닌 기능적 웹으로 진화
- 오락적인 인터넷 사용 행태 : 온라인 게임, 채팅, 사용자 제어 등
ActiveX 주요 사용처
-공인 인증 사용: 인터넷 뱅킹, 증권 거래, 카드 결제, 보험, 전자 정부 등
-엔터테인먼트: 온라인 게임, 로그인, 채팅 및 메신저, 파일 첨부
-스파이 웨어: 광고 및 해킹 프로그램
그럼 도대체 왜 최근에 웹호환성이 제기되는 것일까요
이슈의 첫번째 원인은 공개SW 파이어폭스가 나타나서 새로운 웹브라우저가 시장을 점유하기 시작했기 때문입니다
Mozilla Firefox는 웹 표준을 기반으로 하는 경량의 공개 SW 웹브라우저로서 출시 100일 만에 2천8백만 다운로드 기록하였고,100개 언어로 프로젝트가 진행되며, 1만명의 테스터를 가진 SW입니다
파이어폭스는 웹 표준을 가장 잘 표현하는 브라우저이며, 탭브라우징 및 팝업 차단, 라이브 북마크 및 RSS 구독 기능 그 외 통합 검색 및 테마 및 웹 개발자를 위한 확장 기능등을 제공하는 우수한 브라우저입니다.
두번째는 윈도우 비스타 출시에 따른 ActiveX 배포방식변경입니다.
액티브X를 활용한 응용 프로그램과 윈도 비스타의 충돌문제로 전자정부, 인터넷뱅킹 등 대국민 서비스에 차질을 빚은 이후 행정자치부, 정보통신부 등 정부기관들이 액티브X 사용 배제, 모든 브라우저 지원 등 표준 준수 움직임을 본격화하고 하고 있으며, 행자부에서는 액티브X 사태 이후 신규 발주사업의 제안요청서에 특정 업체 제품(기술)만 지원하지 않도록 하고 웹 표준을 준수해 다양한 운영체제(OS)와 한 개 이상의 브라우저에서 작동할 수 있게 구현할 것을 지시하고 있습니다.
폭발적인 파이어폭스 점유율. 2003년 4%부터 꾸준히 증가하여 2007년 현재 전세계 11.69% 사용 중
그럼 웹표준을 지키면 무엇이 좋아지는 것일까요.
첫째, 고객의 양적 질적 증가
- 웹표준 준수는 친환경 경영과 같은 것. 고객의 기업 인지도 향상.
- 브라우저 호환을 통해서도 훌륭한 서비스 구현 가능
- 야후닷컴, 구글 Gmail, Maps
- 소수 사용자는 오피니언 리더다.
- 리눅스 및 맥킨토시 사용자는 인터넷 오피니언 리더이다.
둘째, 개발 속도 및 효율성 증가
- 브라우저에 따른 고려가 없어지므로 개발이 빠름.
- 표준 구현이 능숙해 지는 경우 개발 속도 향상
셋째, 레이아웃 변경이 용이
- 일반, 다국어 웹사이트, 텍스트, 장애인, 모바일 다양한 레이아웃 한꺼번에 제공 가능
- 구조와 표현의 분리에 따른 개발자-디자이너 협업 체계 구축.
- 개발자와 디자이너의 이중 작업 감소 및 영역 보장
넷째, 품질관리제공
- W3C Validation 및 자바스크립트 디버거를 통한 QA 보장
다섯째, 유지 비용의 감소
- 웹페이지 서버 트래픽 및 장비 비용 최소화
- 야후!닷컴: 같은 UI로도 첫화면 파일 크기를 1/3로 줄임.
- ESPN.com: 50kb의 파일 크기가 감소. Wired.com은 62% 가량 감소.
- MSN.com: Filesize 64% 감소. 하루 940GB의 트래픽 감소 효과 얻음.
- 재개발 비용의 감소
- 구조/표현 분리에 따른 리뉴얼 및 재개발에 따른 비용 감소
여섯째, 사용성 및 재생산성 증대
- Table 기반 렌더링에 비해 페이지 접속 체감도 증가
- 단말기 독립적인 웹서비스 제공 가능 (PDA, 텍스트, 장애인, 다국어 사이트)
일곱째, 글로벌 비즈니스 구현
- Section 508을 통과하지 않는 경우 미국 연방 정부 조달 불가능
- 중요한 10%의 사용자 확보
- 1천만의 10%는 십만명이나 1억의 10%는 천만명이다.
그럼 웹호환성 준수를 위해서 우리는 어떻게 해야할까요
우선 공급자측면에서 보면 웹 표준 규격 준수하는 것이 필수입니다
- W3C의 일반 표준 준수 (HTML4.1, XHTML1.0, CSS1, DOM1)
- ECMAscript(자바스크립트)의 일반 표준 준수
- 웹디자이너/UI 개발자/웹개발자에 대한 표준 준수에 대한 재교육
- 표준 준수는 생산성에 대한 경쟁력임을 전략화
구조와 표현 분리 사용
- 구조화된 HTML을 사용하고 표현은 CSS로 대체
- 테이블 구조를 CSS Boxing 모델로 수정
- 다수의 스타일로 각종 접근성 문제 해결 (노약자, 장애인, 비PC단말)
최소한의 디버깅 및 QA
- 표준 준수 Validator로 QA (W3C에서 제공)
- Firefox 자바스크립트 디버거 이용
- 다수 브라우저 테스트를 거칠 것
호환성있는 플러그인도입(업계)
- ActiveX 대체 기술들을 사용한 플러그인 제작
- Java, NSplugin : 예전 기술이거나 XP 환경에 적합하지 않음
- AJAX: xmlhttp과 Javascript를 통한 인터랙티브 UI기술
- 일반적인 웹 기술을 통해서도 대부분 구현 가능
브라우저 확장 기능
- Mozilla : XUL/Javascript/CSS를 통한 확장 가능
- Microsoft: XAML(Longhorn)을 기반으로 하는 닷넷 어플리케이션
호환성준수실태관리(관리자)
- 정보시스템 구축사업 계획 및 검수시에 호환성준수 항목을 포함하여 확인
- 정기적인 웹호환성 실태를 관리하여 수준 유지가 필요
마지막으로
웹2.0, 전자정부2.0시대에 맞는 웹서비스의 제공을 위해서는 생산자, 공급자, 관리자 모두가 힘을 합쳐서 웹표준 준수를 통한 웹접근성 보장, 웹호환성 확보를 위해 노력해야 한다는 것을 말씀드립니다.
오늘 제가 이야기할 내용은 웹이란 어떤것이가, 그리고 웹표준, 웹호환성은 무엇을 의미하는가 정도를 이야기 드리고, 국내 웹환경의 현실을 짚어보면서 어떻게 하는것이 좋을까 같이 고민해보도록 하겠습니다.
웹호환성에 대한 이야기를 하기위해서 우선 웹이 어떻게, 왜 시작되었는지를 알 필요가 있습니다.
오늘날 웹이라부르는 월드와이드웹은 영국의물리학자 팀버너스리에 의해서 탄생되게 됩니다. 팀버너스리는 CERN연구소의 수천명 연구자들이 이기종 OS와 개발 환경에서 정보를 공유할 수 있도록 어떤 컴퓨터에서도 접근할 수 있는 리소스를 쉽게 제공하려는 목적으로 웹을 만들게 되었습니다.
그러므로 웹이 탄생한 이유는 "정보의연결을통한 지식의 공유와 학습"이라고 할 수 있습니다.
팀버너스리는 1980년 후반 다양한 환경에서 정보공유를 계속 고민하게 되었고, 1990년 최초의 인터넷주소 info.cern.ch 를 탄생시킵니다. 바로 제 1호 인터넷주소가 생긴 1990년을 인터넷의 시작이라고 볼수 있습니다
그후 1994년 월드와이드웹콘소시업 줄여서 W3C라고 부르는 웹을 위한 단체가 결성되어
현재는 510여개의 IT기업이 참여하여 세계 웹표준을 주도하고 있습니다.
웹표준 주도단체 W3C에서 이야기하는 웹의 주요이념은 7가지가 있는데
그중 웹표준, 웹호환성과 관련이 있는 3가지 이념에 대해서 알아보도록 하겠습니다.
첫째 Universal Access가 있습니다.
보편적접근이란 언어나 지역 그리고 계층, SW나 단말기, 운영체제등에 상관없이 웹을 사용할수 있어야 한다는 의미입니다
두번째 Semantic Web이 있습니다.
요즘 웹2.0을 기반으로한 기술을 논의하면서 자주 나타나는 용어인데 사람 뿐 아니라 컴퓨터도 이해 가능한 의미론적 웹을 말합니다.
세번째는 Interoperability 가 있습니다. 정보처리 상호운용성을 의미하죠.
상호운용성이란 어떠한 소프트웨어,하드웨어를 이용해서 웹을 보더라도 웹서비스에 이상이 없어야 한다는것을 의미합니다.
이전장에서 웹이 어떻게 생겨난 것인지를 살펴보았습니다.
이번에는 웹이 어떤것인지를 살펴보고, 웹표준이란 무엇을 말하는지 알아보도록 하겠습니다.
일반적으로 웹의 구성요소를 나누어보면 텍스트, 이미지, 동영상, 사운드, 기타플러그인 프로그램(인증서,파일업로드등)으로 구성되어 있습니다.
이런 콘텐츠를 표현하기 위한 웹의 기술은 HTML, CSS, ECMAScript, XML, DOM, AciveX 등이 벡엔드에서 사용되고 있습니다.
여러가지 다양한 기술요소들이 있는데 이것들은 크게 3가지 그룹으로 나누어집니다.
내용을 구성하는 기술(HTML,XHTML,XML)
표현을 담당하는 기술(CSS,XSL)
행동을 담당하는 기술(DOM & ECMAScript) 로 나누어지는데 가장 핵심적인 기술요소 3가지만 알아보도록 하겠습니다.
첫째 HTML
HTML(Hypertext Markup Languege) HTML은 웹페이지의 내용을 구성하는 대표적인 표준 언어를 말한다
Hypertext란 웹페이지에서 링크를 포함시켜 그 링크를 클릭했을 때 다른 웹페이지 또는 문서로 이동할 수 있게 해주는 기능을 의미하며 예전의 문서를 읽는 선형읽기 구조에서 비선형읽기가 가능하게 해주는 핵심적인 요소입니다. 그외 내용을 표현하는 요소들로는 데이터구조를 유연하게 표현할수있는 XML, XML과HTML의 중간단계 XHTML이 있습니다
두번째 CSS
CSS(Cascading Stylesheet)는 웹문서의 표현을 담당하는 언어입니다.
CSS는 주로 HTML을 구조적으로 출력하고, 외관을 장식하기 위한 역할을 하며, XML 문서를 간단한 방법으로 출력하는 방법으로는 XSL을 사용합니다.
세번째 DOM & ECMAScript
DOM
DOM은 문서의구조를 트리형태로 접근가능한 인터페이스 즉 각종 프로그램이나 스크립트를 통해 HTML을 동적으로 변화기키고자 할때 제공해주는 프로그램을 위한 문서구조입니다
ECMAScript
ECMAScript는 ECMA International의 ECMA-262 기술 명세에 정의된 표준화된 스크립트 프로그래밍 언어.
즉 ECMAscript 는 공통 javascript를 의미합니다.
웹 브라우저시장은 90년대 초반에 두개의 대표적인 회사의 제품이 대표적이었습니다
마이크로소프트사의 인터넷 익스플로러와 넷스케이프사의 넷스케이프 네비게이터(또는 커뮤니케이터)가 그것입니다. 두 회사는 각각 브라우저를 업데이트를 할 때마다 새로운 HTML에 대한 동적인 기능구현을 위해 각각의 javascript를 추가시켜 왔고 그로인해 넷스케이프사와 마이크로소프트사는 서로 다른 스크립트를 각자의 브라우저에서 사용하게 되었습니다 (넷스케이프는 Javascript, 마이크로소프트의 Jscript)
그러던 중 넷스케이프에서 ECMA International 에 웹문서 스크립트표준에 대한 명세를 제출하여 서로 규정을 맺고 javascript 1.5를 기준으로 표준 script 즉 ECMAScript 3rd 가 나왔으며, 이를 스크립트 표준 언어라고 이야기합니다.
지금도 각각 개발하긴 하지만 ECMAscript의 기본에 충실히 개발하고 있기 때문에 점차로 호환적인 측면에서 나아지고 있는 현실입니다. 물론 다른 웹브라우저(오페라나 모질라 등등) 에서도 이 표준을 따릅니다.
웹표준이란 지금까지 이야기한 W3C에서 제시하는 웹의 내용, 표현, 행동에 관련된 각종 기술표준을 의미하는것입니다.
지금까지 웹이란 어떤것인가, 그리고 웹표준은 무엇을 의미하는가에 대해서 알아보았습니다.
이번장부터는 국내웹환경의 문제점들을 짚어보고, 어떻게 해야할지에 대해서 고민해보도록 하겠습니다
국내웹환경의 첫번째문제는 브라우저호환성의 무시입니다.
대부분의 사람들에게 인터넷이 무엇이냐고 묻는다면 데스크탑바탕화면에 설치된 푸른색e아이콘 즉 마이크로소프트의 인터넷 익스플로러라고 이야기 할 것입니다.
그러나. 인터넷을 사용할수 있는 웹브라우저는 보시는 것처럼 인터넷익스플로러 이외에도 파이어폭스, 오페라, 사파리, 그외에도 퀑쿼러 링스등 다양하게 존재하고 있습니다.
실제 전세계 브라우저 사용량을 보면 90프로는 IE를 그외 10프로는 파이어폭스를 사용하고 있으며 그외의 브라우저들도 소수 사용되고 있습니다.
국내 웹환경의 두 번째 문제는 단말기접근성을 제공하지 않는다는 점입니다.
화면은 일반적으로 흔히 볼수 있는 웹사이트의 구조입니다.
텍스트버전,모바일버전,시각장애인용등의 웹사이트를 각각 제공하고 있는데 , 이것은 웹사이트를 제작할때 웹표준을 준수하지 않았기 때문에 중복개발비용이 발생되고있는 사례입니다 웹표준을 준수한다면 별도로 각각의 버전을 제작하는것이 아니라 CSS, 즉 내용과는 별개로 표현만 변경하는 방식을 적용하여 개발비용을 절감할수 있습니다.
CSS Zen Garden에서 보여주는 웹사이트들입니다.
이 사이트들은 모두 동일한 내용에 CSS만 변경한 같은 사이트입니다.
금방 이야기했던 표현과 구조의 분리를 통한 웹표준 개발을 하였을 때 한 개의 내용으로 표현할 수 있는 다양한 웹사이트의 사례입니다.
국내 웹환경의 세 번째 문제는 모든 레이아웃을 테이블로 처리하는 것입니다.
실제 HTML소스를 열어서 내용을 확인하면 콘텐츠간의 간격이나 레이아웃의 배치를 위해서, 테이블안의 테이블 또 그안의 테이블. 이런 형식으로 중첩된 테이블을 사용하고 있습니다.
구조와 표현을 분리하는 웹표준 개발방식을 적용한다면 테이블 레이아웃은 CSS레이아웃으로 대체되고 웹페이지는 용량이 줄어들게 되므로 트래픽 감소효과를 가져오게 됩니다.
실제 마이크로소프트는 2004년 테이블을 모두 빼고 웹표준 개발방식을 적용하여 CSS레이아웃을 사용하여 웹사이트 전면 개편 하였습니다. 그 결과 하루에 924GB의 트래픽을 감소시키게 되었고 속도향상을 가져왔습니다.
국내 웹환경의 4번째 문제는 비표준 스크립트의 남용입니다.
한국소프트웨어진흥원에서 실시한 2006년 1007개 국내 공공 및 민간 홈페이지에 대한 웹호환성 조사결과에 따르면 국내 스크립트 표준 준수율은 16.8% 입니다.
대부분의 웹사이트가 웹표준 비준수로인한 오류를 다수포함하고 있으며, 특히 스크립트표준 비준수로 인한 브라우저간 상호운용성이 심각한 수준입니다
마지막으로 정보접근성에 대한 배려가 없는점을 들수있습니다.
- 소수 운영체제 및 브라우저 사용자(리눅스의 파이어폭스, 매킨토시의 사파리등)
- 비 PC단말기 사용자 (PDA, Phone)
- 인터넷 환경이 열악한 제3세계 재한국인
- 정보 소외 계층(노인 및 장애인, 농민 및 빈민)
이 부분은 오늘 많이 들으신 내용이죠.
지금까지 국내 웹환경의 현실에 대해서 전반적으로 살펴보았습니다.
여기에서 한가지 의문사항이 있습니다. 웹접근성, 웹표준, 웹호환성은 어떤차이가 있는걸까요?
웹표준이란 앞에서 이야기드린것처럼 W3C에서 제시하는 웹의 내용,표현,행동에 관련된 각종 기술표준을 이야기합니다.
웹접근성과 웹호환성은 화면에 보시는것처럼 웹표준을 공통으로 포함하고 있습니다.
이 이야기는 웹표준을 준수하는것 만으로는 웹접근성이나 웹호환성이 보장되지 않는 다는 것을 의미합니다.
그리고 웹호환성을 준수하더라도 웹접근성은 보장되지 않는다는 이야기이기도 합니다.
웹접근성이란 보편적접근성 확보를 우선시하고, 웹호환성은 OS,SW에 독립적인 상호운용성 확보를 우선시합니다.
처음부분에서 설명드린것 처럼 웹의 이념은 유니버셜액세스(보편적 접근성)도 필요하고, 시맨틱웹(컴퓨터가 이해가능한웹), 인터오퍼러빌리티(상호운용성)까지 모두 포함하고 있습니다.
그러므로, 웹2.0시대에 맞는 웹서비스를 위해서는 웹표준을 준수하면서 웹접근성과 웹호환성을 다같이 고민해야 하는것입니다.
이 내용은 한국소프트웨어진흥원에서 2006년 실시한 웹호환성 준수검사의 평가항목입니다.
평가항목은 앞에서 이야기드린것처럼 웹표준준수여부에 대한 3가지항목 HTML , CSS, ECMAScript 준수여부와 함께 인터넷익스플로러, 파이어폭스, 사파리를 이용한 브라우저간 상호운용성 9개항목으로 웹표준과 상호운용성을 포함하여 구성되어 있습니다.
보시는 화면은 국내 웹사이트 호환성을 조사한 결과입니다.
전체 호환성 준수율은 66.5점, 공공부문이 민간부문보다는 조금 높은 수준이었고, 민간부문중 금융부문은 ActiveX의 과다한 사용으로인해 매우낮은 수준으로 조사되었습니다.
도대체 그럼 왜 웹호환성이 이렇게 나빠진것일까 요.
외부적인 요인으로
첫째, 96~99년간 소위 브라우저 전쟁기간 동안 IE vs. Netscape의 비표준을 기반한 경쟁 후 IE 전용 기술만 잔재로 남게 되었기 때문입니다.
다른 브라우저를 고려할 필요가 없는 현실이었다는 이야기입니다
둘째, 표준 기술에 대한 웹디자이너/UI 개발자 등 웹 생산 종사자 재교육 및 자기 개발 부재입니다.
다른 브라우저를 고려할 필요가 없으니 당연히, 가르칠필요도 배울필요도 없는 현실이 되었던 것입니다.
내부적인 요인으로는
첫째, 국내 인터넷 환경의 급격한 성장을 꼽을수 있습니다.
급격한 인터넷 산업화로 인해서 엔터테인먼트 인터넷으로 진화하게 되었고, 세계에서 첫째가는 IT인프라를 보유하게 되었습니다. 그러다보니 더많은 기능을 요구하게 되었고, 웹에 대한 기본 인식 및 개발 방식에 대한 이해가 없는 상황에서 공공재로서의 웹이라는 인식없이 각종 비표준 플러그인기술을 발전시키게 되었습니다.
그 결과 엄청난 비표준 웹페이지가 양산되었고 현재 국내의 웹페이지를 보면 테이블 레이아웃을 사용하는것이 거의 100%, 링크 대신 자바스크립트 액션을 사용하는것이 80% 정도로 판단하고 있습니다
비 표준 주요 실례를 보면
- MS 기반 태그 : <marquee>, <object>, <iframe>
- W3C DOM vs. MS DOM
- document.all -> document.getElementByID
- MS 기반 Java Script/VBScript vs. ECMA Script (스크립트 표준)등을 들 수 있으며
뿐만 아니라 Windows Media Player 호환 포맷만 사용함으로 인해서 다른 운영체제 사용자는 해당 콘텐츠를 볼 수 없는 상황이므로 Cross Platform 미디어 포맷에 대한 고려가 필요합니다.
호환성이 안지켜지는 또다른문제는 ActiveX입니다.
ActiveX는 특정 OS 및 브라우저에 종속적인 기술로 국내 ActiveX 사용량은 세계 최고입니다.
-코드사인 인증서 배포율 1위 (Verisign:Thawte=320:720 per year)
-1400여개가 넘는 배포 사이트 존재 (거의 대부분 기업 웹사이트)
-외국에서는 주요 플러그인 외에는 스파이웨어 취급을 당하고 있음.
ActiveX 문제가 발생한 주요 원인
- 일찍 수립된 공인 인증 체계: IE 브라우저 독점화에 기술 종속
- 빠른 브로드 밴드 진입 : 플러그인 다운로드가 쉬움
- 어플리케이션 웹: 정보 제공 수단이 아닌 기능적 웹으로 진화
- 오락적인 인터넷 사용 행태 : 온라인 게임, 채팅, 사용자 제어 등
ActiveX 주요 사용처
-공인 인증 사용: 인터넷 뱅킹, 증권 거래, 카드 결제, 보험, 전자 정부 등
-엔터테인먼트: 온라인 게임, 로그인, 채팅 및 메신저, 파일 첨부
-스파이 웨어: 광고 및 해킹 프로그램
그럼 도대체 왜 최근에 웹호환성이 제기되는 것일까요
이슈의 첫번째 원인은 공개SW 파이어폭스가 나타나서 새로운 웹브라우저가 시장을 점유하기 시작했기 때문입니다
Mozilla Firefox는 웹 표준을 기반으로 하는 경량의 공개 SW 웹브라우저로서 출시 100일 만에 2천8백만 다운로드 기록하였고,100개 언어로 프로젝트가 진행되며, 1만명의 테스터를 가진 SW입니다
파이어폭스는 웹 표준을 가장 잘 표현하는 브라우저이며, 탭브라우징 및 팝업 차단, 라이브 북마크 및 RSS 구독 기능 그 외 통합 검색 및 테마 및 웹 개발자를 위한 확장 기능등을 제공하는 우수한 브라우저입니다.
두번째는 윈도우 비스타 출시에 따른 ActiveX 배포방식변경입니다.
액티브X를 활용한 응용 프로그램과 윈도 비스타의 충돌문제로 전자정부, 인터넷뱅킹 등 대국민 서비스에 차질을 빚은 이후 행정자치부, 정보통신부 등 정부기관들이 액티브X 사용 배제, 모든 브라우저 지원 등 표준 준수 움직임을 본격화하고 하고 있으며, 행자부에서는 액티브X 사태 이후 신규 발주사업의 제안요청서에 특정 업체 제품(기술)만 지원하지 않도록 하고 웹 표준을 준수해 다양한 운영체제(OS)와 한 개 이상의 브라우저에서 작동할 수 있게 구현할 것을 지시하고 있습니다.
폭발적인 파이어폭스 점유율. 2003년 4%부터 꾸준히 증가하여 2007년 현재 전세계 11.69% 사용 중
그럼 웹표준을 지키면 무엇이 좋아지는 것일까요.
첫째, 고객의 양적 질적 증가
- 웹표준 준수는 친환경 경영과 같은 것. 고객의 기업 인지도 향상.
- 브라우저 호환을 통해서도 훌륭한 서비스 구현 가능
- 야후닷컴, 구글 Gmail, Maps
- 소수 사용자는 오피니언 리더다.
- 리눅스 및 맥킨토시 사용자는 인터넷 오피니언 리더이다.
둘째, 개발 속도 및 효율성 증가
- 브라우저에 따른 고려가 없어지므로 개발이 빠름.
- 표준 구현이 능숙해 지는 경우 개발 속도 향상
셋째, 레이아웃 변경이 용이
- 일반, 다국어 웹사이트, 텍스트, 장애인, 모바일 다양한 레이아웃 한꺼번에 제공 가능
- 구조와 표현의 분리에 따른 개발자-디자이너 협업 체계 구축.
- 개발자와 디자이너의 이중 작업 감소 및 영역 보장
넷째, 품질관리제공
- W3C Validation 및 자바스크립트 디버거를 통한 QA 보장
다섯째, 유지 비용의 감소
- 웹페이지 서버 트래픽 및 장비 비용 최소화
- 야후!닷컴: 같은 UI로도 첫화면 파일 크기를 1/3로 줄임.
- ESPN.com: 50kb의 파일 크기가 감소. Wired.com은 62% 가량 감소.
- MSN.com: Filesize 64% 감소. 하루 940GB의 트래픽 감소 효과 얻음.
- 재개발 비용의 감소
- 구조/표현 분리에 따른 리뉴얼 및 재개발에 따른 비용 감소
여섯째, 사용성 및 재생산성 증대
- Table 기반 렌더링에 비해 페이지 접속 체감도 증가
- 단말기 독립적인 웹서비스 제공 가능 (PDA, 텍스트, 장애인, 다국어 사이트)
일곱째, 글로벌 비즈니스 구현
- Section 508을 통과하지 않는 경우 미국 연방 정부 조달 불가능
- 중요한 10%의 사용자 확보
- 1천만의 10%는 십만명이나 1억의 10%는 천만명이다.
그럼 웹호환성 준수를 위해서 우리는 어떻게 해야할까요
우선 공급자측면에서 보면 웹 표준 규격 준수하는 것이 필수입니다
- W3C의 일반 표준 준수 (HTML4.1, XHTML1.0, CSS1, DOM1)
- ECMAscript(자바스크립트)의 일반 표준 준수
- 웹디자이너/UI 개발자/웹개발자에 대한 표준 준수에 대한 재교육
- 표준 준수는 생산성에 대한 경쟁력임을 전략화
구조와 표현 분리 사용
- 구조화된 HTML을 사용하고 표현은 CSS로 대체
- 테이블 구조를 CSS Boxing 모델로 수정
- 다수의 스타일로 각종 접근성 문제 해결 (노약자, 장애인, 비PC단말)
최소한의 디버깅 및 QA
- 표준 준수 Validator로 QA (W3C에서 제공)
- Firefox 자바스크립트 디버거 이용
- 다수 브라우저 테스트를 거칠 것
호환성있는 플러그인도입(업계)
- ActiveX 대체 기술들을 사용한 플러그인 제작
- Java, NSplugin : 예전 기술이거나 XP 환경에 적합하지 않음
- AJAX: xmlhttp과 Javascript를 통한 인터랙티브 UI기술
- 일반적인 웹 기술을 통해서도 대부분 구현 가능
브라우저 확장 기능
- Mozilla : XUL/Javascript/CSS를 통한 확장 가능
- Microsoft: XAML(Longhorn)을 기반으로 하는 닷넷 어플리케이션
호환성준수실태관리(관리자)
- 정보시스템 구축사업 계획 및 검수시에 호환성준수 항목을 포함하여 확인
- 정기적인 웹호환성 실태를 관리하여 수준 유지가 필요
마지막으로
웹2.0, 전자정부2.0시대에 맞는 웹서비스의 제공을 위해서는 생산자, 공급자, 관리자 모두가 힘을 합쳐서 웹표준 준수를 통한 웹접근성 보장, 웹호환성 확보를 위해 노력해야 한다는 것을 말씀드립니다.
'개발도 하냐?' 카테고리의 다른 글
| Struts에서 Spring으로의 이주 가이드. (0) | 2007.07.26 |
|---|---|
| 사파리 윈도우용 출시 (0) | 2007.07.03 |
| EMAIL 에러메세지 (0) | 2007.04.19 |
| CreateObject("CDO.Message") (0) | 2007.04.17 |
| CDOSYS를 사용하여 ASP에서 메일발송 (0) | 2007.04.17 |