WebKit에서 구현된 하드웨어 가속과 WebKit-Clutter를 소개합니다.

작년에 이어 WebKitGtk+ Hackfest 2011에 참석했다. 작년에 이어 같은 장소인 스페인 코루나에서 열려서 그런지, 이제 스페인이 제2의 고향 같다는 느낌이 들 정도다. 물론 스페인은 말은 아는게 "올라"가 전부다. ^^;

작년과 다른 점이 있다면 이번에는 너무나 큰 할 일꺼리를 가지고 갔다는 점이다. 그 동안 webkit-clutter 포트에 작업한 Accelerated Compositing 기능을 WebKitGtk+에 적용하는 것! 너무나 큰 욕심이었을까? 집에 돌아와서 겨우 초기 patch를 반영했다. 어찌되었던 동작하는 데모를 만들었다는데 위안을 삼을 수 있었다. 이외 많은 관심사가 논의되고 해결되었다.

WebKit은 정말 뜨거운 프로젝트다. 이런 프로젝트에 참여하고 있다는 것 자체가 신기할 따름이다. 하지만, 나름 WebKit을 일찍 알아보고 꾸준한 관심을 가져온 결과인 것 같다. 2007년에 QT용 WebKit을 처음으로 TV에 포팅했었으니까, 벌써 4년전 일이다. 안타까운 것은 Mozilla 프로젝트에는 관심을 가질 여유가 없다는 점. 다행스러운 점은 WebKitGtk+를 통해 GNOME기술에 눈을 뜬 점.

얼마전 HP WebOS가 오픈소스 프로젝트가 된다는 발표가 있었다. 내년에는 웬지 할일이 더 많을 것 같다.

지난달에 이어 같은 주제로 발표한 내용을 공유합니다.

특히, 아래 Reflow를 줄이는 방법에 대한 글을 요약했는데, 웹페이지 성능 향상에 도움이 될 것입니다. 

• How (not) to trigger a layout in WebKit
• Rendering: repaint, reflow/relayout, restyle

요즘 화제가 되고 있는 "How browse works"글을 요약 발표했습니다.

지난 달에 제 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에도 오래전에 버그로 등록은 되어 있지만, 현재로서는 구현 계획이 없다.

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

• Firefox에서 AddSearchProvider 사용하기

• IE에서 AddSearchProvider 사용하기

• Chromium에서 지원

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에서 얼마만큼 구현하고 있는 소개할 예정이다.

참고

• 이재환님 Web Application APIs 발표 자료
  

지난 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에서는 따라하기가 쉽지 않다고 합니다.
  

WebKit Party Poster

지난 일주일간 스페인 코루나(Coruña)에서 열린 WebKitGtk+ Hackfest 2010 행사를 잘 마치고 잠시 짬을 내어 바르셀로나에 와 있습니다. 여행이 길어지니, 빨리 집에 가고 싶은데, 가우디 건축물을 보면서 그가 소프트웨어 아키텍트였다면, 어떤 새로운 시도를 했을까 하는 잡생각을 하고 있습니다. 하여간, 그도 역시 레오다르도 다빈치 만큼의 대단한 해커였음은 확실하네요. 

아는 것과 그것을 글로 쓰는 것 그리고 말하는 것은 참 다른 것 같습니다. 제일 어려운 것은 역시 말하는 것이죠. 전문 분야에 있는 분들이 참석하는 것이라 나름 열심히 준비했는데, 늘 그렇지만 아쉬움이 남네요.

국내에 생각보다 WebKit을 하시는 분이 많습니다. 이미 커미터가 된 분도 두 분이나 있고, 심심치 않게 WebKIt 관련 블로그/트위터 글도 많이 봅니다. 다음에는 이런 분들과 WebKit에 관한 깊이 있는 이야기를 하면 좋을 것 같습니다.

참고로, 미래웹포럼 홈페이지와 제가 발표한 WebKit자료는 여기에 공개되었습니다.

발표에서 제외된 부분을 잠깐 소개하겠습니다. 일종의 디렉터즈 컷(?).

