크로스브라우징 테스트 환경 구축 (VirtualBox)


퍼블리셔에게 가장 필요한 것 중 한 가지가 아마 크로스브라우징을 테스트하기 위한 환경을 구축하는 일일 것이다. 그도 그럴 것이 Microsoft Internet Explorer(이하 IE)는 버전마다 그리고 어느 OS에 설치되어 있느냐에 따라 버그가 다르고 렌더링이 차이가 나기 때문.

Windows에는 기본적으로 1개 버전의 IE만을 설치할 수 있게 되어 있기 때문에, 여러 버전을 테스트한다는 것이 쉽지 않다. 물론 개발자도구를 열어 문서모드를 변경함으로 테스트를 진행해볼 수도 있지만 이것이 정확한 레거시 버전의 렌더링을 보여주지 않기 때문에 개발자 도구를 사용하는 것으로는 해결이 불가하다. 그 외 IE Tester 를 설치해서 하는 이들도 있으나, IE Tester 역시 그 자체가 불안정 하기도 하고 자체 버그도 존재하며 역시 레거시 버전과 동일한 렌더링을 보여주지 못하는 경우가 더 많은 것이 사실이다.

가상 PC 구축

그래서 필요한 것이 가상 PC를 구축하는 방식이다. VMWare 라든가, Oracle VirualBox, MS에서 제공하는 Virtual PC 등을 설치하여 테스트를 하는 것인데, 필자는 Oracle의 VirualBox를 사용한다. MS의 것은… 이미 나에게 신뢰를 잃었… = _=a

Installation

Oracle VirtualBox를 설치하기 위해서 필요한 것이라고는 단지 설치 파일을 다운받아 실행하는 것 뿐이다. Download 페이지로 이동하여 자기 OS 에 맞는 설치 파일을 다운받아 그저 실행을 시키기만 하면 설치가 진행된다. 추가로 필요한 것이 있다면, 설치할 OS CD나 가상이미지 파일과 가상이미지 파일을 불러들일 수 있는 가상 드라이브 프로그램 정도?

VirtualBox에 가상 머신 만들기

VirtualBox 를 실행하여 아이콘 메뉴 중 "새로 만들기"를 선택하거나 단축키 "CTRL + N"을 누르면 가상 머신을 만들기 위한 대화상자가 나타난다.

가상 머신 만들기 대화상자 스크린샷

이 대화상자에서 "이름" 란에는 해당 가상 머신의 이름을 적어주고, 종류와 버전에서 설치할 OS 종류와 OS 버전을 선택해 주기만 하면 된다. 나머지는 그냥 대화상자에 나오는 안내문을 읽고 적절하게 설정을 잡아주고 계속 진행을 하면 무리 없이 가상 머신이 준비되어 진다.

가상 머신이 만들어지고 나면 가상 머신 목록에 생성된 가상 머신이 표기가 되는데, 이를 더블클릭 하는 것만으로 머신을 실행시킬 수 있다. 처음 머신을 실행시키게 되면 마치 OS가 아직 설치되지 않은 PC가 부팅 되는 것과 같은 모습을 VirtualBox 창에서 확인 할 수 가 있는데, 이제 여기에 OS를 설치 하기 위해 OS CD를 CD-ROM에 넣거나 가상 드라이브에 OS 가상 이미지파일을 마운트 시켜서 VirtualBox가 설치 디스크를 인식 할 수 있게 해주면, 나머지 OS 설치는 일반 PC에 OS를 설치하는 그것과 동일하게 진행된다.

다만, OS가 설치 된 직후에는 필요한 driver들이 설치가 안되어 화면이 모니터에 꽉 차지 않거나 하는 등의 문제가 발생이 된다. 이를 해결 하기 위해 VitualBox 창 메뉴에서 "장치 > 게스트확장설치" 를 실행하면 해결이 된다.

게스트확장설치 스크린샷

단, Windows XP를 설치한 경우에는 설치가 바로 진행되나, Windows 7 이상을 설치한 경우에는 가상 머신 내에 CD-ROM으로 게스트확장설치 CD-ROM(?)이 마운트만 되기 때문에 이 드라이브를 열어서 "VboxWindowsAdditions.exe" 파일을 실행하여 설치해야 한다.

게스트확장설치 CD-ROM 폴더 열기 스크린샷

그리고 이제 할 일은 구성된 레거시 버전의 가상 머신에 필요한 IE 버전을 설치하는 것. 그렇게 함으로서 레거시 버전의 IE를 구축하는 일이 끝난다. 이제 구축된 가상 머신을 통해 하위 버전의 IE들에 대해 크로스브라우징 테스트를 정확하게 할 수 있게 되었다.

다음 이미지는 필자가 VirtualBox로 구성한 windows – IE 레거시 버전의 가상 머신들의 스크린샷이다. Windows-IE별 가상 머신 구축 현황 스크린샷