사용자 삽입 이미지
오늘보니  FireFox3 RC1이 공개되었네요. 치열하게 펼쳐질 브라우져들의 경쟁이 기대됩니다. 그리고 이 포스팅을 마지막으로 XTech 2008의 정리를 마칩니다.

5. XSLT/XPath, SVG, ARIA


- Cient-side XSLT/Xpath
 
오페라는  XML 문서를 클라이언트측 스크립트로 처리하기 위해 document()를 제공하고 있다. 웹킷도 오페라에 동참 한 상태이고  IE도 같은 목적을 위해 node-set() 을 지원하고 있다.

현재 주요한 브라우져 엔진들내에는 XSLT/XPath를 포함하고 있다. - XSLTProcessor, DOMParser|loadXML , XMLSerializer.

- SVG

• 오페라에서는 강력하게 지원중이고 , 모질라는 양호하게 지원중이다.
• 웹킷의 경우 SVG 기능을 크게 향상시키고 있다. 최근에는  SMIL기반의 SVG 애니메이션까지도 지원하고 있다.
• IE7과 마찬가지로 IE8에서는 지원하지 않을 예정이다. 구글이 IE용 SVG를 만든다는 이야기가 있었는데 어떻게 되가는지..

자바 개발자들은 바틱(Batic) 라이브러리를 사용하면 SVG 를 손쉽게 다눌 수 있다. 더불어 다양한 포맷으로 출력 변환을 원할 경우 아파치 FOP (Formatting Objects Processor)를 사용하면 편리하다. 참고로 OLE 객체와 OOXML을 포함한 MS 오피스 문서를 손쉽게 처리하려면 아파치 포이 라이브러리를,  ODF 문서를 처리할 경우 ODFDOM 라이브러리를 활용하면 된다. 요즘은 정말 밑바닥 부터 개발하는 것은 어리석은 일인 것 같다. GPL/LGPL 등으로 배포되는 멋진 작품이 많기 때문이다.


6. 기타 다른 변화들


-HTML5 registerProtocolHandler()
mailto: 에 대한 처리를 특정 웹 메일 애플리케이션이 수행하게 할 경우  registerProtocolHandler()를 사용한다. Firefox 3에 구현되어 있다(2008-04).

-JavaScript Getters 와 Setters
• 데이타 필드의 암호화(encapsulation)를 가능하게 함
• Mozilla, Safari 3, Opera 9.5 betas 지원
• IE8 은 지원하지 않음

-HTML5 <video> 엘리먼트
• 비디오의 로딩과 플레이를 위한 스크립트 API
• 태그 예 : <videosrc="foo.ogg" id="foo_video">

- <video> 태그 지원 브라우져
• Safari 3.1 and WebKit nightlies
• Mozilla/Firefox trunk build + patch for bug 382267
• Opera experimental build
• IE8은 아직 지원 없음

- IE8 <meta> versioning switch
• <meta http-equiv="X-UA-Compatible" content="IE=7"/>
• IE8에서 사용할 렌더링 엔진을 지정할 수 있게 해주는 태그
• 특별히 명시하지 않으면  IE8을 기본으로 사용한다. IE8과 이전 버전의 차이가 크기 때문에  IE 렌더링 호환성을 위해서는 필요해 보인다.

- Acid2 와 IE8
• IE8은 Acid2 테스트를 통과함 
• Safari, Mozilla, Opera는 이미 오래전에 통과되었음^-^

- 브라우져에서 Acid3 지원 현황
• WebKit nightly: 100/100
• Opera dev build: 100/100
• Opera 9.5: 78/100
• Safari 3.1: 75/100
• Firefox 3/Minefield: 71/100
• IE8: 18/100

7. WebKit CSS의 멋진 기능들 , 아이폰에서 정말 멋집니니다^-^.
WebKit에서 제안한 CSS의 추가 기능들을 보면 HTML의 표준을 유지하면서 멋진 스타일과 효과를 제공할 수 있는 혁신적인 기능이 포함되어 있습니다.

