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

최근에 웹반응형 스킨을 사용하면서 부터...블로그 페이지가 각종 인터넷 브라우저에서 어떻게 보이느냐에 관심을 많이 갖고 있습니다.

 

구글 크롬이나 사파리,파이어폭스 등을 제외하고 거의 대부분의 사람들이 MS익스플로러를 사용중인데 현재까지도 익스플로러 7,8 버전을 사용중인 분들이 상당히 많습니다.

 

 

그래서 웹반응형 스킨을 사용하고자 한다면 이 부분은 어느 정도 염두해두고 사용해야겠지요.

 

특정 브라우저를 컴퓨터에 설치하지 않고도 구글 크롬이나 익스플로러 창에서 그 특정 브라우저를 통해서 블로그 페이지가 어떻게 보이는지 알기 위해서는 그에 맞는 프로그램을 설치하거나..어떤 사이트를 방문해야합니다~

 

브라우저별로 화면테스트를 해볼 수 있는 사이트나 프로그램은 다양하겠지만..이번 시간에는 익스플로러 modern.IE라는 사이트에서 '크로스브라우징 테스트'를 해볼께요~

 

그렇게 유명하지는 않아서 이런 곳이 있다는 사실조차 모르는 분들이 많을듯^^

 

이 사이트에 접속한다음 '간소화된 크로스 브라우저 테스트'라는 글자 바로 밑에 '세부정보 얻기'를 눌러주면 위와 같이 숨겨져 있던 화면이 나타나는데..여기서 크롬이나 화이어폭스 추가기능을 다운로드할 수 있습니다.

 

실제로 구글 크롬 추가기능 다운로드를 클릭해보면..위와 같이 구글 크롬 확장프로그램 사이트로 연결이 되구요 'TEST IE'이라는 프로그램을 무료로 받을 수 있습니다.

 

캡쳐화면을 보면 아시겠지만..이 프로그램은 오직 익스플로러 버전별로 화면이 어떻게 보여지는지 나타내주는 기능만 있습니다..

 

TEST IE를 설치하게 되면 구글 크롬 오른쪽 상단부에 눈동자처럼 생긴 아이콘이 생성되구요..클릭해보면 익스플로러 6,7,8,9,10까지의 테스트할 수 있는 메뉴가 나타납니다.

 

그런데 사실 이 프로그램은 링크기능만 제공하구요. 실제로는 browserstack이라는 사이트에서 크로스브라우징 테스트 기능을 사용할 수 있다는 사실~

 

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

 

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

 

 

익스플로러8로 크로스브라우징 테스트를 해보면 로렌과 오뚜막 블로그입니다..흠..사이드바쪽을 보니까 아직 호환성에 문제가 있거나..스킨오류가 있는 것 같네요^^

 

사람들이 빨리 오래된 브라우저를 버리고 최신 버전들만 쓰면 이런 염려는 전혀 할 필요도 없을텐데..뭐 지금은 어쩔수 없는 상황.

 

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

 

위에 보시는 화면이 browserstack의 홈페이지인데요..무료로 테스트를 해보려면 오른쪽에 보이는 빈칸에 이름과 이메일,비번을 넣어줍니다.

 

가입이 정말 단순하고 쉬워서 좋긴한데..무조건 핫메일을 입력해야 한다는 사실!! 네이버나 다음메일 등 국내메일은 불가하다는 단점이 있군요.

 

이곳에 회원가입후 로그인을 하게되면 아까 보았던 구글 크롬 확장프로그램 TEST IE를 사용하기가 상당히 수월해집니다^^

 

그리고 browserstack 홈페이지 자체에도 재미있는 기능들이 많이 있더군요..그 중에서 'screenshots'과 'responsive'라는 서비스가 있는데.. 먼저 'screenshots'의 기능을 살펴보면 아래와 같습니다.

 

바로..300개이상의 브라우저로 크로스브라우징 테스트를 해볼 수 있다는 거죠^^

 

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

 

그 중에서 8가지만 테스트로 실행시켜보았습니다.. 꽤 괜찮은 기능이죠?^^

 

이렇게 해당 기기와 os별로 화면이 어떻게 보여지는지 스크린샷으로 보여주는 기능입니다. 썸네일로 나타나지만 제대로 보려면 하나하나 클릭해서 봐야하구요~

 

그리고 'responsive'라는 기능입니다..

 

screenshots 테스트와 별로 다를건 없지만..특이한건 실제 기기의 외관이 나타나고 그 안에 화면이 어떻게 보여지는지 확인해보는 재미있는 서비스인 것 같네요..

 

여기서 삼성 갤럭시s2로 블로그 페이지를 확인해보니 위와 같이 나옵니다.

 

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

 

✅익스플로러 로그인 메시지 '암호를 저장하시겠습니까' 차단방법

익스플로러 로그인 메시지 '암호를 저장하시겠습니까' 차단방법

✅인터넷 익스플로러 삭제~방법은 딱 하나!

인터넷 익스플로러 삭제~방법은 딱 하나!

✅익스플로러 버전확인하는 방법과 구글 크롬 버전확인

익스플로러 버전확인하는 방법과 구글 크롬 버전확인

✅익스플로러9(Explorer9) 다운로드 경로 변경하기

익스플로러9(Explorer9) 다운로드 경로 변경하기