반응형 테스트 (Responsive Tester)

반응형 홈페이지를 만들 때 각각의 화면 너비에 맞게 반응형이 잘 되고 있는 지 확인할 필요가 있다.

수많은 모바일 기기들을 모두 준비해서 하나하나 확인하는 것이 최상이겠지만 (실제로 이렇게 하는 사람들을 본 적이 있다.) 크롬 브라우저에서 간단하게 확인할 수 있다.

아래에 2개의 크롬 확장프로그램과 다음에서 제공하는 사이트를 소개한다.

하지만 가장 정확한 브라우저 사이즈 조절은 크롬의 개발자도구(F12) 에서 반응형을 체크하는 것이다.

먼저 크롬 개발자 도구에 있는 내용을 살펴보자.

현재 화면에서 F12눌러서 개발자 도구를 띄우고 왼쪽 위의 아이콘을 클릭.

아래 화면에서 빨갛게 표시된 부분에 화면의 크기를 입력하면 가장 정확한 브라우저 사이즈로 현재의 웹페이지를 체크할 수 있다.

Responsive Web Design Tester (크롬 확장프로그램)

https://chrome.google.com/webstore/detail/responsive-web-design-tes/bdpelkpfhjfiacjeobkhlkkgaphbobea

Browser Width (크롬 확장프로그램)

https://chrome.google.com/webstore/detail/browser-width/mlnegepkjlccabakompdmbcmdieaideh

Browser Width는 스크롤바 등 크롬브라우저의 현재 상태를 모두 포함한 너비이다.

실제 브라우저 사이즈는 마우스로 화면을 수평으로 줄이거나 늘일 때 화면 오른 쪽 위에 나타나는 수치 (예: 768px x 707px)가 실제 브라우저의 크기이다.

Troy - Responsive web tester (Daum에서 제공)

http://troy.labs.daum.net/

최신 모바일기기를 테스트할 때는 다음에서 제공하는 Troy가, 홈페이지 작업을 할 때는 Browser Width가 좋다고 생각한다.