워드프레스 웹사이트 브라우져 호환성 테스트

드캠프(5/26)에서 브라우져 호환성에 대해 문의하신 분이 있어서 구두로 답변을 드렸는데요. 비슷한 궁금증이 있으신 분들에게도 공유하고자 포스팅합니다. 대략적인 내용은 웹브라우져마다 웹사이트를 디스플레이하는 것이 조금씩 다른 것에 대한 대처방안이었습니다. 특히 인터넷 익스플로어(9.0 이하 버젼)와 크롬, 사파리 또는 파이어폭스를 비교하면 그 차이를 쉽게 알 수 있죠.


브라우져 호환성이란

쉽게 말해서 웹사이트가 다양한 브라우져에서 의도한 대로 표시되는 지 여부를 말합니다. 사용자마다 사용하는 브라우져가 다르고 같은 브라우져라고 해도 버젼이 다를 수 있기 때문에 브라우져와 버젼에 따라 웹사이트의 화면 구성이 달라질 수 있습니다. 그래서 브라우져 호환성은 웹사이트를 관리하는 사람들에게는 중요한 요소로 꼽히고 있죠.

워드프레스 브라우져 버젼 업데이트 공지


아래는 워드프레스 3.2에서 발표한 워드프레스 브라우져 호환성 정책

Enhanced Browser Compatibility
  • Drop Internet Explorer 6 support
  • Start End-of-life (EOL) cycle for Internet Explorer 7
  • Browse Happy notify users of out-of-date browser

브라우져 호환성 테스트의 어려움

브라우져 호환성을 테스트하기 위해서는 전세계에서 가장 사용량이 많은 브라우져를 열고 직접 여러분의 웹사이트를 띄워 제대로 화면이 구성되는 지를 확인하는 것이 가장 정확하겠죠. 하지만 이렇게 테스트를 하는 것은 시간이 많이 소비되기도 하지만 메이져 브라우져를 다 열 수 없는 환경일 경우도 많습니다. 예를 들어 mac 사용자는 익스플로어를 열어 보기 쉽지 않죠.

브라우져 호환성 스크린 캡춰 활용

브라우져를 모두 가지고 있지 않아도 아래와 같은 사이트에서 다양한 브라우져의 스크린 캡춰를 활용하면 현재 나의 웹사이트가 어떻게 디스플레이되는 지 확인해볼 수 있습니다.

http://browsershots.org/

각종 브라우져 캡춰를 보고 문제 있는 브라우져가 있다면 그 브라우져를 다운받아 개발자 도구를 사용해서 문제 수정도 할 수 있겠죠.

이단아 IE

여러 브라우져를 테스트 해보는 것이 좋지만 많은 문제가 인터넷 익스플로어에서 발생하기 때문에 익스플로어만 조금 더 쉽게 테스트를 하고 싶다면 파이어폭스의 IE NetRenderer Add on을 사용하면 편리합니다. Add on을 설치 후에 파이어 폭스에서 원하는 웹사이트로 이동하여 해당 화면에서 마우스 오른쪽키를 누르고 “다음으로 묘사”에서 IE버젼을 선택하면 편리하게 IE 각종 버젼을 캡춰해볼 수 있습니다.

아래는 IE NetRenderer를 이용한 HwangC의 IE(인터넷 익스플로어)캡춰화면 입니다.

IE 6 IE 7
IE 8 IE 9
위의 캡춰 화면을 보면 IE 9에서만 제대로 표시가 되고 있는 것을 볼 수 있습니다. 나머지 버젼에서는 구성이 모두 제각각이군요. 이런 경우에는 아래와 같은 안내 문구를 제시하면 방문자가 혼란스럽지 않겠죠.
IE 9이하 버젼을 사용하시는 분들은 IE 9로 업데이트 하시거나 크롬, 사파리 또는 파이어폭스로 보시면 제대로된 페이지를 볼 수 있습니다.

모든 버젼에 맞게 수정을 해야하나요?

가장 기본적으로 브라우져 호환성이 잘 되는 테마를 선택하시는 것이 좋겠죠. 하지만 호환성이 좋은 테마라고 해도 사이트 수정을 할 때 모든 브라우져 호환성을 맞추기는 쉬운 일이 아닙니다.  모든 브라우져에 맞춰 수정할 수 있는 시간과 여력이 있다면 그게 가장 좋은 방법이지만 그렇지 않은 경우(HwangC와 같은)에는 선택과 집중 이 필요할 것같습니다.

브라우져 선택과 집중

메이져 브라우져에서 여러분의 웹사이트가 제대로 표시되도록 하는 것은 매우 중요합니다. 하지만 각 브라우져의 이전 버젼들까지 신경쓰기에는 세상에 할 일들이 참 많습니다.(특히 IE 6,7,8) 그럴 때는  구글웹분석과 같은 툴에서 방문자의 브라우져 특성을 분석해보고 가장 많이 사용되는 브라우져 위주로 선택을 좁혀나갈 수 있겠죠. 또는 방문자에게 현재 웹사이트는 어떤 어떤 브라우져에서 최적화되어있다고 명시 해두는 것도 좋은 방법일 것같습니다.

마치며

전세계에 100개 이상의 브라우져가 있다고 합니다. 그 중에서 많이 사용되는 것은 손에 꼽을 정도죠. 여러분의 웹사이트도 많은 브라우져 중에서 특정 브라우져를 통해서 방문자에게 보여지고 있겠죠. 랜덤한 방문자에게 정확하게 여러분의 웹사이트를 보여주기 위해서 브라우져 호환성 테스트는 꼭 필요한 작업인 것같습니다. 하지만 모든 브라우져의 호환성을 고려하기 어렵다면 방문자 중에서 가장 많이 사용되는 브라우져를 확인하고 그에 맞게 브라우져 호환성을 고려하여 워드프레스 웹사이트를 운영하시는 것이 좋을 것같네요.

[polldaddy poll=6264880]

오늘도 즐거운 블로깅 하세요. :)

2 thoughts on “워드프레스 웹사이트 브라우져 호환성 테스트

  1. happyday says:

    언제나 좋은 자료 감사드립니다!
    익스플로어 9이하 버젼도 관리하면 좋겠지만 다른 브라우져랑 너무 차이가 나네요. 저는 익스9, 크롬, 파이어, 그리고 사파리로 선택과 집중을 하기로 했습니다. ㅎㅎ 그동안 좋은 자료에 종종 댓글도 남겨야하는데 그냥 정보만 보고 가는 경우가 많았네요;; 앞으로는 댓글도 자주 남겨볼게요~!

    Reply
    1. 익명 says:

      많은 브라우져 중에서 특히 익스플로어는 버젼에 따라 차이가 많은 것같아요. 저와 비슷한 선택과 집중을 하셨네요 ㅎㅎ 그럼 또 놀러오시고 댓글 감사드려요!

      Reply
Add Comment Register



이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다.

다음의 HTML 태그와 속성을 사용할 수 있습니다: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">