CMS솔루션마켓, 이온디 - 워드프레스, 라이믹스, 카페24, 그누보드, 엑셀

홈페이지 제작팁

browserstack

2015년 08월 31일

익스플로러 크로스브라우징 테스트 해보기 'browserstack'2

실제로 구글 크롬 추가기능 다운로드를 클릭해보면..위와 같이 구글 크롬 확장프로그램 사이트로 연결이 되구요 'TEST IE'이라는 프로그램을 무료로 받을 수 있습니다. 캡쳐화면을 보면 아시겠지만..이 프로그램은 오직 익스플로러 버전별로 화면이 어떻게 보여지는지 나타내주는 기능만 있습니다..

 

 

 

 

 

익스플로러 크로스브라우징 테스트 해보기 'browserstack'3

TEST IE를 설치하게 되면 구글 크롬 오른쪽 상단부에 눈동자처럼 생긴 아이콘이 생성되구요..클릭해보면 익스플로러 6,7,8,9,10까지의 테스트할 수 있는 메뉴가 나타납니다. 그런데 사실 이 프로그램은 링크기능만 제공하구요. 실제로는 browserstack이라는 사이트에서 크로스브라우징 테스트 기능을 사용할 수 있다는 사실~

 

익스플로러 크로스브라우징 테스트 해보기 'browserstack'4

browserstack이 실행중인 모습이에요~ 컴퓨터 사양에 따라서 약간 딜레이 될 수도 있으니 참고하세요.

 

익스플로러 크로스브라우징 테스트 해보기 'browserstack'5

익스플로러8로 크로스브라우징 테스트를 해보면 로렌과 오뚜막 블로그입니다..흠..사이드바쪽을 보니까 아직 호환성에 문제가 있거나..스킨오류가 있는 것 같네요^^ 사람들이 빨리 오래된 브라우저를 버리고 최신 버전들만 쓰면 이런 염려는 전혀 할 필요도 없을텐데..뭐 지금은 어쩔수 없는 상황.

 

그런데 여기서 알아야하는 사실은 browserstack이라는 사이트를 이용하려면 그게 유료이든 무료이든..회원가입을 해야합니다.

 

익스플로러 크로스브라우징 테스트 해보기 'browserstack'6

위에 보시는 화면이 browserstack의 홈페이지인데요..무료로 테스트를 해보려면 오른쪽에 보이는 빈칸에 이름과 이메일,비번을 넣어줍니다. 가입이 정말 단순하고 쉬워서 좋긴한데..무조건 핫메일을 입력해야 한다는 사실!! 네이버나 다음메일 등 국내메일은 불가하다는 단점이 있군요.. ☞ browserstack 바로가기 

 

이곳에 회원가입후 로그인을 하게되면 아까 보았던 구글 크롬 확장프로그램 TEST IE를 사용하기가 상당히 수월해집니다^^ 그리고 browserstack 홈페이지 자체에도 재미있는 기능들이 많이 있더군요..그 중에서 'screenshots'과 'responsive'라는 서비스가 있는데.. 먼저 'screenshots'의 기능을 살펴보면 아래와 같습니다.

 

익스플로러 크로스브라우징 테스트 해보기 'browserstack'7

바로..300개이상의 브라우저로 크로스브라우징 테스트를 해볼 수 있다는 거죠^^ 윈도우는 물론이고 구글크롬,사파리...심지어.. ios와 안드로이드가 장착된 모바일 기기에서까지 말이죠..자신의 블로그 주소를 빈칸에 넣고.. 한번에 25개의 브라우저로 동시에 실행할 수 있다고 하네요~ 

 

익스플로러 크로스브라우징 테스트 해보기 'browserstack'8

그 중에서 8가지만 테스트로 실행시켜보았습니다.. 꽤 괜찮은 기능이죠?^^ 이렇게 해당 기기와 os별로 화면이 어떻게 보여지는지 스크린샷으로 보여주는 기능입니다. 썸네일로 나타나지만 제대로 보려면 하나하나 클릭해서 봐야하구요~

 

익스플로러 크로스브라우징 테스트 해보기 'browserstack'9

 

그리고 'responsive'라는 기능입니다..screenshots 테스트와 별로 다를건 없지만..특이한건 실제 기기의 외관이 나타나고 그 안에 화면이 어떻게 보여지는지 확인해보는 재미있는 서비스인 것 같네요..여기서 삼성 갤럭시s2로 블로그 페이지를 확인해보니 위와 같이 나옵니다.

 

익스플로러 크로스브라우징 테스트 뿐만아니라..그외 다른 브라우저나 스마트기기에서 어떻게 보여지는지 확인하고 싶다면 시간날때 browserstack을 꼭 이용해보세요^^ 신기하기도 하고 재미있기도 합니다.