WebKit의 웹표준 구현 현황

WebKit|2011. 6. 6. 21:27

지난 달에 제 6차  W3C  HTML5 KIG Meeting에 처음으로 참석하게 되었다.  이 모임은 국내 HTML5 표준화에 관심을 갖는 분들이 모여 HTML5 표준화 현황을 나누고 논의하는 자리이다.  이번 모임에서는 HTML5 Web App, Device API, Navigation Timing Spec에 대한 소개가 진행되었는데, 실제 WebKit에서 어떻게 지원되고 있는지  간단하게 정리해보았다.


Custom scheme and content handlers

브라우저에서 사용하는 Protocol이나 mimetype을 임의로 등록하여 특정 URL에서 처리하도록 하는 기능이다. 즉, http://, ftp://와 같은 Protocol을 브라우저에 임의로 등록할  수고 있고, 이를 Protocol로 요청이 들어오면 특정 URL이 처리할 수 있도록 한다. 아래와 같은 인터페이스를 지원하고 있고, 실제 Spec은 여기서 확인할 수 있다.

window.navigator.registerProtocalHandler(scheme, url, title)
window.navigator.registerContentHandler(mineType, url, title)

예) navigator.registerContentHandler('application/x-soup', 'soup?url=%s', 'SoupWeb'')


위 Feature는 WebKit에 구현되어 있지만, 아래와 같이  Build할 때, enable해야 사용할 수 있다. 하지만, 아직은 Chromium에서만 지원하는 듯 보인다.

WebKit/Tools/Scripts/build-webkit --register-protocol-handler

실제 구현은 된 초기patch는 여기서 확인 가능하다. 최근, 이미 사용 중인 protocol에 blacklist 를 각 브라우저 개발 업체로 부터 수집하였고, 이에 대한 처리가 WebKit에 반영되었다.


AddSearchProvider

Search Box에 검색 엔진을 등록하는 기능인데, 이 역할을 UI에서 할지 Engine에서 해야할지 아직 논란이 있다. 이미 IE와 Firefox에서 지원하고 있지만, WebKit Community내에서는 합의가 필요한 상태다.

지원하는 interface 는 다음과 같다. 

window.external.AddSearchProvider()
window.external.IsSearchProviderInstalled()

whatwg에 다음과 같이 제안이 이루어졌고,

[whatwg] Proposal for IsSearchProviderInstalled / AddSearchProvider

WebKit에도 오래전에 버그로 등록은 되어 있지만, 현재로서는 구현 계획이 없다.

그러면, 브라우저에서는 어떻게 사용하는지 살펴보자.

Google에서 WebKit에 반영하도록 노력한다고 하니, 진행 과정을 지켜봐야겠다.
 

HTML Media Capture

Device API Spec은 특히 Mobile분야에서 관심이 많은데, Web App과 Native App간의 경계를 허무는 작업이라고도 할 수 있다. 그 중에서 HTML Media Capture Spec은 User Agent에서 device의 microphone과 camera에 접근하도록 한다. 현재 WebKit에는 버그만 등록된 상태이다.


Navigation Timing

지금까지 웹 성능을 측정하는 일은 브라우저 개발자만이 가능한 일이였다. 브라우저 개발자도 HTTP 모듈까지 소스코드로 접근해야만 어느 정도 측정이 가능했었는데, 이를 웹 개발자도 가능하도록 Navigation Timing이라는 Spec이 표준화 중에 있으며, 이미 Chromium은 지원하고 있고, 데모 페이지에서 테스트할 수 있다. 이를 통해 Page를 요청하여 로딩하는 전 과정에서 얼마나 시간이 걸리는지 단계별로 Profiling 할 수 있게 된다. 현재, GTK+ port, QT port에서 이를 구현하고 있다.

앞으로 매달 열리는 HTML5 KIG Meeting에서 논의된 웹표준 내용을 가운데, WebKit에서 얼마만큼 구현하고 있는 소개할 예정이다.


참고

'WebKit' 카테고리의 다른 글

WebKitGtk+ Hackfest 2011 참가 후기  (3) 2011.12.13
QtWebKit, WebKit2로 전환 예정..  (0) 2011.07.06
WebKit Contributors meeting 2011  (0) 2011.05.15
브라우저에서 그래픽 가속하기  (4) 2010.10.14
css ime-mode property 지원하기  (4) 2010.10.05

댓글()

WebKit Contributors meeting 2011

WebKit|2011. 5. 15. 00:06
WebKit Contributors Meeting 2011
지난 4월 24,25일 미국 Apple본사가 위치한 Cupertino에서 열린 WebKit Contributors meeting 2011에 참석했습니다. 본 행사는 WebKit Contributor가 한 자리에 모여, 당면한 문제와 앞으로 계획 등을 논의하는 자리입니다. 올해가 두번째 열렸으며, unconference형식으로 진행되는 행사입니다. 지난 1년간 함께 WebKit을 개발해온 사람들이 함께 모이는 축제라고도 할 수 있겠지요. 이번 모임에서 어떤 논의가 있었는지 간단하게 소개하도록 하겠습니다.

WebKit은 모바일 브라우저 엔진 뿐만 아니라 Mobile Platform으로도 사용되고 있기 때문에 Apple과 Google뿐만 아니라, Nokia, RIM, Samsung, Motorola, Ericsson, Sony, Igalia, Sencha 에서도 참석하였고, 저도 Collabora를 대표해서 참석하였습니다.  지난 WebKitGtk+ Hackfest 참석 멤버들도 다시 만나서 반가웠고, 제 Patch를 review해주던 Reviewer도 실제로 만나니 더 반가웠습니다. 오픈소스 프로젝트에 참여하는 맛이 이런게 아닌가 싶었습니다. 

진행된 Session과 내용은 대부분 인터넷에 공개가 되어 있어서, 어떤 논의가 오고갔는지 확인할 수 있습니다.  무엇보다도 관심은 WebKit2였습니다. 작년에 Apple이 소개한 WebKit2는 그 동안 Qt와 Gtk+ Port팀도 활발하게 작업을 진행하고 있습니다. 사실, WebKit2는 WebCore를 제외한 API영역과 Web Process와 UI Process를 새로 개발하기 때문에 그리 간단한 일은 아닙니다. 이날도 많은 Issue가 쏟아져나왔는데, 몇 가지를 소개하면 다음과 같습니다.
  • C API사용이 최선인가? 이미 Qt는 C++ API를 사용하고 있습니다.
  • plugin을 별도 process로 실행하기. 곧 Apple이 소스를 공개한다고 합니다.
  •  WebKit1과 WebKit2와 중복 code를 어떻게 줄일까요?
  • DRT를 다시 작성하는일, WebKitGtk+의 경우 WebKit1용 DRT도 아직 완벽하지 않습니다.
  • theaded model 지원하기. mobile device에서 각 page마다 web process를 실행하는 것은 다소 부담스러운 일입니다.
  • web process와 ui process과 통신하는 부분이 너무 platform 의존적으로 개발되어 있어, 뭔가 추상화 모델이 필요합니다.
  • Mac에서 구현한 접근성 기능을 다른 port에서는 따라하기가 쉽지 않다고 합니다.
그 다음 제가 관심을 가진 부분은 하드웨어 가속입니다.  하드웨어 가속은 크게 2D가속, accelerated compositing, WebGL 지원으로 나눌 수 있는데, 논의된 issue 가운데 몇가지를 소개하면, 
  • Canvas 2D 가속하기 : Canvas 2D를 GPU를 이용하여 가속하는 patch가 WebKit에 반영되어 현재 계속 보완되고 있습니다. Google에서 Skia가속을 위해 계속 작업 중에 있고, 실제 Profilng결과, 성능이 빨라지는 부분만 가속하는 방식을 사용하고 있다고 합니다.
  • WebKit2에서 GPU가속: Chromium처럼 GPU Process 실행시켜 구현. 
이외 Build System을 CMake나 GYP로 일원화 하자는 이야기가 있었지만, 결론은 쉽게 나지 않을 것 같습니다.  그리고, 작년에 HTML5 Parser가 WebKit에 추가되면서 Parser코드가 완전히 교체되었는데, 이에 대한 구현 내용을 소개해주었습니다. 기존 Parser코드를 이해하는데 3 개월(?)이 걸린 만큼 복잡한 코드였는데, HTML5 Spec을 반영하면서 새롭게 개발했다고 합니다.  마지막 Session에서는 Review-a-thon 행사가 열렸는데, 100개를 목표로 Patch룰 review하는 시간을 가졌습니다.  제가 행사 때 올린 Patch 하나도 Review가 되긴 했는데, 다른 방식으로 수정이 되었네요.

마지막 날 오후에 작년 처럼 단체 사진을 찍었는데, 운 좋게 가운데 자리에 자리를 잡아서 사진이 잘 나왔네요.

(C) torarnv
비록 각 contributor가 속해있는 회사는 서로 치열하게 경쟁하지만, WebKit 개발 커뮤니티는 더 나은 브라우저 엔진을 개발하기 위해 서로 협력하고 참여를 독려하고 있습니다. 혼자 개발하는 것 보다, 함께 개발하는 것이 비용과 시간을 줄이고 더 나은 기술을 받아들일 수 있는 좋은 방법이라고 믿기 때문이죠.  내년 모임에서는 더 알찬 소식을 전하도록 하겠습니다~
 

WebKit Party Poster

'WebKit' 카테고리의 다른 글

QtWebKit, WebKit2로 전환 예정..  (0) 2011.07.06
WebKit의 웹표준 구현 현황  (0) 2011.06.06
브라우저에서 그래픽 가속하기  (4) 2010.10.14
css ime-mode property 지원하기  (4) 2010.10.05
브라우저의 서로 다른 caret color처리 방식  (0) 2010.09.01

댓글()

브라우저에서 그래픽 가속하기

WebKit|2010. 10. 14. 01:25
브라우저가 단순히 컨텐츠를 탐색하고 보여주는 애플리케이션이라는 울타리를 벗어나, 또 다른 애플리케이션을 실행하기 위한 플랫폼으로 발전하고 있다. 하지만, 현재 구현된 브라우저 엔진만으로 플랫폼 역할을 하기에는 넘어야할 한계가 있는데, 바로 성능과 안정성 확보다. 이를 위해 각 브라우저 벤더는 아래 3가지 측면에서 여러 기술을 브라우저에 도입하고 있다.

1) 다중 프로세스(Multiple Process) 적용
2) 자바스크립트 가속
3) 그래픽 하드웨어 가속