Reflections: -webkit-box-reflect
• Alpha masks: -webkit-mask
Canvas images: -webkit-canvas
• Gradients: -webkit-gradient
• Transitions: -webkit-transition
• Transforms: -webkit-transform
   
Web on the Move, 플랫폼으로서의 웹이 모바일과 기존 데스크탑, 그리고 기타 플랫폼을 하나로 아우르는 플랫폼으로 자리잡아 가면서 웹 브라우져 또한 보다 다양한 기능과 패러다임으로 발전하고 있습니다. 웹 브라우져는 기존의 단순히 HTML을 렌더링하기 위한 응용 프로그램이 아니라 HTML5,ARIA,CSS, XML 기술 등 다양한 클라이언트 개발 기술을 사용하여 클라인트측의 웹을 개발할 수 있는 독립적이자 스마트한 플랫폼으로 진화하고 있는 것이 지금의 현실로 보입니다.  참! 할수 있는 게 너무 많아지는 뭘 해야 할 지 고민되는 세상입니다.^-^


Posted by 박재현

댓글을 달아 주세요


이번 XTech 2008 컨퍼런스중 개인적으로 가장 도움이 되는 발표중의 하나였다. 한 분야의 흐름과 동향을 정리하는 만으로도 많은 노력이 필요하기 때문이다. 특히, 웹 브라우져의 경우 FireFox와 IE, 그리고 아이폰의 확산과 더불어 시장을 넓혀가고 있는 웹킷 계열, 그리고 마지막으로 숨은 강자 오페라 등이 치열하게 표준과 업그레이드 전쟁을 벌이고 있다. 이처럼 웹 브라우져 분야의 최신 동향을 정리하는 데 많은 시간이 걸린다.

운좋게도  W3C 모바일 분야에서 일하고 있는 Michael Smith가 모바일 플랫폼을 중심으로 웹 브라우져의 현황에 대한 정리를 해 주었다. 관심갖는 분들이 많을 것 같아 좀 자세히 정리해 본다.

1. 모바일 브라우져 현황

[  오페라  - Presto 렌더링 계열 ]

-오페라 미니4 (2007/11) / 오페라 9.5와 동일한  엔진
       : 향상된 자바 스크립트 엔진 지원
       : 프록시 모델(풀브라우징 아님)
-오페라 미니 / 안드로이드 포팅 버전
        : J2SE로 구현한  J2ME 구현체인  MicroEmulator로 포팅함
        : J2ME/MIDP Call을 안드로이드 Call로 변환
        : 데모로 확인해 보세요 -> 오페라 미니 데모

[  모질라  - Getko 렌더링 계열]

-모질라 Fennec
       : 2008-04 pre alpha 빌드 릴리이즈
       : 2008-08 첫번째 알파 버전 릴리이즈
       : 현재 플랫폼으로는 리눅스(ARM,X86)
       : 노키아의 Miamo를 위한 모질라 기반의 브라우져microB보다 6배 빠름
       : 향후 윈도우 모바일도 지원할 계획임
SkyFire
       : 모질라를 기반으로 하여 오페라 미니같은 프록시 아키텍쳐
       : 2008년 1월 발표 이후 큰 변화 없는 상태임

웹킷 렌더링 엔진 계열 ]

-아이폰 사파리(웹킷)
      :풀브라우징
      :데스트탑 사파리와 동일한 웹킷 엔진  사용
    -안드로이드 + 웹킷(2007.11)
       : 안드로이드의 렌더링 엔진은 웹킷
    - Trolltech의 크로스플랫폼 응용 개발 프레임웍인 Qt4.4 + 웹킷
      :트롤텍은 노키아가 M&A 했음
    - 노키아 S60 웹킷 포팅
       : 2007-08 이후 공식적으로 언급된 바는 없음
       : 들리는 루머로는 사파리3.1을 포팅하고 있다고 함
    -윈도우 모바일 , 웹킷 포팅 관련
       : Iris browser , Wake3

