Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

기기 모드로 휴대기기 시뮬레이션

Kayce Basques

Sofia Emelianova

기기 모드를 사용하여 페이지가 휴대기기에서 어떻게 표시되고 작동하는지 대략적으로 확인합니다.

개요

기기 모드는 Chrome DevTools의 기능 모음으로, 휴대기기를 시뮬레이션하는 데 도움이 됩니다. 기능은 다음과 같습니다.

모바일 뷰포트 시뮬레이션
CPU 제한
네트워크 제한
핵심 사항: 네트워크 패널에서 연결 속도를 제한할 수도 있습니다.
또한 센서 패널에서 다음을 확인할 수 있습니다.
- 위치정보 시뮬레이션
- 방향 설정

제한사항

기기 모드는 휴대기기에서 페이지가 표시되고 느껴지는 방식의 1차 근사치로 생각하면 됩니다. 기기 모드에서는 실제로 휴대기기에서 코드를 실행하지 않습니다. 노트북이나 데스크톱에서 모바일 사용자 환경을 시뮬레이션합니다.

DevTools에서는 모바일 기기의 일부 측면을 시뮬레이션할 수 없습니다. 예를 들어 모바일 CPU의 아키텍처는 노트북이나 데스크톱 CPU의 아키텍처와 매우 다릅니다. 확실하지 않은 경우 모바일 기기에서 페이지를 실제로 실행하는 것이 가장 좋습니다. 원격 디버깅을 사용하여 모바일 기기에서 실제로 실행되는 동안 노트북이나 데스크톱에서 페이지의 코드를 보고, 변경하고, 디버그하고, 프로파일링하세요.

기기 툴바 열기

기기 툴바를 열려면 다음 단계를 따르세요.

DevTools를 엽니다.
를 클릭합니다. 상단의 작업 모음에 있는 기기 툴바 전환을 클릭합니다.

기기 툴바 전환 버튼

모바일 표시 영역 시뮬레이션

기본적으로 기기 툴바는 크기가 반응형으로 설정된 표시 영역에서 열립니다. 측정기준 드롭다운을 사용하여 특정 휴대기기의 측정기준을 시뮬레이션할 수 있습니다.

기기 툴바

반응형 표시 영역 모드

핸들을 드래그하여 필요한 크기로 표시 영역의 크기를 조절합니다. 또는 너비 및 높이 상자에 특정 값을 입력합니다. 이 예에서는 너비가 480로 설정되고 높이가 415로 설정됩니다.

반응형 표시 영역 모드에서 표시 영역의 크기를 변경하는 핸들입니다.

또는 너비 사전 설정 막대를 사용하여 다음 중 하나를 클릭하여 너비를 설정합니다.

너비 사전 설정 표시줄

소형 휴대기기	모바일 M	모바일 L	태블릿	노트북	대형 노트북	4K
320px	375px	425px	768px	1024px	1440px	2560px

미디어 쿼리 표시

뷰포트 위에 미디어 쿼리 중단점을 표시하려면 옵션 더보기 > 미디어 쿼리 표시를 클릭합니다.

미디어 쿼리를 표시합니다.

이제 DevTools에 뷰포트 위에 두 개의 막대가 추가로 표시됩니다.

max-width개의 중단점이 있는 파란색 막대
min-width개의 중단점이 있는 주황색 막대

중단점 사이를 클릭하여 중단점이 트리거되도록 표시 영역의 너비를 변경합니다.

중단점 사이를 클릭하여 표시 영역의 너비를 변경합니다.

해당 @media 선언을 찾으려면 중단점 사이를 마우스 오른쪽 버튼으로 클릭하고 소스 코드에서 표시를 선택합니다. DevTools는 편집기의 해당 줄에서 소스 패널을 엽니다.

소스 코드에서 보기 드롭다운 메뉴

기기 픽셀 비율 설정

기기 픽셀 비율 (DPR)은 하드웨어 화면의 실제 픽셀과 논리적 (CSS) 픽셀 간의 비율입니다. 즉, DPR은 CSS 픽셀을 그리는 데 사용할 화면 픽셀 수를 Chrome에 알려줍니다. Chrome은 HiDPI (인치당 도트 수 높음) 디스플레이에서 그릴 때 DPR 값을 사용합니다.

