내 블로그가 인터넷 익스플로러(IE)에선 어떻게 보일까? 여러 버전의 IE 호환성을 한 번에 확인할 수 있는 IETester 0.4.4.

2010. 9. 8. 21:49IT/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버전에서 웹 페이지가 어떻게 보이는지 확인하는 프로그램이다.

  • 사용권        :   전체 무료
  • 버전           :   0.4.4
  • 설치 크기    :   73 MB 이하
  • 한글 지원    :   공식 지원
  • 구동 환경    :   Windows XP/Vista/7
  • 특징           :   IE 5.5 ~ 9에서 웹 페이지 호환성 확인


1. IETester 살펴보기



 IETester를 실행하면 리본 인터페이스를 사용한 프로그램 창이 나타난다. 빨간 네모 속의 노란색 아이콘을 클릭하면 해당 버전의 IE 탭이 실행된다. 5.5, 6, 7, 8버전을 사용할 수 있고 9버전은 비활성화되어 있다. 9버전을 사용하는 방법은 뒤에 다시 알아보자. 기본 IE는 현재 시스템에 설치된 버전의 IE를 의미하고 여러 IE는 한 번에 여러 버전의 IE 탭을 동시에 여는 것이다.

 실행된 탭에 주소를 입력하고 엔터를 누르면 해당 버전의 IE 엔진으로 웹 페이지를 표시한다. 위 그림은 IE 5.5로 내 블로그에 접속한 모습인데 그림에서는 크게 표시 나지 않지만, 실제는 스킨이 많이 깨져서 표시된다.


2. IETester에서 IE9 사용하기