위 세가지 기술은 아직까지 안정화가 필요한 부분도 있지만, 대다수의 브라우저 이미 적용했거나 적용을 준비 중에 있다. 우선, IE9덕에 많은 분들이 관심을 갖고 있는 "그래픽 가속"에 대해 알아보자.

브라우저에 HTML5, CSS3가 본격적으로 적용되면서 웹에서 표현할 수 있는 컨텐츠의 종류가 다양해졌다. 최근에는 WebGL에 표준화되면서 3D까지 지원하게 되면서, 2D뿐만 아니라 3D도 가속해야할 상황에 도달했고, 애플 iPad로 촉발된 HTML5 Video지원도 그래픽 가속 없이는 브라우저에서 HD영상을 재생하기에는 무리였다.  그런데, 마이크로소프트에서 IE9 베타에서 하드웨어 그래픽 가속를 강력하게 표면화 시키면서, 이에 대한 논쟁이 가열되고 있다. 지금까지 가장 빠른 브라우저는 구글의 크롬(Chrome)이라는 공식에 역습을 가한 것이다.

과연 브라우저에서 그래픽 가속이 어떤 의미있고, 현재 어느 수준까지 지원되고 있는지 살펴보도록 하겠다.

그래픽 가속이란?

일반적으로 화면에 어떤 그래픽 요소를 표현하려면, CPU가 계산한 그래픽 데이터를 메인 메모리에서 Frame Buffer로 복사해야 한다. 그래픽 가속이란, 이를 CPU가 아닌 그래픽 가속기(GPU)에 전달된 명령어를 실행하여 하드웨어적으로 처리하여 성능을 높인 것을 말한다. 즉, 그래픽 연산 부터 생성된 데이터를 Frame Buffer로 복사하는 모든 과정을 GPU에서 알아서 처리한다. 그 사이 CPU는 HTML을 다운로드 받고 파싱하는 등 다른 작업을 처리할 수 있다. 참고로, GPU는 CPU와 달리 데이터 병렬성이 풍부해 큰 데이터량을 한번에 계산하는데 효율적이므로, 3D 벡터 데이터나 멀티미디어 데이터 처리에 유리하다.

