리눅스와 웹표준(2004)
by Channy Yun on Jun 27, 2011
- 1,920 views
Statistics
- Favorites
- 1
- Downloads
- 0
- Comments
- 0
- Embed Views
- Views on SlideShare
- 753
- Total Views
- 1,920
- No comments yet
- Notes on Slide 1
지문 김
리눅스와 웹표준(2004) — Presentation Transcript
- 리눅스에서의웹 표준 문제 윤석찬
- Think about WebUniversal Access Semantic Interoperability Trust Evolvability Decentralization Cooler Multimedia!
- 단말기 접근성이 낮은 웹사이트 : daum.net PDA용 별도 사이트가 필요 다수 웹 사이트 중복 개발로 인한 비용 증가
- 한 페이지에 나오는 비 표준 자바 스크립트 에러 : naver.com
- Who are in trouble?
- Browser War ActiveX NSPlugin <bgsound>, <marquee> <blink> document.all document.layer <object>, <iframe> <embed>
- 요인 분석 (1) 외부적 요인 – 96~99년간 소위 브라우저 전쟁기간 동안 IE vs. Netscape의 비표준을 기반한 경쟁 후 IE 전용 기술만 잔재로 남음 – 4~5년간 웹표준 기술이 비약적으로 발전하였으나 IE의 하위 버전 호환 기능(Backward Compatibility)으로 인한 기술 변경 미흡 – 표준 기술에 대한 웹디자이너/UI 개발자 등 웹 생산 종사자 재교육 및 자기 개발 부재
- 요인 분석 (2) 내부적 요인 – 국내 브로드 밴드 인터넷 환경의 급격한 성장 – 급격한 인터넷 산업화로 인한 엔터테인먼트 인터넷으로 진화 – 고정화된 열악한 국내 웹 생산 시스템 구조 – 웹에 대한 기본 인식 및 개발 방식에 대한 이해 및 교육 부재 – 비용과 효율만 중요시 하는 행태 (공공재로서의 웹 인식 부족)
- 문제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 주요 사용처 – 공인 인증 사용: 인터넷 뱅킹, 증권 거래, 카드 결제, 보험, 전자 정부 등 – 엔터테인먼트: 온라인 게임, 로그인, 채팅 및 메신저, 파일 첨부 – 스파이 웨어: 광고 및 해킹 프로그램
- Solution?
- 웹 표준을 지켜라 웹 표준 규격 준수 – W3C의 일반 표준 준수 (HTML4.1, XHTML1.0, CSS1, DOM1) – ECMAscript(자바스크립트)의 일반 표준 준수 – 웹디자이너/UI 개발자/웹개발자에 대한 표준 준수에 대한 재교육 – 표준 준수는 생산성에 대한 경쟁력임을 전략화 구조와 표현 분리 사용 – 구조화된 HTML을 사용하고 표현은 CSS로 대체 – 테이블 구조를 CSS Boxing 모델로 수정 – 다수의 스타일로 각종 접근성 문제 해결 (노약자, 장애인, 비PC단말) 최소한의 디버깅 및 QA – 표준 준수 Validator로 QA (W3C에서 제공) – Firefox 자바스크립트 디버거 이용 – 다수 브라우저 테스트를 거칠 것
- XHTML HTMLCSS ECMAScript DOM
- 실례: 표준 기반 웹 사이트① 디자인 요소가 풍부한 웹 페이지 ③ 접근성이 확보된 컨텐츠 구조 ② 표현과 구조가 분리된 소스코드
- 플러그인 대체 기술을 제공하라 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
- Alternatives : Rich Internet Application XUL XAML SVG Flash ActiveX Flex Ajax 범용적 사용 가능성 ** ** * *** ** *** *** 데스크탑 기반 UI 풍부도 ** * * * ** *** *** 개발 환경 용이성 * *** * *** ** *** ** 플랫폼에 대한 기술 독립성 ** * ** *** * ** ** 벤더에 대한 기술 독립성 ** * ** * * * ** 기술자 Pool 및 이전 용이성 * * * ** *** *** *
- 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");} }
- Not Alternative : XAML on Windows Vista®(2) Windows Vista Screenshot
- 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>
- RIA: Macromedia Flex® (1)
- RIA: AFLAX (Asynchronous Flash® + XAML) - XAML과 Flash 클라이언트의 결합 - Windows/Mac/Linux/PDA에 모두 적용 가능 http://www.xamlon.com/
- RIA: XUL Application for Firefox(1)- XUL + CSS + JavaScript (XPCOM)- 수 백 개의 Firefox Extensions 개발 중
- RIA: XUL Application for Firefox(2) Mozilla Amazon Browser: http://www.faser.net/mab/
- RIA: (aka.Konfabulator) - Graphic + JavaScript (Mozilla) Engine - Widget: Javascript + HTML + CSS - Windows/Mac 버전 제공 중 - 2005년 6월 Yahoo!에 인수 http://widget.yahoo.com/
- RIA - Tiger 에서 처음 제공 - 코코아 그래픽 엔진 사용 - 사파리의 자바 스크립트엔진 사용 - HTML+ CSS+ Javascript로 작성 가능 •http://www.apple.com/downloads/dashboard/
- Web Standard Strategy on Linux
- Government goes to Web Standards
- XPCOM replaces ActiveX
- Ajax replaces ActiveX
- Community Evangelism
- Leading Portal Evangelism
- Examples : XPCOM based Internet Banking
- 1. 암호모듈 설치 Action – 시연할 데모페이지에 접속한다 Process – 암호모듈을 설치하고 실행한다.
- 2. 인증서 발급 Action – 왼쪽 메뉴의 인증센터를 누른다 – 인증서관리에서 인증서 발급을 누른다 – ID와 주민등록번호를 넣고 인 증서 발급을 요청한다 – 보안번호를 누른 후, 인증서 암 호 입력창이 뜨면 인증서 암호 를 넣는다 – 참조번호, 인가코드가 성공적으 로 발급되면 발급 버튼을 눌러 인증서를 발급받는다 Process – 인증서 발급 요청을 받아 금결 원 테스트 CA에 연결하여 CMP 를 통해 인증서를 발급받는다 (○) – 발급받은 인증서를 하드디스크 에 저장한다
- 3. 로그인 Action – 왼쪽 메뉴의 인증서 로그인 버 튼을 누른다 – 인증서 제출창이 뜨면 발급받은 인증서를 선택한 후 인증서 암 호를 넣고 확인 버튼을 누른다 Process – 사용자가 제출한 인증서 암호로 개인키를 풀고 인증서로 서명하 여 로그인한다. (○)
- 4. 이체거래 Action – 로그인한다 – 위 메뉴의 예금서비스에 마우스 를 가져가면 예금조회와 예금이 체 메뉴가 나온다 – 예금이체를 누른 후 즉시이체를 누른다 – 입급계좌번호 및 금액을 넣으면 인증서 제출창이 뜨고, 서명할 인증서와 인증서 암호를 넣는다 Process – 이체거래 내역에 대해 제출한 인증서로 서명하여 서버로 보내 어 사용자가 서명한 메시지임을 확인한다 (○) – 결과 메시지를 암호화하여 브라 우저에서 확인한다
- 5. 조회거래 Action – 로그인한다 – 위 메뉴의 예금서비스에 마우스를 가져가면 예금조회와 예금이체 메 뉴가 나온다 – 예금조회를 누른 후 거래내역조회 를 누른다 Process – 거래내역조회를 누르면 로그인한 사용자의 계좌번호 및 잔액 등이 서버에서 암호화하여 브라우저에 표시된다
- Thanks for your attention! channy@daumcorp.com