풀부라우징, 아이폰의 확산, 안드로이드 등을 고려할 때 웹 부라우징의 렌더링 엔진으로는 웹킷이 가장 유력한 선두주자로 판단된다. 현재 웹킷의 경우 CSS를 강력히 확장하고 있는 것으로 알려져 있다. 물론 HTML5의 지원과 더불어..
   
2. CSS/DOM

웹 프로그래밍을 할 때 CSS,DOM 프로그래밍은 가장 중요한 부분이자 다중 브라우져 지원을 위해서는 고생을 많이 하는 부분이다. 왜냐하면 브라우져마다 지원하는 CSS 스펙과 DOM 관련 메소드가 다르기 때문이다. 몇가지 주요한 차이점은 다음과 같다.

- 네이티브 자바 스크립트 getElementsByClassName 메소드
      현재 IE만 네이티브 지원이 안되고 Mozilla, WebKit/Safari 3+, Opera 9.5에서는 네이      티브로 지원을 하고 있다. 또한 HTML5에 포함되어 있다.
 
- DOM의 특정 엘리먼트를 추출해 오는 CSS3 Seleccors 지원 현황
       Opera 9.5 and Safari 3.1/WebKit은 43개의 css3.info 테스트를 통과됨
       Mozilla/Minefield는 43개 중에 36개가 통과됨
       IE8은 43개 중에 14개만 통과됨

- DOM의 특정 엘리먼트를 추출해 오는 CSS3 Seleccors API 지원 현황
      querySelector/querySelectorAll 메소드는 현재 웹킷과  IE8에서 지원하고 있음
     
3. 웹 개발 툴 지원 현황

- Firebug for Mozilla : 가장 강력한 개발 환경을 제공하고 있으며 다른 툴들의  교본이다.
- new tools in IE8 : DOM/CSS inspector , script debugger
- WebKit Web Inspector 와 Drosera(script debugger)
- Opera Dragonfly : DOM/CSS inspector , script debugger , Remote Debugging

4. Cross-doc/site 과 로컬 스토리지

- Cross Document Messaging
  HTML5표준에서 postMessage 메소드 정의
  현재 IE8,Opera,WebKit,Mozilla에 구현되어 있다.
  Cross-site 요청시 iframe내에서 기본적으로 사용한다.

- Cross-Site request
  W3C Access control Spec : 모질라에는 구현되어 있으나  FF3에는 모호한 부분이            있어 빠져 있음
  MS IE8의  XDR(XDomainRequest)
  JSON request : 현재 브라우져 업체들은 관심을 갖고 있지 않음

- 오프라인 웹 어플리케이션
  현재  HTML5 Draft recommendation , 2008년 5월  16일자
  ApplicationCacheAPI
  각 응용 프로그램은 저장을 위한 캐쉬와 데이타 추출을 위한 manifest를 갖는다.
  현재 Mozilla/Firefox 3에 구현되어 있고 웹 킷에서는 개발중에 있다.

- HTML5 Client-Side Persistent storage(name/value pair)
  Storageinterface, sessionStorage  와 localStorage 속성
  현재 Mozilla와 IE8에서  지원하고 웹 킷에서는 개발중이다.

- Client-Side SQL API 
  HTML5내에 구글 기어와 유사한 스펙이 정의되어 있음
  웹킷에 구현되어 있음 - 데모 : http://webkit.org/misc/DatabaseExample.html
  ( 사파리로 테스트 해야 함 ^-^ )


앗! 시간이 벌써 많이 지났네요. 벌써 주말 오후입니다. 눈치가 보여서.. 나머지 내용은 다음 포스팅에서..


Posted by 박재현

