웹 표준에 기반한 크로스 브라우징 표준화
by Channy Yun on Jun 27, 2011
- 3,082 views
Statistics
- Favorites
- 3
- Downloads
- 0
- Comments
- 0
- Embed Views
- Views on SlideShare
- 1,891
- Total Views
- 3,082
- No comments yet
- Notes on Slide 1
-
Mia Eum
6 days ago
-
Kim Sangok
Tags 웹표준
3 weeks ago
-
지문 김
, 자영업 컨설턴트
at 웹과생활
11 months ago
ì¹ íì¤ì 기ë°í í¬ë¡ì¤ ë¸ë¼ì°ì§ íì¤í — Presentation Transcript
- TTA 웹 프로젝트그룹(PG401) 표준 워크샵 웹 표준에 기반한크로스 브라우징 표준화 윤석찬다음커뮤니케이션 R&D센터/ 한글 모질라 프로젝트
- TTA 웹 프로젝트그룹(PG401) 표준 워크샵 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/
- TTA 웹 프로젝트그룹(PG401) 표준 워크샵 비표준 문제 요인 분석 외부적 요인 – 96~99년간 소위 브라우저 전쟁기간 동안 IE vs. Netscape의 비표준을 기반한 경쟁 후 IE 전용 기술만 잔재로 남음 – 4~5년간 웹표준 기술이 비약적으로 발전하였으나 IE의 하위 버전 호환 기능(Backward Compatibility)으로 인한 기술 변경 미흡 – 표준 기술에 대한 웹디자이너/UI 개발자 등 웹 생산 종사자 재교육 및 자기 개발 부재 내부적 요인 – 국내 브로드 밴드 인터넷 환경의 급격한 성장 – 급격한 인터넷 산업화로 인한 엔터테인먼트 인터넷으로 진화 – 고정화된 열악한 국내 웹 생산 시스템 구조 – 웹에 대한 기본 인식 및 개발 방식에 대한 이해 및 교육 부재 – 비용과 효율만 중요시 하는 행태 (공공재로서의 웹 인식 부족)
- TTA 웹 프로젝트그룹(PG401) 표준 워크샵 결과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 미디어 포맷에 대한 고려 필요
- TTA 웹 프로젝트그룹(PG401) 표준 워크샵 결과2. ActiveX ActiveX 문제의 현실 – 특정 OS 및 브라우저에 종속적인 기술로 국내 ActiveX 사용량은 세계 최고 • 코드사인 인증서 배포율 1위 (Verisign:Thawte=320:720 per year) • 1400여개가 넘는 배포 사이트 존재 (거의 대부분 기업 웹사이트) – 외국에서는 주요 플러그인 외에는 스파이웨어 취급을 당하고 있음. ActiveX 문제가 발생한 주요 원인 – 일찍 수립된 공인 인증 체계: IE 브라우저 독점화에 기술 종속 – 빠른 브로드 밴드 진입 : 플러그인 다운로드가 쉬움 – 어플리케이션 웹: 정보 제공 수단이 아닌 기능적 웹으로 진화 – 오락적인 인터넷 사용 행태 : 온라인 게임, 채팅, 사용자 제어 등 ActiveX 주요 사용처 – 공인 인증 사용: 인터넷 뱅킹, 증권 거래, 카드 결제, 보험, 전자 정부 등 – 엔터테인먼트: 온라인 게임, 로그인, 채팅 및 메신저, 파일 첨부 – 스파이 웨어: 광고 및 해킹 프로그램
- TTA 웹 프로젝트그룹(PG401) 표준 워크샵 해결 방법: 웹 표준을 지켜라 웹 표준 규격 준수 – W3C의 일반 표준 준수 (HTML4.1, XHTML1.0, CSS1, DOM1) – ECMAscript(자바스크립트)의 일반 표준 준수 – 웹디자이너/UI 개발자/웹개발자에 대한 표준 준수에 대한 재교육 – 표준 준수는 생산성에 대한 경쟁력임을 전략화 구조와 표현 분리 사용 – 구조화된 HTML을 사용하고 표현은 CSS로 대체 – 테이블 구조를 CSS Boxing 모델로 수정 – 다수의 스타일로 각종 접근성 문제 해결 (노약자, 장애인, 비PC단말) 최소한의 디버깅 및 QA – 표준 준수 Validator로 QA (W3C에서 제공) – Firefox 자바스크립트 디버거 이용 – 다수 브라우저 테스트를 거칠 것
- TTA 웹 프로젝트그룹(PG401) 표준 워크샵 해결 방법: 플러그인 대체 기술을 제공 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의 대응이 주효함.
- TTA 웹 프로젝트그룹(PG401) 표준 워크샵 세부 실행 방안 국제표준 기술 준수 – 스크립트 오류 개선 : 비표준 태그 및 스크립트를 국제표준으로 수정 – HTML기반 Table 레이아웃 페이지를 XHML/CSS 레이아웃 기반으로 재구축 – 스타일 변경만으로 PDA/휴대폰/장애인/텍스트 페이지 재생산 가능 – 공인인증 서비스의 공공성을 인식하여 브라우저에 독립적인 공통모듈을 재사용 가능하도록 제공 미디어 파일 문제 – 홈페이지 구축시 비IE 브라우저 사용자를 위한 윈도우 미디어 포맷 재생용 HTML 태그 지원 필요 – 세계 표준 호환 포맷인 MPEG 기술을 채택하여 제공 문서제공 형식 문제 – 웹을 통하여 문서를 제공할 경우 해당 문서프로그램의 뷰어 프로그램을 제공하 거나 TXT 또는 HTML형식의 문서 제공
- TTA 웹 프로젝트그룹(PG401) 표준 워크샵 웹 표준의 비즈니스적 가치(1) 고객의 양적 질적 증가 – 웹표준 준수는 친환경 경영과 같은 것. 고객의 기업 인지도 향상. • 브라우저 호환을 통해서도 훌륭한 서비스 구현 가능 • 야후닷컴, 구글 Gmail, Maps – 소수 사용자는 오피니언 리더다. • 리눅스 및 맥킨토시 사용자는 인터넷 오피니언 리더이다. 개발 속도 및 효율성 증가 – 브라우저에 따른 고려가 없어지므로 개발이 빠름. • 표준 구현이 능숙해 지는 경우 개발 속도 향상 – 레이아웃 변경이 용이 • 일반, 다국어 웹사이트, 텍스트, 장애인, 모바일 다양한 레이아웃 한꺼번에 제공 가능 – 구조와 표현의 분리에 따른 개발자-디자이너 협업 체계 구축. • 개발자와 디자이너의 이중 작업 감소 및 영역 보장 – 자동 Validation에 따른 QA 시간 감소. • W3C Validation 및 자바스크립트 디버거를 통한 QA 보장
- TTA 웹 프로젝트그룹(PG401) 표준 워크샵 웹 표준의 비즈니스적 가치(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백만이다.
- TTA 웹 프로젝트그룹(PG401) 표준 워크샵 공공 부문 웹 표준화 활동 전자 정부 홈페이지 구축.운영 지침 개선안 (2005) – 다양한 정보통신환경(통신시설, 하드웨어, 소프트웨어) 사용자 보편적 이용성 보장 원칙 도입 – 브라우저 범용성 원칙(Mozilla, Sapari 등 비IE 브라우저 이용성 보장) – 뷰어 프로그램 제공 : 상용 Office를 이용한 문서 제공시 뷰어 프로그램 제공 – 국제표준기술 준수의 원칙 • ActiveX 등 특정 기업 기술 표준 도입 금지 • W3C 등 국제표준, 장애인 및 디바이스 접근성 고려 구축 행정 자치부 행정 기관 홈페이지 평가 지표 (2005) – ④ 홈페이지 기술평가: 5(신설) : 표준기술 적용 여부(또는 이용성) • IE 이외의 브라우저(Firefox, Mozilla, Safari 등)에서 접근했을 때, 모든 컨텐츠를 이용 가능한가 ? • 모든 기능이 IE이외의 브라우저에서 정상적으로 동작하는가 ? • 미디어 파일 및 별도 서식 파일을 위한 운영체제별 뷰어 및 별도 HTML로 제공하는가 ? • XHTML/CSS 레이아웃을 기초로 구축하였는가? • 스타일 변경만으로 PDA/휴대폰/장애인/텍스트 페이지를 제공하고 있는가? • 한국형 정보접근성 가이드를 충실하게 이행하였는가? TTA 한국형 웹 접근성 표준 및 가이드 (2005)
- TTA 웹 프로젝트그룹(PG401) 표준 워크샵 민간 부문 웹 표준화 활동(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
- TTA 웹 프로젝트그룹(PG401) 표준 워크샵 민간 부분 웹 표준화 활동(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/
- TTA 웹 프로젝트그룹(PG401) 표준 워크샵 산업 표준으로서 크로스 브라우징 산업 표준 제정 필요성 – 특정 브라우저 종속성의 탈피를 통한 산업 재조정 – 웹 표준에 따른 비즈니스적 효과 공유 – 공공 및 민간 부문에 대한 웹 표준 이행 장려 웹 표준이 산업에 미치는 영향 국내 인터넷 산업에서 웹 사이트 개발은 가장 기초적인 공정이다. 또한, 웹 기획, 웹 디자인, 웹 개발 등 다양한 직군의 인력들이 양성되어 인터넷 관련 산업에 투입되고 있다. 그러나, 인터넷 초기에 비해 이 러한 공정에 사용되는 방법론은 웹 구축 지침서(TTAS.KO-10.0085, 1998-10) 이후 뚜렷한 변화가 없는 상태이다. 해외에서는 2000년 이후, W3C에 제출된 XHTML, CSS, DOM 등을 사용하여 웹 페이지를 구조적으로 분리하여 구축하는 웹 개발 방법론이 보편화 되어 브라우저 호환성 제공, 웹 사이트 구축 에 참여하는 인력의 효율적 역할 분리, 사이트 유지 보수 편리성, 장애인 웹 접근성 향상 등 다양한 효 과를 거두고 있다. 본 표준은 웹 사이트 구축을 하는 일선 기업들 및 인력들에게 현실적이고 효과적인 웹 표준 기반 개발 지침을 제공 함으로서 산업 발전에 도움을 주고자 한다. 웹 사이트 구축 및 유지 보수에서 웹 표준 사 용은 상위 호환성(Forward Compatibility) 제공은 비용 절감 및 품질 보증의 편리성을 보장해 준다. 본 지침은 당해 행정자치부의 공공 기관 홈페이지 구축 및 평가지침에 첨가된 기술 분야의 표준적 구축 지침에 해당된다.
- TTA 웹 프로젝트그룹(PG401) 표준 워크샵 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 표준 문서 한국어 제작
- TTA 웹 프로젝트그룹(PG401) 표준 워크샵 실례: 표준 기반 웹 사이트 ① 디자인 요소가 풍부한 웹 페이지 ③ 접근성이 확보된 컨텐츠 구조 ② 표현과 구조가 분리된 소스코드
- TTA 웹 프로젝트그룹(PG401) 표준 워크샵 UI 정책 가이드 실례 - 다음커뮤니케이션
- TTA 웹 프로젝트그룹(PG401) 표준 워크샵 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/