Fennec Architecture

Mozilla|2009. 6. 3. 22:00
지난 FOSDEM09에서 Fennec의 Front End(XUL)개발을 주도하고 있는 Mark Finkle이 Fennec Architecture에 대해 발표를 했습니다. 발표 내용을  모질라 위키에도 자세하게 설명 해 놓았는데, Fennec의 설계 철학과 동작 방식을 이해하는데 더할 나위없이 좋은 자료이므로 번역을 해보았습니다. 참고가 될 만한 링크를 넣고, 좀 더 내용을 추가해 이해를 도왔습니다.

Fennec의 개발 배경


Fennec은 특별히 터치 스크린(touch screen)를 제공하는 모바일(Mobile) 기기를 위해 설계된 XUL기반의 웹브라우저입니다. Firefox와 Mozilla 플랫폼의 많은 부분을 서로 공유하고 있는데,  같은 HTML Rendering Engine을 사용할 뿐만 아니라 확장기능(Add-ons) 지원, 다운로드 관리, 즐겨찾기 및 히스토리, 자바스크립트 엔진(JIT Support)을 공유하고 있습니다.

이렇게 플랫폼 기반은 같지만, Front-end UI는 완전히 다릅니다. Fennec은 작은 화면에 낮은 CPU와 메모리, 키보드가 없이 터치스크린을 위해 설계되었습니다. 이러한 UI 크기 차이로 Firefox UI를 오버레이(overlay)하고 있는 add-ons의 경우 Fennec에서 동작하려면 포팅 작업이 필요하고, 터치 기반의 UI를 가진 모바일 기기에서 만족할 만한 성능에 촛점을 맞춘 결과, 다소 특히한 XUL 구조를 갖고 있습니다.

애플리케이션 구조


브라우징


Fennec과 Firefox는 HTML을 보여주는 방식이 아주 다릅니다. Firefox는 탭(tab)브라우징 환경을 지원하기 위해 <tabbrowser>라는 XUL 엘리먼트를 사용합니다.  <tabbrower>는 composite control로, 수정된 <tabbox>엘리먼트 안에 포함된 <browser>엘리먼트로 구성되어 있습니다. 주요 동작은  <browser>를 통해 이루어집니다.


Fennec은 조금 다른 접근 방법을 취하고 있습니다.  <browser> 엘리먼트가 여전히 HTML을 렌더링하는데 사용되지만, 숨겨진 오프스크린(offscreen) 역할을 합니다. 실제 화면에 보여지는 웹페이지는 primary display surface 역할을 하는 <canvas> 엘리먼트에 그려지며, 만족할 만한 수준의 성능으로 panning과 zooming을 쉽게 사용하도록 합니다.  탭 브라우징 환경은 현재 열린 <browser> 엘리먼트를 나타내는 썸네일 영역을 사용하기 위해 생성됩니다.



<browser>의 내용은 <canvas>로 복사되고, 탭을 나타내는 Thumbnail 속도를 위해 해당 <canvas>로 부터 업데이트 됩니다. 물론 <canvas>에 복사된 웹페이지 내용이 오래된 경우, <browser>로 부터 바로 업데이트 하기도 합니다.

Fennec은  DHTML로 인해 <canvas> display surface에 일어나는 모든 업데이트를 최적화하기 위해   MozAfterPaint 이벤트를 사용합니다. 그 결과, 웹페이지가 변경된 경우, 실제 변경이 일어난 부분만 업데이트되며, 전체 페이지를 다시 그리지는 않습니다.  MozAfterPaint 이벤트의 역할은 DHTML로 인해 변경이 발생한 영역을 알려주어, 해당 영역만 <browser> 엘리먼트에서 <canvas> display surface로 업데이트가 가능하도록 합니다. 처음 Mozilla에 MozAfterPaint 이벤트가 없었을 때는, DHTML로 변경된 페이지를 반영하기 위해 특정 시간 간격으로 전체 <canvas> display surface를 업데이트 해야했습니다.