DPR 값을 설정하려면 다음 단계를 따르세요.

옵션 더보기 > 기기 픽셀 비율 추가를 클릭합니다.
뷰포트 상단의 작업 모음에서 새 DPR 드롭다운 메뉴에서 DPR 값을 선택합니다.

기기 유형 설정

기기 유형 목록을 사용하여 휴대기기 또는 데스크톱 기기를 시뮬레이션합니다.

기기 유형 목록입니다.

상단의 작업 모음에 목록이 표시되지 않으면 옵션 더보기 > 기기 유형 추가를 선택합니다.

다음 표에서는 옵션 간의 차이점을 설명합니다. 렌더링 방법은 Chrome에서 페이지를 모바일 또는 데스크톱 뷰포트로 렌더링하는지 여부를 나타냅니다. 커서 아이콘은 페이지 위로 마우스를 가져갈 때 표시되는 커서의 유형을 나타냅니다. 이벤트 발생은 페이지와 상호작용할 때 페이지에서 touch 또는 click 이벤트가 발생하는지 여부를 나타냅니다.

옵션	렌더링 방법	커서 아이콘	이벤트 발생
모바일	모바일	원	터치
모바일 (터치 없음)	모바일	보통	클릭
데스크톱	데스크톱	보통	클릭
데스크톱 (터치)	데스크톱	원	터치

기기별 모드

특정 휴대기기의 크기를 시뮬레이션하려면 크기 목록에서 기기를 선택합니다.

측정기준 목록

자세한 내용은 맞춤 휴대기기 추가하기를 참고하세요.

뷰포트를 가로 방향으로 회전합니다.

회전을 클릭하여 뷰포트를 가로 방향으로 회전합니다.

가로 방향입니다.

기기 툴바가 좁으면 회전 버튼이 사라집니다.

기기 툴바

방향 설정도 참고하세요.

듀얼 화면 모드 전환

일부 기기(예: Surface Duo)에는 화면이 두 개 있으며 화면 하나 또는 두 개를 모두 활성화하여 사용할 수 있습니다.

듀얼 화면과 싱글 화면 간에 전환하려면 툴바에서 듀얼 화면 모드 전환을 클릭합니다.

듀얼 화면 모드가 사용 설정되어 있습니다.

기기 상태 설정

일부 기기(예: Asus Zenbook Fold)에는 폴더블 화면이 있습니다. 이러한 화면에는 연속 또는 접힘이라는 자세가 있습니다. 연속 자세는 '평평한' 위치를 나타내고 접으면 디스플레이 섹션 사이에 각도가 형성됩니다.

기기 자세를 설정하려면 툴바의 해당 드롭다운 메뉴에서 연속 또는 접힘을 선택합니다.

자세가 접힌 상태로 설정되었습니다.

기기 프레임 표시

Nest Hub와 같은 특정 모바일 기기의 크기를 시뮬레이션할 때 옵션 더보기 > 기기 프레임 표시를 선택하여 뷰포트 주변에 실제 기기 프레임을 표시합니다.

기기 프레임을 표시합니다.

이 예시에서 DevTools는 Nest Hub의 프레임을 보여줍니다.

Nest Hub의 기기 프레임입니다.

맞춤 모바일 기기 추가

맞춤 기기를 추가하려면 다음 단계를 따르세요.

기기 목록을 클릭한 다음 수정을 선택합니다.
설정 > 기기 탭에서 지원되는 기기 목록에서 기기를 선택하거나 맞춤 기기 추가를 클릭하여 자체 기기를 추가합니다.
직접 추가하는 경우 기기의 이름, 너비, 높이를 입력한 다음 추가를 클릭합니다.

기기 픽셀 비율, 사용자 에이전트 문자열, 기기 유형 필드는 선택사항입니다. 기기 유형 필드는 기본적으로 모바일로 설정된 목록입니다.
뷰포트로 돌아가 측정기준 목록에서 새로 추가된 기기를 선택합니다.