이 글에서는 다양한 브라우저에서 웹 페이지, 웹 사이트를 미리보는 방법에 대해 설명해 보겠습니다.

다양한 브라우저 별 웹 페이지 미리보기의 필요성

티스토리 등의 블로그나 제로보드 등으로 웹 사이트를 운영하면 HTML 코드를 통해 스킨을 수정해야 하는 일이 자주 있습니다. 그런데 모두가 HTML에 정통할 수는 없으므로 HTML 수정 후 표시되는 스킨에 문제가 있을 수 있죠. 중요한 점은 자신의 브라우저로 어떤 웹 페이지를 볼 때와 다른 브라우저로 같은 페이지를 볼 때가 서로 다를 수 있다는 점입니다.

구글의 크롬, 모질라의 파이어폭스 등 비교적 브라우저 엔진이 웹 표준을 준수하는 경우에는 거의 차이가 없지만 인터넷 익스플로러와 같은 경우에는 웹은 HTML 코드로 이루어진 웹 페이지라 해도 실제 표시하는 모습은 다를 수가 있습니다. 제 블로그만 해도 인터넷 익스플로러 8, 9의 경우 애드센스 광고가 본문을 가리지만 다른 브라우저에서는 정상적으로 표시되지요.

그래서 HTML 코드 수정 후에는 반드시 다양한 브라우저에서 해당 웹 페이지가 어떻게 표시되는지 점검해 봐야 합니다.

BrowserShots

여러 브라우저에서의 미리보기 기능을 제공하는 사이트는 의외로 다양합니다. 하지만 다양한 브라우저를 지원하면서도 계정 생성 없이 무료로 사용할 수 있는 곳은 드물죠. 저는 그 중 BrowserShorts라는 사이트를 추천해 드리고 싶습니다. 주소는 아래에 있습니다.
http://browsershots.org/

BrowserShot의 메인 페이지입니다.

중앙에 미리보기를 원하는 웹 주소를 입력하고 그 아래에서 테스트 할 브라우저를 선택하시면 됩니다.

사실 기본값만큼 많은 브라우저에서 모두 테스트할 필요는 없습니다. 그렇게 되면 너무 많은 시간이 걸립니다. select 영역에서 없음을 선택하시면 모든 항목이 비활성화됩니다. 개인적으로는 위와 같은 브라우저만 선택하시면 될 것 같습니다.
물론 각 사이트 방문자 비율에 따라 설정하지는 것이 가장 좋겠죠. 방문자가 사용하는 브라우저 비율은 구글 애널리틱스를 통해 확인하실 수 있습니다.

이제 웹 주소를 입력하시고 Submit 버튼을 클릭하세요.


그럼 천천히 각 브라우저에서 표시되는 해당 웹 페이지의 스크린 샷이 나타납니다.
시간은 현재 BrowserShot 사용자 수에 따라 다릅니다. 여유있게 기다리시는 것이 좋을 것 같습니다.
신고

+ Recent posts