크롬(Chrome) 엘리먼트




Fennec의 모든 UI 엘리먼트는 <stack>의 자식입니다. 이로 인해 각 UI 엘리먼트가 <canvas> display surface를 기준으로 서로에 관하여 고정된 위치를 갖게 합니다. (즉, 위 그림에서 볼 수 있듯이 좌우측 도구 막대와 URL바가 가운데 <canvas> display surface를 기준으로 고정된 위치를 갖습니다)

Fennec은 각각의 UI 엘리먼트의 좌우 움직임(panning) 효과를 주기 위해 WidgetStack.js라는 JavaScript Helper 오브젝트를 사용합니다. WidgetStack.js는 또한 Content 영역에 대한 크기를 관리합니다. 대부분, 좌우 도구 막대는 content display surface 양변에 붙어 있습니다. 웹페이지는 각각 서로 다른 width와 height값을 갖습니다. 그래서 웹페이지 폭이 변함에 따라 오른쪽 도구 막대도 함께 이동합니다. 이는 웹페이지가 넓은 경우, 도구 막대를 제대로 위치시키기 위해 좀 더 좌우로 이동(panning)시킨다는 것을 의미합니다.

Fennec은 대화상자를 가능한 사용하지 않고 있습니다. 플랫폼에 의해 사용되는 경우도 있지만, 모두 제거할 예정입니다. 대화상자 대신에, Fennec은 사용자와 상호 작용할 수 있는 UI를 사용합니다. Firefox가 modeless notificaton box와  content내 에러 페이지를 보여주는 것과 비슷합니다.

대화상자 또는 또 다른 창이 사용될 수 있는 상황에서, Fennec은 대체로  pseudo-panel을 화면에 보여줍니다. Fennec은 성능상의 이유로 실제 <panel> 엘리먼트를 사용하지 않습니다.  대신, <vbox>에 원하는 UI를 포함시켜 화면에 보여줍니다. 이와 같은 <vbox>는 <stack>엘리먼트의 자식으로 관리되어 필요한 곳에 위치시킬 수 있으며, 브라우저의 시작 성능 향상을 위해 필요할 때까지 숨어있을 수 있습니다.

몇몇 예로, 즐겨찾기 리스트, 즐겨찾기 편집기, 툴 패널(Add-ons, Preferences, 다운로드)이 그런 방식으로 구현되어 있습니다. 이들 엘리먼트는 도구막대와 매우 유사하지만, WidgetStack.js에 의해 관리되는 것은 아닙니다.

Panning/Zooming


Panning은 단지 Content 영역이 아닌 전체 UI를 이동시켜, 도구막대와 Content는 별개가 아닌 하나로 움직입니다.마치 손가락으로 전체 브라우저를  움직이는 것 같은 느낌을 받게 됩니다.

<canvas> display surface에는 전체 웹 페이지에서 화면에 보여지는 부분만 나타납니다.  하지만 실제로 화면에 보여지는 부분 보다 조금 더 많이 <canvas>에 그려지게 됩니다. 이것은 panning을 할 때, content영역이 움직임에 따라, 화면 밖의 부분을 바로 보여주도록 합니다.

Panning이 전체 UI를. 움직이는 동안, zooming은 단지 content영역에만 영향을 줍니다. 그러나, zoom될 때, content가 커지고,  그래서 오른쪽 도구막대는 오른쪽으로 더 멀어져 보입니다.

성능 관련 코딩 가이드라인


패널(Panels)


메인창 위에 크롬 UI를 띄우기 위해 <panel>엘미런트를 사용하는 것은 자칫 성능 저하를 부를 수 있습니다. 사실, OS의 네이티브 창을 생성하는 XUL 엘리먼트는 느리게 동작합니다. Firefox경우,  awesomerbar의 자동 완성 리스트는 현재 <panel>을  사용하고 있습니다. 자동완성 리스트를  메인 <stack>안에 <vbox>로 다시 구현하였더니,  그 결과는 드라마틱합니다. 리스트가 정말 빠르게 나타나지요.

