Resizer - Google Design (반응형 웹 확인)

이전 부터 Google Adsense는 화면 크기에 따라 크기를 자동으로 조절하는 반응형 광고를 제공하고 있고, 티스토리도 반응형 스킨을 제공해 하나의 페이지로 다양한 크기의 device를 지원하도록 하고 있다.

요즘은 반응형 웹페이지라는 말은 쉽게 접할 수 있는 단어가 되었고, 이제는 하나의 트렌드가 된 것 같다.

반응형 웹의 장점으로 이를 구현하게 되면 별도의 모바일용 웹페이지를 구현할 필요가 없고, 단순히 화면 크기에 따라 컨텐츠를 보여주기만하면 되기에, 반응형 웹에 대해 관심이 집중되고 있는 것으로 보인다.

이런 흐름이 있어서인지 Google에서도 웹페이지 주소를 제공하면 각 화면 크기 (PC, Tablet, Mobile)에 해당 웹페이지가 어떻게 보여지는지 한눈에 확인시켜주는 Resizer 서비스를 제공해,  반응형 웹페이지를 개발하는 개발자들이 좀 더 쉽게 개발할 수 있도록 해주고 있다.

http://design.google.com/resizer

자신의 웹페이지가 다양한 사이즈의 디스플레이에서 어떻게 보여지는지 쉽게 확인해 볼 수 있다. 

웹페이지 주소를 입력하게 되면 결과물은 총 3가지 형태로 보여지게 된다.

1. PC, Tablet, Mobile 을 한번에 보여주게 된다.

2. PC, Tablet 크기 화면으로 상단에서 Width를 변경해 가며 화면 크기에 따른 웹 표현을 볼 수 있다.

(480, 600, 840, 960, 1280, 1440px 로 width 설정 가능)

[Width : 840 px 로 설정할 경우]

[Width : 1440 px 로 설정할 경우]

3. 모바일 화면 크기로도 보여준다.

(360, 600, 720 1024 px 로 Width 설정 가능)

[Width : 360 px 로 설정할 경우]

[Width : 1024 px 로 설정할 경우]

디바이스마다 해상도도 다른데, 웹페이지 서비스를 제공하는 입장에서 모든 디바이스를 구매해서 확인해 볼 수는 없는 상황이다. 이럴 때 width를 자유롭게 조절해 가며 해당 width에 따라 표시되는 웹페이지를 쉽게 확인해 볼 수 있는 google의 resizer 서비스는 웹페이지 개발자들에게는 하나의 좋은 도구가 될 것이다.