[ 크롬 개발자도구 ] 기기모드(Device Mode) 기기 선택 및 추가

안녕하세요. 제임스 입니다. 

모바일 웹 개발을 할 경우 모바일 단말별 특성에 맞게 개발 및 테스트를 진행 해야 하는데요. 

이때 도움이 되는 것이 바로 크롬 개발자도구의 뷰포트 컨트롤을 이용 하는 것입니다. 

이 뷰포트 컨트롤을 이용하여 반응형 및 특정 기기별 특성을 에뮬레이트 할 수 있습니다. 

뷰포트 컨트롤 이용하여 기기 선택, 화면 크기 및 화면 비율, 온/오프라인 설정 화면 가로모드/세로모드 설정을 할 수 있습니다.   

위 이미지에서 붉은 색으로 표기된 영역이 바로 Device 드롭다운 메뉴입니다.

뷰포트 컨트롤에서는 Responsive (반응형) 또는 각각의 특정 기기를 지정하는 기기별 모드를 선택 할 수 있습니다. 

반응형은 뷰포트를 양단하는 선을 클릭하여 화면 크기를 조절하여 뷰포트 크기를 자유자재로 조정할 수 있습니다.

위 이미지의 좌우측 핸들을 드래그 하여 뷰포트 사이즈 조절이 가능합니다. 

사이즈 조절 결과는 단순히 화면 상의 사이즈로만 확인 가능 한 것이 아니라 실제 화면 사이즈를 수치로도 확인 가능합니다. 

(뷰포트 사이즈를 줄여 width 값을 648 px 로 설정)

(뷰포트 사이즈를 늘려 width 값을 1176 px 로 설정)

기기별 모드는 원하는 특정 기기 (아이폰X, 넥서스5, 갤럭시S8 등등)에서 나타는 모습을 완벽하게 재현하고자 할때 사용합니다. 

(기기별 모드에서 iPhone X 를 선택한 모습입니다. )

기기별 모드에는 기본으로 프리셋 되어 제공되며 해당 기기의 특성이 에뮬레이터가 구동 될때 자동으로 구현됩니다. 

기기 프리셋 더보기 위해서는 포트뷰 컨트롤에서 Edit... 를 선택 하여 설정 화면으로 이동 합니다. 

이는 크롬 개발자도구 설정 화면 포스팅 시 언급했던 Settings > Devices > Emulated Devices 화면입니다. 

(뷰포트 컨트롤의 Edit... 를 클릭)

Settings > Devices > Emulated Devices 로 이동한 화면과 동일한 화면에서 프리셋 된 단말 목록을 확인 할 수 있습니다. 원하는 프리셋 단말을 선택 후 셋팅 화면을 종료 하면 뷰포트 컨트롤에 목록이 추가 됩니다. 

단, Device 드롭다운 메뉴에 보여지는 목록 갯수가 10개로 고정되어 있는 것 같습니다. 기존에 보여 지는 안쓰는 단말 정보를 해제 해야 추가한 정보가 보여 집니다. 

사용자설정 기기 프리셋 추가를 통해 지원되는 프리셋 단말 중 필요한 단말의 테스트를 진행 할 수 있습니다. 

Device 드롭다운 메뉴의 Edit... 를 클릭하여 Add custom Device... 버튼을 클릭하거나 

Settings > Devices > Emulated Devices > Add custom device... 버튼을 클릭하여 기기 추가를 할 수 있습니다. 

기기 명, 너비, 높이, 픽셀 비율, 기기 종류 및 User Agent 값을 설정 후 Add를 클릭하여 추가 하고 Device 드롭다운 메뉴에서 이용 할 수 있습니다. 

기기 방향설정은 가로/세로 모드를 바꾸는 토글 버튼을 클릭하여 즉시 적용 가능합니다.  

아래 이미지들은 갤럭시 S5 를 기준으로 방향설정 토클 버튼을 클릭한 결과물입니다. 

(화면 사이즈가 360 x 640 인 Portrait 로 설정)

(화면 사이즈가 640 x 360 인 Landscape 로 설정)

▼ 도움이 되셨다면 로그인이 필요 없는 ▼

▼ 하트 클릭 한번 부탁 드립니다 ▼

감사합니다 :D