이번 글에서는 PC에서 모바일 웹페이지 보는 방법에 대해 알아보겠습니다. PC보다 스마트폰을 이용하는 경우가 많아지면서 많은 웹페이지들이 PC버전의 웹페이지뿐만 아니라 모바일 버전의 웹페이지도 함께 지원하고 있습니다.
PC버전의 웹페이지와 모바일 버전의 웹페이지는 다르기 때문에 기능에서도 차이가 있어 PC버전의 웹페이지에 없는 기능이 모바일 버전의 웹페이지에는 있는 경우가 있고 어떤 웹페이지는 모바일 버전만 지원하는 경우도 있어 PC로 인터넷을 이용하다 모바일 웹페이지를 열어봐야 할 때가 있습니다.
직접 모바일 기기에서 웹페이지 주소를 입력하여 모바일 웹페이지를 확인할 수도 있지만 이렇게 하면 웹페이지 주소가 긴 경우 번거롭기 때문에 PC 웹브라우저에서 바로 모바일 버전의 웹페이지를 확인할 수 있으면 편리한데 웹브라우저의 확장 프로그램이나 개발자 도구를 이용하면 이것이 가능합니다.
대부분의 PC 웹브라우저들은 개발자 도구를 이용하여 모바일 버전의 웹페이지를 보는 것이 가능하고 아래에서는 크롬의 개발자 도구를 이용하여 모바일 버전의 웹페이지를 여는 방법에 대해 알아봅니다. 다른 브라우저들도 크롬과 방법이 비슷하니 아래의 방법을 참고하여 이용하시면 됩니다.
▣ 크롬에서 모바일 버전 웹페이지 여는 방법
크롬을 열고 크롬 창 우측 상단에 점 세 개를 클릭하여 나오는 메뉴에서 도구 더보기 > 개발자 도구를 클릭하거나 단축키 F12를 눌러 개발자 도구를 엽니다. 위와 같이 크롬 창 우측에 개발자 도구 창이 뜨고 빨간 테두리 안에 Toggle device toolbar 아이콘을 클릭합니다.
그러면 위와 같이 웹페이지가 모바일 화면 비율로 변경되고 웹페이지는 여전히 모바일 버전이 아닌 PC 웹페이지 버전인 것을 볼 수 있습니다.
여기서 웹페이지를 모바일 버전으로 보기 위해 새로 고침 아이콘을 클릭하거나 단축키 F5를 눌러 줍니다. 아니면 주소 입력창에 웹페이지 PC 도메인이나 웹페이지가 모바일 버전을 지원하는 경우 앞에 ‘m’이 붙는 모바일 도메인을 입력하고 엔터를 눌러도 됩니다.
그러면 위와 같이 웹페이지가 모바일 버전으로 열리게 됩니다. 스마트폰에서 웹페이지를 터치하는 것과 마찬가지로 마우스로 아이콘이나 링크들을 클릭하면 해당 모바일 버전의 사이트로 이동하게 됩니다.
스마트폰에서는 위의 네이버 검색어 입력 창 우측에 그린 닷을 클릭하여 뜨는 메뉴에서 QR바코드나 렌즈를 터치하여 카메라 촬영 화면을 띄울 수 있지만 위는 PC이기 때문에 스마트폰과 똑같이 클릭을 해도 QR바코드 찍기나 렌즈 기능을 사용하지 못합니다.
다른 사이트를 열고 싶다면 위의 크롬 주소창에 PC 도메인이나 모바일 도메인을 입력하고 엔터를 누르면 해당 사이트가 모바일 버전의 웹페이지로 열리게 됩니다. 해당 웹페이지가 모바일 버전의 웹페이지를 지원하지 않는다면 ‘m’이 앞에 붙는 모바일 도메인을 입력하여도 사이트에 연결할 수 없다는 오류 메시지가 뜨게 됩니다.
모바일 버전 웹페이지 이미지 위에 보면 위와 같이 눈금 바가 있는데 눈금은 스마트폰이나 태블릿같은 기기의 가로폭을 표시합니다.
위와 같이 마우스 커서를 눈금 바에 가져다 대면 가져다 댄 빈 사각형의 우측 끝에 눈금의 가로 해상도를 가지는 기기의 이름이 중간에 표시됩니다. 빈 사각형을 클릭하면 표시된 기기에서 보이는 웹페이지 화면을 볼 수 있습니다.
웹페이지 이미지 위에 Dimensions: Responsive를 클릭하면 위와 같이 스마트폰과 태블릿 PC 등의 기기 목록들이 나오고 특정 기기를 클릭하면 해당 기기의 가로와 세로 해상도에 맞춰 아래에 웹페이지 이미지가 표시됩니다.
메뉴 가장 하단에 Edit…를 클릭하면 다른 기기들을 메뉴에 추가할 수 있습니다.
모바일 버전의 웹페이지를 다시 원래 PC버전으로 돌리려면 아까 위에 개발자 도구에서 클릭한 Toggle device toolbar 아이콘을 다시 클릭한 후 주소 입력창에 웹페이지의 PC 도메인을 입력하면 됩니다.