리눅스와 웹표준(2004)

5,983 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,983
On SlideShare
0
From Embeds
0
Number of Embeds
3,848
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

리눅스와 웹표준(2004)

  1. 1. 리눅스에서의웹 표준 문제 윤석찬
  2. 2. Think about WebUniversal Access Semantic Interoperability Trust Evolvability Decentralization Cooler Multimedia!
  3. 3. 단말기 접근성이 낮은 웹사이트 : daum.net PDA용 별도 사이트가 필요 다수 웹 사이트 중복 개발로 인한 비용 증가
  4. 4. 한 페이지에 나오는 비 표준 자바 스크립트 에러 : naver.com
  5. 5. Who are in trouble?
  6. 6. Browser War ActiveX NSPlugin <bgsound>, <marquee> <blink> document.all document.layer <object>, <iframe> <embed>
  7. 7. 요인 분석 (1) 외부적 요인 – 96~99년간 소위 브라우저 전쟁기간 동안 IE vs. Netscape의 비표준을 기반한 경쟁 후 IE 전용 기술만 잔재로 남음 – 4~5년간 웹표준 기술이 비약적으로 발전하였으나 IE의 하위 버전 호환 기능(Backward Compatibility)으로 인한 기술 변경 미흡 – 표준 기술에 대한 웹디자이너/UI 개발자 등 웹 생산 종사자 재교육 및 자기 개발 부재
  8. 8. 요인 분석 (2) 내부적 요인 – 국내 브로드 밴드 인터넷 환경의 급격한 성장 – 급격한 인터넷 산업화로 인한 엔터테인먼트 인터넷으로 진화 – 고정화된 열악한 국내 웹 생산 시스템 구조 – 웹에 대한 기본 인식 및 개발 방식에 대한 이해 및 교육 부재 – 비용과 효율만 중요시 하는 행태 (공공재로서의 웹 인식 부족)
  9. 9. 문제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 미디어 포맷에 대한 고려 필요
  10. 10. 문제2. ActiveX ActiveX 문제의 현실 – 특정 OS 및 브라우저에 종속적인 기술로 국내 ActiveX 사용량은 세계 최고 • 코드사인 인증서 배포율 1위 (Verisign:Thawte=320:720 per year) • 1400여개가 넘는 배포 사이트 존재 (거의 대부분 기업 웹사이트) – 외국에서는 주요 플러그인 외에는 스파이웨어 취급을 당하고 있음. ActiveX 문제가 발생한 주요 원인 – 일찍 수립된 공인 인증 체계: IE 브라우저 독점화에 기술 종속 – 빠른 브로드 밴드 진입 : 플러그인 다운로드가 쉬움 – 어플리케이션 웹: 정보 제공 수단이 아닌 기능적 웹으로 진화 – 오락적인 인터넷 사용 행태 : 온라인 게임, 채팅, 사용자 제어 등 ActiveX 주요 사용처 – 공인 인증 사용: 인터넷 뱅킹, 증권 거래, 카드 결제, 보험, 전자 정부 등 – 엔터테인먼트: 온라인 게임, 로그인, 채팅 및 메신저, 파일 첨부 – 스파이 웨어: 광고 및 해킹 프로그램
  11. 11. Solution?
  12. 12. 웹 표준을 지켜라 웹 표준 규격 준수 – W3C의 일반 표준 준수 (HTML4.1, XHTML1.0, CSS1, DOM1) – ECMAscript(자바스크립트)의 일반 표준 준수 – 웹디자이너/UI 개발자/웹개발자에 대한 표준 준수에 대한 재교육 – 표준 준수는 생산성에 대한 경쟁력임을 전략화 구조와 표현 분리 사용 – 구조화된 HTML을 사용하고 표현은 CSS로 대체 – 테이블 구조를 CSS Boxing 모델로 수정 – 다수의 스타일로 각종 접근성 문제 해결 (노약자, 장애인, 비PC단말) 최소한의 디버깅 및 QA – 표준 준수 Validator로 QA (W3C에서 제공) – Firefox 자바스크립트 디버거 이용 – 다수 브라우저 테스트를 거칠 것
  13. 13. XHTML HTMLCSS ECMAScript DOM
  14. 14. 실례: 표준 기반 웹 사이트① 디자인 요소가 풍부한 웹 페이지 ③ 접근성이 확보된 컨텐츠 구조 ② 표현과 구조가 분리된 소스코드
  15. 15. 플러그인 대체 기술을 제공하라 ActiveX 대체 기술 – Java, NSplugin : 예전 기술이거나 XP 환경에 적합하지 않음 – AJAX: xmlhttp과 Javascript를 통한 인터랙티브 UI기술 – Flash : 공통 Rich Internet Plugin 기술 이용 브라우저 확장 기능 – Mozilla : XUL/Javascript/CSS를 통한 확장 가능 – Microsoft: XAML(Longhorn)을 기반으로 하는 닷넷 어플리케이션 표준 및 경쟁 움직임 – WHATWG: Mozilla와 Opera에서 표준안 제정 중. • WebApplication, WebForm, WebControl – Alternative: Rich Internet Application
  16. 16. Alternatives : Rich Internet Application XUL XAML SVG Flash ActiveX Flex Ajax 범용적 사용 가능성 ** ** * *** ** *** *** 데스크탑 기반 UI 풍부도 ** * * * ** *** *** 개발 환경 용이성 * *** * *** ** *** ** 플랫폼에 대한 기술 독립성 ** * ** *** * ** ** 벤더에 대한 기술 독립성 ** * ** * * * ** 기술자 Pool 및 이전 용이성 * * * ** *** *** *
  17. 17. Not Alternative : XAML on Windows Vista® (1) - Windows Vista 아발론 엔진 사용 - XAML과 간단한 C#코드로 RIA 개발 가능 XAML <Canvas xmlns="http://schemas.microsoft.com/2003/xaml" Background="LightCyan" Width="100%" Height="100%"> <Image Source="lh.bmp" Canvas.Left="5" Canvas.Top="5" /> <Text Canvas.Left="90" Canvas.Top="20" FontSize="36">Hello, Longhorn! </Text> </Canvas> <FlowPanel> <Button Background=“Green“ Click=“EventY“>Yes</Button> <Button Background=“Red“ Click=“EventN“>No</Button> </FlowPanel> .net Code C# Codevoid EventY(…) void EventN(…){ {MessageBox.Show(“Agree"); MessageBox.Show(“Disagree");} }
  18. 18. Not Alternative : XAML on Windows Vista®(2) Windows Vista Screenshot
  19. 19. RIA: Macromedia Flex® (1)- XML(MXML)+ ECMAScript (ActionScript) + Class Library= SWF <?xml version="1.0"?> <mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" > <!-- data model --> <mx:Array id="coffeeArray"> <mx:Object> <label>Red Sea</label> <data>Smooth and fragrant</data> </mx:Object> <mx:Object> <label>Andes</label> <data>Rich and pungent</data> </mx:Object> <mx:Object> <label>Blue Mountain</label> <data>Delicate and refined</data> </mx:Object> </mx:Array> <mx:Script> <![CDATA[ function addToCart():Void { cart.addItem(coffeeCombo.selectedItem.label,coffeeCombo.selectedItem.data); } ]]> </mx:Script> <!-- view --> <mx:Panel title="My First Flex App"> <mx:Label text="Coffee Blends"/> <mx:ComboBox id="coffeeCombo" dataProvider="{coffeeArray}"/> <mx:Text text="Description: {coffeeCombo.selectedItem.data}"/> <mx:Button label="Add to Cart" click="addToCart()"/> <mx:List id="cart"/> </mx:Panel> </mx:Application>
  20. 20. RIA: Macromedia Flex® (1)
  21. 21. RIA: AFLAX (Asynchronous Flash® + XAML) - XAML과 Flash 클라이언트의 결합 - Windows/Mac/Linux/PDA에 모두 적용 가능 http://www.xamlon.com/
  22. 22. RIA: XUL Application for Firefox(1)- XUL + CSS + JavaScript (XPCOM)- 수 백 개의 Firefox Extensions 개발 중
  23. 23. RIA: XUL Application for Firefox(2) Mozilla Amazon Browser: http://www.faser.net/mab/
  24. 24. RIA: (aka.Konfabulator) - Graphic + JavaScript (Mozilla) Engine - Widget: Javascript + HTML + CSS - Windows/Mac 버전 제공 중 - 2005년 6월 Yahoo!에 인수 http://widget.yahoo.com/
  25. 25. RIA - Tiger 에서 처음 제공 - 코코아 그래픽 엔진 사용 - 사파리의 자바 스크립트엔진 사용 - HTML+ CSS+ Javascript로 작성 가능 •http://www.apple.com/downloads/dashboard/
  26. 26. Web Standard Strategy on Linux
  27. 27. Government goes to Web Standards
  28. 28. XPCOM replaces ActiveX
  29. 29. Ajax replaces ActiveX
  30. 30. Community Evangelism
  31. 31. Leading Portal Evangelism
  32. 32. Examples : XPCOM based Internet Banking
  33. 33. 1. 암호모듈 설치 Action – 시연할 데모페이지에 접속한다 Process – 암호모듈을 설치하고 실행한다.
  34. 34. 2. 인증서 발급 Action – 왼쪽 메뉴의 인증센터를 누른다 – 인증서관리에서 인증서 발급을 누른다 – ID와 주민등록번호를 넣고 인 증서 발급을 요청한다 – 보안번호를 누른 후, 인증서 암 호 입력창이 뜨면 인증서 암호 를 넣는다 – 참조번호, 인가코드가 성공적으 로 발급되면 발급 버튼을 눌러 인증서를 발급받는다 Process – 인증서 발급 요청을 받아 금결 원 테스트 CA에 연결하여 CMP 를 통해 인증서를 발급받는다 (○) – 발급받은 인증서를 하드디스크 에 저장한다
  35. 35. 3. 로그인 Action – 왼쪽 메뉴의 인증서 로그인 버 튼을 누른다 – 인증서 제출창이 뜨면 발급받은 인증서를 선택한 후 인증서 암 호를 넣고 확인 버튼을 누른다 Process – 사용자가 제출한 인증서 암호로 개인키를 풀고 인증서로 서명하 여 로그인한다. (○)
  36. 36. 4. 이체거래 Action – 로그인한다 – 위 메뉴의 예금서비스에 마우스 를 가져가면 예금조회와 예금이 체 메뉴가 나온다 – 예금이체를 누른 후 즉시이체를 누른다 – 입급계좌번호 및 금액을 넣으면 인증서 제출창이 뜨고, 서명할 인증서와 인증서 암호를 넣는다 Process – 이체거래 내역에 대해 제출한 인증서로 서명하여 서버로 보내 어 사용자가 서명한 메시지임을 확인한다 (○) – 결과 메시지를 암호화하여 브라 우저에서 확인한다
  37. 37. 5. 조회거래 Action – 로그인한다 – 위 메뉴의 예금서비스에 마우스를 가져가면 예금조회와 예금이체 메 뉴가 나온다 – 예금조회를 누른 후 거래내역조회 를 누른다 Process – 거래내역조회를 누르면 로그인한 사용자의 계좌번호 및 잔액 등이 서버에서 암호화하여 브라우저에 표시된다
  38. 38. Thanks for your attention! channy@daumcorp.com

×