HTML5 기반 모바일 웹 애플리케이션 – Part2. Fragmentation

저번 HTML 5 기술 및 서비스 동향에 이어 이번 포스팅에서는 각  단말/OS  또는 브라우저 별 성능 단편화 현황에 대해 살펴 보도록 하겠습니다

모바일 환경에서 브라우저의 종류 

스마트폰 제조사의 다양한 스마트폰이 등장함에 따라 모바일 환경에서는 다양한 브라우저들이 존재 하고 있습니다.  그 중  iOS의 Mobile Safari 와 Android 디폴트 브라우저가 차지하는 비율은 85% 로  ( 전세계 기준 NetMarketShare)  대부분을 점유  하고 있습니다. 하지만 이 브라우저들은 같은  OS라도 버전 별/기기 별로 성능이 다른 브라우저를 보유 하고 있는데 그 중 iOS 와 Android의 브라우저들이 어떻게 나뉘어져 있는지 살펴 보겠습니다.

Apple iOS Fragmentation 

대표적으로 Apple 사의 iOS  기반 단말의 브라우저 종류는 다음과 같습니다.

iOS 기반의 OS를 사용한 기기는 Apple에서 유일하게 출시하지만 iPhone, iPad, iPod 별로 다양하며 iPhone의 경우에도 3GS/4/4S  등 다양한 버전으로 존재 하고 있습니다.  아래 그림에는 같은 iOS  별로 OS 와 H/W 의 fragmentation 을 보여 주고 있습니다.

즉 위 그림과 같이 각 기기 별로 처음 출시 이후에 꾸준한 업데이트가 이루어졌기 때문에  같은 기기라도 서로 다른 OS 를 가지고 있습니다. iOS에서는 메인 업데이트가 이루어질 경우 ( 3.0-> 4.0 o)  ( 3.0->3.1 x)  iOS의 Mobile Safari 브라우저 또한 업데이트가 이루어지며, 기기 별로 해상도 및 H/W 성능이 다르기 때문에 위와 같은 fragmentation 이 존재 하고 있습니다.

Google Android fragmentation 

Android경우를 살펴 보자면 더욱더 많은 파편화가 발생 합니다.

Google 이 OS를 오픈한 후 여러 가지 제조사들이 다양한  Android 기반의 단말들을 출시 했기 때문인데, Android OS는 현재 4.0 까지 적용한 단말들이 출시 되어있으며 최근에는 4.1 젤리빈 또한 발표 하였습니다.

iOS와 마찬가지로 OS의 메인 업데이트일 때  브라우저를 업데이트 하므로 각 OS 별로 브라우저 성능이 다릅니다.

또한 4.0 이상부터 설치가 가능한 Chrome for Android 는 Android Default 와는 다르기 때문에 동일 단말 내에서도 fragmentation이  발생 합니다.

위 그림을 살펴 보면 국내에 출시되는 Android는  각 제조사별로 다양한 스펙의 단말들을 출시하고 있습니다. 현재 같은 제조사라도 각 단말 별로 해상도/ 출시시기 등에 따라 다른 성능을 가지고 있습니다. 예를 들어  2010년 5월에 출시되었던 갤럭시 S의 경우는 메인 업데이트가  3번이나 이루어 졌기 때문에 만약 웹 개발자가 서비스를 웹으로 소비자에게 전달할 경우 갤럭시 S 단말을 사용자들을 위해서 2.1/2.2/2.3 이렇게 3개의  브라우저 특성을 고려 해야 합니다.

Transition effect 동작 여부로 판단한 각 단말별 성능

즉 앞에서 살펴본 바와 같이 다양한 모바일 브라우저들이 존재 하고  OS/ 기기 별로 브라우저 특성과 성능이 다르기 때문에 웹 개발자들은 이런 현상들을 파악 하고 있어야 합니다. 그렇다면 실제로 웹 성능이 얼만큼 차이가 나는지 확인해보겠습니다.

위 그림은  총 22개의 Transition  effect 의 정상/비정상 여부를 체크 한 것이며 1개의 effect 가 정상 동작 한 경우 1점으로 카운트 하여 그래프로 그린 결과 입니다.

결과를 확인해보면 iOS 의 경우에는 iOS 4.3 이상이면 기기가 달라도 동일한 동작여부를 보여주었습니다. 최근 출시된 iOS 6.0 beta의 경우는 20점으로 1점이 더 높게 측정이 되었는데 이 1점에 대해서는 뒷부분에서 설명 하겠습니다.