엘리먼트 보이기/감추기


상태를 기반으로 변경되는 UI를 만드는 간단한 방법은 하나의 엘리먼트가 아닌 두개 또는 그 이상의 엘리먼트를 겹쳐 놓고 전환하여 보여주는 것 입니다. 유용하긴 하지만, 보여주고 감추는 작업이 느릴 수 있습니다. 그래서 가능한 이런 방법은 피하고 같은 기능을 구현할 수있는 다른 방법을 찾는 것이 좋습니다.

Firefox의 URL바가 좋은 예입니다. 현재 웹페이지를 보여줄 떄, URL 바는 <description> 엘리먼트입니다. 하지만 사용자가 새로운 URL을 입력할 때는 <textbox>엘리먼트가 됩니다. 이렇게 XUL 엘리먼트를 보이고 감추는 작업에는 느낄 수 있을 정도의 시간이 걸리고, 페이지 로딩 시간에 영향을 줄 수 있습니다. Fennec에서 URL바는 언제나 <textbox>이며, "caption"모드로 전환하기 위해 readOnly property가 사용됩니다.

유사한 상황이 favicon indicator(웹사이트 아이콘)에서도 있었습니다. Fennec은 초기에 throbber(로딩 애니메이션)과 website의 favicon을 위해 두개의 <image>엘리먼트를 갖는 <stack>를 사용했습니다. 다시 말해, 상황에 따라 이미지를 보여주거나 감추었는데, 당시에는 <stack> 엘리먼트가 느렸습니다.  그래서, 제거하니까, 페이지 로딩이 좀 더 빨라보였습니다. 하지만, favicon 이미지를 throbber 이미지로 교체하는데, 로딩 시간이 걸리기 때문에,  show/hide 코드를 제거해서 얻는 이득이 별로 없었습니다. 결국, 두 <image> 엘리먼트는 유지되었습니다.

캔바스와 썸네일 (Canvas and Thumbnails)


앞에서 설명했듯이, Fennec은 <browser> 엘리먼트의 컨텐트를 <canvas> dispay에 복사합니다. 브라우저 컨텐트를 Canvas에 업데이트하는 것은 모바일 기기에서는 그렇게 싼 비용이 아닙니다. 각각의 drawWindow 호출에 약 300~400ms 이내의 시간을 소요합니다. 반면, drawImage는 보다 빨라서 약 100ms 이내 입니다. Fennec은 탭 thumbnail을 업데이트 하기 위해 가능한 drawImage를 사용합니다.

Fennec은 또한 메인 Canvas Display surface에 대한 모든 DHTML 업데이트를 최적화하기 위해 MozAfterPaint 이벤트를 사용합니다. 이는 drawWindow 함수의 호출을 최소화하고,  전체 canvas를 다시 그리지 않게 합니다.


Post-Pageload Work


브라우저가 페이지를 로딩하는 동안 처리할 어떤 작업이 발생하면 잠재적으로 성능에는 좋지 않습니다. 이는 페이지 로드 이벤트가 처리되면서 또 다른 일에 시간을 소모하기 때문입니다. 사용자는 가능한 빨리 웹페이지를 사용하려고 합니다. 그래서 Fennec은 심지어 웹페이지 로딩이 완료될 때까지 favicon 업데이트를 지연시키기도 합니다.

또한, Fennec은 페이지가 로딩되자 마자, 전화번호 텍스트를 tel: 링크로 변경하는 작업을 수행하고 있는데, 시간이 약간 걸렸습니다. 이 작업 때문에 사용자는 일정 시간 동안 웹페이지를  사용하지 못하게 되었고, 이 기능은 다시 구현되어 좀 더 빨라졌습니다. 현재 더 이상의 지연 현상은 존재하지 않으며, 사용자는 좀 더 빠르게 웹페이지를 사용할 수 있게 되었습니다.


