# 화면 성능 분석

## 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>

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

<img src="https://lh6.googleusercontent.com/R2RIVpQUzi3OPa3U_L5Lmz-O6BH2EnFfNkIGPsszL82MotRTs07VaLa-zq6_WzYqMGxCC2DZRWbS6PGnhu2ixiVXFTBVUykQ8T42rWdctYXZXmIBf2slvdz-Yrdy2DUDh2JxuWjSkorcw3pvaelQugs" alt="" width="188">

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

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

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

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

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

![](/files/OATypZhbv4792HEbqKvt)

## 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}’ 형태로 표시 되며, 숫자 형태의 주소는 별표(\*)로 대체됩니다. ‘[관리 > 화면 관리](/imqa-guide/user-guide/mpm/management.md#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 메모리 사용량


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.imqa.io/imqa-guide/user-guide/mpm/screen-analysis.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.