Android 4.0 단말의 경우 최근 출시 되었거나 출시된 후 4.0 으로 업데이트 된 경우 22 점 만점으로 모든 effect test를 통과 하였으며 4.0 의 레퍼런스 폰인 갤럭시 넥서스가 비정상으로 동작 하는 것을 확인 할 수 있습니다.

결론적으로 Transition  effect 는 일부 2.3 이하 단말을 제외 하고는 iOS 4.3 이상 Android 4.0 이상의 단말에서는 대부분 정상 동작 한다고 할 수 있습니다. 하지만 위의 그래프는  동작 여부만 판별한 것이기 때문에 실제 웹으로 상품 개발 시에는 프레임 레이트(fps) 성능 테스트도 진행 하여야 합니다.

Transition effect fps  성능 비교

slide/fade 

우선 가장 많이 쓰이는 slide /fade transition effect의 경우는 대부분 60 fps 의 성능이 측정 되었습니다. 60 fps는 측정 가능한 최대 성능이며 실제로 60 fps의 성능이면 native 의 animation효과와 별 차이를 느낄 수가 없습니다.

하지만 갤럭시 S2 HD LTE 와 갤럭시 노트 2.3 버전에서는 심각한 성능저하 현상이 발견 되었습니다. 이 증상은 4.0 으로 펌웨어 업데이트 후 해결 되었습니다. 하지만 갤럭시 S2 HD LTE의  2.3 버전을 사용 하고 있는 사용자들은 해당 animation을 사용 하기 어려울 것이라 판단 됩니다.

rotate/rotate3D

이번에는 CSS transform에서 지원하는  rotate/ rotate3D  의 단말별 fps 를 보여주는 도표 입니다.  Rotate 를 우선 살펴 보자면 iOS 의 경우는 최적의 성능인 60  fps를 보여주나  Android  단말의 경우에서는 성능 차이가 심한 것을 확인 할 수 있습니다. 특이하게 갤럭시 S의 경우 2.1,2.2,2.3 OS 모두 최적의 성능은 아니지만 안정적인 50 fps 의 성능을 보여주고 있습니다. 또한 4.0 이상에서 설치 가능한 Chrome for Android 의 경우 갤럭시 넥서스와 갤럭시 S2 에서의 성능이 다르게 측정 되었습니다. 추가로  갤럭시 S2 HD LTE 와 갤럭시 노트 2.3 버전에서는 여전히 안 좋은 성능을 보여주고 있습니다.

Rotate3D는 단말의 3D  성능을 이용 하는 것으로 상당히 많은 연산을 필요로 합니다. 많은 연산을 필요로 하는 것과 같이  iOS 4.3 이상 / Android 4.0 이상 을 제외하고는 비정상으로 동작 합니다.

skew

이제 마지막으로 skew  CSS transform effect  에 대한 fps측정을 확인해보겠습니다.  skew 는 “비틀다” 라는 뜻으로  좌/우 상/하 기준으로 대상이 되는 객체를 왜곡 시키는 형태로 동작하는  animation  입니다. 도표에서 확인할 수 있듯이 iOS  에서는 현재 skew를 지원 하지 않습니다.

현재 iOS 6.0 beta 에서는 skew 만 지원 하고 있으며 Android 4.0 이상 단말에서는 ( 레퍼런스 폰 제외) 대부분 지원 하고 있습니다.

앞서 각 단말 별로 테스트 해본바 iOS 4.3 이후에서는 skew  계열의 effect 만 제외하고 대부분의  CSS transform 과 page transition 을 수용 가능 하다고 볼 수 있습니다. 하지만  Android 의 경우는 4.0 이후에서만 대부분  동작하고 각 제조사 별로 상이한 성능을 보이기 때문에  각 단말 별 지원하는 CSS transform  및 page transition  동작여부 및  이상 현상이 동작하는 단말에 대해서는 웹 개발자가 파악 하고 상품 개발을 해야 할 것입니다.

맺으며.. 

본 포스팅에서는 단말/OS/브라우저 환경 별 기능/성능 관련 fragmentation에 대해 살펴 보았습니다. 마지막으로 다음 포스팅에서는 모바일 웹 앱 작성시 성능 저하를 최소화 할 수 있는 최적화 방안에 대해 살펴 보도록 하겠습니다.

강성욱 Smart device개발팀

현재 SD개발팀에서 Mobile Web기반 App Framework개발 업무를 맡아 진행하고 있습니다.

공유하기