1.
리눅스에서의
웹 표준 문제
윤석찬

2.
Think about Web
Universal Access Semantic Interoperability
Trust Evolvability Decentralization Cooler Multimedia!

3.
단말기 접근성이 낮은 웹사이트 : daum.net
PDA용 별도 사이트가 필요
다수 웹 사이트 중복 개발로 인한 비용 증가

4.
한 페이지에 나오는 비 표준 자바 스크립트 에러 : naver.com

5.
Who are in trouble?

6.
Browser War
ActiveX NSPlugin
<bgsound>, <marquee> <blink>
document.all document.layer
<object>, <iframe> <embed>

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

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

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.
문제2. ActiveX
ActiveX 문제의 현실
– 특정 OS 및 브라우저에 종속적인 기술로 국내 ActiveX 사용량은 세계 최고
• 코드사인 인증서 배포율 1위 (Verisign:Thawte=320:720 per year)
• 1400여개가 넘는 배포 사이트 존재 (거의 대부분 기업 웹사이트)
– 외국에서는 주요 플러그인 외에는 스파이웨어 취급을 당하고 있음.
ActiveX 문제가 발생한 주요 원인
– 일찍 수립된 공인 인증 체계: IE 브라우저 독점화에 기술 종속
– 빠른 브로드 밴드 진입 : 플러그인 다운로드가 쉬움
– 어플리케이션 웹: 정보 제공 수단이 아닌 기능적 웹으로 진화
– 오락적인 인터넷 사용 행태 : 온라인 게임, 채팅, 사용자 제어 등
ActiveX 주요 사용처
– 공인 인증 사용: 인터넷 뱅킹, 증권 거래, 카드 결제, 보험, 전자 정부 등
– 엔터테인먼트: 온라인 게임, 로그인, 채팅 및 메신저, 파일 첨부
– 스파이 웨어: 광고 및 해킹 프로그램

11.
Solution?

12.
웹 표준을 지켜라
웹 표준 규격 준수
– W3C의 일반 표준 준수 (HTML4.1, XHTML1.0, CSS1, DOM1)
– ECMAscript(자바스크립트)의 일반 표준 준수
– 웹디자이너/UI 개발자/웹개발자에 대한 표준 준수에 대한 재교육
– 표준 준수는 생산성에 대한 경쟁력임을 전략화
구조와 표현 분리 사용
– 구조화된 HTML을 사용하고 표현은 CSS로 대체
– 테이블 구조를 CSS Boxing 모델로 수정
– 다수의 스타일로 각종 접근성 문제 해결 (노약자, 장애인, 비PC단말)
최소한의 디버깅 및 QA
– 표준 준수 Validator로 QA (W3C에서 제공)
– Firefox 자바스크립트 디버거 이용
– 다수 브라우저 테스트를 거칠 것

13.
XHTML
HTML
CSS ECMAScript
DOM

14.
실례: 표준 기반 웹 사이트
① 디자인 요소가 풍부한 웹 페이지 ③ 접근성이 확보된 컨텐츠 구조
② 표현과 구조가 분리된 소스코드

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.
Alternatives : Rich Internet Application
XUL XAML SVG Flash ActiveX Flex Ajax
범용적 사용 가능성 ** ** * *** ** *** ***
데스크탑 기반 UI 풍부도 ** * * * ** *** ***
개발 환경 용이성 * *** * *** ** *** **
플랫폼에 대한 기술 독립성 ** * ** *** * ** **
벤더에 대한 기술 독립성 ** * ** * * * **
기술자 Pool 및 이전 용이성 * * * ** *** *** *

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# Code
void EventY(…) void EventN(…)
{ {
MessageBox.Show(“Agree"); MessageBox.Show(“Disagree");
} }

18.
Not Alternative : XAML on Windows Vista®(2)
Windows Vista Screenshot

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.
RIA: Macromedia Flex® (1)

21.
RIA: AFLAX (Asynchronous Flash® + XAML)
- XAML과 Flash 클라이언트의 결합
- Windows/Mac/Linux/PDA에 모두 적용 가능
http://www.xamlon.com/

22.
RIA: XUL Application for Firefox(1)
- XUL + CSS + JavaScript (XPCOM)
- 수 백 개의 Firefox Extensions 개발 중

23.
RIA: XUL Application for Firefox(2)
Mozilla Amazon Browser: http://www.faser.net/mab/

24.
RIA: (aka.Konfabulator)
- Graphic + JavaScript (Mozilla) Engine
- Widget: Javascript + HTML + CSS
- Windows/Mac 버전 제공 중
- 2005년 6월 Yahoo!에 인수
http://widget.yahoo.com/

25.
RIA
- Tiger 에서 처음 제공
- 코코아 그래픽 엔진 사용
- 사파리의 자바 스크립트엔진 사용
- HTML+ CSS+ Javascript로 작성 가능
•http://www.apple.com/downloads/dashboard/

26.
Web Standard Strategy
on Linux

27.
Government goes to Web Standards

28.
XPCOM replaces ActiveX

29.
Ajax replaces ActiveX

30.
Community Evangelism

31.
Leading Portal Evangelism

32.
Examples : XPCOM based Internet Banking

33.
1. 암호모듈 설치
Action
– 시연할 데모페이지에 접속한다
Process
– 암호모듈을 설치하고 실행한다.

34.
2. 인증서 발급
Action
– 왼쪽 메뉴의 인증센터를 누른다
– 인증서관리에서 인증서 발급을
누른다
– ID와 주민등록번호를 넣고 인
증서 발급을 요청한다
– 보안번호를 누른 후, 인증서 암
호 입력창이 뜨면 인증서 암호
를 넣는다
– 참조번호, 인가코드가 성공적으
로 발급되면 발급 버튼을 눌러
인증서를 발급받는다
Process
– 인증서 발급 요청을 받아 금결
원 테스트 CA에 연결하여 CMP
를 통해 인증서를 발급받는다
(○)
– 발급받은 인증서를 하드디스크
에 저장한다

35.
3. 로그인
Action
– 왼쪽 메뉴의 인증서 로그인 버
튼을 누른다
– 인증서 제출창이 뜨면 발급받은
인증서를 선택한 후 인증서 암
호를 넣고 확인 버튼을 누른다
Process
– 사용자가 제출한 인증서 암호로
개인키를 풀고 인증서로 서명하
여 로그인한다.
(○)

36.
4. 이체거래
Action
– 로그인한다
– 위 메뉴의 예금서비스에 마우스
를 가져가면 예금조회와 예금이
체 메뉴가 나온다
– 예금이체를 누른 후 즉시이체를
누른다
– 입급계좌번호 및 금액을 넣으면
인증서 제출창이 뜨고, 서명할
인증서와 인증서 암호를 넣는다
Process
– 이체거래 내역에 대해 제출한
인증서로 서명하여 서버로 보내
어 사용자가 서명한 메시지임을
확인한다
(○) – 결과 메시지를 암호화하여 브라
우저에서 확인한다

37.
5. 조회거래
Action
– 로그인한다
– 위 메뉴의 예금서비스에 마우스를
가져가면 예금조회와 예금이체 메
뉴가 나온다
– 예금조회를 누른 후 거래내역조회
를 누른다
Process
– 거래내역조회를 누르면 로그인한
사용자의 계좌번호 및 잔액 등이
서버에서 암호화하여 브라우저에
표시된다

38.
Thanks for your attention!
channy@daumcorp.com