[Google Chrome] Device Emulation

개발을 하다보면 Google Chrome 에 멋진 기능들이 많이 있습니다. 오늘은 그 중에 Device Mode & Mobile Emulation 이라는 기능을 잠시 살펴보겠습니다.

 

 

Chrome의 개발자 도구는 [F12] Key로 표시할 수 있습니다. 마우스 우클릭 후 나오는 바로가기 메뉴에서 [요소검사]를 선택하셔도 동일한 개발자 도구가 표시됩니다. 개발자 도구의 도구상자 가장 좌측을 보면 휴대폰처럼 생긴 아이콘이 하나 있습니다.

 

 

Toggle device mode 라는 이름을 가진 아이콘인데요, 클릭하면 Device mode를 활성화할 수 있습니다. Device mode를 활성화하게 되면 화면이 좀 다르게 보입니다. Device / 해상도 등을 선택할 수 있게 되고 좌측과 위쪽에 Ruler도 표시되어 편리하게 볼 수 있습니다. Device mode를 활성화하는 단축키는 Windows PC의 경우 [Ctrl]+[Shift]+[M] 이고, MAC은 [Command]+[Shift]+[M]으로 활성화 할 수 있습니다. 단축키를 누르기 전에 개발자 도구는 열어놓은 채로 단축키를 눌러야 합니다.

 

Device Mode에 입력해 볼 수 있는 내용은 아래 그림과 같습니다.

 

 

먼저 아래 Selectbox를 눌러 Device를 선택할 수 있습니다. 

 

 

Selectbox를 눌러보면 현재 유통되는 Device들을 선택할 수 있고, 선택하면 해상도가 선택한 단말기의 해상도로 변경되고 화면도 그에 맞춰 변경됩니다. 보통 화면을 Publishing 할 때 단말기마다, 해상도마다 해보기가 쉽지 않지만 Chrome의 이 기능을 사용하면 생각보다 편리하게 해상도 별로 개발한 화면이 어떻게 적용될지 테스트해 볼 수 있습니다.

(물론 실제로 Device에 올려보면 또 다른 점이 발생합니다. Mobile Browser인지, WebView 인지에 따라서도 달라지는 부분들이 있으니 반드시 최종적으로는 Device에 올려보시는 편이 좋습니다.)

 

 

요 놈은 Emulate screen resolution 이라는 체크박스이며 Device를 선택하거나 직접 입력한 해상도로 Emulate 할건지 말건지를 선택할 수 있습니다.

 

 

이 부분은 해상도를 입력하는 부분입니다. 물론 Device를 선택하면 해당 Device가 가진 해상도가 자동으로 입력되지만, 특정 해상도에서 테스트를 하고 싶다면 직접 입력할 수도 있습니다.

 

 

Portrait / Landscape를 변경할 수 있는 아이콘입니다.

 

 

Device pixel ratio를 입력할 수 있습니다. Device를 선택하면 기본적으로 자동으로 입력됩니다. 요즘 생산되는 Device의 QHD, Retina Display 등 고해상도 Display의 Device를 테스트하고자 할 경우 값을 변경해서 해볼 수 있습니다.

 

 

Broswer에 꽉차게 보여줄지, Pixel에 맞게 보여줄 지 선택하는 옵션입니다. 체크를 해제하면 시원시원하게 Browser에 꽉차게 볼 수 있습니다.

 

 

다음으로 Network Condition을 선택할 수 있습니다. 페이지에서 무거운 이미지 등을 많이 사용하지만 주 사용 대상이 느린 사내 Wi-Fi 사용자라고 할 때 미리 Network 상황을 고려하여 테스트 해 볼 수 있습니다. 허나.... 요즘은 모조리 빠른 LTE를 사용하므로 실제로는 늘 No throttling에 놓고 테스트 합니다;;.

 

 

마지막으로 User-Agent 값을 입력해 볼 수 있습니다. 페이지에서 혹은 Hybrid Application 이라면 User-Agent에 따라 분기하는 경우가 간혹 있습니다. WebView를 만들어서 개발할 경우 강제로 User-Agent에 값을 넣어서 보내기도 하고, Android/iOS를 구분할 때 사용하기도 합니다. 그럴 경우 편리하게 테스트해 볼 수 있습니다.

 

여기까지 Device mode에서 사용하는 도구상자의 내용을 알아보았습니다. 사실 큰 내용은 없지만 알아 두시면 생각보다 편리하게 테스트 할 수 있는 유용한 기능입니다. 이 도구상자 외에 개발자 도구의 Console 쪽으로 시선을 이동해보면, [Emulation] 이라는 탭이 있습니다. 해당 탭에는 도구상자에 입력하는 내용 외에도 다른 부분들이 있습니다만 간단하게 Sensors 메뉴만 보도록 하겠습니다.

 

Sensors 메뉴에는 크게 세 가지가 있습니다. 

 

-. Emulate touch screen

: Touch screen 기능을 활성화 합니다. 마우스 커서가 동글동글하게 변하고 손가락 대신 마우스로 터치 스크린을 사용한다고 보시면 됩니다. [Shift] 키를 누른 채로 사용하시면 pinch zoom 기능도 테스트 해 볼 수 있습니다.

 

-. Emulate geolocation coordinates

: 테스트하려는 페이지에서 HTML5 의 geolocation API를 사용한다면 Latitude와 Longitude를 입력해서 테스트 해 볼 수 있습니다.

 

-. Accelerometer

: geolocation과 마찬가지로 HTML5의 orientation API를 사용한다면 값을 입력하여 테스트 해 볼 수 있습니다.

 

위 내용은 Google Developer 사이트를 방문하시면 더욱 더 자세하게 나와 있습니다. 단, 당연히 영어로 나와 있습니다만, 그림이 많아 쉽게 볼 수 있습니다.

 

https://developer.chrome.com/devtools/docs/device-mode