크롬 Chrome 모바일 화면 확장 프로그램 없이 보는 방법

크롬 Chrome 모바일 화면 확장 프로그램 없이 보는 방법

 

환경: Chrome

 

사이트나 블로그를 운영하시는 분들은 반응형 스킨이 어떤 형태로 기기마다 표현되는지 궁금할 겁니다. 특히 개발자는 매번 스마트폰과 PC 를 번갈아 확인하는 것이 귀찮고 힘들기 때문에 테스트 도구가 필요합니다. 별도의 프로그램 설치없이 크롬 브라우저만 있으면 기기별로 모바일 화면을 확인할 수 있는 방법을 알려 드리겠습니다.

 

▼ F12 단축키 클릭으로 개발자 모드를 띄웁니다. 브라우저 좌/우 혹은 하단에 개발자 모드창이 나타납니다.

 

▼ 개발자 모드에서 웹 사이트를 PC 가 아닌 모바일 화면으로 보기 위해서는 상단에 있는Toggle device toolbar 를 눌러야 합니다. 

 

▼ 사이트 화면은 모바일 환경에 맞는 크기로 바뀌었습니다. 화면 사이즈에 맞게 화면 디자인도 재조정이 됩니다. 만약 디자인이 반응형으로 구현되어 있지 않으면 제대로 표현이 안되겠죠. 기기의 종류와 사이즈는 상단 콤보박스를 통해 변경할 수 있습니다. 삼성 Galaxy S5 외에도 다양한 기기들이 있습니다. 

 

▼ 스마트폰처럼 가로/세로 변환도 가능합니다. 기기와 사이즈를 선택하는 툴바 오른쪽 끝에 가로/세로 전환 아이콘을 클릭해 보세요. 

 

▼ 만약 자신이 원하는 기기가 없다면 선택 목록에 추가할 수 있습니다. 기기 선택 콤보박스에서 하단에 Edit 메뉴를 선택합니다. 

 

▼ 오른쪽 화면에 나타난 Emulated Devices 에서 목록에 디바이스를 선택하면 추가가 됩니다. 

 

▼ 자신만의 디바이스를 만들어서 관리하고 싶다면 Add custom device.. 버튼을 눌러 추가합니다.