사용자 삽입 이미지
오늘보니  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 박재현

댓글을 달아 주세요


Twitter 과 Odeo 서비스를 개발하는 데 참여했고 XMPP 등을 이용해 Twitter IM을 개발하는 등유 명한 소셜 네트웍 서비스 개발에 참여한 Blaine CookBuilding the Real-time Web 란 주제로 발표를 하기로 했습니다. 아쉽게도 발표 당일 참석을 하지 못해 다른 관련자 들이 그의 자료를 보고 설명하는 방식으로 진행이 되었습니다.

사용자 삽입 이미지

발표의 주된 내용은 Twitter 처럼 소셜 네트웍 서비스는 웹상에서 실시간 정보 교환, 특히 실시간 업데이트가 필수적인데 이러한 특성을 구현하는 데 있어 기존의 웹 방식으로는 실시간 웹 서비스가 불가능한 상황이라는 것 입니다. 이러한 것을 극복하기 위해서는 새로운 기술이 필요한 데 현재 Comet, XMPP, Ajax polling등 여러가지 새로운 방법이 채택되고 있다는 것 입니다.

기술로만 보면 국내에서도 Comet 등 다양한 방법을 사용하여 이러한 대용량 실시간 메세징  서비스를 하고 있습니다. 이것만 보더라도 이미 기술 그 자체야 국내가 더 앞서 있지 않나 싶습니다. ^-^


Posted by 박재현

댓글을 달아 주세요

  1. Favicon of http://nokarma.tistory.com BlogIcon nokarma 2008.05.13 12:26 신고  댓글주소  수정/삭제  댓글쓰기

    기술 그 자체가 더 앞서 있다고 말하려면, Comet이 아니라 Komet등 다양한 방법을 사용하여 대용량 실시간 메시징 서비스를 하고 있다고 말할수 있어야 하지 않겠습니까? :)

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

      comet이야 널리 알려진 방법중 이고 실제 국내 웹 메세징 서비스들 중에 대용량 처리를 위한 다양한 방법을 사용하고 있다는 점이 중요할 것 같습니다. 대용량 서비스라는 게 하나의 방법으로는 해결되지 않는 경우가 많기 때문입니다. 이미 국내에서 누군가 Komet을 만들어 쓰고 있지 않을까요? ^-^

    • Favicon of http://nokarma.tistory.com BlogIcon nokarma 2008.05.15 15:20 신고  댓글주소  수정/삭제

      다양한 방법으로 대용량 웹 메시지 처리 시도 않하는 나라는 또 어디있겠습니까? 기술적으로 앞서 있다고 주장하기에는 좀 약하군요.

      한국이 더 이상 특별히 다른 나라보다 대용량 처리하고 있는 상황도 아니고...
      Comet보다 더 나은 방식의 아키텍쳐를 설계했다거나, Comet을 다른 벤더들보다 훨씬 더 잘 implement했다거나 하는것도 아니구 말이죠. :)

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

      ㅎㅎ 네 무슨 말씀인지 잘 이해합니다. 제가 알기로는 네이버, 다음 등 국내 주요 서비스 업체들은 자체적으로 확장한 플랫폼을 오래전 부터 사용한 것으로 알고 있습니다^-^.

      이들 포탈 업체가 이런 기술이나 경험을 좀 공유하면 좋을 텐데요.. 사실 대용량 처리야 직접 해본 사람이 최고죠 ^-^

  2. Favicon of https://channy.tistory.com BlogIcon channy 2008.05.14 14:21 신고  댓글주소  수정/삭제  댓글쓰기

    Daum 카페의 카페온도 ActiveX를 걷어내고 Comet 유사한(?) 방식으로 바꾸었습니다^^