# 화면 성능 분석

## 1. **개요** <a href="#overview" id="overview"></a>

IMQA MPM 화면 성능 분석은 화면 별 성능을 30분 단위로 상세하게 확인할 수 있습니다. 화면 조회 수, 이벤트 등 사용자에 대한 정보와 각 성능 지표에 대한 히트맵을 통해 성능 분포와 저하 상황을 상세하게 분석할 수 있습니다.

{% hint style="warning" %}
현재 리액트 네이티브 프로젝트에서의 화면 성능 분석은 네이티브 데이터 중심으로 표시됩니다. 컴포넌트별 성능 분석 기능은 추후 업데이트 예정입니다.
{% endhint %}

### **화면 설명** <a href="#screen" id="screen"></a>

![](https://lh4.googleusercontent.com/9ySI7tA337ijwJJY6MxJVy5TBshDqmL8SSWR53YujwBlHdIUSJ4jCD-u-8Z84xry5TenUWZtacYiA9JvmsASj5dYo-_0aD_YozBbXpC49yc-WvMpT1nRK6Iq9ybaIOxGUNjySs0x0qyoU0Soki1RCyI)

‘대시보드'에서 특정 화면 카드를 클릭하면 이동할 수 있으며, IMQA MPM 화면 성능 분석은 다음과 같이 구성됩니다.

❶ **화면/분석 시간**\
❷ **화면 성능 정보**\
❸ **화면 유입 정보**\
❹ **화면 이벤트**\
❺ **성능 히트맵**

## **2.** 화면/분석 시간 <a href="#screen-time" id="screen-time"></a>

분석하고자 하는 화면과 분석 날짜, 시간을 변경할 수 있습니다. 기본 ‘대시보드’에서 클릭한 ‘화면', ‘오늘 날짜’, ‘현재 시간대'로 설정되어 있으며 변경 시 화면 성능 분석 정보를 선택한 기준으로 갱신합니다.

![](https://lh6.googleusercontent.com/R2RIVpQUzi3OPa3U_L5Lmz-O6BH2EnFfNkIGPsszL82MotRTs07VaLa-zq6_WzYqMGxCC2DZRWbS6PGnhu2ixiVXFTBVUykQ8T42rWdctYXZXmIBf2slvdz-Yrdy2DUDh2JxuWjSkorcw3pvaelQugs)

![](https://lh6.googleusercontent.com/U5CxEZqsYnOWTwWcMHXnCpdNeNKv_OuMPAyfwKPTZtsXm45HwsJQ5BrIUXa__QaXzh5_zzU8khu09riXePcxr7wxK0IflfJHQojeU8aenkgj_X2ECso5-OaR8CqG7Uydf_KQwV5QuenyX7lbGogQcS0)

❶ **분석 날짜**\
기본 ‘오늘 날짜'로 설정 되며 \[<] \[>] 클릭 시 분석 날짜를 변경할 수 있습니다. 최대 30일 전까지 선택할 수 있습니다.

❷ **선택한 시간대**\
선택한 시간대를 표시합니다. 다른 시간대로 변경할 수 있습니다.&#x20;

❸ **현재 시간대**\
‘현재 시간'이 포함된 시간대를 표시합니다.

❸ **범례**\
각 시간대별 집계된 데이터 수에 따라 타임라인 색상 농도를 4단계로 표시합니다.

![](https://3726060384-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzFyCopc6yAp3UcEYW6la%2Fuploads%2FZxH9PAR6ndgNXHdhKGj8%2Fimage.png?alt=media\&token=c9ba42bc-cf3a-4ed8-a4f1-ceb4e5078370)

## 3. 화면 성능 정보 <a href="#screen-performance" id="screen-performance"></a>

30분 동안의 화면 로딩시간, 응답시간, CPU, 메모리의 성능 지표의 하위 5%의 평균과 전체 평균을 표시합니다.

![](https://lh5.googleusercontent.com/1Brn3BOq9iZiczPhzWwss52BnLIZotdREbiLGngVpDroHs8AC6hai-bHT-3rNOPbE0svDrDyjvsiCS-VRSk2CHovH5pH1AWLy4wXHI1iP4PxiQWvJvI7eivppw13f35hWg-am9rPNzQ4L7FsNxGhdO8)

{% hint style="info" %}
이를 통해 특정 화면에 어떤 성능 저하가 있었는지 한눈에 확인할 수 있습니다. 또한 앱 사용자들이 평균적으로 화면 로딩에 문제를 겪는지, 요청에 대한 응답이 느렸는지 등 성능 저하 요인을 분석할 수 있습니다.
{% endhint %}

## 4. 화면 유입 정보 <a href="#screen-inflow" id="screen-inflow"></a>

### 화면 조회 수 <a href="#screen-view" id="screen-view"></a>

30분 동안의 화면 조회 수를 확인할 수 있습니다.

![](https://lh6.googleusercontent.com/MQxh2Z5zfYcMmtKqoULV1D-KvvnwSiIlPsB-9XDC9bcYAWhFWyGw5_awguDPjGE3j0WxLREtSXUcpJGtOkcptVJjkHYD9B9cZcGm_haU7bkDq_gfCNl9cZ93nBV5XBfjrgbM2KDghWQN0eyj1EJbe-k)

* **화면 조회 수**: 30분 동안의 해당 화면 방문 수를 카운트합니다.

### 화면 이동 경로 <a href="#screen-flow2" id="screen-flow2"></a>

30분 동안의 사용자가 이동한 직전, 직후 화면 경로를 확인할 수 있습니다.

![](https://lh6.googleusercontent.com/hRHLZ7RWoa-WDa-xh441Xqqay3VkLgJA5cV44LUnW1N9Pf4ZdQ7lJ8icI_EcFF-GWsX0SIFnKPuPORaxYgq1TEK3uiFQV4SnXySa7YT7XL_maOvEUOpxD7tEdiM8y-mVZPu9IbuzLr-4aAcSGbK5JOI)

해당 화면을 중심으로 가장 주된, 중요한 흐름을 찾을 때 유용하며 시각적으로 파악할 수 있습니다. 화면과 화면 사이의 영역에 마우스 포인터를 올리면 ‘From : 유입화면→화면이름: 방문 수 & 화면이름→ To : 대상화면: 방문 수’로 툴팁이 표시됩니다.

* **방문 수**: 특정 화면에서 특정 화면으로 이동한 사용자 수를 카운트합니다.

{% hint style="info" %}
특정 경로가 크게 강조될 경우, 해당 경로로 이동하는 사용자가 많다고 해석할 수 있습니다. 앱의 목표 화면 기준, 강조된 경로를 최적화해야 함을 의미합니다.
{% endhint %}

## 5. 최근 발생 이벤트 <a href="#screen-event" id="screen-event"></a>

30분 동안의 해당 화면에서 발생한 이벤트를 10개까지 표시합니다. 발생 시간 순으로 정렬되며, 이벤트 속도를 함께 확인할 수 있습니다.

![](https://lh4.googleusercontent.com/kE1ZyIr6Y8gkWsZUn0qcd_QAN-L5ODqva2sNmXtkmJ-pVRMR-Cf4oJ3atDcNd8g5_5nBrOzKH9IGWfSjfDlzOeezEZGMJLRP81esVvm7wvVgNZMcr908J7RjGEtqFxWbUjtWRxCFaRsldUJshM7DykM)

* **이벤트 명**: 발생한 이벤트를 표시합니다.
* **발생일시**: 해당 이벤트가 발생한 시간을 표시합니다.
* **속도**: 해당 이벤트의 속도를 표시합니다.

## 6. 성능 히트맵 <a href="#heatmap" id="heatmap"></a>

각 성능 지표에 대한 히트맵을 통해 성능 분포와 성능 저하 상황을 상세하게 분석할 수 있습니다. 웹/하이브리드 앱의 경우 ‘웹뷰 화면 로딩시간', ‘웹뷰 응답시간'이 추가 표시됩니다. 안드로이드 앱의 경우 ‘프래그먼트 로딩시간'이 추가 표시됩니다.

### 네이티브 화면 로딩시간 <a href="#native-rendering-time" id="native-rendering-time"></a>

30분 동안의 해당 네이티브 화면의 화면 로딩시간을 확인할 수 있습니다. 셀에 마우스 포인터를 올리면 ‘분석 날짜 | 분석시간 | 데이터 수 | 성능 구간’으로 툴팁이 표시됩니다. 히트맵 영역에서 원하는 셀을 클릭하거나, 마우스 드래그로 구간을 선택하면 ‘네이티브 트레이스 뷰 분석' 팝업을 표시합니다.

![](https://lh6.googleusercontent.com/EgpMZHCVS6V5tSAA36kNv6p400JPWMHZw-thY9uZxPDouHSS4DgahzYooQb4GvKPKGcpJOav0nGV6Io1elIBuFiWJoz6SK8SOnwpHgHoQ2_EU3xfWNfDsnLv-1XhzDsCsNsqF7MNe0ohNih3yjHutPg)

* **화면 로딩시간:** 해당 네이티브 화면 로딩시간을 구간으로 산출합니다.
* **범례**: 기준치 이상 구간일 경우 <mark style="color:red;">빨강</mark>, 미만일 경우 <mark style="color:blue;">파랑</mark>으로 표시하며, 같은 시간 축에 집계된 데이터 비율에 따라 색상 농도를 4단계로 표시합니다.

&#x20;      <mark style="color:red;">◼︎</mark> 기준치 이상 <mark style="color:blue;">◼︎</mark> 기준치 미만

### 웹뷰 화면 로딩시간 <a href="#webview-rendering-time" id="webview-rendering-time"></a>

해당 네이티브 화면에 속한 웹뷰 화면이 있을 경우, 웹뷰 화면 로딩시간을 확인할 수 있습니다. 기본 ‘전체' 웹 페이지 기준으로 히트맵이 표시되며 페이지 변경 시 히트맵을 갱신합니다. 셀에 마우스 포인터를 올리면 ‘분석 날짜 | 분석시간 | 데이터 수 | 성능 구간’으로 툴팁이 표시됩니다. 히트맵 영역에서 원하는 셀을 클릭하거나, 마우스 드래그로 구간을 선택하면 ‘웹 리소스 분석' 팝업을 표시합니다.

![](https://lh4.googleusercontent.com/dqmGQCNzefi1nV7YmqnOZjCmYtSXKhgNnsA0RhShwUsiNz3kKZQ_g-Qo708znXNFt7W-9_0c0J0reCopnzeNaMr4WduFBO7cNsL7FR1LuyCfb687doJX7KZ2Ey7EQ4C-dtQ5DwaKjpQuLbFYWA68dBM)

* **화면 로딩시간:** 해당 웹 페이지의 화면 로딩시간을 구간으로 산출합니다.
* **범례**: 기준치 이상 구간일 경우 빨강, 미만일 경우 파랑으로 표시하며, 같은 시간 축에 집계된 데이터 비율에 따라 색상 농도를 4단계로 표시합니다.

&#x20;      <mark style="color:red;">◼︎</mark> 기준치 이상  <mark style="color:blue;">◼︎</mark> 기준치 미만

{% hint style="info" %}
웹 페이지는 ‘{host}:{port}/{path}’ 형태로 표시 되며, 숫자 형태의 주소는 별표(\*)로 대체됩니다. ‘[관리 > 화면 관리](https://docs.imqa.io/imqa-guide/user-guide/management#screen-management)'에서 이해하기 쉬운 이름으로 변경할 수 있습니다.
{% endhint %}

### 네이티브 응답시간 <a href="#native-response-time" id="native-response-time"></a>

30분 동안의 해당 네이티브 화면에서 요청한 HTTP 응답시간을 확인할 수 있습니다. 셀에 마우스 포인터를 올리면 ‘분석 날짜 | 분석시간 | 데이터 수 | 성능 구간’으로 툴팁이 표시됩니다. 히트맵 영역에서 원하는 셀을 클릭하거나, 마우스 드래그로 구간을 선택하면 ‘상세 응답 분석' 팝업을 표시합니다.

![](https://lh3.googleusercontent.com/V1oMpt9MViuTFvika3l9wOxpgYIE326U68Fa_O3jmWM4VBBSaNfQonFe0rUqniD_oodRpe52TQbKWA47GFP3tJY5xzx-RH0Kffi7OgExTnUH0fqM7snn9JLr0X-b4WAnrWAsef8hOVz_5ci1zOVYi3o)

* **응답시간:** HTTP 응답시간을 구간으로 산출합니다.
* **범례**: 수집된 HTTP 정보에서 4xx대 5xx대 응답코드인 경우에는 <mark style="color:red;">빨강</mark>, 그 외 응답코드일 경우 <mark style="color:blue;">파랑</mark>으로 표시하며, 같은 시간 축에 집계된 데이터 비율에 따라 색상 농도를 4단계로 표시합니다.

&#x20;     <mark style="color:red;">◼︎</mark> 4xx, 5xx 대 상태 코드  <mark style="color:blue;">◼︎</mark> 그 외

### 웹뷰 응답시간 <a href="#webview-response-time" id="webview-response-time"></a>

30분 동안의 해당 웹뷰 화면에서 요청한 HTTP 응답시간을 확인할 수 있습니다. 셀에 마우스 포인터를 올리면 ‘분석 날짜 | 분석시간 | 데이터 수 | 성능 구간’으로 툴팁이 표시됩니다. 히트맵 영역에서 원하는 셀을 클릭하거나, 마우스 드래그로 구간을 선택하면 ‘상세 응답 분석' 팝업을 표시합니다.

![](https://lh6.googleusercontent.com/m1jUV7oaSJ_KATHnfCzEVpTRbX3AvanYTHSw_rn-gqsfoEPKFTz2l6e9igVzDNEaw1ocxJPh6ZpWc8gNNogEPleAQzeNkkTt9BSf2z0KZ-XPJNs5h-TYvHvb7BTshtT9-Gj8pKIZdnPQ0osCdTCRZBQ)

* 응답시간: HTTP 응답시간을 구간으로 산출합니다.
* 범례: 수집된 HTTP 정보에서 4xx대 5xx대 응답코드인 경우에는 <mark style="color:red;">빨강</mark>, 그 외 응답코드일 경우 <mark style="color:blue;">파랑</mark>으로 표시하며, 같은 시간 축에 집계된 데이터 비율에 따라 색상 농도를 4단계로 표시합니다.

&#x20;     <mark style="color:red;">◼︎</mark> 4xx, 5xx 대 상태 코드  <mark style="color:blue;">◼︎</mark> 그 외

### 프래그먼트 로딩시간&#x20;

<mark style="color:red;">\* 안드로이드 앱 전용</mark>

해당 네이티브 화면에 속한 프래그먼트 화면이 있을 경우, 프래그먼트 로딩시간을 확인할 수 있습니다. 기본 ‘전체' 프래그먼트 기준으로 히트맵이 표시되며 프래그먼트 변경 시 히트맵을 갱신합니다. ‘대시보드' 또는 ‘화면 분석'에서 특정 프래그먼트 화면 카드를 클릭해서 이동했을 경우, 선택한 프래그먼트로 히트맵을 표시합니다. 셀에 마우스 포인터를 올리면 ‘분석 날짜 | 분석시간 | 데이터 수 | 성능 구간’으로 툴팁이 표시됩니다. 히트맵 영역에서 원하는 셀을 클릭하거나, 마우스 드래그로 구간을 선택하면 ‘네이티브 트레이스 뷰 분석' 팝업을 표시합니다.

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXf_p8ZY17hcERy8Xhnnx1iIQ5GOlz-SSnUXyw76GOkV_2cIsOK-t1w_zg_Q4ms8ftpVKhONQgFG_jc2PjL5D3GjVK4lgOCBI1p3szCWLvS2fBg8cZoHv6C2o8dTSe6TbJ8yDAt4qQKVgUh5kQRhfEJQ125Y?key=8C3xMx2Qg8H9O2BlHdriFA" alt=""><figcaption></figcaption></figure>

* 로딩시간: 해당 프래그먼트 화면 로딩시간을 구간으로 산출합니다.
* 범례: 같은 시간 축에 집계된 데이터 비율에 따라 색상 농도를 4단계로 표시합니다.

### CPU <a href="#cpu" id="cpu"></a>

30분 동안의 해당 네이티브 화면에서 소모된 CPU 사용량을 확인할 수 있습니다. 셀에 마우스 포인터를 올리면 ‘분석 날짜 | 분석시간 | 데이터 수 | 성능 구간’으로 툴팁이 표시됩니다. 히트맵 영역에서 원하는 셀을 클릭하거나, 마우스 드래그로 구간을 선택하면 ‘네이티브 스택 분석' 팝업을 표시합니다.

![](https://lh6.googleusercontent.com/C1NqgRnDNlpqZxUEZ2VhupFGAuolVuJD6ywAO7I7tB9wCjIZioqoNgzK5N_8u4c3tf4EaljxwUPGsXyMyMFocWtCX0y6GFOSL_8YZyH8Q1K9y5m6BiuCd9M1BTuFXX0wtTh2-7PLRsDTA70dC0hekNA)

* **CPU 사용량:** CPU 사용량을 구간으로 산출합니다.
* **범례:** OS 사용량은 <mark style="color:green;">초록</mark>, APP은 **검정**으로 표시하며, 같은 시간 축에 집계된 데이터 비율에 따라 색상 농도를 4단계로 표시합니다.

&#x20;     <mark style="color:green;">◼︎</mark> OS CPU 사용량  ◼︎ APP CPU 사용량

### **메모리** <a href="#memory" id="memory"></a>

30분 동안의 해당 네이티브 화면에서 소모된 메모리 사용량을 확인할 수 있습니다. 셀에 마우스 포인터를 올리면 ‘분석 날짜 | 분석시간 | 데이터 수 | 성능 구간’으로 툴팁이 표시됩니다. 히트맵 영역에서 원하는 셀을 클릭하거나, 마우스 드래그로 구간을 선택하면 ‘네이티브 스택 분석' 팝업을 표시합니다.

![](https://lh3.googleusercontent.com/SKb02-kf_UrKpKGlONIRh39KP2WlxHTPku3k0u4PYe9RqBYsVAymxi0P0QlqI3-IRS8OWS9IYzmHcn_Q_4uOEld1PI8D6vr6anZIbvolnRh3pQlf0lADPsJg6lIktEX3fJLZCYo-3HbAQNqCg5EN6qY)

* **메모리 사용량:** 메모리 사용량을 구간으로 산출합니다.
* **범례**: OS 메모리 사용량은 <mark style="color:green;">초록</mark>, 앱 메모리 사용량의 경우 **검정**으로 표시하며, 같은 시간 축에 집계된 데이터 비율에 따라 색상 농도를 4단계로 표시합니다.

&#x20;     <mark style="color:green;">◼︎</mark> OS 메모리 사용량  ◼︎ APP 메모리 사용량