웹표준을 기반한 크로스 브라우징 표준화 (2005)

TTA 웹 프로젝트그룹(PG401) 표준 워크샵

웹 표준에 기반한
크로스 브라우징 표준화

윤석찬
다음커뮤니케이션 R&D센터/ 한글 모질라 프로젝트


Think about Web Again
웹(Web)의 주요 이념
– 1. Universal Access : 언어, 지역, 사회 계층, SW,
단말기, OS 독립적

– 2. Semantic Web : 사람 뿐 아니라 컴퓨터도 이
해 가능한 의미론적 웹

– 3. Trust : 많은 사람이 관계된 협동 매체이므로 신
뢰와 이해 관계

Etc.
– 4. Interoperability
– 5. Evolvability
– 6. Decentralization
– 7. Cooler Multimedia!
• http://www.w3.org/Consortium/Points/


비표준 문제 요인 분석
외부적 요인
– 96~99년간 소위 브라우저 전쟁기간 동안 IE vs. Netscape의 비표준을
기반한 경쟁 후 IE 전용 기술만 잔재로 남음
– 4~5년간 웹표준 기술이 비약적으로 발전하였으나 IE의 하위 버전 호환
기능(Backward Compatibility)으로 인한 기술 변경 미흡
– 표준 기술에 대한 웹디자이너/UI 개발자 등 웹 생산 종사자 재교육 및
자기 개발 부재

내부적 요인
– 국내 브로드 밴드 인터넷 환경의 급격한 성장
– 급격한 인터넷 산업화로 인한 엔터테인먼트 인터넷으로 진화
– 고정화된 열악한 국내 웹 생산 시스템 구조
– 웹에 대한 기본 인식 및 개발 방식에 대한 이해 및 교육 부재
– 비용과 효율만 중요시 하는 행태 (공공재로서의 웹 인식 부족)


결과1. 비 표준 웹 페이지
현재의 브라우징 현황 :
– 테이블 레이아웃 : almost 100%, 링크 대신 자바스크립트 액션 : 80%
– 비 표준 문제를 야기하는 대표적인 문제는 MS에서만 사용되는 IE 종속 기능
을 문제 의식 없이 사용하는 행태임.

비 표준 주요 실례
– MS 기반 태그 : <marquee>, <object>, <iframe>
– W3C DOM vs. MS DOM
• document.all -> document.getElementByID
– MS 기반 Java Script/VBScript vs. ECMA Script (스크립트 표준)
– CSS2 비 호환 문제

미디어 데이터 호환 문제
– Windows Media Player 호환 포맷만 사용
– 비 표준 <object>표현으로 비 IE 브라우저에서 <embed> 태그로 미디어 데
이터 표현 필요성
– Cross Platform 미디어 포맷에 대한 고려 필요


결과2. ActiveX
ActiveX 문제의 현실
– 특정 OS 및 브라우저에 종속적인 기술로 국내 ActiveX 사용량은 세계 최고
• 코드사인 인증서 배포율 1위 (Verisign:Thawte=320:720 per year)
• 1400여개가 넘는 배포 사이트 존재 (거의 대부분 기업 웹사이트)

– 외국에서는 주요 플러그인 외에는 스파이웨어 취급을 당하고 있음.

ActiveX 문제가 발생한 주요 원인
– 일찍 수립된 공인 인증 체계: IE 브라우저 독점화에 기술 종속
– 빠른 브로드 밴드 진입 : 플러그인 다운로드가 쉬움
– 어플리케이션 웹: 정보 제공 수단이 아닌 기능적 웹으로 진화
– 오락적인 인터넷 사용 행태 : 온라인 게임, 채팅, 사용자 제어 등

ActiveX 주요 사용처
– 공인 인증 사용: 인터넷 뱅킹, 증권 거래, 카드 결제, 보험, 전자 정부 등
– 엔터테인먼트: 온라인 게임, 로그인, 채팅 및 메신저, 파일 첨부
– 스파이 웨어: 광고 및 해킹 프로그램