File I/O


모질라 플랫폼에서 사용하는 몇몇 file I/O 코드 중  Fennec에서 느린 부분이 있었는데, 보통 시작할 때 문제가 있었습니다. 모바일 기기에서  file I/O는 보통 milisecond 단위로 측정하는 것을 잊어서는 안됩니다. 그러므로, 가능한 불필요한 I/O를 줄이도록 노력해야 합니다. Fennec은  Alpha2에서 cold start 하는데  7~8초 정도 걸리는데, Alpha1보다 30초 정도 향상된 것 입니다.

번역후기

Fennec은 참 고집스럽게 모질라의 기술적 이상(?)을 따르고 있습니다.  기술적 이상이라고 하는 것이 맞는 표현인지는 잘 모르겠습니다. 당장 성능 최적화를 위해 빠를 길을 선택하기 보다는 플랫폼 관점에서 Firefox와 다른 XUL 애플리케이션이 함께 좋아질 수 있도록 개선하려고 노력하는 것입니다. 문제를 피해 가기보다는 문제를 전체 모질라 개잘자들에게 이슈와 시키고 이를 합리적으로 해결합니다.

MozAfterPaint 이벤트가 대표적인 예입니다.  이것은 Layout엔진에도 변경이 일어나므로 Gecko을 담당하는 해커의 도움으로 개발되었습니다. 사실 웹페이지 렌더링을 Canvas를 사용하는 부분도 처음에 논란이 많았습니다. 하지만 Panning이나 Zooming을 제대로 구현하려면 Canvas 이외에는 방법이 없었습니다. 이것은 iPhone도 마찬가지입니다. iPhone도 웹페이이지를 이미지로 렌더링해서 빠른 Panning이 가능한 것입니다. 현재 Fennec이 느린 부분도 Canvas가 HW가속을 받으면 많이 해결될 것입니다.

그리고 XUL UI를 포기하지 않고 모질라의 장점인 Add-ons에 큰 투자를 하는 부분입니다. 사실 일부 UI는 네이티브 UI를 사용하면 쉽게 기능을 구현할 수 있습니다. File Open이 대표적이라 하겠네요. 하지만 이도 XUL로 구현하려고 합니다. 아무래도 여러 플랫폼을 지원하다 보니, UI 일관성을 위해서도 필요할 것입니다.

하지만 이상이라고 표현한 것은 현실은 좀 다르다는 것입니다. 좀 더 많은 사람들이 Fennec을 이용하려면 좀 더 저 사양의 모바일 기기에서도 Fennec을 사용할 수 있어야 합니다. 이를 위해 각 모바일 플랫폼에도 좀 더 최적화되어야 합니다. 하기만 아직 적은 인력으로 모든 것을 다할 수 없는 것도 현실입니다.



댓글()

Fennec 1.0 alpha for Windows Mobile

Mozilla|2009. 5. 20. 01:07
Fennec 1.0 alpha for Windows Mobile

드디어 Fennec 1.0 alpha for Winodws Mobile이 공개되었습니다. Nokia Maemo버전은 이미 베타를 끊었지만, Windows Mobile 버전은 좀 진도가 느립니다.

그 이유는 한 번 사용해보시면 알 수 있듯이 성능이 가장 큰 것 같습니다. 그 동안 치명적인 memory 부족 문제는 jemalloc을 enable하면서 해결되었고, 반응 속도도 많이 향상되었습니다.  UI 모습에도 변화가 있습니다. CSS기반으로 변경되었다고 하는데, 다양한 화면 크기를 효율적으로 지원하기 위해 CSS를 도입한 것 같습니다.  그 이유 때문인지 몰라도,  Windows Mobile용 Fennec의 화면 UI가 단순한 느낌을 주고 있습니다. Maemo에서도 그렇게 변경되었는지 확인을 못해봤지만, Windows Mobile에 다른 CSS가 적용된 것은 분명해 보입니다.

