어도비가 내 블로그를 체크해준다 - Adobe BrowserLab

브라우저 호환성 체크 사이트 Adobe BrowserLab

이 포스팅에서 살펴본 어도비 브라우저랩은 2013년 3월부로 서비스가 종료되었습니다..

브라우저랩 서비스 종료에 따른 어도비의 공지

 

지난 포스팅에서 내 블로그가 다른 브라우저에서 어떻게 보이는지 확인하는  BrowserShot에 대해 살펴봤습니다.

사실 BrowserShot의 존재를 안 것은 꽤 오래됐는데, 최근에 포스팅을 작성하다가 확인해보니 포토샵으로 유명한 어도비(Adobe)에서도 Adobe BrowserLab이란 이름으로 비슷한 서비스를 하고 있네요.

 

Adobe의 작품답게 레이아웃도 더 깔끔하고, 웹 디자이너들이 쓸법한 전문적인 기능들이 추가되어 있습니다. 하지만 저같은 일반 블로거가 블로그 레이아웃에 문제가 없는지 확인하는 용도로도 쓸만하군요.

 

Adobe BrowserLab 사용법을 간단히, 확인해 보겠습니다.

BrowserLab에 접속, 가입

브라우저를 열고 주소창에 Adobe BrowserLab의 주소, http://browserlab.adobe.com을 입력하고 화면이 뜨면 [Star using BrowserLab] 버튼을 클릭합니다.

 

어도비 ID와 비밀 번호를 입력합니다. ID가 없으면, 만들어야 합니다ㅡㅡ;; 사실 저도 뭘 적어넣는 것, 특히나 가입을 위해 적는 것을 꽤나 싫어하는터라 에잇, 관둘까? 생각도 했지만, [Create an Adobe ID] 버튼을 클릭한 후 꾹 참고 가입했습니다.

 

가입하려면 메일주소(ID로 사용됨)와 비밀번호, 이름 등을 입력해야 합니다.

가입 후 발송되는 확인메일을 클릭하여 인증해야 접속할 수 있으므로 메일 주소는 정확히 입력해야 합니다. 

 

어도비에서 온 메일을 열어 링크를 클릭하고^[각주:1] 다시 로그인하면 드디어 브라우저랩 화면이 뜹니다. 상단의 빈 칸에 블로그 주소를 입력하고 엔터키를 누르면, 해당 블로그가 불려옵니다. 기본 값은 익스플로러 6.0, 9.0, 맥 OS기반 사파리 5.1, 크롬 18.0이 로딩됩니다. 

 

첫 화면은 익스플로러 6.0에서의 화면이 뜹니다. 제 블로그는 상단 메뉴바가 깨져서 보이는군요ㅡㅡ;;

다른 브라우저 화면을 비교하려면 [View] 버튼을 클릭하여 [2-up View] 항목을 선택해 봅니다.

 

익스플로러 6.0과 9.0의 비교 삿이 보입니다. 익스플로러 외에 또 다른 브라우저 화면을 보려면 화면 상단의 브라우저 이름을 클릭하여 선택할 수 있습니다.

 

BrowserLab은 Onion Skin 모드를 이용, 두 개의 브라우저 화면을 겹쳐 볼 수 있습니다. 아래 동영상을 재생해보세요.

두 브라우저 화면을 픽셀 단위로 조절해가며 볼 수 있는데요, 픽셀 단위로 수정이 가능한 웹디자이너에게나 유용한 기능처럼 보이기도 하지만, 저같은 사람에게도 꽤 재미있는 작업이네요.

 

기본 브라우저 셋외에도 파이어폭스 11(윈도우/맥 기반)이나 익스플로러 7.0, 8.0 화면도 추가하여 비교해볼 수 있습니다.

주요 브라우저만 더 깔끔하게, 보다 전문적인 작업 가능

앞서 소개했던 BrowserShot 웹사이트가 백여가지가 넘는 다양한 종류, 비주류 브라우저 화면까지 볼 수 있던 것에 비하면 어도비 BrowserLab은 지원 브라우저 수는 제한적이지만 각 화면을 보다 심도있게 비교해 볼 수 있는 것이 장점입니다.

 

종류가 적다고는 하지만 인터넷 익스플로러, 크롬, 사파리, 파이어폭스 등 왠만한 주류(?) 브라우저는 모두 확인할 수 있으므로 가짓 수가 적은게 큰 단점은 아닐 듯 싶습니다.

 

특히 수많은 브라우저의 화면을 불러오려면 한 시간 이상 걸리는 BrowserShot에 비해 어도비 BrowserLab은 화면을 불러오는 시간이 적은 것 역시 장점이라 할 수 있겠네요.

 

관련글

• 2013/05/09 - 티스토리 이미지에 나만의 도장, 워터마크 간편하게 찍는 법
• 2013/04/16 - 인터넷익스플로러에서만 안보이는 티스토리 파비콘, 보이게 설정하는 법
• 2013/04/12 - [컴퓨터 이야기] - 블로그에 올린 사진 색감, 포토샵에서 보던 것과 달랐던 원인은?
• 2013/03/05 - 모빌리스 웹폰트 유료화에 따른 구글 웹폰트의 티스토리 설정법
• 2012/06/22 - 깔끔한 내 블로그, 다른 브라우저에선 깨질 수 있다?
• 2012/06/11 - 내 포스팅의 HTML 소스는 왜 이리 지저분할까?
• 2012/06/10 - 네이버의 티스토리 왕따, 사실이었구나
• 2012/06/09 - 티스토리 이미지와 글 간격을 줄이려면?
• 2012/06/05 - 티스토리 각주 글꼴 색상 설정하려면?

1. 이 과정은 가입 후 한 번만 하면 됩니다. [본문으로]