댓글을 달아 주세요

  1. Favicon of http://www.mobizen.pe.kr BlogIcon mobizen 2008.05.20 13:17  댓글주소  수정/삭제  댓글쓰기

    정말 좋은 포스팅입니다. 브라우저에 관심있는 분은 꼭 한번씩 참고해야할 Reference를 소개해주셨네요. 본문에도 언급이 되어있지만 렌더링 엔진은 웹킷이 거의 대세라고 해도 틀린 말은 아니죠. 웹킷을 사용하는 기업체 중 가장 빠른 속도로 성장하는 기업이 하나 있는데 그 부분에 대한 언급이 빠진게 조금 아쉽네요. 인도기업으로 Azingo라는 기업인데 이미 아실 수도 있겠네요. 기회되면 이쪽으로 저도 포스팅 한번 해보겠습니다.

    • Favicon of https://wisefree.tistory.com BlogIcon 박재현 2008.05.20 16:13 신고  댓글주소  수정/삭제

      리눅스 기반의 모바일 플랫폼을 개발한 회사군요. 저도 처음알았읍니다. 생각보다 개발 범위와 내공이 대단한 회사네요..

  2. Favicon of http://withsmilo.tistory.com BlogIcon sMiLo 2008.11.04 09:42  댓글주소  수정/삭제  댓글쓰기

    좋은 글 꼼꼼하게 읽고 갑니다. ^^


작년에도 열심히 XForms을 Formsplayer사에서 개발하던 Mark Birbeck 의 발표가 있었다. -XForms,REST,XQuery..and skimming , 발표 자료

관련 자료
http://svn.x-port.net/svn/public/presentations/xforms-applications.html
http://svn.x-port.net/svn/public/presentations/

이번에는 웹 개발에 있어 XForms 등의 기술을 통해 적용 가능한 아키텍팅에 대한 발표였다.
현재 일반적인 웹 애플리케이션은 [ 클라이언트 <---> UI 서버 ---> 데이타베이스 ]의 구조로 개발이 된다. 이러한 구조는 데이타를 분리하고 데이타에 대한 표준 인터페이스를 만든다는 장점이 있으나 중간에 서버를 두고 관리해야 한다는 단점과  UI와 데이타가 완전히 분리되지 않았다는 단점이 존재한다.

이러한 것을 다음과 같은 구조로 해결할 수 있다.

클라이언트 <---> UI 서버 --->  웹 서비스 서버 ---> 데이타베이스
Rich 클라이언트 <---> UI 서버 --->  웹 서비스 서버1,2,... ---> 데이타베이스1,..2

이러한 구조에서 UI서버를 구현하는 데 가장 좋은 구현 방법이 XForms이다.
특히, 서버측의 경우 소프트웨어를 설치한 상태 그대로 두고 데이타만 저장하고 사용하는  스키밍(skimming) 방법을 사용하면 효과적이다. 가령, WebDav이나 ATOM( ex, GData)같은 것을 서버측에 설치하고 바로 사용하는 것을 말한다.

XForm으로 서비스를 개발.관리할 때 참고하면 좋을 것 같다.

Posted by 박재현

댓글을 달아 주세요


여러분들이 사용하고 있는 웹에 존재하고 있는 여러분 정보의 소유권은 누구의 것일까?
검색 로봇이 수집한 검색 데이타의 소유권은 누구의 것일까?

당연히  그 소유권은 여러분의 것이다. 그런데 그 정보를 갖고 다른 포탈로 옮길 수 있을까?

옮길 수 있다. 그런데 옮길려면 엄청한 노가다를 해야 한다. 자동으로 제공하는 서비스가 없기 때문이다.

$ copy http://Aservice.com blog  http://Bservide.com blog

위와 같은 복사 명령이 가능하면 얼마나 좋을 까! 김국현님이 블러그를 옮기기 위해 고생을 하지 않아도 될텐데^-^

사용자의 자신의 정보에 대한 주권을 회복하자는 운동인 Data Portability에 대한 발표가 간간히 있었다.