화면 갈무리한 것을 Maemo Beta버전과 비교해 보면 특별한 것은 없습니다. 단지 제가 갖고 있는 미라지 화면 크기인 SQVGA(320x320)를 지원하지 않는 문제가 있네요. 화면이 landscape형태로 옴니아나 HTC Pro단말에 맞게 구성되어 있습니다.

Fennec 1.0 alpha for Windows Mobile

이번 Fennec에는 여러가지 Add-ons를 설치할 있는데, TwitterBar가 눈에 띄네요. Twitter의 인기를 Fennec에서도 확인할 수 있었습니다.

Twitter 페이지 Zoom-out 결과
Fennec 1.0 alpha for Windows Mobile Fennec 1.0 alpha for Windows Mobile

한글과 소프트 키보드 문제
Fennec 1.0 Alpha for Windows Mobile Fennec 1.0 Alpha for Windows Mobile

눈에 띄는 문제로는 한글이 깨지는 현상과 소프트 키보드 문제입니다. 현재 한글 페이지는 볼 수 없는 상태이고, 소프트 키보드 문제는 단추가 계속 화면에 남아서 브라우저를 가리는 부분이 문제입니다. 아마도 한글 소프트 키보드에서만 이런 문제가 나타나는 것 같습니다.

한글에 관한 문제는 역시 우리 개발자가 해결할 수 밖에 없을 것 같습니다. 한 번 살펴봐야겠습니다.

마지막으로, HTC Touch Pro에서 동작하는 시연 동영상을 공유합니다.

Fennec - alpha 1 for Windows Mobile from Madhava Enros on Vimeo.

댓글()

Fennec 드디어 미라지에서 동작하다

Mozilla|2009. 3. 28. 01:30
jemalloc을 enable하고 Windows Mobile 용 Fennec을 정상 동작시켰다는 Blassey의 블로그를 보고 , trunk에 있는 코드를 업데이트 하여, 빌드를 다시 했습니다. cab installer를 만들어 설치를 했으나... 심하게 화면이 깨지는 현상이 나타났습니다. 상황이 더 안 좋아진 것이죠.

jemalloc이 아직 기본으로  enable되어 있지 않은 것이 문제였습니다. 다시 mozconfig파일에 "ac_add_options --enable-jemalloc" 옵션을 추가한 후, 다시 빌드하니 드디어 저도 삼성 미라지폰(i780)에서도 아래와 같이 Fennec이 동작하는 것을 확인할 수 있었습니다. :-)

Fennec1.0 alpha for Windows Mobile Fennec1.0 alpha for Windows Mobile
그 동안 수 차례 미라지를 비롯한 옴니아에도 사용을 시도했으나  웹페이지가 화면에 그려지지 않는 현상 때문에 제대로 Fennec을 사용할 수 없었습니다.

하지만, 아직 alpha이기 (정식 릴리스된 Alpha는 아닙니다) 때문에 일반 사용자가 사용할 만한 수준은 못 됩니다. 특히 성능 문제가 심각한데, Launching 시간이 약 60초 정도 걸리고 여러 instance가 동시에 실행되기도 합니다.

또한, 미라지에서 URL입력할 때, soft keyboard가 귀찮게 나타나고 있고,  위와 같이 화면에 IME 버튼이 계속 남아 있는 현상도 있습니다. 보시다시피 한글도 제대로 표시가 안되고 있고요.

아직 갈 길이 멀기 때문에 열심히 bugzilla에 이러한 현상을 보고하고 문제를 해결해 보려고 합니다.

댓글()

Fennec 1.0 beta 1 주요 추가 기능의 모습

Mozilla|2009. 3. 22. 20:21
Fennec 1.0 Beta1

