내 블로그가 인터넷 익스플로러(IE)에선 어떻게 보일까? 여러 버전의 IE 호환성을 한 번에 확인할 수 있는 IETester 0.4.4.
2010. 9. 8. 21:49ㆍIT/Useful Apps
요즘은 인터넷 익스플로러(IE)가 아닌 다른 웹 브라우저로 인터넷을 사용하는 사용자가 늘고 있다. 예전에도 Firefox나 Opera 사용자가 일부 있었지만, 구글 크롬의 등장으로 새로운 웹 브라우저에 대한 관심이 커졌다. 특히 IE보다 빠른 웹 서핑을 즐길 수 있다는 점이 크게 작용했다. 그러나 비IE 브라우저 사용자가 블로그를 운영할 때 주의해야 할 점이 있다. 내가 사용하는 웹 브라우저에선 제대로 표시되는 페이지가 IE에선 표가 찌그러지고 그림과 글의 구성이 망가져서 엉망이 될 수 있다는 점이다. 이는 각 웹 브라우저가 페이지를 표시할 때 사용하는 엔진이 다르기 때문이다. 웹 브라우저의 웹 표준 준수 정도를 판단하는 Acid 검사. 게시물을 확인하면 렌더링 엔진에 따라 같은 웹페이지가 얼마나 차이가 나는지 확인할 수 있다.
특히 IE가 그 차이가 큰데 안타깝게도 웹 표준과 가장 거리가 먼 IE가 웹 브라우저 시장의 1/2 이상을 장악하고 있으므로 내 블로그가 IE에서 어떻게 보이는지 확인하는 것은 거의 필수다. 또 아직 XP 운영 체제와 함께 IE 6을 쓰는 사용자가 꽤 있으니 IE 7, 8뿐 아니라 6에서 어떻게 보이는지도 확인할 필요가 있다. 그런데 내가 사용하는 IE는 8이다. 6이나 7은 없다. 마찬가지로 7을 사용하면 6과 8이 없고 6을 사용하면 7과 8이 없다. 이럴 때 유용한 프로그램이 IETester다. 이름만 봐도 뭘 하는 프로그램인지 한눈에 파악이 되는 IETester는 IE 5.5부터 IE 9버전에서 웹 페이지가 어떻게 보이는지 확인하는 프로그램이다.
IETester를 실행하면 리본 인터페이스를 사용한 프로그램 창이 나타난다. 빨간 네모 속의 노란색 아이콘을 클릭하면 해당 버전의 IE 탭이 실행된다. 5.5, 6, 7, 8버전을 사용할 수 있고 9버전은 비활성화되어 있다. 9버전을 사용하는 방법은 뒤에 다시 알아보자. 기본 IE는 현재 시스템에 설치된 버전의 IE를 의미하고 여러 IE는 한 번에 여러 버전의 IE 탭을 동시에 여는 것이다.
실행된 탭에 주소를 입력하고 엔터를 누르면 해당 버전의 IE 엔진으로 웹 페이지를 표시한다. 위 그림은 IE 5.5로 내 블로그에 접속한 모습인데 그림에서는 크게 표시 나지 않지만, 실제는 스킨이 많이 깨져서 표시된다.
2. IETester에서 IE9 사용하기
웹 브라우저의 웹 표준 준수 정도를 판단하는 Acid 검사. 게시물에서 새로 나올 IE 9는 Acid3 검사에서 95까지 끌어올렸다고 했는데 진짜인지 IETester를 이용해서 확인해 보기로 했다. 그러려면 먼저 비활성화된 IE9 단추를 활성화해야 한다. 참고로 IE9는 윈도 Vista SP2 이상, 윈도 7에서만 사용할 수 있다. 일단 IE 9 Test Drive에 접속해서 Install the Preview!를 클릭한다. 그다음 iepreview.msi 파일 내려받기 창이 나오면 [실행]을 클릭한다. 설치 파일이 실행되면 설명에 따라 설치하고 시스템을 다시 시작해야 한다고 하면 다시 시작한다.
iepreview.msi를 설치하고 컴퓨터를 다시 시작했으면 Windows 탐색기 창을 두 개 실행해서 하나는 C:\Program Files\Core Services\IETester\ie9로, 다른 하나는 C:\Program Files\Internet Explorer Platform Preview\로 이동한다. 만약 IETester를 기본 위치가 아닌 다른 위치에 설치했다면 자신이 IETester를 설치한 폴더 속의 ie9 폴더로 이동한다. 또 64비트 윈도를 사용한다면 C:\Program Files (x86)\Core Services\IETester\ie9와 C:\Program Files (x86)\Internet Explorer Platform Preview\가 될 것이다.
이제 C:\Program Files\Internet Explorer Platform Preview\의 iepreview.exe.local 폴더를 C:\Program Files\Core Services\IETester\ie9로 복사한다. 그리고 iepreview.exe.local을 ietester.ie9.exe.local로 이름을 바꾼다. 이것으로 준비는 끝이다. 이제 다시 IETester를 실행하면 IE9 단추가 활성화된다.
그러나 화면에 표시된 내용은 ie9가 아닌 ie8의 결과다. 아마 IETester에서 IE9 단추를 활성화해도 제대로 적용되진 않는 것 같다. 아니면 내가 사용하는 64비트 운영 체제에서만 지원하지 않는 건지도 모른다.
그냥 아까 설치한 IE9 Preview를 실행해서 확인해보자. 바탕화면의 Internet Explorer Platform Preview 아이콘을 더블클릭한 다음 Ctrl+O를 누르고 http://acid3.acidtests.org/를 입력하고 엔터를 누른다. 아, 이제 제대로 표시된다. 95점이 맞다. 게다가 소요 시간도 2초 대로 짧아졌다.
3. 각 버전의 IE에서 내 블로그 확인하기
IETester에서 여러IE를 누르면 한 번에 여러 버전의 IE로 같은 주소를 열 수 있다. 사용할 IE 버전을 먼저 선택하고 아래에 확인할 웹사이트 주소를 입력하고 확인을 누르면 각 버전의 IE로 페이지가 표시된다.
01234
IE 5.5~7까지는 내 블로그가 제대로 표시되지 않는다. IE8에서야 비로소 제대로 표시된다. 그러나 IE9로 가니 영어 웹폰트는 제대로 표시되지만, 한글 웹폰트는 적용되지 않았다. 아직 완성된 것이 아니니 더 완벽한 모습으로 개선되어 나오리라 기대한다.
그런데 글을 다 쓰고 보니 Internet Explorer Platform Preview만 설치해도 IE5, 7, 8, 9에서의 페이지 호환성을 확인할 수 있다는 사실이 문득 떠오른다. IE6은 지원하지 않지만, 대신 꽤 잘 갖춰진 개발자 도구(F12)를 제공한다.
어쨌든 IETester와 Internet Explorer Platform Preview를 사용하면 웹 사이트가 여러 버전의 IE에서 어떻게 표시되는지 확인할 수 있다. 혹시 내 블로그가 IE에서 어떻게 표시되는지 궁금하다면 IETester나 IE Platform Preview로 한번 확인해보자.
IETester를 실행하면 리본 인터페이스를 사용한 프로그램 창이 나타난다. 빨간 네모 속의 노란색 아이콘을 클릭하면 해당 버전의 IE 탭이 실행된다. 5.5, 6, 7, 8버전을 사용할 수 있고 9버전은 비활성화되어 있다. 9버전을 사용하는 방법은 뒤에 다시 알아보자. 기본 IE는 현재 시스템에 설치된 버전의 IE를 의미하고 여러 IE는 한 번에 여러 버전의 IE 탭을 동시에 여는 것이다.
실행된 탭에 주소를 입력하고 엔터를 누르면 해당 버전의 IE 엔진으로 웹 페이지를 표시한다. 위 그림은 IE 5.5로 내 블로그에 접속한 모습인데 그림에서는 크게 표시 나지 않지만, 실제는 스킨이 많이 깨져서 표시된다.
그러나 화면에 표시된 내용은 ie9가 아닌 ie8의 결과다. 아마 IETester에서 IE9 단추를 활성화해도 제대로 적용되진 않는 것 같다. 아니면 내가 사용하는 64비트 운영 체제에서만 지원하지 않는 건지도 모른다. 
그냥 아까 설치한 IE9 Preview를 실행해서 확인해보자. 바탕화면의 Internet Explorer Platform Preview 아이콘을 더블클릭한 다음 Ctrl+O를 누르고 http://acid3.acidtests.org/를 입력하고 엔터를 누른다. 아, 이제 제대로 표시된다. 95점이 맞다. 게다가 소요 시간도 2초 대로 짧아졌다.
IETester에서 여러IE를 누르면 한 번에 여러 버전의 IE로 같은 주소를 열 수 있다. 사용할 IE 버전을 먼저 선택하고 아래에 확인할 웹사이트 주소를 입력하고 확인을 누르면 각 버전의 IE로 페이지가 표시된다. 
그런데 글을 다 쓰고 보니 Internet Explorer Platform Preview만 설치해도 IE5, 7, 8, 9에서의 페이지 호환성을 확인할 수 있다는 사실이 문득 떠오른다. IE6은 지원하지 않지만, 대신 꽤 잘 갖춰진 개발자 도구(F12)를 제공한다. 
