반응형웹 모바일 화면 테스트, 다음 트로이 랩

얼마 전 responsinator 에 대한 글을 적어드렸는데요, 일부 IE 버전에서 나타나는 오류와 텍스트 크기의 문제로 모바일/테블릿 기기에서의 테스트가 어려웠다고 보여집니다.

구글 크롬 애드인 확장프로그램도 사용할 만 하지만 이보다 더 나은 해상도와 사실감으로 표시해주는 곳이 있어 알려드립니다.

바로 다음 TROY 랩 인데요, 다음 커뮤니케이션 웹표준 기술팀인 다룸에서 만들어낸 것으로 개발자는 물론 디자이너나 블로거들에게 꼭 필요한 서비스라고 생각됩니다.

최근 많은 블로거분들이 모바일 트렌드에 발맞추어 반응형 웹으로 전환하고 계시죠?

두배 이상의 광고 수익을 챙기시는 분들도 계시고, 이전 페이지의 유입 경로가 많고 모바일 유입이 적은 관계로 비슷한 수익 또는 IE7/IE8 버전의 유입량이 많아 오히려 수익이 감소한 분도 계실 것입니다.

IE7/IE8 버전으로 유입될 경우에는 visible 클래스를 제거하고 반응형으로만 달아주시고 화면 해상도에 맞게 광고 크기만 미디어쿼리로 잘 조절해 주시면 IE7/IE8 화면에서도 정상적으로 노출되니 수익이 감소하는 경우는 없앨 수 있으니, 걱정하지 마시고 반응형 웹으로 전환해 보시기 바랍니다.

다음 트로이 페이지에서는 기본 Custom 사이즈 해상도를 정하여 웹페이지 화면을 볼 수 있는데요, 수치를 입력함으로써 나타나는 화면에 따른 화면을 실시간으로 확인할 수 있겠습니다.

또한 좌측 메뉴에서는 삼성 기기, 애플 기기, LG 기기, 펜텍 기기, PC 화면을 구분하여 각 제품 해상도별로 기기의 사이즈에 맞추어 확인할 수 있으며, 기기의 종류는 계속해서 업데이트되고 있습니다.

우선 커스텀 사이즈로 사용자 마음대로 가로/세로 사이즈를 조절할 수 있는 화면입니다.

픽셀 부분에 원하는 해상도의 수치를 입력하시면 설정된 해상도로 자동으로 브라우징 됩니다.

.

아래는 삼성 스마트폰 중 갤럭시S4 기기를 통한 화면으로 기본 세로 화면과 회전 버튼을 눌러 옆으로 눕혔을 경우 가로 화면을 각각 확인할 수 있겠습니다.

 

LG 기기는 물론 애플 아이폰 및 아이패드 등 보편적으로 사용되는 거의 모든 기기 해상도를 지원하고 있으니 한번씩 확인해 보시기 바랍니다.

아래는 애플 아이폰4 해상도에서 나타나는 화면과, 일반 PC 컴퓨터 1024x768 스크린 해상도에서 보여지는 화면이 되겠습니다.

 

PC 해상도에서는 skeleton 스킨의 최근글 썸네일 항목이 보여지지 않는군요... 일반 PC에서 접속할 경우 정상적으로 보여지니 신경 꺼둘렵니다...

자바, 안드로이드, 애플 iOS 등의 개발에 있어 반드시 확인이 필요한 단계이며, 모바일 플랫폼 개발과 함께 디자인 부분에 있어 없어서는 안될 다음 트로이 랩을 꼭 활용해 보시기 바랍니다.

Daum TROY Labs 페이지 바로가기

직접 기기로 접속해서 테스트 해보거나 화면 스크린샷 요청 등의 귀차니즘에서 해방되시기를 기원합니다.

-----

방문 감사합니다 (__)