반응형 웹, 모바일 웹 개발시 Chrome 에서 디바이스 ( 모바일 ) 모드로 사이즈별 화면 디자인 확인하기

 Chrome 은 개발자에게 많은 편의사항을 제공하는대요. 여기서 설명하는 디바이스 모드도 그중 하나로 PC 용 Chrome 에서 반응형 웹이나 모바일 웹의 디자인을 확인할 수 있는 방법입니다. 물론 PC로 작업하기 때문에 Javascript 디버깅 및 CSS 임시 수정도 쉽게 가능합니다.

 우선 페이지에서 우측 버튼을 클릭 후 '검사'를 눌러서 개발자 모드로 들어가시기 바랍니다.

 * 예전에는 '요소 검사' 였는데 안 본 사이에 변했네요. FireFox 랑 겹쳐서 그런가... FireFox는 그대로 '요소 검사'를 사용하고 있네요.

그리고 아래와 같이 '검사' 창의 좌측 상단에 있는 모바일 모양의 아이콘을 클릭해주시기 바랍니다.

  이제 아래와 같이 디바이스 모드로 변경된 화면을 확인하실 수 있으실 것입니다. 디바이스 모드 변경 후 제대로 작동 여부를 확인하기 위해서는 한 번은 꼭 새로 고침을 해주시기 바랍니다.

몇가지 기능을 설명드리자면

1. 모바일 장비별 사이즈 템플릿

 Device 옆의 장치 모델명 을 클릭해보시면 아래와 같이 장치별 사이즈 템플릿이 어느정도 지정되어 있고 그 아래 보시면 커스텀하게 사이즈 변경도 가능합니다. 물론 템플릿 만으로도 대부분의 사이즈 확인이 가능합니다.

위와 같이 모바일 사이즈 템플릿이 준비되어 있습니다.

ps . 모바일 기기 대부분이 가로사이즈는 다르지만 어느정도 비율이 비슷하기 때문에 비율만 맞춘다는 생각으로 핸드폰, 패드, PC 3가지 버전으로 디자인한다는 생각으로 기획하시면 됩니다. 참고로 최소 가로 사이즈는 아이폰 5 이하의 320 픽셀로 광고사의 모바일 광고 가로 사이즈 이기도 합니다.

2. 모바일 환경의 느린 네트워크 테스트

 모바일 특유의 느릴 수도 있는 네트워크 환경을 가상으로 테스트해보실 수도 있습니다. 실제로 속도가 느려지니 이미지가 많은 홈페이지에서는 얼마나 느려지는지 확인하실 수 있습니다.

3. 모바일 장비의 방향 및 모바일 브라우저의 내비게이션 바, 키보드 가상 사이즈 테스트

 모바일 화면의 방향과 키보드가 보였을 때 그리고 모바일 브라우저 상단의 내비게이션 바가 있을 때를 가상으로 테스트해보실 수 있습니다. 실제 사용자가 보게 될 화면을 테스트 하실 수 있습니다.

4 . Media Query 가로 사이즈별 크기 확인하기

 아래와 같이 디바이스 모드 화면의 좌측 상단의 '계단형 아이콘'을 누르시면 아래와 같이 페이지에 정의된 Media Query를 이용한 사이즈 별 화면을 확인하실 수 있습니다.

화면의 색띠를 누르시면 해당 Media Query 사이즈로 변경되어 바로 확인이 가능합니다.

5. User Agent 변경

 브라우저의 User Agent 를 개발자가 원하는 식으로 변경이 가능합니다.

6. 기타

 기능은 아니지만 좌측상단의 계단형 모양 아이콘 위의 아이콘을 누르시면 현재 적용된 모든 사항들이 사라지며

 디바이스 모드 종료시에는 처음 누르셨던 모바일 모양의 아이콘을 다시 눌러 주시면 됩니다.

기능이 더 있을 수도 있지만 주로 사용할만한 기능들을 설명해봤습니다. 즐거운 개발되시기 바랍니다.