손쉬운 웹사이트 해상도 테스트 - Viewport Resizer

혹시 웹사이트가 스마트폰에서 어떻게 보일지 궁금하게 생각해 보신적이 있습니까? 웹사이트 개발자의 경우 자신이 만든 웹사이트가 다양한 화면 크기에서 어떤 형태로 표시될지 확인하기 위해 다양한 테스트를 진행하게 됩니다. 이 때 이번 글에서 소개할 웹 기반 도구인 Viewport Resizer를 사용하면 좀 더 손쉽게 해상도 테스트 작업을 수행할 수 있습니다.

Viewport Resizer는 손쉽게 사용할 수 있는 웹 브라우저 유틸리티로 원하는 웹사이트를 서로 다른 다양한 해상도에서 볼 수 있도록 해줍니다. 유틸리티 자체가 북마크릿(Bookmarklet) 형태로 제공되기 때문에 거의 모든 최신 웹 브라우저에서 사용할 수 있습니다. 특정 웹사이트를 연 상태에서 Viewport Resizer의 북마크릿을 클릭하면 현재 보고 있는 웹사이트 상단에 해상도 종류를 선택할 수 있는 메뉴와 버튼이 나타나게 됩니다. 여기에서 원하는 해상도나 기기를 선택하면 신속하게 현재 보고 있는 웹사이트를 앞서 골랐던 화면 크기로 볼 수 있게 됩니다.

지정된 화면 크기 외에 ‘사용자 정의 크기(Customize)’ 옵션을 통해 원하는 해상도로 알맞게 변경해서 웹사이트를 확인해 볼 수도 있습니다.

특징

* 사용자 친화적인 웹 브라우저 도구

* 북마크릿의 형태로 제공됨

* 특정 웹사이트를 다양한 화면 해상도에서 볼 수 있도록 해줌

* 아이폰5, 아이폰, 태블릿과 같이 미리 지정된 해상도와 함께 사용자가 직접 해상도를 지정할 수 있는 옵션을 제공함

공식 홈페이지

http://lab.maltewassermann.com/viewport-resizer/

웹사이트로 들어가신 다음, 화면 중앙에 표시된 “CLICK OR BOOKMARK” 버튼을 웹 브라우저 화면 상단의 도구 모음 부분으로 드래그해 놓으시면 북마크릿 형태로 사용할 수 있습니다.