구글이 제안한 SearchBox API
DOM API로 Chrome(Browser window)에 있는 Search Box를 제어하는 것인데, 기본 Search Provider만 해당 API를 사용할 수 있다고 합니다. 거의 구글만 사용할 수 있겠네요. URL바를 검색창으로도 사용하는 Chrome브라우저에서는 유용한 기능입니다. 굳이 Google Search Page에 접속하지 않아도, 검색 추천어를 미리 볼 수 있수 있습니다. Apple의 반대로 WebKit에 반영되기는 힘들어 보입니다.

참고
https://lists.webkit.org/pipermail/webkit-dev/2010-October/014779.html
http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2010-October/028818.html

HTML5 Media Capture
Media Capture는 Device에 장착된 외부 기기로 부터 stream 데이터를 주고 받는 기능인데, camera나 스캐너를 대상으로 표준화가 진행 중에 있습니다. 브라우저에서도 화상통신이 가능할 날도 머지않은 것 같습니다. 이미 Ericsson은 WebKitGtk에 구현을 했군요. 소스 공개를 아직 안했는데, 이러다가 누가 먼저 patch 올리면 어찌하려고..

참고
https://bugs.webkit.org/show_bug.cgi?id=43572
http://www.whatwg.org/specs/web-apps/current-work/complete/commands.html#devices

그외 이번 행사 후기...

WebKit에 대한 주도권 경쟁 치열
Apple이 WebKit Project를 시작했지만, Google이 참여하면서 주도권 경쟁이 치열합니다. 각 Port별로 어떤 기능이 추가되는 것은 별 관심이 없지만, 일단 WebCore에 추가되는 부분은 두 회사, 특히 Apple의 최종 허락 없이는 patch가 반영되지 않는 것 같습니다. 물론, Apple은 논의도 없이 WebKit2를 공개하고 발표해버렸습니다. 먼저 시작한자의 특권이죠.
이미 Multiple Process 모델을 적용한 Google은 뒷통수를 맞은 느낌(?), 따라가는 다른 회사는 힘겨워진 것이죠.

IE9에 주목하자
Microsoft는 한번 실행에 옮기면 정말 무섭게 파고드는 회사입니다. IE를 처음 개발할 때도 그렇고, Office시장을 차지할 때도 그랬습니다. MS가 HTML5에 투자하기로 결정한 이상, IE9이 이끌어갈 웹의 미래도 기대가 됩니다. DHTML, XMLHttpRequest와 같은 기능을 IE에서 처음 시작했다는 것을 잊지 않고 있기 때문이죠. 모바일은 좀 늦었지만, 뭔가 새로운 것을 내 놓겠죠?

미래의 플랫폼, 웹!
모든 handset 제조사/이통사가 웹플랫폼에 많은 투자를 하고 있습니다. 2차 스마트폰 전쟁에서는 iPhone에 완패했고(1차는 Windows Mobile vs. Palm), 안드로이드로 버티고 있지만, 이 역시 그들이 주도하고 있는 것은 아닙니다. 웹 플랫폼 중심에 WebKit이 있고 더 많은 업체의 참여가 이루어질 전망입니다. 그 예로, 모토로라가 지금은 안드로이드에 올인하고 있지만, 뒤에서 열심히 WebKit개발에 참여하고 있습니다. 그 만큼 변화, 발전 속도도 빠르겠지요.  작은 힘이나마 그 안에 동참하고 있다는 것이 즐겁네요.

내년 미래웹포럼에서는?
내년에는 Windows7 Phone 브라우저가 소개될 것 같습니다. 그 때면 국내에도 Windows7 Phone이 출시되어 있겠죠? 내년 초에 Firefox4, IE9이 공식 출시되니, 이에 대한 이야기도 뜨거울 것 같습니다. WAC, 웹스토어 대한 이야기도 논의될 것 같습니다. 아마 내년이 웹 애플리케이션 스토어가 시작하는 원년이 되지 않을까 생각합니다. HTML5 저작도구에 대한 소개도 있을 것 같습니다. Adobe또는 MS에서 멋진 툴을 베타 수준에서 준비할 것 같습니다.

그럼, 내년 행사에서 만나요~

그래픽 가속이란?

그래픽 가속의 종류

그래픽 가속에는 크게 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].

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

• Mozilla Developer Center의 CSS ime-mode관련 문서
• Bug 21279 Support ime-mode (CSS property)
• [webkit-dev] Supporting css ime-mode property