그래픽 가속의 종류

그래픽 가속에는 크게 2D, 3D, Video 가속으로 나눌 수 있다. 먼저 2D 가속으로 2D 벡터 그래픽, 이미지 프로세싱/디코딩/인코딩, Font Glyph Caching 등을 지원할 수 있다. 2D 벡터 그래픽은 OpenVG라는 표준 API가 존재하고 이를 지원하는 HW가속칩도 존재하지만, 많이 활용되고 있지는 않다. 현실적으로 2D가속은 CPU에서 제공하는 SIMD 연산와 OpenGL과 같은 3D 라이브러리에 의존하고 있습니다. 참고로, SIMD는 Single Instruction, multiple data의 약자로서 하나의 명령어로 여러개의 값을 동시에 계산하는 방식을 말하며, alpha brending이나 Video Format의 color space 변환 등에 사용한다. ARM Coretex A시리즈에서는 NEON이라고 부르는 SIMD연산을 지원한다[1].

비디오 가속의 경우, 모바일 환경에서는 전용 디코더를 하드웨어적으로 내장하는 경우가 많고, PC환경에서는 GPU를 사용한다. 만약 디코더가 내장되어 있지 않은 경우에는, CPU에서 제공하는 SIMD연산을 사용하기도 한다.

3D 그래픽은 OpenGL이라는 표준 API 규약을 이용하여 구현한다. Mesa3D라고 SW적으로 구현된 OpenGL 라이브러리도 있지만[2], GPU벤더들이 자사 GPU에 최적화된 OpenGL 라이브러리를 제공하기 때문에, OpenGL API만 잘 사용해도 쉽게 가속이 가능하다. 윈도에서는 DirectX를 이용해서 3D가속을 한다. 특히, DirectX 10버전에는 Font Glyph를 GPU memory에 cache하고 GPU에서 Anti-aliasing을 처리하여 폰트 출력를 획기적으로 향상시켰다[3].

