모바일웹 테스트

모바일웹을 직접 기기에서 일일이 모두 테스트하기란 생각보다 쉽지 않다

우선 모든 기기를 구할수 없다는게 가장 큰 이유 이기도 하다.

과거 포스팅에서 관련 내용으로 몇번 소개했던 프로그램으로도 가능하지만 최근에 사용하는 두가지 방법을 소개하고자 한다.

> 다음 트로이 ( Troy ) - 모바일웹의 사이즈만 테스트 한다면 추천

- 단순히 모바일 기기의 사이즈만 규격화 한 테스트만 가능하다.

- 하지만 여러기기 에대한 정리가 잘되어있고, 멀티스크린 모드로 (모니터만 크다면) 많은 기기를 동시에 볼수있다.

- 제법 국내 지원 기기들을 지원(사이즈만..)한다.

- 물론 트로이는 반응형 웹 테스터 이다  그리고 약 2년전에 다음 labs 에서 제공한 서비스 이다.

1. 우선 트로이 접속 ( http://troy.labs.daum.net )

- 접속하면 아래와 같은 화면을 볼수있다. 여기서 위에 주소란에 원하는 사이트 주소를 입력하고 좌측에 디바이스를 선택만 하면 

바로 우측공간에서 확인이 가능하다.

- 이때 좌측 상단에 멀티스크린모드 스위치를 켜주면 여러 디바이스를 동시에 확인해 볼수 있다.

직접 user_agent 를 적용하거나 수정 할수 있는 기능은 없어 내 블로그 주소를 넣었지만 모바일 페이지로 보여지지는 않고 있다;;

2. 상세 기능 사용법

- 1. 회전 을 클릭하면 기기가 가로 형태로 변경되는것을 볼수있다.

- 2. 주소창보이기 는 클릭시 실제 기기내 브라우져의 주소창을 재연하여 반응형 구현 내용을 디테일하게 확인해 볼 수 있다.

총평 : 반응형 사이트를 운영중이라면 여러 기기에서 동시에 테스트를 진행해 볼수 있는점은 장점 이라 하겠다.

> 크롬 카나리 ( Chrome Canary ) - 추천

- 크롬은 크롬이지만 '강심장에게만 권장', '야간업데이트', '병렬 설치' 등의 카피로 소개 하고 있는 크롬의 카나리 이다.

- 사용중인 크롬 정식 버전과 '병렬 설치' 가능하다 ( 같이 쓸수있다는 말을 참 어렵게 표현한  구글..

-  위에서 소개한 다음 트로이와 는 달리 user_agent 를 직접 반영한 테스트가 가능하며, 통신망 을 선택하여 실제 기기에서의 모바일웹페이지의 상태를 제법 유사하게 테스트 해볼수 있다.

- 트로이에 비해 기기 종류는 다양하진 않지만~! user_agent 수정과 디바이스 사이즈를 직접 조정 할수 있어 테스트 하려는 기기의 스팩만 안다면 얼마든지 테스트 해볼수 있다.

1. 우선 크롬 카나리 다운로드 페이지 에서 프로그램을 다운로드 하여 설치 한다 (설치 과정은 생략)

: https://www.google.co.kr/chrome/browser/canary.html

2. 사용방법

- 우선 설치후 카나리를 실행하면 일반 크롬의 영문버전으로 밖에 보이지 않는다.

- F12 를 눌러 개발자 도구를 열고 아래 그림에 왼쪽 맨하단에 파란색 스마튼폰 모양을 클릭하면 아래와 같은 UI 를 볼수있다.

- UI가 단순 하여 대충 봐도 다 아시리리 생각된다.

3. 상세 기능 사용법

- 우선 Device 옆 셀렉트박스를 클릭해보면 여러 디바이스가 정의 되어있다. 원하는 기기를 선택하면

- 내용은 해당기기의 사이즈로 설정되고 UA 에는 해당기기의 일반적인 user_agent 가 자동으로 작성되고, 실제 기기의 접속 화면과 같은 모습을 볼수있다. ( 즉, user_agent 로 구분하여 사이트를 보여주는 경우에도 실제 구동 화면을 확인할수 있다.)

- Portait : 카나리 역시 가로형 변형 모드가 존재한다.

- Network 는 예상하는것처럼 실제 통신사 에서 제공할법한 속도를 제현 하여 테스트 해볼수 있다 ( 3G, 4G, wifi 등)

- 그외에 하단에 Screen 에서는 원하는 사이즈를, UA 에서는 원하는 실제 user_agent 를 설정하여 테스트 해볼수 있다.

- 그외에 아래 기기 모양에서도 가로 세로르 직접 수정 할수도 있다.

- 조금더 디테일한 기기 테스트도 가능하다. 스크린샷에서는 안나왔지만 하단부를 좀더 열어보면 아래와 같은 화면을 볼수있다.

- 특히 Emulation > Sensors 에서는 터치스크린, GPS 는 물론 스마트폰 기울기 까지 테스트가 가능하다 !

- Rendering 에서도 Show paint rectangles , Show composited layer borders , Show FPS meter , Enable continuous page  repainting , Show potential scroll bottlenecks 등의 내용을 적용할수 있다.

총평 : 크롬 카나리 에서는 제법 실제 기기와 비슷한 많은 테스트가 가능하다! 적극 추천!

끝~