IT.인터넷.생활 관련/어플.프로그램.앱.웹

PC페이지를 모바일페이지로 보기

백전백승. 2023. 9. 11. 19:24
반응형

주 웹브라우저를 크롬을 사용하지만 가끔 파이어폭스를 사용한다. 파이어폭스를 사용하면서 PC 버전으로 보이는 페이지를 항상 모바일 버전으로 보게 할 수 없을까 생각하게 된다. 왜냐하면 PC 페이지가 아닌 모바일 페이지로 봐야 할 사정이 있기 때문이다. 곰곰이 생각하다가 예전에 크롬에서 확장 프로그램을 설치하여 PC 버전을 모바일 버전으로 보이게 하는 것에 대해 적은 기억이 있다.
 

크롬, 사파리 등 웹브라우저의 파이어폭스에 대해 모른다면 무슨 말인가 할 것이다.

 


예전 일이 떠올라 파이어폭스도 부가기능에 PC 버전을 모바일 버전으로 보이게 하는 프로그램이 있을 것 같았다. 크롬 확장 프로그램이 있으면 파이어폭스에 부가기능도 존재했다. 그래서 부가 기능 검색에 영문으로 mobile이라는 키워드로 검색했다. 키워드를 뭐로 할지 몰라 아무것이나 입력했다. 검색된 것 중에 Mobile View Switcher라는 것이 평점이 좋고 사용자가 많아 무작정 설치하기로 했다.
 
부가기능 설치를 위해 FireFox에 추가 > 추가 > 확인을 차례로 눌러 설치를 마쳤다. 설치를 마쳤더니 아래 세 번째 그림을 보듯이 파이어폭스(Firefox) 상단 오른쪽에 스마트폰 모양의 아이콘을 추가된 것을 확인했다. 이것이 설치한 부가 기능이라는 것을 알 수 있었다.
 

검색결과설치
파이어폭스에 부가기능(프로그램) 설치

 
그 스마트폰 모양의 아이콘을 클릭하면 색이 변하고 PC 버전 페이지가 모바일 버전으로 변경된다. 아래 예는 다음의 PC 버전 페이지로 모바일 버전으로 변경하기 위해 부가기능 아이콘을 클릭했다. 그랬더니 모바일 버전으로 변경됐다. 참고로 알고 있듯이 모바일 페이지는 해상도에 관계없이 최적화되는 반응형이다. 가끔 PC 페이지보다 모바일 페이지로 보는 것이 편할 때가 있다. 
 
 

PC모바일
다음 PC 버전 : 모바일 버전

 
예전에 크롬과 웨일에서 이와 관련된 글을 적은 기억이 있어 적었는데 그때 검색어로 user agent로 검색한 것을 알았다. 그래서 부가 기능에서 user agent로 검색해서 더 다양한 부가 기능 프로그램을 알았다. 검색된 부가 기능으로 특정 브라우저나 운영체제에 어떻게 보일지 확인할 수 있다. 예로 윈도우 엣지에서 페이지가 어떻게 보일지 알 수 있다. 다른 예로 안드로이드 크롬으로 어떻게 보일지도 확인할 수 있다.
 

웨일브라우저, 스페이스 즐기기

이 글을 크롬 확장 프로그램을 사용해서 모바일 버전으로 나오게 한다는 것으로 읽었으면 한다. 내가 너무 크롬 확장 프로그램에 염두를 두고 글을 작성했다. 댓글에서 알았는데 웨일브라우저

min-blog.tistory.com

 
내가 사용해 보니 단순히 페이지만 PC 버전을 모바일 버전으로만 보기를 원한다면 이 글 처음에 적은  Mobile View Switcher라는 부가 기능으로 충분할 것 같다. Mobile View Switcher은 간단하고 정말 편했다. 이것이 아닌 아이폰, 아이패드에서 사파리에서 페이지가 어떻게 보이는지 확인하고 싶다면 user agent로 검색된 부가 기능을 설치해야 할 것이다.
 
 
아래는 파이어폭스에 User-Agent Switcher라는 부가 기능을 설치한 것이다. 아래 그림은 다음(daum) 홈페이지를 부가 기능으로 아이패드와 사파리(iPad/Safari12.1.1)로 버전으로 보여주게 한 경우다. 화면 등이 다르니 얼마나 일치할지 모르겠다. 참고로 새로 고침을 해야 화면이 변한다.
 

useragent
다양하게 볼 수 있다