반응형 스킨을 사용하면서 궁금했던 모바일기기에서는 어떻게 나올까? 제일 간단하게는 사용하는 스마트폰을 이용하면 되지만 해상도는 여러종류가 있기 떄문에 한계가 있고 그래서 스마트폰 화면으로 볼 수 있는 사이트를 이용하다가 확인할때 마다 방문해서하는 번거로움이 있어서 브라우저 자체에서 바로 모바일 해상도별로 확인할수 있는 방법이 없을까? 생각해 보게 되었네요!
그래서 시간날때마다 IE 부터 크롬에 여러가지 설정이나 옵셔값들을 살펴보다 정말 어느날 우연하게 구글크롬 브라우저에서 별도 확장프로그램 설치 없이도 여러 스마트기기별로 확인할수 있는 크롬 모바일모드 기능을 알게 되었습니다! 발견하고 사용해보니 편리한 기능이라 생각되어 혹시나 모르시는 분들을 위해 사용방법을 정리해 보겠습니다!
참고로 모든 스마트폰 기기가 지원되는건 아니고 아이폰, 갤럭시, 넥서스를 중심으로 제공되며 기기별 해상도값이 표시되기 떄문에 다른 기기라도 동일한 해상도로 설정해서 확인하시면 어느정도는 해결될꺼라 생각되네요!
1.제일먼저 크롬 모바일모드로 가기 위해서는 크롬실행후 F12키를 눌러주세요! 예제로 제 블로그를 이용해 어떻게 실행되는지 과정을 보여드리겠습니다!
2. F12키를 실행시키면 화면이 분할되면서 이상한 문자들이 나타나게되고 블로그는 분할된 화면 크기에 따라 줄어든 상태의 모습을 확인할수 있습니다! 그상태에서 이미지에 표시된 오른쪽 상단 부분에 스마트기기 모양의 아이콘을 선택해서 실행시켜주세요!
참고로 캡쳐해서 보여드리느라 브라우저 크기를 줄였는데요! 해상도에 따라 2단 또는 3단으로 분할되어 보여지기도 하네요! 어떤 화면에서든 오른쪽편으로 해서 Element 메뉴 왼편 해당 메뉴가 위치해 있습니다!
3. 해당 아이콘을 실행시키면 이미지에 빨간색 박스로 표시된 부분과 같이 상단에 보시면 해당 스마트폰 기기와 해당되는 해상도값이 나온느 상태로 바뀌게 됩니다! 이떄부터가 바로 크롬모바일모드로 진입한 상태입니다! 상단 메뉴 가장 오른쪽 메뉴를 보시면 가로세로를 바꿔서도 확인이 가능하게 되어있습니다!
4. 상단부분 모바일기기 항목을 클릭하시면 이미지와 같이 다양한 모델이 제공되고 선택에 따라 해당 해상도로 확인이 가능하게 되어있습니다! 만약 다른 모델을 추가하실 경우에는 하단 Edit 메뉴를 선택해주세요!
5. Edit 메뉴를 실행하게 되면 오른편으로 지원하고 있는 스마트폰 목록들이 나타나고 원하시는 모델이 있는 경우 (1)체크하신 다음 상단 (2)Add custom devices 버튼으로 추가해주시면 더 다양하게 확인이 가능합니다!
우연하게 알게된 크롬 모바일모드 기능이지만 한번 설정해 놓으면 그 상태로 계속 유지가 되기떄문에 F12키로 바로 확인할수 있다는점이 가장 편리한거 같네요! 이번에 크롬 구석구석 보면서 제가 알수없는 다양한 기능들이 숨어있는것도 알았고 제일 신기한건 제가 있엇으면 좋겠다 생각했던 기능이 실제로 있었다는게 제일 놀라웠네요! 저와같이 PC에서 스마트폰 화면으로 확인해보고 싶으신 분들은 꼭 한번 사용해보시면 좋을꺼 같네요!
copyright @ xinsound (씬사운드) all rights reserved.