기기 모드를 사용하면 휴대기기에서 페이지가 어떻게 표시되고 작동하는지 짐작할 수 있습니다.
개요
기기 모드는 휴대기기를 시뮬레이션하는 데 도움이 되는 Chrome DevTools 기능 모음의 이름입니다. 기능은 다음과 같습니다.
- 모바일 표시 영역 시뮬레이션
- CPU 제한
- 네트워크 제한
- 또한 센서 패널에서 다음을 실행합니다.
제한사항
기기 모드는 휴대기기에서 페이지가 어떻게 표시되고 표시되는지에 대한 1차 근사치라고 생각하면 됩니다. 기기 모드를 사용하면 실제로 휴대기기에서 코드를 실행하지 않아도 됩니다. 노트북 또는 데스크톱에서 모바일 사용자 환경을 시뮬레이션합니다.
DevTools가 절대로 시뮬레이션할 수 없는 휴대기기의 몇 가지 측면이 있습니다. 예를 들어 모바일 CPU의 아키텍처는 노트북 또는 데스크톱 CPU의 아키텍처와 매우 다릅니다. 확실하지 않은 경우 실제로 휴대기기에서 페이지를 실행하는 것이 가장 좋습니다. 원격 디버깅을 사용하면 페이지가 휴대기기에서 실제로 실행되는 동안 노트북이나 데스크톱에서 페이지 코드를 보고, 변경하고, 디버그하고, 프로파일링할 수 있습니다.
기기 툴바 열기
기기 툴바를 열려면 다음 단계를 따르세요.
- DevTools를 엽니다.
- 상단의 작업 모음에 있는 devices 기기 툴바 전환을 클릭합니다.
모바일 표시 영역 시뮬레이션
기본적으로 기기 툴바는 표시 영역에서 크기가 반응형으로 설정된 상태로 열립니다. 측정기준 드롭다운을 사용하여 특정 휴대기기의 크기를 시뮬레이션할 수 있습니다.
반응형 표시 영역 모드
핸들을 드래그하여 필요한 크기로 표시 영역의 크기를 조절합니다. 또는 너비 및 높이 상자에
특정 값을 입력합니다 이 예에서 너비는 480로 설정되고 높이는 415로 설정됩니다.
또는 너비 사전 설정 막대를 사용하여 클릭하여 너비를 다음 중 하나로 설정할 수 있습니다.
| 모바일 S | 모바일 M | 모바일 왼쪽 | 태블릿 | 노트북 | 노트북 L | 4K |
|---|---|---|---|---|---|---|
| 320px | 375픽셀 | 425픽셀 | 768픽셀 | 1024픽셀 | 1440픽셀 | 2560픽셀 |
미디어 쿼리 표시
표시 영역 위에 미디어 쿼리 중단점을 표시하려면 
옵션 더보기 > 미디어 쿼리 표시를 클릭합니다.
이제 DevTools가 표시 영역 위에 막대 두 개를 추가로 표시합니다.
max-width중단점이 있는 파란색 막대min-width중단점이 있는 주황색 막대
중단점 사이를 클릭하여 표시 영역의 너비를 변경하여 중단점이 트리거되도록 합니다.
상응하는 @media 선언을 찾으려면 중단점 사이를 마우스 오른쪽 버튼으로 클릭하고 Reveal in source code를 선택합니다. DevTools의 Editor에 해당하는 줄에서 Sources 패널이 열립니다.
기기 픽셀 비율 설정
기기 픽셀 비율 (DPR)은 하드웨어 화면의 물리적 픽셀과 논리 (CSS) 픽셀 간의 비율입니다. 즉, DPR은 Chrome에 CSS 픽셀을 그리는 데 사용할 화면 픽셀 수를 알려줍니다. Chrome은 HiDPI (High Dots Per Inch) 디스플레이에서 그릴 때 DPR 값을 사용합니다.
DPR 값을 설정하려면 다음 단계를 따르세요.
옵션 더보기
> 기기 픽셀 비율 추가를 클릭합니다.
표시 영역 상단의 작업 모음에 있는 새 DPR 드롭다운 메뉴에서 DPR 값을 선택합니다.
기기 유형 설정
기기 유형 목록을 사용하여 휴대기기 또는 데스크톱 기기를 시뮬레이션합니다.
상단의 작업 표시줄에 목록이 표시되지 않으면 옵션 더보기 
> 기기 유형 추가를 선택합니다.
다음 표는 옵션 간의 차이점을 설명합니다. 렌더링 방법은 Chrome에서 페이지를 모바일 또는 데스크톱 표시 영역으로 렌더링하는지 여부를 나타냅니다. 커서 아이콘은 페이지 위로 마우스를 가져가면 표시되는 커서 유형을 나타냅니다. 실행된 이벤트는 페이지와 상호작용할 때 페이지에서 touch 또는 click 이벤트가 실행되는지를 나타냅니다.
| 옵션 | 렌더링 방법 | 커서 아이콘 | 실행된 이벤트 |
|---|---|---|---|
| 모바일 | 모바일 | 원 | 터치 |
| 모바일 (터치 없음) | 모바일 | 일반 | click |
| 데스크톱 | 데스크톱 | 일반 | click |
| 데스크톱 (터치) | 데스크톱 | 원 | 터치 |
기기별 모드
특정 휴대기기의 크기를 시뮬레이션하려면 크기 목록에서 기기를 선택합니다.
자세한 내용은 맞춤 휴대기기 추가를 참조하세요.
표시 영역을 가로 방향으로 회전
표시 영역을 가로 방향으로 회전하려면 screen_rotation 회전을 클릭합니다.
기기 툴바가 좁으면 회전 
버튼이 사라집니다.
방향 설정도 참고하세요.
듀얼 화면 모드 전환
일부 기기(예: Surface Duo)에는 화면이 두 개 있으며 한 쪽 또는 두 개의 화면을 모두 활성화하여 사용하는 두 가지 방법이 있습니다.
듀얼 화면과 단일 화면 간에 전환하려면 툴바에서 devices_fold 듀얼 화면 모드 전환을 클릭합니다.
기기 상태 설정
Asus Zenbook Fold와 같은 일부 기기에는 폴더블 화면이 있습니다. 이러한 화면은 연속 또는 접힌 상태입니다. 연속된 자세는 '평평한' 위치를 의미하며 접힌 자세는 디스플레이 섹션 사이의 각도를 형성합니다.
기기 상태를 설정하려면 툴바의 해당하는 드롭다운 메뉴에서 연속 또는 접힘을 선택합니다.
기기 프레임 표시
Nest Hub와 같은 특정 휴대기기의 크기를 시뮬레이션할 때는 옵션 더보기 
> 기기 프레임 표시를 선택하여 표시 영역 주변에 실제 기기 프레임을 표시합니다.
이 예에서 DevTools는 Nest Hub의 프레임을 표시합니다.
맞춤 휴대기기 추가
맞춤 기기를 추가하려면 다음 단계를 따르세요.
기기 목록을 클릭한 다음 수정을 선택합니다.
설정 설정 > 기기 탭의 지원되는 기기 목록에서 기기를 선택하거나 맞춤 기기 추가를 클릭하여 내 기기를 추가합니다.
직접 추가하려면 기기의 이름, 너비, 높이를 입력한 다음 추가를 클릭합니다.
기기 픽셀 비율, 사용자 에이전트 문자열, 기기 유형 입력란은 선택사항입니다. 기기 유형 필드는 기본적으로 모바일로 설정된 목록입니다.
표시 영역으로 돌아가서 크기 목록에서 새로 추가된 기기를 선택합니다.
눈금자 표시
눈금자를 보려면 옵션 더보기 
> 눈금자 표시를 클릭합니다. 눈금자의 크기 단위는 픽셀입니다.
DevTools에서 표시 영역의 상단과 왼쪽에 눈금자를 표시합니다.
특정 표시의 눈금자를 클릭하여 표시 영역의 너비와 높이를 설정합니다.
표시 영역 확대/축소
확대/축소 목록을 사용하여 확대하거나 축소합니다.
스크린샷 캡처
표시 영역에 표시되는 화면의 스크린샷을 캡처하려면 
옵션 더보기 > 스크린샷 캡처를 클릭합니다.
표시 영역에 표시되지 않는 콘텐츠를 포함하여 전체 페이지의 스크린샷을 캡처하려면 동일한 메뉴에서 원본 크기 스크린샷 캡처를 선택합니다.
네트워크 및 CPU 제한
네트워크와 CPU를 모두 제한하려면 제한 목록에서 중간 등급 모바일 또는 로우엔드 모바일을 선택합니다.
Mid-tier mobile은 빠른 3G를 시뮬레이션하고 CPU를 제한하여 일반 속도보다 4배 느려집니다. Low-end mobile: 느린 3G를 시뮬레이션하고 CPU를 평소보다 6배 느리게 스로틀링합니다. 제한은 노트북이나 데스크톱의 일반 기능과 관련이 있습니다.
기기 툴바가 좁으면 제한 목록이 숨겨집니다.
CPU만 스로틀링
네트워크는 제외한 CPU만 스로틀링하려면 Performance(성능) 패널로 이동하여 Capture Settings(설정 캡처) 
를 클릭한 다음 CPU 목록에서 4x speed(감속), 6x speeddown(6배 감속) 또는 20x speeddown(20x 감속)을 선택합니다.
네트워크만 제한
CPU를 제외한 네트워크만 제한하려면 네트워크 패널로 이동하여 제한 목록에서 빠른 3G 또는 느린 3G를 선택합니다.
또는 Command+Shift+P (Mac) 또는 Control+Shift+P (Windows, Linux, ChromeOS)를 눌러 Command 메뉴를 열고 3G을 입력한 다음 빠른 3G 제한 사용 또는 느린 3G 제한 사용을 선택합니다.
Performance(성능) 패널에서 네트워크 제한을 설정할 수도 있습니다. Capture Settings
를 클릭한 후 Network 목록에서 Fast 3G 또는 Slow 3G를 선택합니다.
센서 에뮬레이션
Sensors 패널을 사용하여 위치정보를 재정의하고, 기기 방향을 시뮬레이션하고, 터치를 강제 실행하고, 유휴 상태를 에뮬레이션합니다.
다음 섹션에서는 위치정보를 재정의하고 기기 방향을 설정하는 방법을 간단히 살펴봅니다. 기능의 전체 목록은 기기 센서 에뮬레이션을 참고하세요.
위치정보 재정의
위치정보 재정의 UI를 열려면 Customize and control DevTools
를 클릭한 다음 More tools > Sensors를 선택합니다.
또는 Command+Shift+P (Mac) 또는 Control+Shift+P (Windows, Linux, ChromeOS)를 눌러 Command 메뉴를 열고 Sensors를 입력한 다음 센서 표시를 선택합니다.
위치 목록에서 사전 설정 중 하나를 선택하거나 기타...를 선택하여 자체 좌표를 입력하거나, 위치 없음을 선택하여 위치정보가 오류 상태일 때 페이지가 어떻게 동작하는지 테스트합니다.
방향 설정
방향 UI를 열려면 Customize and control DevTools
를 클릭한 다음 More tools > Sensors를 선택합니다.
또는 Command+Shift+P (Mac) 또는 Control+Shift+P (Windows, Linux, ChromeOS)를 눌러 Command 메뉴를 열고 Sensors를 입력한 다음 센서 표시를 선택합니다.
방향 목록에서 사전 설정 중 하나를 선택하거나 맞춤 방향을 선택하여 알파, 베타, 감마 값을 직접 설정합니다.