해결 방법: 웹 표준을 지켜라
웹 표준 규격 준수
– 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기술
– XPCOM Plugin: Mozilla 기반으로 Cross Platform 환경에 적합
– Flash/Flex : 플러그인 기반으로 Cross Platform 환경에 적합

브라우저 확장 기능
– Mozilla : XUL/Javascript/CSS를 통한 확장 가능
– Microsoft: XAML(Longhorn)을 기반으로 하는 닷넷 어플리케이션

표준 움직임
– WHATWG: Mozilla와 Opera에서 표준안 제정 중.
• WebApplication, WebForm, WebControl
– W3C: XFORM (장기적으로 whatwg의 표준이 w3c로 들어올 예정)
– 이에 대한 MS의 대응이 주효함.


세부 실행 방안
국제표준 기술 준수
– 스크립트 오류 개선 : 비표준 태그 및 스크립트를 국제표준으로 수정
– HTML기반 Table 레이아웃 페이지를 XHML/CSS 레이아웃 기반으로 재구축
– 스타일 변경만으로 PDA/휴대폰/장애인/텍스트 페이지 재생산 가능
– 공인인증 서비스의 공공성을 인식하여 브라우저에 독립적인 공통모듈을 재사용
가능하도록 제공

미디어 파일 문제
– 홈페이지 구축시 비IE 브라우저 사용자를 위한 윈도우 미디어 포맷 재생용
HTML 태그 지원 필요
– 세계 표준 호환 포맷인 MPEG 기술을 채택하여 제공

문서제공 형식 문제
– 웹을 통하여 문서를 제공할 경우 해당 문서프로그램의 뷰어 프로그램을 제공하
거나 TXT 또는 HTML형식의 문서 제공


웹 표준의 비즈니스적 가치(1)
고객의 양적 질적 증가
– 웹표준 준수는 친환경 경영과 같은 것. 고객의 기업 인지도 향상.
• 브라우저 호환을 통해서도 훌륭한 서비스 구현 가능
• 야후닷컴, 구글 Gmail, Maps
– 소수 사용자는 오피니언 리더다.
• 리눅스 및 맥킨토시 사용자는 인터넷 오피니언 리더이다.

개발 속도 및 효율성 증가
– 브라우저에 따른 고려가 없어지므로 개발이 빠름.
• 표준 구현이 능숙해 지는 경우 개발 속도 향상
– 레이아웃 변경이 용이
• 일반, 다국어 웹사이트, 텍스트, 장애인, 모바일 다양한 레이아웃 한꺼번에 제공 가능
– 구조와 표현의 분리에 따른 개발자-디자이너 협업 체계 구축.
• 개발자와 디자이너의 이중 작업 감소 및 영역 보장
– 자동 Validation에 따른 QA 시간 감소.
• W3C Validation 및 자바스크립트 디버거를 통한 QA 보장


웹 표준의 비즈니스적 가치(2)
유지 비용의 감소
– 웹페이지 서버 트래픽 및 장비 비용 최소화
• 야후!닷컴: 같은 UI로도 첫화면 파일 크기를 1/3로 줄임.
• ESPN.com: 50kb의 파일 크기가 감소. Wired.com은 62% 가량 감소.
• MSN.com: Filesize 64% 감소. 하루 940GB의 트래픽 감소 효과 얻음.
– 재개발 비용의 감소
• 구조/표현 분리에 따른 리뉴얼 및 재개발에 따른 비용 감소

사용성 및 재생산성 증대
– Table 기반 렌더링에 비해 페이지 접속 체감도 증가
– 단말기 독립적인 웹서비스 제공 가능 (PDA, 텍스트, 장애인, 다국어 사이트)

글로벌 비즈니스 구현
– Section 508을 통과하지 않는 경우 미국 연방 정부 조달 불가능
– 중요한 5%의 사용자 확보
• 1천만의 5%는 5만명이나 1억의 5%는 5백만이다.


