깔끔한 내 블로그, 다른 브라우저에선 깨질 수 있다?

내 블로그를 다른 컴퓨터에서 본 적이 있습니까?

어딜 가든 스마트 폰, 노트북, 아이패드 중 하나는 들고 다니는 터라, 다른 컴퓨터에서 내 블로그를 볼 기회가 거의 없습니다.

늘 쓰는 브라우저만 쓰는 셈이며, 컴퓨터에서 보는 화면은 인터넷익스플로러 8과 구글 크롬으로 보는 것이 전부입니다.

 

그런데 얼마전 다른 브라우저(익스플로러 6이 깔린, 윈도우 XP 기반 컴퓨터)와 다른 기종 (맥)에서 제 블로그를 보고선 깜짝 놀랐습니다.

익히 봐오던 블로그 레이아웃이 아니고 , 형태 및 폰트 속성이 와장창 깨져 보였기 때문입니다.

 

브라우저를 여러 개 깔아놓고 쓸 일이 없었기에 이런 사실을 모른 채 오랫동안 지내왔던 건데, 급히 티스토리 관리자의 HTML 소스를 뒤져보니 원인은 기본 문법을 제대로 지키지 않은데 있었습니다.

 

뭐, 익스플로러 6가 여러 이유로 인해 퇴출 대상이지만, 이번 경우는 내 블로그의 HTML 문법이 잘못된 것이었고 배치가 깨지는 사실조차 몰랐던게 문제의 핵심이었습니다.

내 블로그를 다른 브라우저에서 확인해 보자

블로그를 운영하다보면 스킨을 바꾸거나 버튼, 위젯의 배치를 바꾸는 경우가 종종 있는데요, 이렇게 바꾼 결과물은 대부분 현재 사용중인 브라우저에서만 확인하게 됩니다.

이러다보니 간혹 다른 브라우저에서 제대로 표시되지 않는 것을 모른채 지내게 됩니다.

 

물론 여러 브라우저를 함께 사용하고 자주 확인한다면 문제될 것은 없겠지만 실제 그러기가 쉽지 않죠.

 

이럴 때 내 블로그가 운영체제/ 브라우저 종류/ 브라우저 버전 별로 어떻게 보이는지 확인해 볼 수 있는 사이트가 있습니다. 바로 BrowserShots 입니다.

브라우저샷 웹사이트에 접속한 화면입니다. 굉장히 많은 항목이 빽빽하게 나열되어 있지만, 화면은 세 영역으로 나눌 수 있습니다.

 

 

1번 영역은 내 블로그 주소를 입력하는 곳입니다. 주소 입력후 [Submit] 버튼을 누르면 체크가 시작됩니다.

 

2번 영역은 확인할 브라우저를 선택하는 곳입니다. 운영체제별, 브라우저별, 버전별로 꽤 많은 브라우저가 있는데요, 대단히 많은 체크 표시가 있지만 되도록 필요한 항목만 선택하는 것이 좋습니다. 저 상태로 체크를 실행할 경우, 결과 화면을 보는데 한 시간 이상 걸리게 됩니다.

 

3번 영역은 브라우저 조건을 설정하는 곳입니다. 전체 선택, 전체 선택 해제, 운영체제 별, 화면 크기, 색상 수, 자바스크립트, 플래시 사용 여부 등 조건을 설정할 수 있는데요, 저는 [없음] 항목을 클릭하여 선택을 모두 지운뒤, 원하는 브라우저만 골라 선택하곤 합니다.

 

블로그 주소를 입력하고 브라우저를 선택 후 [Submit] 버튼을 클릭하면 화면이 바뀌면서 스크린 샷을 뜨기 시작합니다. 화면이 바뀌고 아무런 결과가 나오지 않는다해서 잘못된 것은 아닙니다. 실제 여러 브라우저들이 입력한 블로그 주소로 접속하여 스크린 샷을 뜨기 때문에 시간이 꽤 오래 걸립니다. 첫 화면이 나오기까지 최소 3~4분 이상 걸립니다. 잠시 기다려주세요.

 

