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

 
반응형

반응형 웹 디자인(responsive web design) 개발이란 무엇이고, 왜 만들며, 어떤식으로 구현할까?

티스토리 블로그 마크쿼리 반응형웹 스킨으로 교체-장단점과 유의사항

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 컴퓨터에서 아이폰, 아이패드 등의 모바일용 웹브라우저 Apple Safari 사파리에서 돌려보기

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

스마트폰(테블릿)에서 인터넷 접속시 모바일페이지가 아니라 데스크톱 PC화면으로 보는 방법(돌핀브라우저 user agent ua 설정 변경)

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

개발자를 위한 UI/UX 설계 방법론과 개발 가이드라인 완전 정복 강연, 이노유엑스(innoux) 최병호 대표

유비유넷 2103 IT 메가트렌드 Talk 무료 세미나 후기(3D프린터,웨어러블,헬스케어,클라우드 강연)

구글 애드센스 Go Multi-Screen 행아웃 세션-멀티스크린,반응형 웹디자인에 관련돤 세미나 소식

RTFM 시즌3-대한민국 개발자들의 특별한 만남,개발문화 잉여를 만나다에 대한 세미나 강연 후기

스마트폰 개발자, 디자이너의 ui/ux 공부,학습이 꼭 필요할까에 대한 개인적인 생각

티스토리 모바일웹 스킨 ON/OFF 기능과 반응형웹 블로그와 애드센스 광고 만드는 방법

반응형