Fennec 1.0 beta 1이 3월 17일에 공개되었습니다. 현재 Nokia N810만 지원하며 데스크탑에서 테스트 용도로 사용할 수 있도록 윈도, Mac OSX, Linux용이 함께 공개되었습니다.

beta에서 함께 공개될 것으로 기대한 Windows Mobile 6.1용 Fennec은 결국 공개가 안되었네요. 물론 현재 동작은 가능하지만, 대부분의 단말에서 메모리 부족으로 인해 웹페이지가 제대로 그려지지 못하는 문제로 아직 공개를 못하고 있습니다. Jemalloc을 활성화시키는 것 만이 유일한 해결책이라고 합니다.

jemalloc은 이미 Firefox3.1에 적용되었으며 Memory 단편화 현상을 줄여주어 오랜 시간 동안 브라우징해도 메모리가 계속 늘어나는 현상을 방지하고 있습니다.  이미 FreeBSD에서 그 효과를 인정 받았습니다.

이번 베타에서는 다음과 같은 새 Feature가  추가되었습니다.

  • TraceMonkey, Mozilla's new JavaScript engine

  • Faster application start-up time

  • Faster panning

  • Faster zooming

  • Initial implementation of bookmark folders and bookmark editing

  • Support for plug-ins


몇가지 Feature를 실제 구현된 모습으로 소개하면 다음과 같습니다.

TraceMonkey 지원

TraceMonkey는 이미 Firefox 3.1 Beta에서 지원하기 시작하여 벌써 그 효과를 몸소 체험한 분도 많을 것입니다. 자바스크립트를 처음 실행한 후, profiling을 하여 병목 지점을 찾아 그 부분은 네이티브 코드로 컴파일하고, 이후에는 스크립트가 아닌 네이티브 코드를 실행시켜 성능을 한 단계 끌어올렸습니다. 덕분에 XUL로 개발된 UI의 반응속도가 상당히 개선되었습니다.

플래시 지원
Fennec 1.0 Beta1 (Flash Support)
N810에서 이미 지원하고 있던 Flash를 Fennec에서 사용할 수 있게되었습니다. 버전이 낮아서 잘 안돌아가는 Flash도 있지만, 위와 같이 Youtube 동영상도 볼 수 있습니다. Flash는 Plug-in형태로 구현되었고, 다른 기능도  Plug-in으로 구현되어 추가할 수 있게 되었습니다.

Bookmark 편집 기능
Fennec 1.0 Beta1
당연한 기능이지만 베타에서 와서 지원하게 되었습니다.

암호 관리 기능
Fennec 1.0 Beta1

Mobile 환경에서 더 편리하게 웹서비스를 사용하게 되었습니다.

물론, 전반적인 성능 향상으로 Zooming, Panning 속도도 눈에 띄게 빨라져서 이제 어느 정도 쓸만한 수준이 되었습니다.

아직 Mobile에서 XUL UI는 다소 무리인듯 싶으나, Fennec팀이 Startup, Canvas, XPConnect 부분에 최적화를 시도하고 있으니 앞으로도  더 빠른 성능을 기대할 수 있을 것 같습니다. 특히 Fennec은 웹페이지를 Canvas 기술을 이용해서 화면에 표시하므로 Canvas가 HW 가속을 받게 되면 놀라울 수준으로 성능이 향상되리가 예상합니다.

Windows Mobile 버전도 빨리 안정화 되어 실제로 많은 사람들이 Fennec을 사용했으면 좋겠습니다.

좀 더 자세한 정보와 윈도, Mac, Linux에서 테스트 하고 싶은 분은 릴리스 노트를 보시기 바랍니다.

댓글()

Fennec 한글화와 개발자의 유쾌한 농담

Mozilla|2009. 3. 9. 00:14
Fennec 베타 버전이 곧 나올 것 같습니다. 현재 몇 가지 남은 bug가 있긴하지만, 조만간 해결되겠지요. 이번 베타에서는 윈도 모바일 버전도 공개될 것 같습니다. 이미 nightly build로 공개되어 있지만, 아직 maemo버전 만큼 성능이나 안전성를 확보하지 못했습니다.