IE9 TestDrive설치
 웹 브라우저의 웹 표준 준수 정도를 판단하는 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.localietester.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로 한번 확인해보자.

  • 프로필사진
    알 수 없는 사용자2010.09.08 23:26

    유용한 자료네요~ I.E가 얼마나 부실한가를 여지없이 보여주는 프로그램이네요... ㅎㅎ 오죽하면 검사를 따로 할 정도라니... ㅋㅋ
    64비트가 나온지 꽤 지난 것 같은데도 저 역시 32/64비트 둘다 가능한 데스크톱이지만요... 저는 32비트로 사용중입니다... 64비트가 더 좋은지 아닌지는 잘 모르겠으나, 지원하는 프로그램의 한계가 있으니, 32비트로 맘 편히 ㅋㅋ... 물론 저의 귀차니즘도 한몫을 했지요...~

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2010.09.08 23:44 신고

      64비트나 32비트나 그게 그겁니다. 쓰다보면 그냥 똑같더라구요. 64비트 전용 프로그램은 확실히 빠르지만, 일반 프로그램은 뭐.. 프로그램 호환성은 생각보다 좋습니다. 전 64비트라 못쓰는 프로그램은 예전에 와이브로 쓸 때 와이브로 런처밖에 없었습니다 ㅎㅎ IE9의 선전을 기대해 봐야죠^^

  • 프로필사진
    Favicon of https://mydascap.tistory.com BlogIcon 마이다스의세상2010.09.09 11:44 신고

    여러버전에서 꼭 확인해 봐야겠더라구요... 제 블로그도 IE에서 보면 이상하던데... 버전 8로 바꾸었더니 괜찮네요.. ㅎㅎ
    파폭으로만 블로깅 해서... 정작 저도 몰랐거든요... 사이드바가 안보이는지 ㅎㅎㅎ

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2010.09.09 23:41 신고

      제 블로그도 파폭, 크롬, 오페라, 사파리, IE8에선 정상인데 IE 5, 6, 7에선 스킨이 제대로 표시가 안되더라구요. 한번쯤 확인해야 할 것 같습니다~
      이걸 IE를 탓해야 할지 정상적인 태그를 욕해야 할지 ㅎㅎ

  • 프로필사진
    Favicon of https://wooubistudio.tistory.com BlogIcon wooubi2010.09.09 18:03 신고

    좋은 정보 감사합니다.
    와 ~~ 이런것도 있었네요~ ^^*

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2010.09.09 23:42 신고

      예전부터 올리려다 귀찮아서 미루고 있다가 오랜만에 올리게 됐습니다^^ G팡이님도 스킨 바꾸거나 할 때 한번씩 확인해보세요~

  • 프로필사진
    Favicon of https://wordmaker.tistory.com BlogIcon 연어술사2010.09.10 01:47 신고

    블로그 문제때 정말 도움 많이 받았습니다. 정말 감사했습니다.

    지금은 수정을 통해서 복구된 것 같습니다.^^

    도움 감사합니다.

    그때 조언 주셨던 방법이 이 프로그램을 통해서 였나보네요~^^

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2010.09.10 11:55 신고

      네, 이녀석으로 확인했습니다~ 잘 해결되었다니 다행입니다^^ 스킨 바꿀 땐 한번씩 확인해봐야 겠더라구요;;
      지금 제 스킨도 IE6이나 7로 접속하면 약간 깨지는데 귀찮아서 수정 안하고 버티고 있습니다^^;;;;;

  • 프로필사진
    알 수 없는 사용자2010.09.10 03:20

    좋은 프로그램 소개 감사합니다. 브라우저마다 다르니까 참 골치 아파요 ㅠㅠ
    글자 크기도 다 다르게 나오고 참 귀찮더라구요~
    예전엔 IE를 썼었는데 블로그 시작하고나서 파폭으로 전환해버렸어요.
    근데 제가 아무리 파폭을 써봤자 많은 분들이 IE를 쓰니까 ㅋㅋ;

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2010.09.10 11:55 신고

      네 저도 IE가 아닌 다른 브라우저를 사용하지만, IE 사용자가 아직은 압도적으로 많다 보니 무시할 수가 없더라구요.
      IE9에서 많은 향상이 있다고 하니 기다려 봐야겠습니다^^

  • 프로필사진
    Favicon of http://boksuni.tistory.com BlogIcon 복돌이^^2010.09.10 11:21

    오~~ 이거 웹개발자들에게는 참 유용할듯 하네요..^^

    행복한 하루 되세요

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2010.09.10 11:58 신고

      그분들에겐 아마 필수일듯 합니다^^ 파워블로거 분들은 모든 브라우저 호환성을 다 확인하시는 분들도 계시더라구요~

  • 프로필사진
    Favicon of https://happy-box.tistory.com BlogIcon 건강정보2010.09.10 12:54 신고

    이거 궁금했는데 지금 당장 해봐야겠는어요..^^

  • 프로필사진
    알 수 없는 사용자2010.09.10 13:23

    안녕하세요.
    첫방문인듯 하네요 ^^
    유용한 프로그램 소개 감사합니다.
    좋은 하루 보내세요~ ^^

  • 프로필사진
    Favicon of https://min-blog.tistory.com BlogIcon 백전백승2010.09.10 16:27 신고

    관련있을 것 같아 IE Tester에 조금 관련있을 것 같아 저의 글을 보냅니다.

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2010.09.10 20:31 신고

      앗, 글 봤는데 저도 엮인글 보내고 싶지만, 백전백승님 글은 워낙 방대한 내용을 다룬 글이라 왠지 보내면 안될것 같네요^^;;;;

    • 프로필사진
      Favicon of https://min-blog.tistory.com BlogIcon 백전백승2010.09.10 22:31 신고

      저는 IE Tester에 대해 깊게 다루지 못해서 circlash님이 트랙백을 안 보내주시면 저 화낼 겁니다.^^

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2010.09.10 22:43 신고

      호곡;; 깜짝 놀래서 바로 보냈습니다^_^
      편안한 밤 되세요~

  • 프로필사진
    Favicon of http://yourwebsite.com BlogIcon 이니나2011.10.08 14:18

    좋은 정보 감사합니다 ㅎㅎ