브라우저에서 그래픽 가속


위 그림은 WebKit을 예로 하여, 그래픽 가속 관점에서 브라우저 아키텍쳐를 그려보았다. 이 아키텍쳐는 주로 모바일 프로세서를 사용하는 아이폰이나 안드로이드폰에서 볼 수 있으며, PC에서는 사실상 모든 그래픽 작업을 GPU에서 처리할 수 있다. 위 그림을 통해 브라우저에서 표현하는 그래픽 요소가 어떤 라이브러에 의존하여 렌더링되고 어떤 HW를 통해 가속되는지 한 눈에 확인할 수 있다. PC의 경우 GPU에서 직접 H.264 비디오를 디코딩할 수 있으나, 아직까지 Mobile에서는 인코더/디코더를 하드웨어적으로 구현하여 사용한다[4].

앞에서 언급했듯이 2D 벡터 그래픽은 GPU로 가속이 가능해서 위 그림에 이를 표현하였고, 마찬가지로 SIMD연산을 이용해서 VIDEO가속도 일부 가능하므로 역시 이를 그림에 반영하였다.

다음에는 브라우저별 그래픽 가속 현황을 살펴볼 예정이다.

참고

[1] ARM NEON
[2] The Mesa 3D Graphics Library
[3] ClearType in WPF
[4] Hardware-based encoding and decoding

'WebKit' 카테고리의 다른 글

WebKit의 웹표준 구현 현황  (0) 2011.06.06
WebKit Contributors meeting 2011  (0) 2011.05.15
css ime-mode property 지원하기  (4) 2010.10.05
브라우저의 서로 다른 caret color처리 방식  (0) 2010.09.01
Rendering in WebKit  (3) 2010.01.19

댓글()

css ime-mode property 지원하기