Localization 작업도 많이 진행되어 벌써 19개 언어가 준비중에 있습니다.

한글화는 channy님 추천으로 제가 맡게 되었습니다. Firefox나 Thunderbird에 대한 Localization 정보는 많이 있으나, Fennec에 대한 정보는 덜 정리되어 있고, 생각 만큼 쉽지 않은 작업이였습니다.

Localizing Fennec in Korean

번역하다가 예전에는 미처 발견하지 못한 재밌는 사실을 발견했는데,

그림 자동으로 읽기를 "Makes websites pretty"라고,

플러그인 사용을 "Make website annoying"라고,

쿠키 저장을 "Delicious deliacies"라고 설명했습니다.

"웹사이트 보기좋게", "웹을 짜증나게 만들다", "맛있는 먹거리"라고 번역해야 할까요? 일단 저도 한글로 번역은 했습니다. 사실 이렇게까지 해야할까 나름 고민도 했지만요..

하여간 플러그인에 대한 모질라 개발자들의 속내를 살필 수 있는 유쾌한 농담을 볼 수 있어서 좋았습니다. 그런데, 이러한 농담의 시작은 꽤나 역사가 깊은(?) 것 같습니다. 아마 베타 버전이 나오면 이러한 농담도 볼 수 없겠지요. :-)

현재, Fennec의 L10n 작업은 가능한 Firefox를 참고해서 동일한 번역 결과가 나오도록 맞추고 있습니다. 더 다듬어서 베타 버전에는 한글화된 Fennec을 만날 수 있도록 노력해보겠습니다.

댓글()

Mobile Firefox Fennec의 최근 모습 (09.1/11)

Mozilla|2009. 1. 18. 23:11
올해 말 릴리스를 목표로 Mobile Firefox Fennec이 열심히 개발되고 있습니다. 최근 모습(alpha2)에서 웬만한 기능들이 구현되어 있음을 확인할 수 있습니다.

물론 성능은 iPhone Safari와 차이가 많이 나는데, 아직 N810이 HW가속을 지원하지 않기 때문입니다.
UI 자체는 Safari보다 훨씬 혁신적이라고 할 수 있습니다. Mozilla의 UX팀의 작품입니다. 작년에 Mozilla Corporation에서 UX전문가를 많이 채용했습니다. 이들 활동 덕분에 Firefox를 비롯한 Fennec의 사용성이 개선되고 있습니다. Fennec의 경우 N810의 성능은 그다지 고려하지 않은 UI로 구현된 것 같기도 한데, 앞으로 Nokia에서 HW가속을 지원하는 새로운 단말이 나오면 성능 문제는 해결될 것이라고 합니다.

Fennec1.0 alpha3 preview

처음 시작하면 위와 같은 모습으로 실행이 됩니다. 기존 브라우저에서는 볼 수 없는 모습입니다.

Fennec1.0 alpha3 preview

Fennec은 현재 Nokia N810에 최적화되어 있습니다. 해상도는 800X480에 맞추어져 있으며 Full Screen으로 동작시켜야 제대로 브라우징을 할 수 있습니다. 위 모습은 New York Times에 접속한 모습입니다. 처음 웹페이지를 열면 800px에 맞게 zoom-out이 됩니다. 이후에 iPhone처럼 원하는 영역을 두번 클릭하면 아래와 같이 확대되어 볼 수 있습니다.

Fennec1.0 alpha3 preview

속도는 좀 느립니다. 2~3초 정도, 웹페이지 복잡도에 따라 다르지만, New York Time의 경우 시간이 좀 걸립니다.

탭을 보려거나 툴바를 보려면 웹페이지를 좌우로 드래그 해야합니다. 우측에서는 탭을, 좌측에서는 툴바를 볼 수 있습니다.

