Chrome DevTools for Mobile: Screencast and Emulation

HTML5 Rocks

모바일을 위한 개발은 데스크탑의 그것만큼이나 쉬워야 합니다. 저희는 여러분이 작업을 더 쉽게 할 수 있도록 만들기 위해 크롬 개발자도구에 매진해왔으며 이제 모바일 웹 개발을 드라마틱하게 개선해줄 몇가지 새로운 기능이 베일을 벗을 때입니다. 우선 원격 디버깅(Remote Debugging)을 소개하고 이어 모바일 에뮬레이션에 대해 제대로 소개하도록 하겠습니다.

디바이스에서 데스크탑으로의 스크린캐스트(Screencast)

지금까지는 원격 디버깅을 하는 동안 여러분은 디바이스와 개발자도구 사이에서 눈이 왔다갔다해야 했습니다. 이제 스크린캐스트(Screencast)가 디바이스의 스크린을 개발자도구 바로 옆에 표시됩니다. 보기에도 괜찮지만 이를 통한 인터랙션은 더 훌륭합니다.

  • 스크린캐스트 상의 클릭들은 탭들로 번역되며 적절한 터치 이벤트가 디바이스에 발생됩니다.
  • 데스크탑 포인터를 이용하여 디바이스 상의 엘리먼트를 감시(Inspect)할 수 있습니다.
  • 데스크탑 키보드를 쳐서 -모든 키입력은 디바이스로 전달됩니다.- 이 엄청나게 시간을 절약할 수 있는 기능이 손가락으로 타이핑치는 작업을 끝내줄 것입니다.
  • 포인터를 내던지듯이 밀거나 랩탑 트랙패드 위를 슬라이드하는 것만으로도 페이지를 스크롤할 수 있습니다.

이 모든 것과 핀치 줌 제스쳐를 보내는 것과 같은 더 자세한 내용은 스크린캐스팅에 대한 전체 문서에 담겨있습니다.

설정 없는 원격 디버깅

18개월 전 크롬은 모바일 브라우저에 적합한 원격 디버깅을 소개했습니다만 만약 그때로 되돌아가서 이를 시도한다면 여러분은 400MB 안드로이드 SDK를 다운로드하고 adb 바이너리를 $PATH에 추가하고 몇가지 아주 특별한 커맨드 라인 주문과 씨름해야 할 것입니다.

이제 여러분이 이 모든 것들을 잊어버리셔도 된다는 것을 알려드려서 기쁩니다. 크롬은 USB로 연결된 디바이스를 이제 네이티브에서 탐색하고 통신합니다. adb 프로토콜이 USB를 통해 직접 이루어지도록 구현했으므로 여러분은 Menu > Tools > Inspect Devices로 쉽게 갈 수 있으며 원격 디버깅 세션을 즉시 시작할 수 있습니다.

이것은 크롬 OS를 토함한 모든 플랫폼에서 훌륭하게 동작합니다만 윈도우에서 여러분은 첫번째로 적합한 USB 드라이버들을 설치하는 것이 필요할 것이라는데 주의하시기 바랍니다.

추가 보너스: 크롬은 이제 여러분의 스크린이 원격 디버깅 시에 잠자기(Sleep) 모드로 진입하는 것을 방지합니다. 디버깅에는 좋지만 디바이스를 잘 관리하시기 바랍니다!

로컬 프로젝트를 위한 포트 포워드(Port-forward)

여러분이 localhost:8000에서 개발 중이라면 휴대폰은 저 서버에 도달하지 못할 것입니다. 그러므로 원격 디버깅 작업흐름(Remote Debugging Workflow)에 직접 포트 포워딩 기능을 추가하였습니다. 이제 어떠한 터널링 핵(hack)도 사용하지 않고 전체 프로젝트에서 쉽게 동작할 수 있습니다. about:inspect를 클릭하여 사용하길 원하는 포트가 어떤 것인지 포트 포워딩에 지정하고 난 뒤 실행할 수 있는 상태라면 녹색불이 들어올 것입니다.


모바일 에뮬레이션(Mobile Emulation)

여러분은 호환성 테스트에 필요한 디바이스를 항상 가지고 있는 것은 아닙니다, 그렇죠? 원격 디버깅 시에 실제 디바이스가 최고의 성능 체감과 터치감을 줬다면 데스크탑에서 다양한 디바이스의 특성을 실제처럼 에뮬레이션하는 것은 시간을 절약하고 여러분의 반복 작업을 훨씬 빠르게 만들어 줄 것입니다.