WebKit|2010. 10. 5. 13:16
현재 WebKit에서 구현 중에 있는 css ime-mode property를 잠깐 소개하겠습니다. 이 property를 사용하면 텍스트를 입력할 때, IME를 강제로 동작하지 않게 할 수 있습니다. 예를 들어, 전화 번호 입력할 때, 한글이 입력되지 않도록 브라우저에서 IME사용을 조정할 수 있습니다. 아직은 표준이 아니지만, 이미 IE와 Firefox에서 구현하여 지원하고 있습니다. WebKit만 지원하면, Opera를 제외한 대부분의 브라우저가 지원하게 됩니다. 

<html>
  <head>
    <title>IME Mode test</title>
  </head>
  <body>
    <form>
      <ul>
        <li>ime-mode:active : <input type="text" size="20" style="ime-mode:active;">

        <li>ime-mode:auto : <input type="text" size="20" style="ime-mode:auto;">
        <li>no style : <input type="text" size="20">
        <li>ime-mode:disabled : <input type="text" size="20"
        style="ime-mode:disabled;">
      </ul>
    </form>
  </body>
</html>
직접 위 코드를 Firefox에서 열어보면 마지막 <input> 엘리먼트에서 한글 입력이 안되는 것을 확인할 수 있습니다. 

처음에 이와 관련한 issue를 WebKit Bugzilla에서 찾았을 때, 올레를 외치며 제가 구현할 수 있는 검토를 했었지요. 물론 쉽지 않아보였습니다. 그러다가 잠시 caret color 표시에 문제가 있음을 알고 이쪽 patch를 먼저 작성하고 있는데, 그 사이에 관련 patch가 올라왔습니다. 

아직은 논쟁이 있나 봅니다. 꼭 필요한 기능이냐 부터 브라우저가 구지 IME를 제어해야 하는 등등.. 영어권 사용자에는 그 필요성에 무감각할 수 있으나, 우리 같이 IME로 고생하는 사람에게는 유용한 기능이죠. 이번 patch는 Mac만 지원하므로 Trunk에 잘 적용되면, WebKitGtk Port 쪽에도 구현 issue가 있을 것 같습니다. 

참고

'WebKit' 카테고리의 다른 글

WebKit Contributors meeting 2011  (0) 2011.05.15
브라우저에서 그래픽 가속하기  (4) 2010.10.14
브라우저의 서로 다른 caret color처리 방식  (0) 2010.09.01
Rendering in WebKit  (3) 2010.01.19
Safari 브라우저의 엔진, Webkit의 시작과 발전  (2) 2007.11.20

댓글()

브라우저의 서로 다른 caret color처리 방식

WebKit|2010. 9. 1. 11:27

HTML5에 추가된  contentEditable 기능이 있습니다. 웹페이지 전체 또는 특정 노드를 편집할 수 있도록 하는데, caret color처리하는 부분이 브라우저 마다 다르고, WebKit 계열 브라우저는 검은색 배경에서는 caret이 보이지 않는 문제가 있습니다.

이런 사소한 부분에 관심을 갖는 분이 얼마나 있을 지 모르겠지만,

caret이 보이나요??

 

 caret이 보이나요??

 

Safar, Chrome을 쓰는 분은 caret이 보지 않을 것입니다. 무조건 검은 색이기 때문입니다. Firefox를 쓰는 분은 보입니다. caret이 text color를 따르기 때문이죠. Opera와 IE를 쓰시는 분도 caret이 흰색으로만 보입니다. Opera의 경우, 흰 배경에서는 다시 caret이 검은색으로 바뀝니다. (이 페이지에서는 동작안하네요)

이 부분에 관한 버그를 리포트하였고, Firefox방식으로 수정했는데, Opera 방식을 선호하는 분도 있네요.

'WebKit' 카테고리의 다른 글

WebKit Contributors meeting 2011  (0) 2011.05.15
브라우저에서 그래픽 가속하기  (4) 2010.10.14
css ime-mode property 지원하기  (4) 2010.10.05
Rendering in WebKit  (3) 2010.01.19
Safari 브라우저의 엔진, Webkit의 시작과 발전  (2) 2007.11.20

댓글()

Rendering in WebKit

WebKit|2010. 1. 19. 00:04


WebKit의  내부 동작을 설명해주는  video입니다. 구글에서 좋은 정보를 많이 공개하네요..

'WebKit' 카테고리의 다른 글