Fennec1.0 alpha3 preview
탭의 모습. 탭을 추가하거나 삭제할 수 있습니다.

Fennec1.0 alpha3 preview

툴바의 모습. Preference, add-ons, plug-in을 보려면 툴바 하단에 있는 단추를 누르면 됩니다. 아래와 같이 UI가 확장되면 새로운 화면이 나타납니다.

Fennec1.0 alpha3 preview
이미 몇 개의 Fennec용 Add-on이 개발되어 있는 것을 볼 수 있습니다. Theme는 아직 지원하지 않는 것 같습니다.

Fennec1.0 alpha3 preview
이번 alpha2에 위와 같이 Preference도 구현되었지만, 아직 Proxy는 설정할 수 없습니다.

Fennec1.0 alpha3 preview
Firefox3에서 처음 개발된 Awesome Bar도 Fennec에서 잘 동작합니다.

Fennec1.0 alpha3 preview
다음에 접속해 보니, 한글도 잘 나옵니다. 물론 아직, 한글화는 되어있지 않습니다.

이상으로 2009년 1월 11일 빌드로 Fennec의 최근 모습을 살펴보았습니다. 현재까지는 N810만 지원해서 국내에서는 사용해볼 기회는 거의 없습니다. 다행히 Windows와 Linux Desktop 버전을 공개해서 테스트 용도로 사용해볼 수 있습니다. 현재 Windows Mobile용으로 열심히 포팅중에 있고 어느 정도 동작에 성공했으니 앞으로 Windows Mobile 버전도 공식 릴리스될 것입니다. 이 때가 되면 국내에서도 사용자가 점차 늘어날 전망입니다. 그런데 UI가 800X480에 맞추어져 있고, 이 보다 작은 화면을 가진 Windows Mobile을 지원하는 것이 숙제라고 할 수 있습니다.

처음 Firefox 1.0이 나올 때도 그러했듯이 그렇게 폭발적인 반응이 있지는 않았습니다. Fennec도 1.0이 올해말에 나오겠지만, iPhone Safari만큼의 성능과 사용성을 보여주려면 아직 해야할 일이 많습니다. Firefox만큼 하려면 더 열심히 뛰어야겠습니다. 많은 관심 부탁 드리겠습니다~

댓글()

Fennec (Mobile Firefox)의 최근 모습

Mozilla|2008. 5. 17. 19:58
작년 10월 Mobile Firefox의 개발이 발표되고, 현재 커뮤니티에서는 열심히 Mobile Firefox를 개발하고 있습니다.

Mobile Firefox는 Fennec이라는 코드네임을 갖고 있는데, 사막 여우를 뜻합니다. 사막 여우 하면 만화에서도 본 적이 있을 것입니다. 보통 여우보다 작고 귀가 큰 것이 큰 특징입니다.

얼마전 개발 중인 Fennec의 코드와 빌드 방법이 공개되었습니다. 아직 Mozilla mainline에는 반영이 안되어서 빌드 방법이 다소 번거롭기는 합니다.

빌드한 후, 실행하면 다음과 같은 모습을 볼 수 있습니다.

Fennec (Mobile Firefox) on N810

Flock: Editing Bookmark

현재 기본 브라우징에서 즐겨찾기 정도가 구현되어 있습니다. Panning은 속도가 좀 느리고 Zoom기능은 잘됐었는데, 최근 코드에서는 잘 안되네요.

Fennec은 Maemo Scratchbox환경에서 빌드가 가능하고 XUL Runner기반으로 실행됩니다. 현재 X86으로는 빌드가 잘 안되는 것으로 보아,N800/N810이 없다면 실행해보기는 힘든 것 같습니다. 조만간 빌드 방법을 정리해서 올려보겠습니다.

테스트 해보시고 커뮤니티에 피드백을 주면 좋겠습니다.

관련 글

댓글()