본문 바로가기
Blog Tip/Basic

구형 웹 브라우저에서의 블로그 확인하기(3) Adobe BrowserLab

by 카쿠覺 2013. 1. 9.

구형 웹 브라우저에서의 블로그 확인하기 (3) Adobe BrowserLab

 

마지막으로 소개드릴 웹 호환성을 점검할 수 있는 툴은 어도비사에서 제공하는 BrowserLab입니다. 이전에 설명드렸던 IETesterMS SuperPreview는 사용자의 컴퓨터에 설치하여 이용하는 프로그램이였다면 오늘 소개드릴 BrowserLab는 웹을 기반으로 설치없이 이용할 수 있다는 장점이 있습니다. IETester과 같이 다양한 버전의 익스플로러 버전을 제공하지는 않지만 일반적으로 이용되는 7,8,9를 지원하며, MS SuperPreview처럼 전혀 다른 운영체제인 윈도우와 맥에서 출력되는 화면이 어떻게 다른지도 확인해볼 수 있습니다. 단 하나의 단점이 있다면 설치하여 이용하는 프로그램에 비하여 속도가 느리다는 정도입니다.

 

사실 인터넷 익스플로러만 테스트하고자 한다면 IETester로도 충분합니다. 그러나 다양한 브라우저와 운영체제 기반에서의 화면을 확인해보고자 한다면 MS의 SuperPreview를 이용하시면 됩니다. 하지만 유료 프로그램으로써, 사용기간에 제한이 있다는 단점이 있습니다. 때문에 속도는 다소 느린 경향이 있지만 이 둘의 대안으로써는 어도비의 Browser Lab만한 것이 없습니다. 오늘은 어도비사에서 제공하는 브라우저 랩에 대해서 설명드리겠습니다.

 

Adobe BrowserLab 사용 준비

 

어도비 브라우저랩 메인화면

 

1. https://browserlab.adobe.com/ ]로 이동하여 'Start'버튼을 클릭합니다.

 

어도비 로그인 화면

 

2. 해당 기능을 이용하기 위해서는 회원 가입이 필요합니다. 가입 후 로그인해주시면 됩니다.

 

 

브라우저랩 이용약관 동의 여부 확인 메뉴

3. 로그인 하시면 이용 약관이 나옵니다.

 

Adobe BrowserLab 사용 하기

 

브라우저랩 > 브라우저셋트

 

1. 처음 화면에서 상단의 메뉴 중 'Browser Sets'를 선택, 비교하려는 브라우저를 선택합니다.

  

브라우저랩 > 테스트 (메인화면)

 

2, 테스트 메뉴를 클릭 후 확인하고자 하는 곳의 주소를 입력해줍니다.

 

브라우저랩에서 로딩이 완료되고 서로 비교중인 화면

 

3. 로딩이 완료되면 확인해볼 수 있습니다. 다른 브라우저의 모습은 브라우저 이름 옆에 있는 버튼을 클릭함으로써 다른 브라우저로 전환할 수 있는 메뉴를 확인할 수 있습니다. 확인하고자 하는 브라우저를 선택하시면 해당되는 브라우저에서 출력되는 모습으로 전환되게 됩니다.

 

비교중인 화면2

 

4. 화면 모드도 함께 설정할 수 있습니다. 1-up View는 하나의 화면, 2-up View는 좌/우측으로 분할하여 두개의 화면을 동시에 보여줍니다. Onion Skin모드는 두개의 화면을 하나로 겹쳐서 보여줍니다.

 

얼마전 IETester에서 확인했을 때 카테고리와 상단부분이 IE7,8에서 상당히 다르게 출력(IETester글 참고)되어서 약간의 수정을 거쳤는데 이제는 거의 비슷하게 출력되고 있네요.

 

그 밖에 궁금하신 점은 댓글로 남겨주세요 :D

반응형

댓글