공공 부문 웹 표준화 활동
전자 정부 홈페이지 구축.운영 지침 개선안 (2005)
– 다양한 정보통신환경(통신시설, 하드웨어, 소프트웨어) 사용자 보편적 이용성
보장 원칙 도입
– 브라우저 범용성 원칙(Mozilla, Sapari 등 비IE 브라우저 이용성 보장)
– 뷰어 프로그램 제공 : 상용 Office를 이용한 문서 제공시 뷰어 프로그램 제공
– 국제표준기술 준수의 원칙
• ActiveX 등 특정 기업 기술 표준 도입 금지
• W3C 등 국제표준, 장애인 및 디바이스 접근성 고려 구축

행정 자치부 행정 기관 홈페이지 평가 지표 (2005)
– ④ 홈페이지 기술평가: 5(신설) : 표준기술 적용 여부(또는 이용성)
• IE 이외의 브라우저(Firefox, Mozilla, Safari 등)에서 접근했을 때, 모든 컨텐츠를 이용 가능한가 ?
• 모든 기능이 IE이외의 브라우저에서 정상적으로 동작하는가 ?
• 미디어 파일 및 별도 서식 파일을 위한 운영체제별 뷰어 및 별도 HTML로 제공하는가 ?
• XHTML/CSS 레이아웃을 기초로 구축하였는가?
• 스타일 변경만으로 PDA/휴대폰/장애인/텍스트 페이지를 제공하고 있는가?
• 한국형 정보접근성 가이드를 충실하게 이행하였는가?

TTA 한국형 웹 접근성 표준 및 가이드 (2005)


민간 부문 웹 표준화 활동(1)
웹 표준 가이드 제공:
– 크로스 브라우징 가이드 (KIPA 제공)
– 웹 표준 기반 홈페이지 구축 가이드 (KIPA 제공)
– 웹 접근성을 고려한 콘텐츠 제작 기법 (KADO 제공)

웹 표준 관련 서적
– 실용 예제로 배우는 웹 표준, 댄 씨더홈 저, 박수만 역, 에이콘출판사 (2005.8)
– Web ReDesign (웹리디자인): 사이트 구조와 디자인 전략, 켈리 고토, 에밀리
코틀러 저, 김영구, 우유미 역 (2002-10)
– 웹디자인 마인드 , 제프리 빈 지음, 전용석 옮김 (2001.10)

커뮤니티 기술 지원 (웹 표준 전문가 그룹을 통해 Q&A질문 가능)
– 웹 표준화 프로젝트: http://webstandard.or.kr
– 웹 표준화 프로젝트 게시판 : http://forums.mozilla.or.kr/viewforum.php?f=9
– CSS 디자인 코리아: http://css.macple.com


민간 부분 웹 표준화 활동(2)
웹 표준 교육 제공
– 웹 표준 관련 일반 동영상 자료 (SW인사이트 강의 자료)
• http://vod.swinsight.or.kr/vod/4th/linux/kipa_200504_oss4.html
– 웹 표준 및 CSS 기반 디자인 관련 교육 자료 (코리아인터넷닷컴 강의 자료)
• http://www.bizdeli.com/online/detail.asp?pfid=S0327
• http://www.bizdeli.com/offline/detail_ref.asp?pfid=S0322

민간 회사 노력
– 포털 사이트: 야후코리아, 다음 등의 첫 화면 웹 표준 기반으로 개편
– 다음 커뮤니케이션: UI 가이드라인을 통해 타 브라우저 지원 명기
– 웹 에이전시: 웹 표준 기반 개발을 선도하는 회사 있음.
• 재정 경제부, http://www.mofe.go.kr/ , GS칼텍스 http://www.gscaltex.com/


산업 표준으로서 크로스 브라우징
산업 표준 제정 필요성
– 특정 브라우저 종속성의 탈피를 통한 산업 재조정
– 웹 표준에 따른 비즈니스적 효과 공유
– 공공 및 민간 부문에 대한 웹 표준 이행 장려

웹 표준이 산업에 미치는 영향

