어느덧 데스크톱으로부터의 웹 접근보다 스마트폰이나 패드류 등 모바일 장비로부터의 웹 접근이 늘어난 요즘, Responsive Design(반응형 디자인)이 한 추세가 되었다.
기존 모바일용 웹페이지는 작은 사이즈에 맞춰 별도로 제작하곤 하였는데,
최근에는 하나의 웹페이지 디자인을 다양한 사이즈에 맞게 보여주는 방식을 모색하게 되었는데, 그 결과로 등장한 것이 Responsize Design이라 하겠다.
웹 디자인 및 웹 개발을 하는 입장에서, 다양한 스크린 사이즈에 모두 대응하는 페이지를 작성하기란 그다지 용이하지 않아서, 자신이 개발하고 있는 웹 페이지가 다양한 스크린 사이즈에 잘 대응하고 있는지 일일히 확인해야 하는 상황에 놓이게 된다.
물론 다양한 스크린 사이즈를 가진 다양한 기기에서 테스트를 해보는 것이 가장 정확할 수는 있으나, 해당 기기들을 모두 보유한다는 것이 손쉬운 일이 아닐 뿐더러, 그렇다 하더라도 수정사항이 발생했을 때마다 일일이 개별 기기들에서 확인을 해본다는 것도 여간 번거로운 일이 아니다.
지인을 통해 알게 된 Responsive Design Testing Tool 하나를 소개한다. Viewport Resizer라는 도구다.
- Viewport Resizer : http://lab.maltewassermann.com/viewport-resizer/
북마클릿 형태로 되어 있어, 별도의 설치과정 없이 북마클릿을 드래그하여 살포시 북마크 바에 얹어주면 되겠다.
이제 테스팅할 페이지를 열고, 살포시 북마클릿을 눌러본다.
좌측에 6개의 스크린 아이콘을 볼 수 있는데, 그 역할은 각각 다음과 같다.
- Mobile (e.g. Apple iPhone) - Size: 320*480 (Portrait), Ratio: 2:3
- Apple iPhone 5 - Size: 320*568 (Portrait), Ratio: 40:71
- Small Tablet - Size: 600*800 (Portrait), Ratio: 3:4
- Tablet (e.g. Apple iPad 2-3rd, mini) - Size: 1024*768 (Landscape), Ratio: 3:4
- Widescreen - Size: 1280*800 (Landscape), Ratio: 8:5
- HDTV 1080p - Size: 1920*1080 (Landscape), Ratio: 16:9
각각의 스크린 사이즈는 중간부에 있는 Customize 항목을 수정하면 별도의 스크린 사이즈를 테스트해볼 수 있다.
