# IMQA 활용하기

IMQA를 더욱 효과적으로 쓰는 방법을 소개해 드립니다. 아래 상황, 기능에 따른 활용 방법을 확인해 보시고, 지금 바로 시작해 보세요! 아래 내용을 포함한 IMQA 제품 및 기술 이야기는 [IMQA 기술 블로그](https://blog.imqa.io/)에서 확인하실 수 있습니다. 

## Ⅰ. 솔루션별 주요 기능 및 활용 방법

### 1. 모바일 성능 모니터링 솔루션 MPM

#### (1) 주요 기능 

<table data-header-hidden><thead><tr><th width="187"></th><th></th></tr></thead><tbody><tr><td><strong>주요 기능</strong></td><td><a href="https://blog.imqa.io/tag/mpm-feature/">MPM 기능 전체 보기</a></td></tr><tr><td><strong>대시보드</strong></td><td><p>MPM의 대시보드는 앱 버전 별로 성능을 확인할 수 있는 성능 대시보드와 2개의 프로젝트를 동시에 확인할 수 있는 A/B 대시보드로 구성되어 있습니다.</p><p></p><p><strong>성능 대시보드</strong>에서는 실시간 모니터링을 통해 <strong>전체적인 앱 성능 현황을 한눈에</strong> 파악할 수 있고, <strong>A/B 대시보드</strong>에서는 직관적으로 <strong>A/B 데이터를 동시에 확인할 수 있고, 비교</strong>할 수 있습니다.</p><p></p><p>[<a href="https://blog.imqa.io/imqa-dashboard/">기능 소개</a>] / [<a href="https://blog.imqa.io/imqa-faq-dashboard/">자주 묻는 질문</a>]</p></td></tr><tr><td><strong>행동분석</strong></td><td><strong>행동 분석은 사용자가 어떤 흐름으로 앱을 이용했는지 분석할 수 있는 기능입니다.</strong> 문제가 발생했을 때나 고객 CS 대응 시 <strong>사용자가 어떤 흐름으로 사용했고, 어느 부분에서 문제를 겪었는지 클릭 한번으로 정확히 확인</strong>할 수 있습니다. 이동 경로를 재현해 보며 장애의 원인을 빠르게 확인하고 대처할 수 있습니다.<br><br>[<a href="https://blog.imqa.io/imqa-user-behavior-analysis/">기능 소개</a>] / [<a href="https://blog.imqa.io/imqa-user-behavior-analysis-2/">상황별 활용 방법</a>]</td></tr><tr><td><strong>화면 성능 분석 &#x26; 성능 상세 분석</strong></td><td><p><strong>화면 성능 분석</strong>에서는 화면 별 성능 현황과 화면 조회 수, 이동 경로를 한눈에 확인할 수 있습니다. 성능 지표에 대한 <strong>히트맵을 통해 성능 분포와 저하 상황을 상세히 분석</strong>할 수 있습니다.<br></p><p><strong>성능 상세 분석</strong>은 네이티브/웹뷰의 성능 현황을 상세히 분석할 수 있는 기능입니다. <strong>코드 레벨</strong>로 호출된 함수들을 분석하여 <strong>성능 저하 문제 원인을 파악</strong>할 수 있습니다.</p><p><br>[<a href="https://blog.imqa.io/imqa-screen-performance-detailed-performance-analysis/">기능 소개</a>]</p></td></tr><tr><td><strong>통계</strong></td><td><strong>통계에서는 과거 데이터를 기간과 조건으로 조회하여 확인 및 분석이 가능</strong>합니다. 구간분석, 성능분석, 화면분석, 성능통계, 사용자 통계로 구성되어 있으며, 관리 목적에 따라 원하는 데이터를 조회, 분석할 수 있습니다.<br><br>[<a href="https://blog.imqa.io/imqa-statistics/">기능 소개</a>]</td></tr><tr><td><strong>알림, 보고서, 관리</strong></td><td><strong>알림</strong>을 통해 성능 지표별 알림 기준치와 특정 버전, 디바이스 등 다양하게 알림 설정이 가능합니다.<br><strong>보고서</strong>에서는 앱 버전별 측정된 성능 지표에 대한 리포트를 확인할 수 있습니다. <br><strong>관리</strong>에서는 간편하게 프로젝트 관리가 가능하며, 화면 이름 변경으로 더욱 편리하게 MPM을 이용할 수 있습니다.<br><br>[<a href="https://blog.imqa.io/imqa-report-alert-manage/">기능 소개</a>] / [<a href="https://app.gitbook.com/s/X3ORtb1pce7Cpo11Ufww/installation-guide/ios/crash-sdk-install">자주 묻는 질문</a>]</td></tr></tbody></table>

#### (2) 데이터 가이드

<table data-header-hidden><thead><tr><th width="189"></th><th></th></tr></thead><tbody><tr><td><strong>데이터 읽기</strong></td><td><p>1. 실시간 모니터링<br>[<a href="data/mpm1">전체 보기</a>] / [<a href="https://blog.imqa.io/mpm-data1/">블로그 요약본 보기</a>]<br></p><p>2. 전체 모니터링 (통계)</p><p>[<a href="data/mpm2">전체 보기</a>] / [<a href="https://blog.imqa.io/mpm-data2/">블로그 요약본 보기</a>]<br><br>3. 웹뷰 타임라인</p><p>[<a href="data/mpm3">전체 보기</a>] / [<a href="https://blog.imqa.io/mpm-data3/">블로그 요약본 보기</a>]</p></td></tr><tr><td><strong>기능/차트별 데이터 읽기</strong></td><td>- <a href="https://blog.imqa.io/screen-performance-analysis_bubble-chart/">화면별 성능 현황 (버블 차트)</a><br>- <a href="https://blog.imqa.io/performance-indicators-for-the-last-5minutes/">최근 5분 성능 지표 (히스토그램)</a><br>- <a href="https://blog.imqa.io/statistics-distribution-analysis/">통계 > 구간 분석</a></td></tr><tr><td><strong>데이터 퀴즈</strong></td><td>- <a href="https://blog.imqa.io/dataquiz1/">모니터링</a><br>- <a href="https://blog.imqa.io/dataquiz2/">웹뷰 타임라인</a></td></tr></tbody></table>

### 2. 웹 프론트엔드 성능 모니터링 솔루션 WPM

#### (1) 주요 기능

<table data-header-hidden><thead><tr><th width="194"></th><th></th></tr></thead><tbody><tr><td><strong>주요 기능</strong></td><td>[<a href="https://blog.imqa.io/wpm-introduction/">주요 특징 알아보기</a>] / [<a href="https://blog.imqa.io/tag/wpm-feature/">기능 전체 보기</a>]</td></tr><tr><td><strong>대시보드</strong></td><td>대시보드를 통해 <strong>전체적인 성능을 한눈에 파악</strong>할 수 있습니다. 최근 30분 간의 성능을 1분 단위로 업데이트하여 실시간으로 모니터링이 가능합니다.<br><br>[<a href="https://blog.imqa.io/wpm-dashboard/">기능 소개</a>]</td></tr><tr><td><strong>행동분석</strong></td><td>행동 분석은 <strong>클릭 한 번으로 시작부터 종료까지, 사용자가 어떤 흐름으로 웹사이트를 이용했는지 분석할 수 있는 기능</strong>입니다.<br><br>[<a href="https://blog.imqa.io/wpm-behavior-analysis/">기능 소개</a>]</td></tr><tr><td><strong>페이지 성능 분석 &#x26; 성능 상세 분석</strong></td><td><strong>페이지 성능 분석</strong>에서는 페이지별 <strong>성능 분포와 저하 상황을 분석</strong>할 수 할 수 있으며, <strong>웹 바이탈 평가 수치 및 저하 요인 분석</strong>이 가능합니다.<br><strong>성능 상세 분석</strong>에서는 최다 지표인 7개의 지표를 통해 상세 원인 분석이 가능합니다.<br><br>[<a href="https://blog.imqa.io/wpm-performance-analysis/">기능 소개</a>]</td></tr><tr><td><strong>통계</strong></td><td><p><strong>통계에서는 과거 데이터를 기간과 조건으로 조회하여 확인 및 분석이 가능</strong>합니다. 구간분석, 성능분석, 화면분석, 성능통계, 사용자 통계로 구성되어 있으며, 관리 목적에 따라 원하는 데이터를 조회, 분석할 수 있습니다.</p><p></p><p>[<a href="https://blog.imqa.io/wpm-statistics/">기능 소개</a>]</p></td></tr><tr><td><strong>알림, 보고서, 관리</strong></td><td><strong>알림</strong>을 통해 성능 지표별 알림 기준치를 설정할 수 있습니다.<br><strong>보고서</strong>에서는 앱 버전별 측정된 성능 지표에 대한 리포트를 확인할 수 있습니다.대시보드에서 확인은 물론 이메일로 알림을 받아 장애 발생 전 대처할 수 있습니다.
<br><strong>관리</strong>에서는 간편하게 프로젝트 관리가 가능하며, 화면 이름 변경으로 더욱 편리하게 WPM을 이용할 수 있습니다.<br><br>[<a href="https://blog.imqa.io/wpm-report-alert-management/">기능 소개</a>]</td></tr></tbody></table>

&#x20;

#### (2) 기본 설정 & 데이터 읽기

<table data-header-hidden><thead><tr><th width="197"></th><th></th></tr></thead><tbody><tr><td><strong>WPM 기본 설정</strong></td><td><p>WPM은 허용된 도메인에서만 데이터를 수집하므로 메인 도메인 URL 외 성능 데이터 수집을 원하는 도메인이 있다면 아래 내용을 참고하여 <strong>교차 도메인 설정</strong>해 보세요.</p><p></p><p>교차 도메인 외에도 <strong>알림/기준치/화면 보기 설정</strong>을 통해 WPM을 효율적으로 사용하실 수 있습니다.</p><p></p><p>[<a href="https://blog.imqa.io/wpm-setting-01/">블로그에서 한 번에 확인하기</a>]</p><p></p><p>* 사용자 가이드에서 보기</p><p>[<a href="../wpm/projectlist#domain">교차 도메인 설정</a>] / [<a href="../wpm/alert#setting">알림 설정</a>] / [<a href="../wpm/management#project-preset">기준치 설정</a>] / [<a href="../wpm/management#screen-view-setting">화면 보기 설정</a>] </p></td></tr><tr><td><strong>'URL 패턴' 설정</strong></td><td><p>대부분의 웹사이트에서는 추적 분석을 위한 식별 값, 광고, 검색어 등으로 여러 개의 파라미터가 생성됩니다. 이에 <strong>1개의 페이지에 여러 개의 URL이 생기는 경우</strong>가 많습니다. 웹 프론트엔드 모니터링 솔루션 WPM에서는 사용자가 접속한 URL 데이터를 수집하기 때문에 여러 개의 URL 페이지로 보일 수 있습니다.</p><p>이 경우 <strong>데이터가 파편화되기 때문에 모니터링이 불편할 수 있습니다. 이때 ‘URL 패턴 설정’을 하시면 더욱 편리하고, 효과적으로 웹페이지의 성능 모니터링이 가능</strong>합니다.</p><p></p><p>아래 예시 웹사이트를 통해 URL 패턴 기본 설정 방법과 자주 사용하는 설정을 확인해 보세요.<br><br>[<a href="https://blog.imqa.io/urlpattern01/">1. 기본 설정 방법</a>]<br>[<a href="https://blog.imqa.io/urlpattern02/">2. 자주 사용하는 설정</a>]<br><br>* 사용자 가이드에서 보기<br>[<a href="../wpm/projectlist#url">URL 패턴 설정</a>]</p></td></tr><tr><td><strong>데이터 읽기</strong></td><td>[<a href="data/wpm">WPM 데이터 읽기</a>]</td></tr></tbody></table>

### 3. 모바일 크래시 솔루션 Crash&#x20;

<table data-header-hidden><thead><tr><th width="197"></th><th></th></tr></thead><tbody><tr><td><strong>주요 기능</strong></td><td><a href="https://blog.imqa.io/tag/sirijeu-crash-juyo-gineung/">Crash 기능 전체 보기</a></td></tr><tr><td><strong>대시보드</strong></td><td><p>대시보드에서는 <strong>앱 버전별 발생한 크래시를 확인</strong>할 수 있습니다. 주간 이용자 수와 크래시 발생 수, 실행 수를 확인할 수 있으며, 에러 등급과 시간대별로 에러 발생 수를 파악할 수 습니다.<br></p><p>[<a href="https://blog.imqa.io/imqa-crash/">기능 소개</a>]</p></td></tr><tr><td><strong>에러 검색, 에러 상세</strong></td><td>설정한 기간 동안 발생했던 <strong>에러를 다양한 필터 기능으로 검색</strong>할 수 있으며, 선택한 <strong>에러의 상세 분석이 가능</strong>합니다.<br><br>[<a href="https://blog.imqa.io/imqa-crash-error/">기능 소개</a>]</td></tr><tr><td><strong>통계</strong></td><td>통계에서는 <strong>다양한 지표를 통해 에러를 분석</strong>할 수 있습니다. 최근 15일간 일별 에러 발생 수, 버전별 에러 발생 수, 화면별 에러 비율 등 확인이 가능합니다.<br><br>[<a href="https://blog.imqa.io/imqa-crash-statistics/">기능 소개</a>]</td></tr></tbody></table>

&#x20;

### 4. 웹 크래시 솔루션 WCrash&#x20;

<table data-header-hidden><thead><tr><th width="204"></th><th></th></tr></thead><tbody><tr><td><strong>주요 기능</strong></td><td><a href="https://blog.imqa.io/tag/sirijeu-wcrash-juyo-gineung/">WCrash 기능 전체 보기</a></td></tr><tr><td><strong>대시보드</strong></td><td>대시보드에서는 <strong>웹사이트에서 발생한 웹 크래시의 상황을 파악</strong>할 수 있습니다. 주간 이용자 수, 방문 수, 웹 크래시 발생 수 및 최근 1주일간 발생한 에러를 확인할 수 있습니다.<br><br>[<a href="https://blog.imqa.io/wcrash-dashboard/">기능 소개</a>]</td></tr><tr><td><strong>에러 검색, 에러 상세</strong></td><td>최근 <strong>30일간 발생한 에러를 기간, 상태, 사용자 환경, 태그 등으로 검색</strong>할 수 있으며, 특정 에러에 대해 상세 분석이 가능합니다.<br><br>[<a href="https://blog.imqa.io/wcrash-search-detail/">기능 소개</a>]</td></tr><tr><td><strong>통계</strong></td><td>통계에서는 클래스, 디바이스, 브라우저, 페이지 기준으로 <strong>어떤 에러가 얼마나 발생했고, 어떤 사용자 환경에서 주로 발생했는지 분석</strong>할 수 있습니다.<br><br>[<a href="https://blog.imqa.io/wcrash-statistics/">기능 소개</a>]</td></tr></tbody></table>

&#x20;

## Ⅱ. 함께 보면 좋을 자료

### (1) 모바일 앱

<table data-header-hidden><thead><tr><th width="204"></th><th></th></tr></thead><tbody><tr><td><strong>화면이 느려지는 원인과 해결 방법</strong></td><td><p><strong>화면이 느려지는 원인과 해결 방법</strong></p><p>모바일 앱에서 하염없이 돌아가고 있는 로딩을 보면 어떤 생각이 드시나요? 혹은 쇼핑몰 앱에서 이미지가 버벅거리면서 끊기듯 나오면 어떤 생각이 드시나요? 대부분 앱 사용자들은 로딩이 조금만 늦어도 답답함을 느끼고, 길어질 경우 앱을 종료할 것입니다. 더한 경우 앱을 삭제하기도 하죠.</p><p></p><p>그렇다면 사용자를 불편하게 만드는 주원인인 화면 느림과 버벅거리는 현상은 왜 발생하는 것일까요? 화면이 느려지는 다양한 원인과 해결 방법에 대해 확인해 보세요.<br><br>[<a href="https://blog.imqa.io/imqa-rendering-time/">자세히 보기</a>]</p></td></tr><tr><td><strong>화면 로딩 속도</strong></td><td><p><strong>앱 서비스 주요 장애, 화면 로딩 속도 알아보기!</strong></p><p>앱 서비스 운영 시, 어떠한 부분을 중요하게 판단해야 할까요? 그리고 실제 고객이 느끼는 장애는 어떠한 것이 숨겨져 있을까요? 앱 서비스 운영 시 가장 고려해야 하는 항목에 대해 살펴봅니다.<br><br>[<a href="https://blog.imqa.io/app_failure_launch_time/">자세히 보기</a>]</p></td></tr><tr><td><strong>화면 성능 저하</strong></td><td><strong>화면 성능 저하, 어떻게 개선할까?</strong><br>개발할 땐 문제가 없었는데, 배포하고 보면 느리게 이유는 무엇일까요? 쉽게 놓치게 되는 대표 케이스를 찾아보고, 개선 방법을 정리해 보았습니다.<br><br>[<a href="https://blog.imqa.io/screen-performance/">자세히 보기</a>]</td></tr><tr><td><strong>발열</strong></td><td><p><strong>앱 서비스 주요 장애, 발열 알아보기!</strong></p><p>발열에 대한 원인은 어떻게 찾아야 할까요? 모바일 아키텍처에 대해 알아보고, 장애가 난 사례들을 공유해 드립니다.<br><br>[<a href="https://blog.imqa.io/app_failure_overheating_issue/">자세히 보기</a>]</p></td></tr><tr><td><strong>스택(Stack)</strong></td><td><p><strong>스택(Stack), 어떻게 분석할까요?</strong></p><p>IMQA에서는 stack을 수집하여 성능이 느린 원인을 찾아주고 있습니다. stack이란 무엇인지, 무슨 일을 하고, 어떻게 분석할 수 있는지 정리해 보았습니다.<br><br><a href="https://blog.imqa.io/stack1/">[자세히 보기</a>]</p></td></tr></tbody></table>

### (2) 웹뷰

<table data-header-hidden><thead><tr><th width="204"></th><th></th></tr></thead><tbody><tr><td><strong>웹뷰 성능 개선</strong></td><td><p><strong>MPM으로 웹뷰 성능 개선하기</strong></p><p>IMQA을 통한 성능 컨설팅 방법을 기반으로 웹뷰 성능 문제를 찾아 분석하여 개선점을 찾는 과정을 정리해 보았습니다.<br><br>[<a href="https://blog.imqa.io/webview_analysis1/">자세히 보기</a>]</p></td></tr><tr><td><strong>웹 앱 랜더링 속도</strong></td><td><p><strong>웹 앱의 랜더링 속도 올리기</strong></p><p>웹 앱의 랜더링 속도를 올리기 위한 고민을 기반으로, IMQA가 어떻게 리소스 관리 정책을 제공했는지 정리해보았습니다.<br><br>[<a href="https://blog.imqa.io/imqa_devtools/">자세히 보기</a>]</p></td></tr></tbody></table>

### (3) 웹 페이지 (웹 어플리케이션)

<table data-header-hidden><thead><tr><th width="201"></th><th></th></tr></thead><tbody><tr><td><strong>웹 페이지 로딩 과정</strong></td><td><p><strong>웹 페이지 로딩 과정 이해와 성능 최적화</strong></p><p>웹 브라우저에서 어떻게 웹 페이지가 로딩될까요? 실제 웹 페이지 로딩 시간을 측정하는 에이전트를 개발해야 하는 IMQA 팀에서 웹페이지 성능 최적화에 대한 노하우를 정리해 보았습니다.<br><br>[<a href="https://blog.imqa.io/webpage_loading_process/">자세히 보기</a>]</p></td></tr><tr><td><strong>웹 앱 랜더링 속도</strong></td><td><p><strong>웹 앱의 랜더링 속도 올리기</strong></p><p>웹 앱의 랜더링 속도를 올리기 위한 고민을 기반으로, IMQA가 어떻게 리소스 관리 정책을 제공했는지 정리해보았습니다.<br><br>[<a href="https://blog.imqa.io/imqa_devtools/">자세히 보기</a>]</p></td></tr><tr><td><strong>웹 성능 측정</strong></td><td><strong>사용자 인식과 웹 성능 측정의 변화</strong><br>웹 성능 주요 지표인 Lighthouse 측정 지표에 대해 알아보고, 디지털 기술 발전과 최신 웹 개발 트렌드에 따른 Speed Index의 중요도 논란에 대해서도 함께 정리해 보았습니다.<br><br>[<a href="https://blog.imqa.io/web-performance-index/">자세히 보기</a>]</td></tr></tbody></table>

### (4) 크래시

<table data-header-hidden><thead><tr><th width="208"></th><th></th></tr></thead><tbody><tr><td><strong>크래시/커스텀 에러</strong></td><td><p><strong>모바일 앱에서 발생하는 모든 에러를 관리하는 방법!</strong></p><p>모바일 앱에서 발하는 에러는 로그인이나 인증 문제 등 대부분 기능 에러입니다. 하지만 크래시 솔루션으로는 위와 같은 현상을 확인할 수 없는데요. 앱이 비정상적으로 종료되었을 때만 에러 정보를 수집하기 때문입니다. 그렇기 때문에 우리가 앱을 사용하면서 겪는 대부분의 에러에 대해선 정보를 수집하지 않아 사용자 경험이 개선되지 않습니다. </p><p></p><p>그렇다면 크래시 솔루션으로 수집되지 않은 에러는 어떻게 관리해야 할까요?</p><p>IMQA는 커스텀 에러를 통해 빠짐없이 관리할 수 있습니다!<br><br>[<a href="https://blog.imqa.io/imqa-crash-custom-error/">자세히 보기</a>]</p></td></tr></tbody></table>