사용자 삽입 이미지
“As users, our identity, photos, videos and other forms of personal data should be discoverable by, and shared between our chosen (and trusted) tools or vendors. We need a DHCP for Identity. A distributed File System for data. The technologies already exist, we simply need a complete reference design to put the pieces together.”
 
이들이 말하고 가르치는 것은 아주 단순한다.

● We want control over our accounts
● We want control over our content
● We want to licence our content
● We will move if we want to
● We want to participate openly
● We expect our media to be perma-linked
● We want to share content and knowledge
● We want access to our own data
● We want social tools to aid portability

사용자의 이러한 목소리에 페이스북은 페이스북 커넥터라는 것을 발표하여 회원의 프로필 정보와 인증 정보를 외부 웹 사이트에서 이용하게 할 수 있도록 제공하고 있으며 마이스페이스 또한 이렇게 하고 있다.

국내는? 사용자의 집단지성의 성장과 더불어 집단지성에 의해 창조된 소유물에 대한 권한 문제는 두고두고 국내 주요 포탈들의 골치거리가 될 것 같다.

발표 자료 : http://docs.thinkfree.com/docs/view.php?dsn=845570

Posted by 박재현

댓글을 달아 주세요


야후의 Fire Eagle 서비스가  OAuth를 지원하는 것에 대해서는 이전 포스팅에서 언급한 바 있습니다.

2008/05/12 - [Conference/2008 Xtech] - [XTech 2008 ] 야후의 위치 정보 공유 플랫폼 - Fire Eagle

Open ID가 사용자의 계정 정보 하나를 여러 서비스에서 공유하여 로그인을 자동으로 수행하는 서비스라면  OAuth 는 사용자의 로그인 인증(authorization)과정을 표준 API로 만듦으로 응용 프로그램 차원에서 SSO의 구현을 가능하게 하는 것을 말합니다.  특히 그 적용 범위를 서비스와 패키지 모두에 적용할 수 있게 해줍니다. 실제 이  OAuth API를 지원하는 사이트는 동일한 코드로  모두  접근할 수 있게 됩니다. 물론 이 과정에서 해당 사이트에 접근하여 사용자의  승락을 받는 과정을 거쳐야 합니다.

사용자 삽입 이미지
현재 OAuth 1.0 은 이미 표준화가 되었고 구글을 비롯하여 현재 마이스페이스, 야후 등 많은 소셜 네트웍 서비스에서 이를 지원하고 있습니다. 이러한  OAuth에 대한 해당 스펙을 공동 작성한 야후(플리커)의 Kellan Elliott-McCreaAdvanced OAuth Wrangling  라는 제목으로 OAuth에 대한 설명을 해 주었습니다.

기술적으로는 역시 보안이 가장 문제일 것으로 보이는 데 보안 알고리즘으로 RSA-SHAI를 사용할 수 있다고 합니다. 저도 보안쪽은 잘모르는 부분이지만 RSA-SHAI가 정책 기반으로 보안을 수행하는 모바일 분야의 알고리즘 중 하나라고 알고 있습니다. 하여간 이 부분은 두고두고 구현상 이슈가 될 것으로 보입니다.

이러한 OAuth 등의 배경에는 서비스 업체들로 부터 사용자 데이타의 자유( DataPortability )라는 이슈가 자리잡고 있습니다. 가령, 특정 서비스의 사용자 데이타를 손쉽게 다른 서비스로 이동시킬 수 있게 해주는 것 입니다. 페이스북 커넥터와 구글의 프렌트 커넥터 등이 이러한 흐름에 발빠르게 동참하며 주도하고 있는 상황입니다. 물론 국내  포탈 상황과는 아주 첨예하게 대립되는 동향이기도 합니다. 이 부분에 대해서는 따로 정리해 봅니다.

Posted by 박재현

댓글을 달아 주세요