화면 사이즈, devicePixelRatio 그리고 전체 터치 이벤트 시뮬레이션과 <meta viewport>.

만약 이전의 Device Metrics 기능을 본 적이 있다면 현재 제공되는 기능들은 엄청나게 업그레이드되었는지 알 수 있을 겁니다! (크롬)팀은 실제 디바이스에서 본 것을 실제와 근접하게 표현하는 새로운 모바일 에뮬레이션을 만들기 위해 열심히 일했습니다. 예를 들어 WebKit 브라우저들은 복잡한 텍스트의 자동크기조절 알고리즘을 관리하고 (사실) 각 디바이스는 또렷한 텍스트를 유지하는 것을 도울 수 있도록 하는 텍스트 자동크기조절을 위해 특유의 "속임수 인자(Fudge factor)"를 가지고 있습니다.

Device Pixel Ratio

현재까지 저해상도(low-DPI) 디바이스 상에서 고해상도(hi-DPI) 디바이스를 표시하는 것을 보는 것은 거의 불가능했습니다. 이제 개발자도구의 dPR 에뮬레이션은 여러분을 DPI 시나리오로 깊게 빠져들 수 있도록 뷰를 적용할 것입니다. 추가로 window.devicePixelRatio, @media (-webkit-min-device-pixel-ratio: 2), image-set( url(pic2x.jpg) 2x, …) 등 설정을 반영하고 앱이 DPI에 의존적인 각기 다른 리소스들을 로딩하는데 얼마나 적합한지 볼 수 있습니다.

디바이스 에뮬레이션은 브라우저의 기능들이나 버그에 대해 모든 방향으로 확장 지원되는 것은 아닙니다. 그러므로 iOS를 에뮬레이션하는 동안에도 WebGL은 여전히 동작할 것이며 iOS 5의 오리엔테이션 줌 버그(Orientation zoom bug)를 경험할 일도 없을 것입니다.

<meta viewport> (과 @viewport)의 제대로 된 에뮬레이션

width=device-width 그리고 minimum-scale:1.0이 무엇인지에 대한 동작 테스팅은 이미 예전에 디바이스들만의 게임이 되어버렸습니다. 이제부터는 각기 다른 뷰포트들을 재빠르게 시도해볼 수 있으며 어떻게 렌더링되는지 관찰할 수 있을 것입니다.

프로의 팁 디바이스에서의 핀치 줌을 흉내내고 싶다면 쉬프트-드래그나 쉬프트-스크롤을 사용하세요.

터치 이벤트 시뮬레이션

터치스크린의 설정을 에뮬레이션하는 것은 클릭들이 확실하게 touchstart 등의 형식으로 번역되도록 만들어 줄 것입니다. 핀치-줌(Pinch-zoom)을 하기 위해서는 간단하게 shift + 드래그(Drag)나 shift+ 스크롤(Scroll)로 컨텐츠의 줌을 처리할 수 있습니다. 뷰포트 뒤의 컨텐츠 스케일에 대한 훌륭한 뷰를 가지게 될 것입니다.

마지막으로 준비된 (요청 헤더와 window.navigator 수준 모두에서의) useragent 위장(Spoofing), 위치정보(Geolocation), 방향(Orientation) 에뮬레이션은 디바이스의 전체 기능을 탐색할 수 있도록 할 것입니다.

디바이스 프리셋

에뮬레이션 프리셋은 여러분이 폰이나 태블릿을 선택하고 해당 디바이스에서 적용될 올바른 화면 크기, dPR, UA와 더불어 전체 터치 이벤트와 뷰포트 에뮬레이션까지 설정하게 해줍니다. 여러분은 특정한 프리셋으로 시도할 수도 있고 하나씩 각 특성들을 편리하게 조정해갈 수도 있습니다.

개발자도구를 이용한 모바일 에뮬레이션에 대한 전체 문서는 devtools.chrome.com를 방문해보시기 바랍니다.

데모

이 모든 기능 동작들의 전체 데모를 보시려면, 다음과 같이 제가 크롬 개발자 서밋에서 '모바일을 위한 개발자도구'에 대해 얘기한 23분간의 발표를 확인해보시기 바랍니다.

Comments

0