 |
|
난이도 : 중급 Joshua Fruhlinger, 편집자 겸 필자, 프리랜서
옮긴이: 박재호 이해영 dwkorea@kr.ibm.com
2008 년 11 월 04 일 다양한 브라우저가 출시된 이래로 "교차 브라우저 테스트를 수행하라"는 웹 응용 프로그램이 따라야 할 슬로건이 되었습니다. 물론, 모든 브라우저 모든 버전에서 프로그램을 테스트하기는 불가능합니다. 하지만 생각보다 많은 플랫폼과 브라우저에서 프로그램을 테스트할 수 있습니다. 이 기사에서는 교차 브라우저 테스트를 수행하는 다양한 기법을 소개합니다. 꼼꼼하고 철저한 방법부터 임시변통 방법까지 여러 기법을 살펴봅니다. 각자가 처한 상황과 자원에 따라 알맞은 기법을 선택하겠지만, 어떤 기법을 선택하든 교차 브라우저 테스트는 반드시 필요합니다.
웹 응용 프로그램을 다양한 브라우저와 다양한 운영체제에서 테스트해야 한다는 사실은 우리 모두가 안다. 아니, 알아야 마땅하다. 하지만 개념적으로는 충분히 수긍해도, 실제로 온갖 테스트를 수행하기란 쉽지 않다. 고객이 사용할 브라우저와 운영체제 조합을 모두 고려하건대, 철처한 교차 브라우저 테스트에 도전했다가는 인력과 예산이 바닥날지도 모른다는 우려가 든다.
뭐라고? IE 말고 더 있다고?
2000년대 초반에는 IE만 테스트하고 넘어가도 별 문제가 없었다. 하지만 이제 그 시절은 지났다. 오늘날 브라우저 사용자 중 80%가 IE를 사용한다. 과반수는 넘지만 압도적인 숫자는 아니다. 사용자 20%를 무시해도 괜찮을 정도로 여유만만한 회사는 없다.
또한 자신이 겨냥하는 사용자층이 전세계 인터넷 사용자와 비슷한 분포를 반영하리라 가정하면 곤란하다. 브라우저와 운영체제 선호도는 관심사와 국가에 따라 달라진다. 특수한 사용자층을 겨냥하는 웹 사이트라면 사용자가 윈도 이외 플랫폼과 IE 이외 브라우저를 사용할 확률이 높다. 예를 들어, developerWorks 사이트는 방문자 중 60%가 IE를 사용하고 35%가 파이어폭스를 사용한다. 특히, 웹 개발 영역을 보면 방문자 중 51%가 파이어폭스를 사용하고 41%가 IE를 사용한다.
다행스럽게도, 교차 브라우저 테스트를 쉽고 간단하게 만들어주는 도구와 기교가 많다. 이 기사에서는 다양한 테스트 전략을 소개한다. 독자들은 자신이 처한 상황과 자원에 맞춰 알맞은 기법을 골라 사용하면 되겠다. 먼저, 꼼꼼하고 철저하게 테스트하는 방법부터 소개하겠다. 하지만 완벽한 테스트를 위한 시간과 자원이 허락하지 않을 경우를 대비하여 대안도 이어서 소개한다.
브라우저 설치와 실행
|
주의사항!
브라우저에서 많은 웹 응용 프로그램이 사용하는 기술인 플래시와 자바스크립트를 활성화하지 않은 사용자도 있다는 사실에 주의한다. 여기서 소개하는 기법 중 무엇을 선택하든 자바스크립트와 플래시를 끈 상태와 켠 상태 양쪽 다 테스트를 수행해야 마땅하다(대다수 테스트 서비스는 두 옵션을 손쉽게 끄고 켜는 방법을 제공한다). 쿠키도 마찬가지다. 쿠키를 끄고 지운 다음에 사이트를 방문하는 브라우저의 잠재적인 상태를 흉내내도록 하자.
물론 Ajax 응용 프로그램은 자바스크립트가 반드시 필요하다. 그래서 Ajax 코드는 교차 플랫폼 테스트를 수행하기가 아주 번거롭다. 그래도 결론은 다를 바 없다. 실제 사용자 환경과 비슷할수록 좋으며, 하드웨어 에뮬레이션이나 브라우저 에뮬레이션이 적을수록 좋다. 1) 다양한 브라우저에서 디버깅이 까다롭다는 점, 2) 검색 엔진이 색인을 생성하기 어렵다는 점, 이 두 가지가 Ajax 확산을 저해하는 주요 걸림돌이다. 관련 자료는 참고자료 절에서 링크를 제공한다. 더불어 developerWorks 내 Ajax 참고자료 센터도 한번 살펴보기 바란다.
|
|
교차 브라우저/플랫폼 테스트 기법 중 가장 명확하고 철저하고 값비싼 방법이 온갖 브라우저와 플랫폼에서 실제로 테스트를 수행하는 방법이다. 사실 대다수 인기 브라우저는 무료이므로 교차 브라우저 테스트는 비교적 쉽다. 하지만 여러 브라우저만이 아니라 브라우저마다 여러 버전까지 테스트해야 한다는 사실을 명심한다. 개발자는 대개 자기 컴퓨터에서 사용 중인 기능이 빵빵한 최신 브라우저 버전에서 프로그램을 구현한다(그래서 가장 먼저 "교차 브라우저 테스트를 수행하라"는 슬로건이 나왔다). 하지만 사이트 방문자 통계를 살펴보면 모든 사용자가 최신 브라우저를 사용하지는 않는다는 사실을 깨달을 것이다.
한 브라우저를 여러 버전으로 동시에 실행하기가 다소 까다로울지도 모르겠다. 대다수 브라우저는 설치 과정에서 이전 버전을 덮어쓴다. 다행스럽게도 해결책이 존재한다. 파이어폭스라면, 각 버전 실행 파일을 다른 이름으로 저장하면 된다. 단, 각 버전을 처음 실행할 때는 프로파일 관리자를 시작하여 프로파일 공유를 막아야 한다. 그림 1은 (이 글을 쓸 시점에서 최신인) 파이어폭스 브라우저 2.0.0.1.0과 (아주 오래된) 0.7을 동시에 실행한 모습이다.
그림 1. 파이어폭스 여러 버전을 동시에 실행하기
IE라면, 과정이 다소 까다롭다. 윈도 플랫폼은 한 번에 한 버전만 실행하도록 강력히 권장한다. 이러한 걸림돌을 우회하려면 레지스트리 설정 몇 개를 바꿔야 한다. 작은 소프트웨어 회사 TredoSoft는 IE 버전 여러 개를 동시에 설치하는 무료 도구와 레지스트리 키와 DLL을 조작하는 방법을 제공하여 상당한 명성을 얻었다. 구체적인 링크는 참고자료에서 제공한다. (앞으로 언급할 다른 도구와 팁 링크도 참고자료에서 제공한다. 단, 링크는 어디까지나 참고용이다. 필자나 developerWorks가 보증한다는 뜻은 아니다.)
|
실제 환경 테스트
다양한 브라우저를 다양한 설정에서 테스트할 뿐만 아니라, 테스트 장비를 (또는 안전한 원격 사용자 테스터를) 인터넷으로 연결해야 한다. 즉, 이미지나 스크립트를 지역 컴퓨터에서 가져오는 바람에 깜쪽같이 속지 않도록 실제 인터넷 환경에서 테스트하라는 뜻이다. 팝업 차단 프로그램, 개인 방화벽, 기타 많이 사용하는 소프트웨어 등 브라우저가 웹 페이지를 표시하는 방식에 영향을 미칠 만한 실제 요인을 모두 고려해야 한다. 그래야 실제 사용자가 겪을 경험을 이해한다. 워싱턴 대학교에서 제공하는 웹 트립와이어 툴킷(Web Tripwire Toolkit)은 브라우저가 아닌 외부 간섭으로 페이지가 변경되는 상황을 잡아낸다(링크는 참고자료에서 제공한다). |
|
모든 브라우저와 모든 버전을 실행하려면 먼저 어디서 제품을 구할지 알아야 한다. 예를 들어, 마이크로소프트(Microsoft®) 사 공식 사이트는 IE 5를 제공하지 않는다. 모질라 재단 페이지에서 파이어폭스 1.0을 찾기도 쉽지 않다. 다행스럽게도, 진취적인 네티즌들이 옛날 실행 파일을 모두 모아서 제공한다. 웹 공동체 자원봉사자들이 이끄는 evolt.org는 IE에서 오페라까지 상상할 수 있는 온갖 브라우저와 갖가지 버전을 거의 모두 제공한다. 근래 나온 모질라 버전 몇 개가 빠졌지만, 빠진 버전은 filehippo.com과 같은 파일 수집 사이트에서 힘들이지 않고 내려받으면 된다. 또한 애플 사파리는 Michel Fortin이라는 개발자가 Multi-Safari 프로젝트를 통해 예전 Safari 버전 전부를 동시에 실행이 가능한 독립 실행 파일로 묶어 제공한다(모든 링크는 참고자료에서 제공한다).
화면 공간 절약
실제로 브라우저를 여러 개 실행하다 보면 화면이 상당히 복잡해지는 문제에 부딪힌다. 완전히 피할 방도는 없지만, 간단한 도구 몇 개를 활용하면 상황이 다소 나아진다. IE Tab은 IE를 파이어폭스 탭으로 실행하는 파이어폭스 플러그인이다. 에뮬레이션이 아니다. 실제로 IE 렌더링 엔진을 사용하여 페이지를 표시한다. 즉, IE와 똑같은 모양새로 페이지가 표시된다. 단, 플러그인은 윈도 플랫폼에서만 돌아간다. 그림 2는 파이어폭스에서 IE 탭을 사용하는 모습이다.
그림 2. IE 탭 사용
RightLynx는 IE와 파이어폭스 플러그인으로, 마우스 오른쪽 버튼을 클릭하면 현재 페이지가 Lynx에서 표시될 모습을 팝업으로 보여준다. 따라서 별도로 터미널을 열어두고 페이지 URL을 일일이 입력할 필요가 없다. 웹 서비스가 Lynx로 페이지를 읽어 결과 텍스트를 클라이언트로 보낸다. 이런 도구는 모두 무료이며 설치하기 쉽다. 링크는 참고자료에서 제공한다.
너무 오래되서 참신한 Lynx
앞 단락에서 Lynx라는 말에 어리둥절했을지도 모르겠다. (너무 젊어서 기억하지 못하는 독자들을 위해) Lynx는 유닉스(UNIX®) 명령행에서 사용할 목적으로 1990년대 초반에 개발된 텍스트 기반 브라우저다(도스 버전과 윈도 버전도 있다). 그림 3은 developerWorks에서 제공하는 웹 개발 영역을 Lynx에서 본 모습이다.
그림 3. Lynx에서 페이지 보기
언뜻 생각하기에 Lynx에서 사이트를 테스트할 필요가 있으랴 싶으리라. 거의 모든 사이트 방문자가 현대적인 그래픽 브라우저를 사용할 테니까. 하지만 모든 거추장스러운 장식물을 떼어낸 Lynx로 보이는 페이지 모습은 가장 중요한 사이트 방문자 중 하나가 보는 페이지 모습과 흡사하다. 바로 검색 엔진으로 페이지를 가져가 색인화하는 웹 로봇을 가리킨다. 올바른 색인화는 사이트 트래픽에 커다란 영향을 미치므로, Lynx를 사용하여 Ajax 위젯이 중요한 검색 용어를 가리지 않는지 확인한다.
가상화와 에뮬레이션
교차 브라우저 테스트를 거쳤다면 절반 정도 끝낸 셈이다. 이제 교차 플랫폼 테스트가 남았다. 교차 플랫폼 테스트는 교차 브라우저 테스트보다 훨씬 비싸다. 무료 브라우저 몇 개를 내려받아 해결될 문제가 아니기 때문이다. 교차 플랫폼 테스트를 수행하는 가장 철저한 방법은 당연히 윈도, 맥, 리눅스(Linux®) 등 실제 플랫폼을 하나씩 갖추고 테스트를 수행하는 방법이다. 하지만 그랬다가는 웹 개발 예산 일년치를 단번에 날려버리기 십상이다. 다행스럽게도, 한 장비를 여러 테스트 플랫폼으로 전환하는 방법이 몇 가지 있다.
가장 간단한 방법이 듀얼 부팅 시스템을 구성하는 방법이다. 듀얼 부팅이란 한 시스템에 여러 운영체제를 설치한 후 시스템을 시작할 때 운영체제를 선택하는 방식이다. 일반적으로 운영체제는 서로 다른 하드디스크 파티션에 저장한다. 하지만 LiveDistros는 번거로운 하드 드라이브 포맷을 피하기 위해 CD나 ThumbDrive에 저장한다. 역사적으로 듀얼 부팅은 리눅스 등 오픈 소스 운영체제와 많이 사용했다. 하지만 x86 기반 맥이 나오면서 많은 시스템이 이제 윈도와 맥 OS X을 동시에 사용한다.
듀얼 부팅의 단점이라면 한 운영체제에서 다른 운영체제로 전환하기가 상당히 번거롭다는 사실이다. 시스템을 다시 부팅하므로 시간도 오래 걸린다. 반면, 가상화(Virtualization)는 여러 운영체제를 동시에 실행하므로 이런 문제가 없다. 한때는 강력한 서버에서만 사용이 가능했지만, 이제는 일반 데스크톱 PC로도 누구나 사용할 수 있다. 사용자에게 여러 운영체제를 제공하겠다면 시스템에 어떤 형태로든 가상화 도구가 필요하다. 그림 4는 파워 맥에서 Virtual PC를 사용하여 운영체제 두 개를 동시에 실행한 후 각 운영체제에서 브라우저를 두 개씩 띄워서 developerWorks 웹 아키텍처 영역을 표시한 모습이다.
그림 4. 브라우저 네 개 동시에 실행하기: 맥 OS X에서 사파리, 맥 OS X에서 파이어폭스, 윈도 XP에서 파이어폭스, 윈도 XP에서 IE
현재 VMWare와 Virtual PC 등 일반 PC에서 윈도와 대다수 x86 호환 운영체제를 실행해주는 도구가 많다. 한 운영체제가 호스트 역할을 하면서 가상화 프로그램 내에서 다른 운영체제를 돌리는 방식으로, 시스템을 다시 시작할 필요 없이 윈도 비스타, 윈도 XP, 최신 우분투 배포판(Ubuntu distro)을 동시에 실행할 수 있다. 무료가 아닌 운영체제는 여전히 구매해야 하지만, 적어도 하드웨어는 하나로 충분하다.
직전 단락에서 맥 OS X은 예제 운영체제로 언급하지 않았다. 불행하게도, 맥 OS는 맥 하드웨어에서만 돌아가기 때문이다. 하지만 맥에서도 가상화가 가능하다. 그러므로 한 시스템으로 가능한 많은 운영체제를 돌리겠다면 인텔(Intel®) 맥 하드웨어에 가상화 소프트웨어로 VMWare Fusion이나 Parallels Desktop(참고자료 참조) 중 하나를 설치해 사용하기를 권한다. 이 조합이면 맥 OS X, 윈도, 리눅스, 기타 x86 하드웨어에서 돌아가는 운영체제를 모두 테스트할 수 있다. 단점이라면, 소프트웨어와 하드웨어가 모두 유료이므로 저렴한 제품을 선택하더라도 비용이 만만찮게 든다.
모바일 테스트
웹 사이트나 웹 응용 프로그램이 모바일 사용자를 겨냥한다면, 혹은 많은 사용자가 모바일 기기를 사용하리라 예상한다면, 당연히 실제 모바일 장비에서 테스트하는 방법이 최고다. 불행하게도 모바일 장비 시장은 PC 시장보다 더욱 세분화되어 있어서 모든 장비를 사다가 테스트하려면 비용을 감당하기 어려워진다. 다행스럽게도, 데스크톱 컴퓨터에서 모바일 플랫폼을 흉내내는 방법이 있다.
많은 모바일 플랫폼은 SDK를 무료로 제공하는데, SDK는 데스크톱 PC에서 돌아가는 장비 에뮬레이터를 포함한다. 예를 들어, 구글은 안드로이드 플랫폼 SDK(참고자료 참조)를 제공한다. 처음 브라우저를 사용하기가 다소 번거로운데, 이클립스 개발 환경에서 안드로이드 플러그인을 설치한 다음 예제 응용 프로그램 중 하나를 실행해야 한다. 하지만 일단 모든 단계를 거치고 나면, 사파리와 노키아(Nokia) S60 스마트폰 브라우저 기반이 된 오픈 소스 프레임워크인 웹킷(WebKit)에 기반을 둔 브라우저를 사용할 수 있다. 그림 5는 모바일 에뮬레이터를 실행한 모습이다.
그림 5. 안드로이드 SDK 브라우저
모바일 브라우저 시장 역시 상당히 세분화되어 있지만, 많은 고가 스마트폰이 이제는 자기네 데스크톱 브라우저를 수정하여 사용한다. 아이폰(iPhone)은 사파리를, 많은 스마트폰은 오페라 모바일을 사용하므로 테스트 상당 부분을 데스크톱에서 직접 진행해도 무방하다. 물론, 모바일 브라우저와 데스크톱 버전이 100% 똑같지 않다는 사실에 주의한다. (iPhoney는 사파리 표준 데스크톱 버전을 사용하는 OS X 프로그램이지만 비좁은 아이폰 화면에서 사이트 모양새를 대략 살펴보기에는 충분하다. 참고자료에서 무료로 내려받는 사이트 링크를 제공한다.)
물론, 아직도 WAP라는 장벽을 거쳐 웹 페이지를 가져오는 폰이 많다. WAP 사이트를 테스트하겠다면 브라우저 윈도에서 돌아가는 무료 WAP 에뮬레이터가 아주 많다.
일반적으로 모바일 분야는 자체적인 테스트로 모든 장비를 철저히 테스트하기가 아주 어렵다. 다음 절에서 설명하겠지만, 다른 방법도 있다.
테스트 외주 주기
지금쯤이면 오히려 더 절망감을 느낄지도 모르겠다. 당장 마감일이 내일이라서. 확신이 서지 않아서. 시간이든 돈이든 예산을 엄격히 지켜야 하니까. IT 부서가 내 시스템에 옛날 브라우저를 설치하고 레지스트리 키를 변경했다고 싫어하는 바람에. 그렇다면 어쩌겠는가? 파이어폭스와 IE 최선 버전 외에 아무 제품에서도 테스트를 수행하지 못한다면?
그래도 방법은 있다. 테스트를 대신 해주는 서비스를 사용하면 된다. URL을 제공하면 서비스가 각 플랫폼에서 URL이 표시되는 모습을 보여준다. 내 테스트 장비에서 사이트를 꼼꼼하게 테스트할 기회는 사라지지만, 대신 얼마 안 되는 비용으로 상당히 다양한 플랫폼을 테스트할 기회가 생긴다. 어떤 서비스는 비용이 아예 들지 않는다.
Browsershots.org는 이런 서비스를 무료로 제공한다. 그림 6은 Browsershots.org에서 사용자가 선택하는 옵션이다(모바일 플랫폼이나 Lynx 옵션은 없다). 선택한 옵션마다 PNG 파일을 얻는다. 사용자가 지정한 브라우저/OS 조합으로 URL을 표시했을 때 얻어지는 스크린샷 파일이다. 결과를 얻기까지는 30분 정도가 걸리므로 URL을 제출한 후 다른 일을 하면서 한참 기다려야 하지만, 대신 중요한 플랫폼과 브라우저를 무료로 테스트할 수 있다.
그림 6. Browsershots.org에서 선택하는 옵션
반드시 모든 플랫폼과 브라우저를 하루만에 테스트해야 한다면
예산이 있다면 한 걸음 더 나가도 좋다. 예를 들어, 월 회비로 운영하는 Browsercam.com은 광범위한 플랫폼/브라우저와 모바일 플랫폼까지 제공한다. 게다가 페이지는 동적이다. 즉, Ajax 응용 프로그램과 기타 자바스크립트 페이지도 테스트한다. Litmusapp 같은 서비스는 개발 워크플로와 통합하는 기능도 제공하여 외부 클라이언트에게 테스트 결과를 공개하거나 버전을 관리할 수도 있다.
이런 서비스는 대다수 사람이 쫓아가기 어려울 정도로 새로운 장비가 쏟아지는 모바일 세상에 적합하다. DotMobi Virtual Developer Lab이 모바일 영역에 초점을 맞춰 테스트 서비스를 제공하는 좋은 예다. 이곳은 수백여 개에 이르는 모바일 장비를 제공할 뿐 아니라 사용자가 다양한 방식으로 조작도 가능하다. 인터페이스가 실제 장비와 100% 똑같지는 않지만, 그래도 대다수는 거의 흡사하다. 또한 모바일 장비에 집중하므로 자체 테스트나 다른 데스크톱 테스트 서비스를 충분히 보완해준다.
결론
이상적으로 모든 웹 응용 프로그램은 모든 플랫폼과 모든 브라우저에서 테스트해야 마땅하다. 하지만 브라우저 시장이 점차 세분화되고 모바일 플랫폼이 더욱 중요해지면서 모든 플랫폼과 모든 브라우저에서 테스트를 수행하기란 현실적으로 불가능해졌다. 그래도 여전히 생각보다 많은 테스트가 가능하다. 교차 플랫폼 웹 테스트를 지원하는 도구는 아주 많다. 워크스테이션 한 대로 가상화한 운영체제 여러 개를 사용하든, 유/무료 서비스를 사용하여 응용 프로그램을 돌리든, 다양한 사용자 환경에서 응용 프로그램을 테스트할 방법은 다양하다. 사용자를 위해서라도 최대한 많은 조합으로 테스트를 수행하라고 권한다.
참고자료 교육
제품 및 기술 얻기
필자소개 | | | Joshua Fruhlinger는 프리랜서 필자이자 편집자다. 아내 Amber와 고양이 Hoagie와 함께 볼티모어 시에 산다. |
기사에 대한 평가
|
| 이 문서 북마킹 하기
|
| 