국내 인터넷 산업에서 웹 사이트 개발은 가장 기초적인 공정이다. 또한, 웹 기획, 웹 디자인, 웹 개발 등
다양한 직군의 인력들이 양성되어 인터넷 관련 산업에 투입되고 있다. 그러나, 인터넷 초기에 비해 이
러한 공정에 사용되는 방법론은 웹 구축 지침서(TTAS.KO-10.0085, 1998-10) 이후 뚜렷한 변화가 없는
상태이다. 해외에서는 2000년 이후, W3C에 제출된 XHTML, CSS, DOM 등을 사용하여 웹 페이지를
구조적으로 분리하여 구축하는 웹 개발 방법론이 보편화 되어 브라우저 호환성 제공, 웹 사이트 구축
에 참여하는 인력의 효율적 역할 분리, 사이트 유지 보수 편리성, 장애인 웹 접근성 향상 등 다양한 효
과를 거두고 있다.

본 표준은 웹 사이트 구축을 하는 일선 기업들 및 인력들에게 현실적이고 효과적인 웹 표준 기반 개발
지침을 제공 함으로서 산업 발전에 도움을 주고자 한다. 웹 사이트 구축 및 유지 보수에서 웹 표준 사
용은 상위 호환성(Forward Compatibility) 제공은 비용 절감 및 품질 보증의 편리성을 보장해 준다. 본
지침은 당해 행정자치부의 공공 기관 홈페이지 구축 및 평가지침에 첨가된 기술 분야의 표준적 구축
지침에 해당된다.


TTA 표준화 진척 사항
웹 표준 기반 개발 가이드 표준화
– 2005년 진행 사항
• 2005. 8 한중일 공개SW 포럼 WG3에서 “웹 표준 기반 공정” 표준안 제정을 위한 모임 시작
• 2005. 9 TTA 표준 요약서 작성 및 초안 마련
• 2005. 10 TTA 표준에 앞서 웹 표준 및 개발 공정 가이드 작성 시작
• 2005. 12 웹 표준 및 개발 공정 가이드 작성 완료(KIPA)

– 2006년 진행 예정
• 2006. 1 가이드를 기반으로 TTA 표준 초안 제출
• 2006. 2 PG 401에서 표준 제안 심의
• 2006. 6 TTA 표준 총회 통과

웹 저작에 필요한 가이드 표준화 (2006년 계획)
– 6월 총회 통과 목표
• CSS 2/3 표준 문서 한국어 제작
• 웹 표준 기반 UI 가이드라인 표준화

– 12월 총회 통과 목표
• SVG 1.1 표준 문서 한국어 제작
• DOM Level 2 표준 문서 한국어 제작


실례: 표준 기반 웹 사이트

① 디자인 요소가 풍부한 웹 페이지 ③ 접근성이 확보된 컨텐츠 구조

② 표현과 구조가 분리된 소스코드


UI 정책 가이드 실례 - 다음커뮤니케이션


Bookmarks
웹 표준 및 접근성
– 웹 표준화 프로젝트, http://forums.mozilla.or.kr/viewforum.php?f=9
– 웹 스탠다드, http://www.webstandards.org/
– 웹 개발 레퍼런스
• HTML Reference, http://www.blooberry.com/indexdot/html/index.html
• Quirks mode, http://www.quirksmode.org/viewport/compatibility.html
• ECMA 표준, http://www.ecma-international.org/publications/standards/Ecma-262.htm
– XHTML/CSS 레이아웃 모델
• http://www.macromedia.com/kr/devnet/mx/dreamweaver/articles/tableless_layout.html
• http://www.thenoodleincident.com/tutorials
– 한국 정보 통신 접근성 포럼, http://www.iabf.or.kr

W3C 표준
– HTML 4 표준 http://www.w3.org/TR/HTML4
– CSS, XSL 등 표준 http://www.w3.org/Style
– XHTML 1 표준http://www.w3.org/TR/xhtml1
– DOM 관련 정보 http;//www.w3.org/DOM
– 표준 검사, http://validator.w3.org/

웹표준을 기반한 크로스 브라우징 표준화 (2005)

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à 웹표준을 기반한 크로스 브라우징 표준화 (2005)

Similaire à 웹표준을 기반한 크로스 브라우징 표준화 (2005) (20)

Plus de Channy Yun

Plus de Channy Yun (20)

웹표준을 기반한 크로스 브라우징 표준화 (2005)