F12 모바일 모드 - F12 mobail modeu

익스플로러 PC에서 모바일, 스마트폰 모드로 접속하는 방법

스마트폰으로 웹 페이지에 자주 접속하는 사람들은 PC 에서도 동일한 형태의 레이아웃이 편할 수 있습니다. 특히 설정 메뉴들이 모바일 모드에서 좀더 찾기 쉽고 편하게 되어 있습니다. 모바일 모드에서 사용하던 설정을 PC 에서 다시 찾으려고 하는데 어디에 있는지 도저히 못 찾겠다면 PC 에서 모바일 모드로 변경해서 찾는 것이 편하겠죠. 다른 프로그램은 사용하지 않고 익스플로러에서 웹 페이지의 모바일 모드로 접속 방법에 대해 알아 보겠습니다.

▼ 익스플로러에는 웹 프로그래머들을 위한 개발자 도구가 있습니다. 이 개발자 도구는 웹 사이트를 분석하고 테스트하는데 이용됩니다. 개발자 도구를 실행하기 위해서는 F12 단축키를 누르거나 오른쪽 상단에 있는 [설정] > [F12 개발자 도구]메뉴를 선택합니다.

▼ 개발자 도구를 실행하게 되면 화면 하단에 또 다른 창이 나타납니다. 그리고 개발자 도구 상단에 있는 탭 중 에뮬레이션으로 이동합니다. 에뮬레이션에 있는 옵션 중 브라우저 프로필이 데스크톱/모바일 모드를 결정합니다. 물론 옵션에 스마트폰 기기별 모드가 나누어져 있는 것은 아니지만 Windows Phone 를 선택하면 익스플로러로 접속하는 모든 웹 사이트는 스마트폰에서 보던 모바일 모드로 접속됩니다. 

▼ Windows Phone 을 선택하는 순간 웹 사이트는 바로 모바일 모드로 변경됩니다. URL 주소도 모바일 접속 주소인 “m” 이 붙어 있습니다. 

▼ 접속한 화면이 커서 보기 힘들면 해상도를 조절할 수 있습니다. 최소 800 x 480 입니다. 이것도 작은 사이즈는 아니죠. 만약 더 줄이고 싶다면 [사용자 지정]옵션을 이용하세요.

▼ 해상도 지정 옵션에서 [사용자 지정] 메뉴를 선택하게 되면 직접 값을 입력할 수 있는 박스가 화면에 나타납니다. 이상으로 PC 에서 모바일 모드로 접속하는 방법에 대해 알아 보았습니다. 

구글 크롬 웹브라우저를 모바일 모드와 태블릿 모드로 설정할 수 있다. 블로그를 운영하다 보면 대부분 PC에서 작업을 하고 확인을 하기 때문에 실제로 자신의 블로그가 모바일 환경에서 어떻게 보여지는 지 궁금해 한다. 애플이나 안드로이드, 삼성 등 다양한 환경에서 보여지는 블로그의 모습을 보는 방법은 많다. 

1. 주소명 앞에 'm.'을 삽입한다. 

네이버 데스크탑 주소는 https://www.naver.com/인데 모바일 주소는 https://m.naver.com/으로 Mobile의 약자인 m을 삽입하면 된다. 

2. 확장 프로그램 'User-Agent Switcher for Chrome'을 설치한다. 

  가. 크롬 웹스토어에 접속한다. 

네이버나 다음, 구글 검색창에 '크롬 웹스토어'를 클릭하면 바로 나온다. 해당 주소는 아래와 같다. 

https://chrome.google.com/webstore/category/extensions

  나. 검색 창에 'User-Agent Switcher'를 클릭한다. 

검색창에 'user agent'만 입력해도 해당 프로그램이 나온다. 검색해서 나온 프로그램을 'Chrome에 추가'를 클릭해 설치한다. 목록 중 원하는 프로그램을 설치한다. 

  다. 상단의 해당 아이콘을 클릭 후 원하는 버전을 선택한다. 

3. 다음 트로이 사이트에 접속한다. 

주소는 http://troy.labs.daum.net/이고 다양한 버젼을 최신 사용할 수 있다. 삼성, 애플, 엘지, 구글, 팬텍, HTC, 소니, 샤오미, 화웨이, 레노버, ZTE, PC 등 화면을 지원한다. 동시에 여러 개의 스크린, 화면을 띄울 수 있는 멀티스크린 모드가 지원해 비교할 수 있다. 

4. 크롬 자체 개발자 모드로 모바일 환경에 접속한다. 

F12 키보드를 눌러 개발자 모드로 접속한다. 우측 화면의 좌측 상단의 Toggle device toolbar를 클릭한다. 그러면 PC와 모바일 모드가 자동으로 변경된다. 좌측화면의 상단에 스마트폰 모드를 설정할 수 있고 해상도와 화면 확대, 축소 및 가로보기 기능도 제공한다.