다음 트로이(Daum Troy), 반응형웹을 모바일 스마트폰 기종별로 화면을 확인하는 방법의 사이트

자료 iN /IT & 개발

단비스 2014. 4. 7. 07:30

tistory blog를 반응형 웹 스킨으로 교체를 했는데, 이런 경우 다양한 테스트가 필요합니다.

PC컴퓨터야 작업을 하면서 보면 되지만, 요즘 대세인 모바일 스마트폰의 다양한 사이즈에서는 제대로 나오는지, 어떻게 보이는지도 확인을 해야 겠지요?

이외에 IE6, IE7, IE8, IE9 등 호환성에 문제가 있는 오래된 브라우저도 확인을 해봐야 합니다.

이런 경우 개발자나 디자이너가 모든 스마트폰을 일일히 확인할수는 없는 문제인데, 쉽게 해결 확인 할수 있는 사이트가 있더군요~

다음 트로이 사이트 - http://troy.labs.daum.net

daum에서 개발자를 위해서 만든 TROY Responsive Web test라는 페이지인데, 국내에서 많이 사용되는 smartphone 위주로 구성이 되어 있어서, 각 화면에서 어떻게 보여지는지를 볼수 있습니다.

위는 samsung galaxy s4 360*640 화면에서의 제 블로그의 모습니다.

가로모드, 세로모드 전환도 아래의 버튼을 클릭하면 전환이 가능합니다.

직접 찍어본 영상인데, 사용방법은 그리 어렵지 않습니다.

삼성 갤럭시, 갤럭시탭, 애플 아이폰, 아이패드, LG 옵티머스, google nexus, 펜텍 등 다양한 제조사의 화면을 볼수 있습니다.

물론 직접 터치를 하면서 사용하는것과는 조금 다를수도 있으니 그점은 감안하시고, 이건 개발용으로 테스트를 해보시면 좋고, 실제로는 320, 360, 테블릿 정도의 기기에서는 직접 돌려보고, 사용해 보시는게 좋을듯 합니다.

iphone외에 ipad같은 테블릿에서도 어떻게 보이는지도 테스트 해보시는게 좋겠지요~

저같은 경우 위 사이즈에서는 블로그 소개가 좀 잘못나오는데, 이런것은 미디어쿼리를 이용해서 수정을 해주어야 할듯 합니다.

PC 컴퓨터의 다양한 사이즈에서도 확인이 가능한데, 뭐 굳이 이거야 이 화면보다는 직접 브라우저에서 보시면 좋을듯 합니다.

꽤 유용한 사이트로 개발자, 디자이너, 티스토리 반응형 스킨 등을 사용하는 분이라면 즐겨찾기를 해놓고, 필요하실때 사용하시면 좋을듯 합니다.

참고로 PC용 사파리 브라우저에서도 이와 비슷한 방식으로 아이폰, 아이패드에서의 화면을 확인할수 있기는 합니다~

이런걸 보통 브라우저의 user agent(ua)를 변경하는 방식인데, 많은 브라우저에서 제공은 하지만, 위 사이트만한건 없는듯 하네요~