크롬 모바일 모드 확장프로그램 설치없이 사용하기

크롬 모바일 모드 확장프로그램 설치없이 사용하기

pc에서 스마트폰 테스트를 하거나 인스타그램등을 할 때는 일반적으로 크롬 브라우저 실행 후 확장 프로그램을 설치해서 사용하는데요.

확장 프로그램 설치할 필요없이 크롬에서 모바일 모드로 사용할 수 있습니다.

크롬에서 지원하는 모바일 디스플레이 크기는 안드로이드, 아이폰 등을 지원하고 있습니다.

지원하는 디바이스 종류가 없는 경우 사용자가 직접 모바일 화면의 크기도 설정할 수 있으며, 가로 모드로 회전도 되고 눈금자 및 모바일 프레임도 사용할 수 있습니다.

기능이 은근히 많은것 같네요^^ 

 

그럼 크롬에서 모바일 모드 설정 방법을 알아보겠습니다.

크롬 실행 후 F12키를 눌러줍니다.

---

 

 

 

우측에 여러가지 메뉴들이 나옵니다. 이 기능을 개발자 모드라고 하는데요.

인터넷 익스플로러에서도 F12키를 누르면 원하는 부분의 html 소스도 확인하거나 레이아웃을 임시로 수정할 수도 있습니다.

상위 메뉴 중 두번째 위치한 [Toggle device toolbar]를 선택합니다.

---

 

 

 

화면이 줄어들고 메뉴들이 나오는데요. 메뉴들의 기능에 대해 알아보겠습니다.

No. 1 : 디바이스 종류를 설정합니다.

No. 2 : 디바이스 화면 크기를 나타냅니다.

No. 3 : 화면 스캐일(확대/축소)을 조절합니다.

No. 4. :  온/오프라인 등의 접속 상태를 설정합니다.

No. 5. : 가로/세로 모드를 설정합니다.

---

 

 

 

우측 [Rotate] 메뉴를 누르게 되면 모바일 가로모드로 회전됩니다.

---

 

 

 

화면 확대 및 축소를 할 수 있습니다.

---

 

 

 

첫번째 디바이스를 선택하면 지원하는 디바이스 목록이 나옵니다.

디바이스중 선택하면 해당 디바이스의 해상도로 조절됩니다.

---

 

 

 

원하는 디바이스 종류가 없거나 더 많은 디바이스 목록을 조회하고 할 경우 [Edit]를 선택합니다.

---

 

 

 

우측에 Emulated Devices가 나옵니다. 추가하고 하는 디바이스에 체크 후 [Add custom device..]버튼을 클릭하시면 추가 됩니다.

---

 

 

 

직접 해상도를 조절할 수 있습니다.

device 메뉴 중 첫번째 [Responsive]를 선택한 뒤

해상도 부분을 클릭하면 입력상자로 변경되서 원하는 해상도로 변경할 수 있습니다.

---

 

 

 

모바일 프레임 기능도 있는데요 우측 점 3개의 더보기 메뉴를 선택 후 [Show device frame]버튼을 클릭합니다.

---

 

 

 

선택한 디바이스의 프레임이 적용됩니다.

안내 눈금자도 설정할 수 있는데요.

더보기 메뉴에서 [Show rules]를 선택하시면 됩니다.

이상 크롬 모바일 모드 확장프로그램 설치없이 사용하기를 알아보았습니다.