Coding

자신의 스마트폰 또는 태블릿에 대해서 wifi 상태 일때 서버와 주고 받는 데이타의 대해서

패킷 확인을 통해 장치가 어떠한 값들을 주고 받는지 확인이 필요한 경우가 있다.

자신의 서비스의 보안적인 문제점을 찾거나 자신이 쓰고 있는 App들이 서버와 주고 받는

데이타를 확인하고자 하는 니즈가 있다고 생각한다. 

Android/iOS 에뮬레이터를 이용하여 가상으로 확인을 할 수 있겠지만

자신의 PC 데이타가 섞이는 문제가 있고 여러가지 보기 불편한 점이 많습니다.

단 이 방법은 노트북만 가능합니다.

(유선랜카드와 무선랜카드 장착되어 있거나 무선랜카드가 두개가 달려 있는 경우에만 사용이 가능합니다.)

방법은 아래와 같다.

1. 노트북에 랜선을 이용하여 인터넷을 연결한다.

2. 노트북을 Connectify와 같은 프로그램을 이용하거나 OS 내 Ad-hoc 서비스를 이용하여 notebook 이 wifi ap 가 되도록 설정한다.

3. 스마트폰/태블릿을 노트북 AP에 접속한다.

4. wireshark 와 같은 패킷 스니핑 프로그램을 통하여 해당 접속 장치의 IP로 필터링을 걸게되면 해당 장치가 통신하는 모든 패킷이 추출이 가능합니다.

Chrome Extention App 을 이용하여 성능측정을 통해 튜닝포인트를 찾는 것을 해보았다.

Google의 PageSpeed 제품 성능 측정은 현재 3가지 방법을 제공한다.

1. Browser Extention App

2014/10/31 - [튜닝/성능측정] - Chrome PageSpeed를 이용한 Front-End 성능측정

2. PageSpeed Insights 사이트를 이용하는 방법

2014/10/31 - [튜닝/성능측정] - PageSpeed insights를 이용한 성능측정

3. PageSpeed openapi를 이용

그럼 PageSpeed insights 사이트에 대해 간단히 알아보자.

장점

1. 데스크탑과 모바일을 한번에 확인할 수 있다.

2. 모바일 측정 결과에 사용자 환경에 대한 UX 적인 측정이 가능하다.(그렇게 디테일하진 않다.)

단점

1. User Agent와 같은 것을 변경하여 처리할 수 없다.

사용 방법

1. PageSpeed insights 에 접속
URL : https://developers.google.com/speed/pagespeed/insights/
측정하고자 하는 URL 을 입력 후 분석 버튼을 누른다.

2. 결과 값으로 아래와 같이 모바일 페이지의 대한 측정/사용자 환경에 대한 측정 스코어와 개선 사항을 제안해 준다.
추가적으로 캡처 화면을 제공하여 사용자가 좀 더 명확하게 알 수 있도록 제공한다.

3. 데스크톱 탭을 선택하면 데스크톱 단에서 나온 측정 스코어와 개선안을 제안해준다.

Chrome PageSpeed는  특정 페이지의 Front-End 단 튜닝 요소를 찾아주는 확장앱이다.

예전에는 스코어도 주었는데 Chrome Extention App에서는 현재 스코어는 빠져 있다.

특정 페이지(예: 메인 페이지)에 대해서 Front-End 단에 튜닝이 필요한 부분에 대해서 

상,중,하로 구분하여 보여주어 사용자가 우선적으로 처리해야 하는 부분과 방법을 제공한다.

사용법을 간단하며 아래와 같다.

1. 크롬 앱스토어에서 PageSpeed Insights 를 검색하여 설치.

2. Chrome 도구메뉴에서 개발자 도구를 선택한다.(windows는 F12, Mac CMD + option + i)

3. 개발자 도구 메뉴중 PageSpeed를 선택 한 후 분석 시작 버튼을 누르면 해당 페이지를 분석한다.

4. 분석이 완료되면 아래와 같이 결과값을 보여준다.
제안사항 요약을 보면 H,M,L 로 구분하여 튜닝이 필요한 부분에 대해서 제안한다.

각각의 부분을 누르면 상세 내용을 제공하므로 항목별로 눌러서 확인해보면 된다.

5. 제안내용 외에 이미 처리 되어 있는 부분은 아래와 같은 항목들이 있다. 실제 튜닝을 하지 않았다면 상당부분이 미 완료 되어 있는 것을 확인할 수 있다.