크롬 개발자도구 사용해서 모바일 보기, URL 주소 변경하기
블로그를 운영하다보면 종종 모바일 화면으로 테스트겸 봐야하는 경우도 있고, 모바일 전용 주소를 테스트 해야하는 경우도 생긴다. 이런 경우 크롬 개발자도구 기능을 이용해서 모바일 화면으로 볼수가 있다. 뿐만아니라 개발자도구 기능을 이용해서 PC URL을 모바일 URL로 변경할수도 있다. 매우 간단한 방법이기에 아래의 순서를 차근히 따라하면서 모바일 보기와 모바일 주소 변경을 해보도록하자.
먼저 크롬을 활성화한다. 그리고 F12 를 누르거나 우측 상단의 버튼을 통해서 위 이미지처럼 개발자도구를 활성화시킨다. 개발자도구를 활성화 시킨후 위 화면처럼 개발자도구 모양이 나오게되면 빨간 상자 화살표 부분의 모바일 모양의 버튼을 누르면 모바일 모드로 변경이되게된다.
위와같이 모바일로 변경된 화면이 나오며, 이 상태에서 갤럭시 아이폰 LG 스마트폰 등 다양한 기기에서 어떻게 화면이 작동하는지 미리보기를 할수있다. 개발자도구의 다양한 기능은 계속 업데이트 되어서 크롬의 상세기능을 이용하면 스마트폰 뿐만아니라 태블릿 PC사이즈 까지도 조정이 가능하다.
이 상태에서는 아직 PC주소가 유지되는 것을 확인할수있는데 이 상태에서 상단의 주소창에 PC URL 주소를 입력한후 엔터를 누른다. 네이버 닷컴을 기준으로 엔터를 치면 아래와같이 변하게된다.
단지 엔터만 눌렀을뿐인데 m.naver.com 으로 URL 주소가 변경된것을 확인할수있다. 위와같이 매우 간단한 방법으로 크롬 개발자도구 기능을 사용해서 PC보기에서 모바일 화면 보기를 테스트도 가능하며 모바일 URL도 변경할수가 있다. 아마 쉽게 따라왔을거라고 생각하는데, 업무를 하던 블로그를 하던 궁금한점이 잘 해결되었기를 바란다.