붉게 체크한 부분에 현재 상태가 표시됩니다.

 

Submitted 4분 ago는 스크린 샷을 요구한지 4분이 지났으며,

Queue Estimate: 항목은 완료까지 예상시간이며,

93 browser selected, 2starting, 33 uploaded는 앞서 93개의 브라우저를 선택했고 이 중 33개가 완료됐다는 뜻입니다.

 

작은 썸네일을 클릭하면 해당 화면이 크게 표시되며, 실제 스크린 샷을 확인할 수 있게 됩니다.

하나씩 열어 봐도 되지만 오른쪽 상단의 [Download All] 항목을 클릭하면 스크린 샷을 압축하여 다운로드할 수 있습니다.

 

 

포스팅 초반에 필요한 브라우저만 선택하라고 했는데요, 기본 옵션 그대로 시작했다면 결과물을 보기까지 시간이 꽤 오래 걸립니다.

그냥 브라우저를 띄워 놓으면 화면이 새로고침 되면서 진행 상황이 보이긴하지만 브라우저를 닫더라도 스크린 샷을 뜨는 작업은 계속 진행됩니다.

 

브라우저샷 웹사이트에 다시 접속해 같은 블로그 주소를 입력하면 진행 상황을 확인할 수 있는데, 스크린 샷 작업이 진행중이라면 주소 입력 창 아래에 현재 작업이 진행 중이라는 알림이 뜹니다. 클릭하면 진행 중인 작업이 다시 열립니다.^[각주:1]

 

 

결과물 썸네일 중 하나를 클릭해 본 화면입니다. 영어권 컴퓨터에서 본 화면이다보니, 한글 폰트가 제대로 표시되지 않고 박스형태로 깨져 보이기도 하는데, 폰트가 깨지는 부분은 크게 개의치말고 레이아웃이 깨지는 부분이 없는지를 주로 살펴보는게 도움이 되겠습니다.

 

화면 오른쪽에 체크한 영역은 운영체제별, 브라우저별로 볼 수 있도록 하는 버튼입니다. 워낙 많은 브라우저를 지원하다보니 이와 같이 분류 버튼을 클릭해 보는 것이 여러모로 편리합니다.

 

브라우저 샷에 접속해보면, 브라우저 종류가 무척 많다는 점도 새롭습니다.

고작해야 익스플로러, 크롬, 파이어폭스, 오페라, 넷스케이프 정도만 알고 있었는데, 윈도우 용으로 Avant, Flock, SeaMonkey 등 낯선 브라우저도 있네요.

 

굳이 듣보잡 브라우저까지 챙길 여유는 없지만 내가 아는게 전부가 아니구나, 하는 생각을 다시 한 번 하게 됩니다.

 

관련글

• 2013/04/16 - 인터넷익스플로러에서만 안보이는 티스토리 파비콘, 보이게 설정하는 법
• 2013/04/12 - 블로그에 올린 사진 색감, 포토샵에서 보던 것과 달랐던 원인은?
• 2013/03/20 - 닫아버린 브라우저의 탭. 다시 열고 싶을 때 쓰는 단축키는?
• 2013/03/05 - 모빌리스 웹폰트 유료화에 따른 구글 웹폰트의 티스토리 설정법
• 2012/06/25 - 어도비가 내 블로그를 체크해준다 - Adobe BrowserLab
• 2012/06/06 - 윈도우 3.1이 어땠는지 궁금하세요?
• 2010/09/17 - 잠시 써본 인터넷 익스플로러 9 베타, 역시 베타 수준
• 2010/07/12 - 짜증나는 플래시 광고 사운드 차단하기

1. 만일 스크린 샷 작업이 끝났다면, 결과물이 남아 있다는 메시지가 뜹니다. 결과물은 대략 하루정도 보관되는 듯 합니다. [본문으로]