페이지

2010년 7월 26일 월요일

웹 브라우저 테스트하기

모든 소프트웨어가 번거로운 테스트 단계를 거치지만, 웹 브라우저를 테스트하는 일은 좀 더 어렵습니다. W3C 표준에 맞게 기능을 구현해야 하며, 표준화가 미흡한 부분은 다른 브라우저와 비교가 필요합니다. 이렇게 표준을 잘 지켜 브라우저를 개발했다고 하더라도 표준을 벗어난 형태로 작성된 웹페이지도 있고, 현실적으로 모든 웹페이지를 다 테스트할 수 없기 때문에 모든 사람을 만족시킬 수 있는 브라우저를 개발하는 것은 불가능한 일입니다. 웹페이지를 작성하고 테스트하는 것도 마찬가지이겠죠. 모든 브라우저가 표준만 잘 지켜면 좋으련만 기기마다, 플랫폼 마다, 브라우저 마다, 버전 마다 다르게 동작하기 때문에 많은 테스트가 필요합니다. 본 글에서는 다양한 각도로 웹 브라우저를 테스트하는 방법을 한 번 정리해보았습니다. 크게 브라우저 기능, 자바스크립트 성능, 그래픽 성능 테스트로 나누어 설명합니다. 

웹 브라우저 기능 테스트

HTML5 테스트


HTML5 관련 API, 마크업이 있는지 확인해 주는 웹페이지입니다. 단지, 확인만 하기 때문에 정상적으로 동작하는지는 알 수 없습니다. 일단, 잘 동작한다는 가정 아래 어느 정도 HTML5 관련 기능을 구현했는지 확인해볼 수 있습니다.

웹사이트 주소: http://www.html5test.com/

W3C CSS 테스트

<표1> CSS Test Suite 개발 현황 (출처: http://www.w3.org/Style/CSS/Test/)

W3C에서 공식적으로 제공하는 CSS 테스트 스위트(Test Suite)입니다. 회원사에서 기여한 테스트 케이스( Test Case)를 정리한 것으로, 웹에서 바로 테스트할 수 있도록 하였습니다. 자동화된 것은 아니고, 일일히 사람이 확인해야 하는 불편함이 있으나 표준화된 내용 하나하나를 직접 확인해 볼 수 있습니다.

웹사이트 주소 http://www.w3.org/Style/CSS/Test/

CSS Acid1 테스트

원래 Box Acid Test라고 불렀으며, 1998년에 개발되었습니다. 브라우저가 CSS1.0 표준을 잘 지원하는 테스트합니다. CSS1.0은 글꼴 속성, 텍스트 색상, 배경 그림, 엘리먼트 Margin, border, padding, 위치 등을 다룹니다. 


CSS Acid2 테스트

Acid2 Test
Acid2 Test는 주로 CSS 2.1 사용하여 HTML 레이아웃 렌더링이 잘 되는지 확인합니다. HTML 마크업, CSS2.1 Styling, PNG 이미지, Data URIs 등을 테스트합니다.

웹사이트 주소 http://acid2.acidtests.org/

CSS Acid3 테스트


Acid3 Test는 웹브라우저가 DOM과 자바스크립트와 관련하여 웹표준은 얼마나 잘 지키고 있는 확인합니다.

웹사이트 주소 http://acid3.acidtests.org/

JavaScript 성능 테스트

애플(Apple)에서 사파리 브라우저에 스쿼럴 피시(SquirrelFish)라는 자바스크립트 엔진을 적용하면서 자바스크립트 성능 논쟁이 뜨겁기 시작했습니다. 구글(Google)도 이에 뒤질세라 V8이라는 자바스크립트 엔진을 크롬 브라우저에 적용하면서 브라우저 성능 경쟁에 뛰어들었습니다. 모질라도 동참했습니다. 이들 회사가 자바스크립트 엔진만 개발한 것이 아니라, 성능까지 측정할 수 있는 최근까지 벤치마크(Benchmark)를 함께 공개했습니다.
 
개발 회사벤치마크특징
모질라DromaeoSunSpider와 JavaScript Engine Speeds
기반으로 개발
구글V8 Benchmark기존에 개발된 벤치마크 코드를 자바스크립트로 구현하여 사용
애플SunSpider실제 사용되는 자바스크립트 코드 사용
<표2> 자바스크립트 주요 벤치마크 스위트

드로마에오(Dromaeo)

JQuery를 개발하고 현재 모질라에서 근무하는 John Resig이라는 분이 개발한 자바스크립트 성능 테스트 스위트입니다. SunSpider와 JavaScript Engine Speeds기반으로 개발되었습니다.

웹사이트 주소 http://dromaeo.com/

V8 Benchmark

구글에서 개발한 V8 자바스크립트 엔진의 성능을 평가하기 위해 개발된 벤치마크 스위트입니다.

웹사이트 주소 http://v8.googlecode.com/svn/data/benchmarks/v5/run.html

SunSpider

애플사에서 만든 자바스크립트 벤치마크로서 JSON 입력으로 부터 태그크라우드(tagcloud)생성, 3D 레이트레이서(raytracer), 암호기법( cryptography) 테스트, 코드 압축해제(code decompression)등과 같은 실제 문제를 포함하고 있습니다. 실제로 많은 웹 브라우저 벤치마크에서 SunSpider를 사용하고 있습니다.



재미있는 것은 각 벤치마크가 자신들의 자바스크립트 엔진에서 좋은 결과를 보여준다는 것입니다. 테스트케이스를 어떻게 선정하느냐에 따라 결과가 다르게 나올 수 있으므로, 여러 벤치마크 스위트를 사용하여 브라우저의 성능을 테스트하는 것이 좀 더 객관적인 판단을 내리는데 도움을 줍니다. 참고로, 2009년 9월에 FavBrowser.com에서 실시한 웹브라우저 벤치마크에서 크롬2가 높은 평가를 받았습니다.

<표2> 웹브라우저 벤치마크 평가(2009.9) (출처: FavBrowser.com)

그래픽 성능 테스트

마이크로소프트에서 지난 3월 IE9 Preview와 함께 "Internet Explorer9 Test Drive"라는 성능 평가 사이트를 공개했습니다. 사실 IE9보다 이 웹사이트가 더욱 흥미로웠는데, 그 동안 다른 브라우저에서는 중요하게 생각하지 않았던 그래픽 성능 데모가 추가되었기 때문입니다.  특히, IE9이 하드웨어 그래픽 가속을 장점으로 내세우면서 앞으로 자바스크립트 성능 못지 않게 2D/3D 그래픽 가속이 브라우저 성능 평가에 중요한 기준으로 자리잡을 전망입니다.


다음에는 "오픈소스 브라우저 엔진은 어떻게 테스트하는가?"라는 제목으로 Mozilla, WebKit의 테스트 방법을  정리하는 기회를 갖도록 하겠습니다. 고맙습니다.

참고