WebKit Contributors meeting 2011  (0) 2011.05.15
브라우저에서 그래픽 가속하기  (4) 2010.10.14
css ime-mode property 지원하기  (4) 2010.10.05
브라우저의 서로 다른 caret color처리 방식  (0) 2010.09.01
Safari 브라우저의 엔진, Webkit의 시작과 발전  (2) 2007.11.20

댓글()

Safari 브라우저의 엔진, Webkit의 시작과 발전

WebKit|2007. 11. 20. 09:46
iPhone출시와 더불어 Safari가 많은 관심을 받고 있습니다. 사실 Safari는 Apple에서 전부 개발한 것이 아니라 오픈소스 프로젝트인 KHTML 을 가져다가 만들었습니다. 참고로 KHTML은 KDE의 Konqueror 라는 브라우저에서 사용된 Layout 엔진입니다.

Apple은 2003년 처음 Mac OSX용 Safari를 출시하였고 2007년 들어 윈도용 Safari 베타 와 iPhone, iPod Touch용 Safari를 잇달아 출시하였습니다. Safari가 Open Source KHTML기반으로 개발되었기 때문에 Apple은 2005년 6월 브라우저 엔진만 WebKit 이라는 이름으로 공개하였습니다. Nokia도 WebKit 프로젝트에 동참하여 S60 Mobile Platform용 브라우저를 Webkit기반으로 개발하고 있습니다. 잠깐 가계도를 살펴보면,

KHTML -+---- WebKit (by Apple) --> Safari, Dashboard
|
+---S60WebKit --> Web Browser for S60 Mobile Platform (by NOKIA)
|
|----> Konqueror

Apple의 WebKit은 KHTML에 많은 수정을 가하여 현재는 fork하여 따로 소스코드를 운영되고 있습니다. S60Webkit은 Webkit 프로젝트에는 속해 있지만 역시 따로 소스코드를 운영하고 있습니다. Webkit에 반영된 추가 기능에 대해 일정 간격을 두고 S60Webkit에 반영하는 것 같습니다. 그동안 Nokia도 ARM기반으로 포팅하면서 Mobile Device에 최적화를 많이 했을 것입니다. Apple도 Nokia덕분에 iPhone에 쌩쌩 돌아가는 Safari를 쉽게 갖게 되었으리라 추측해봅니다.

하여간 두 회사가 오픈소스인 KHTML을 가져다가 서로 잘 활용하여 좋은 결과를 얻었습니다.



참고로 S60 Browser의 Architecture입니다. KHTML의 WebCore와 JavaScript Core를 포함하고 있습니다.

위 그림에서 Memory Manager는 Nokia에서 개발한 것으로 Nokia BSD 라이센스를 따르고 WebCore, JavaScript Core는 LGPL을 따르고 있습니다. 이 처럼 오픈소스를 가져다가 공개할 부분과 그렇지 않을 부분에 관해 명확히 구분하여 활용하고 있습니다. Memory Manager처럼 일부 Proprietary 모듈도 과감히 공개한 부분도 있습니다.

오픈소스를 활용한 좋은 예라고 할 수 있습니다.

현재, WebKit은 Mobile분야에서 각광을 받고 있습니다. 모토롤라의 리눅스 플랫폼에서도 Webkit을 사용하고 있으며 얼마전 발표한 구글의 모바일 플랫폼 Andrioid 역시 Webkit을 브라우저 엔진으로 채택하였습니다.

Mozilla도 내년에 Mobile Firefox를 출시를 준비하고 있습니다. 지금까지 WebKit이 다소 성능과 메모리 사용에 있어서 유리하다는 측면이 있었는데, Mobile Firefox는 성능과 함께 XUL기반 개발 환경도 지원하여 다양한 Add-ons와 Theme를 지원할 예정입니다.

두 브라우저의 선전을 기대해봅니다~

'WebKit' 카테고리의 다른 글

WebKit Contributors meeting 2011  (0) 2011.05.15
브라우저에서 그래픽 가속하기  (4) 2010.10.14
css ime-mode property 지원하기  (4) 2010.10.05
브라우저의 서로 다른 caret color처리 방식  (0) 2010.09.01
Rendering in WebKit  (3) 2010.01.19

댓글()
이전 1 2 다음

티스토리툴바