안녕하세요, IMQA입니다.
지난주 발행된 새롭게 추가된 A/B 대시보드! 눈치채셨나요?에서는 A/B 대시보드에 대해 설명드렸는데요. 해당 콘텐츠가 포스팅된 이후 많은 분들께서 피드백을 주셨습니다 😀 화면이 직관적이라 한눈에 보기 너무 편하다는 긍정적인 반응과, 차트를 해석하는 방법에 대한 문의가 굉장히 많았답니다.(피드백은 언제나 환영입니다 🤗)
그래서 이번 시간에는 많은 분들이 문의를 주셨던 차트를 해석하는 방법에 대해 이해하기 쉽게 설명하려 합니다. 첫 번째 시간인 이번 시간에는 '화면별 성능 현황'에 사용된 버블 차트에 대해 간략히 알아보고, 이를 통해 어떻게 '화면별 성능 현황'을 해석하는지 여러 가지 예시를 통해 정리해 보았습니다.
버블 차트 (bubble chart)란?
![](https://blog.imqa.io/content/images/2022/02/0214_-------_----------01.jpg)
버블 차트란 2개의 축으로 이루어진 산점도의 활용형 그래프로 X축,Y축 변수 위 제3의 변수를 원의 크기로 표현한 것입니다. 버블 차트는 데이터의 흐름과 핵심 변수가 무엇인지 한눈에 파악하고 싶을 때 주로 사용합니다.
![](https://blog.imqa.io/content/images/2022/02/0214_-------_----------02.jpg)
위 이미지는 앤드루 아벨라(Andrew Abela)가 고안한 차트 유형 도표로 차트의 사용 목적을 확인할 수 있는데요.차트를 살펴보면 사용 목적을 비교, 관계, 분포, 구성으로 나누는데 버블 차트는 관계, 그리고 3개의 변수를 나타냅니다.
즉, 3종류의 데이터로 상호 관계를 확인할 수 있으며, 많은 데이터를 한눈에 볼 수 있는 장점이 있죠.
버블 차트 자체는 단독으로도 사용되지만, 지도와 결합하여 버블 맵(bubble map)으로 많이 사용됩니다.
버블 차트에 대해 알아보았다면, IMQA 화면을 함께 볼까요?
![](https://blog.imqa.io/content/images/2022/02/0214_-------_---------_A-B-Dashboard.jpg)
이전 포스팅에서 말씀드렸듯이 A/B 대시보드는 많은 데이터를 한 화면에 보여줘야 하기 때문에 데이터 시각화에 집중하였는데요. 위 이미지를 보시면 라인 차트, 스파이더 차트, 버블 차트, 히스토그램 등 데이터를 정확하고 쉽게 해석을 위해 여러 가지 차트가 사용된 것을 볼 수 있죠.
버블 차트가 사용된 화면별 성능 현황을 자세히 살펴볼까요?
![](https://blog.imqa.io/content/images/2022/02/0214_-------_---------_--------------------.jpg)
화면별 성능 현황은 A,B 프로젝트의 최근 30분동안 사용자가 방문한 화면 분포를 버블 차트로 표현하였는데요. (1분마다 갱신)
가로축은 *문제 발생률 / 세로축은 성능 수치(화면 로딩시간, 응답시간, CPU, 메모리)로 표현하였고, 이는 '0'에 가까울수록 좋은 성능이라는 것을 의미합니다.
버블은 사용자가 방문한 화면으로 크기는 방문자 수를 나타냅니다.
*문제 발생률: 최근 30분 동안의 성능 지표 별 기준치를 넘는 데이터의 비율(기준치 이상 데이터 / 전체 데이터)*100
위 4가지 데이터(문제 발생률, 성능 수치, 버블, 버블의 크기)를 통해 A, B프로젝트의 상호 관계를 파악할 수 있고, 버블을 통해 평균적인 성능과 눈에 띄는 성능 저하 화면을 직관적으로 확인할 수 있답니다.
또한 A 프로젝트의 성능 기준치를 실선, B 프로젝트의 성능 기준치를 점선으로 표시하여 기준치 이상·이하의 데이터도 한눈에 확인할 수 있죠.
또한, 화면 버블을 클릭하면 '화면 성능 분석'을 통해 성능 저하 원인을 상세하게 분석할 수 있습니다.
![](https://blog.imqa.io/content/images/2022/02/0214_-------_---------_-------------------.jpg)
아래 예시 이미지를 통해 버블의 위치에 따라(4사분면) 어떻게 해석되는지 알아보겠습니다.
총 5개의 예시 화면을 통해 설명하며, 목차는 아래와 같습니다.
(목차의 5번은 4사분면에 포함되지 않는 특정 케이스임)
- 문제 발생률 ↓ 성능 수치 ↑
- 문제 발생률 ↑ 성능 수치 ↑ (가장 관리가 필요한 현상)
- 문제 발생률 ↓ 성능 수치 ↓ (가장 이상적인 현상)
- 문제 발생률 ↑ 성능 수치 ↓
- 특정 화면이 평균적인 상황에서 벗어난 경우
![](https://blog.imqa.io/content/images/2022/02/0214_-------_---------_---------.jpg)
이해를 돕기 위해 아래와 같이 상황 설정을 해보죠.
예시 상황: A 금융 앱 운영자가 화면 로딩시간을 2,000ms(2초)내로 만들고 싶어 한다. 이에 화면 로딩시간을 2,000ms(2초)를 기준치로 설정하였다.
1. 문제 발생률 ↓ 성능 수치 ↑
![](https://blog.imqa.io/content/images/2022/02/0214_-------_---------_---------_01.jpg)
4사분면 중 1번에 해당되는 위 차트를 보시면, 버블이 좌측 상단에 모여있는 것을 볼 수 있죠.
이것은 문제 발생률은 낮으나, 성능 수치가 높다는 것을 의미합니다.
그래서 위 차트로 버블A를 해석해 보면, 최근 30분 동안 10%의 성능 문제가 있었고, 화면 로딩시간은 3,500ms(3.5초)였음을 알 수 있습니다. 즉, 문제 발생률은 10%로 전체 사용자 대비하여 상대적으로 적으나, 기준치 대비 화면 로딩시간은 길었음을 의미하죠.
상대적으로 관리의 중요성은 높지 않으나, 예의주시해야 할 화면입니다.
2. 문제 발생률 ↑ 성능 수치 ↑ (가장 관리가 필요한 현상)
![](https://blog.imqa.io/content/images/2022/02/0214_-------_---------_---------_01-copy.jpg)
4사분면 중 2번에 해당되는 위 차트는 우측 상단에 모여 있는데요.
이것은 문제 발생률과 성능 수치가 모두 높다는 것을 의미합니다.
위 차트로 버블A를 해석해 보면, 최근 30분 동안 89%의 성능 문제가 있었고, 화면 로딩시간은 3,500ms(3.5초)였음을 알 수 있습니다. 즉, 문제 발생률은 89%로 전체 사용자 대비하여 상대적으로 많고, 기준치 대비 화면 로딩시간도 길었음을 의미하죠.
이 차트는 가장 관리가 시급한 현상으로 해당 화면 다수의 데이터가 긴 로딩시간 즉, 느림 현상으로 앱을 원활히 사용하지 못했음을 의미합니다.
또, 버블은 사용자가 방문한 각각의 화면을 나타낸다고 했었죠? 따라서 버블의 크기가 커질수록 해당 화면을 방문한 사용자가 많다는 것을 의미하는데요.
만약, 위 차트처럼 A의 버블의 크기가 1,2번의 차트보다 커진다면 어떻게 해석할 수 있을까요?
다수의 사용자가 동일한 화면에서 느린 화면을 겪었다는 것을 의미하며, 이는 다수의 사용자가 앱을 사용하면서 느린 화면으로 불편을 겪었을 확률이 크다고 볼 수 있습니다.
이와 같은 현상이 발생했을 경우! 버블을 클릭 후 '성능 상세 분석'을 통해 즉각적으로 저하 문제를 해결해야 해야 합니다.
3. 문제 발생률 ↓ 성능 수치 ↓ (가장 이상적인 현상)
![](https://blog.imqa.io/content/images/2022/02/0214_-------_---------_----------copy.jpg)
4사분면 중 3번에 해당되는 위 차트는 버블이 좌측 하단에 모여 있는데요.
이것은 문제 발생률과 성능 수치가 모두 낮다는 것을 의미합니다.
마찬가지로 위 차트로 버블A를 해석해 보면, 최근 30분 동안 10%의 성능 문제가 있었고, 화면 로딩시간은 1,600ms(1.6초)였음을 알 수 있습니다. 즉, 문제 발생률은 10%로 전체 사용자 대비하여 상대적으로 적고, 기준치 대비 화면 로딩시간도 짧았음을 의미하죠.
이 차트는 가장 이상적인 차트로 해당 화면 소수의 데이터가 짧은 로딩시간 즉, 느림 현상 없이 원활히 앱을 사용했음을 의미하며 앱 운영자는 이 차트의 형태가 지속되도록 관리해야 합니다.
4. 문제 발생률 ↑ 성능 수치 ↓
![](https://blog.imqa.io/content/images/2022/02/0214_-------_---------_---------_01-copy-2.jpg)
4사분면 중 마지막 4번에 해당되는 위 차트는 우측 상단에 모여 있음을 알 수 있죠.
이것은 문제 발생률은 높고, 성능 수치는 낮다는 것을 의미합니다.
위 차트로 버블A를 해석해 보면, 최근 30분 동안 89%의 성능 문제가 있었고, 화면 로딩시간은 1,600ms(1.6초)였음을 알 수 있습니다. 즉, 문제 발생률은 89%로 전체 사용자 대비하여 상대적으로 많으나, 기준치 대비 화면 로딩시간은 짧았음을 의미하죠.
1번 화면과 동일하게 상대적으로 관리의 중요성은 높지 않으나, 예의주시해야 할 화면이죠.
5. 화면 버블이 군집에서 벗어난 경우
![](https://blog.imqa.io/content/images/2022/02/0214_-------_---------_---------_01-copy-3.jpg)
마지막으로, 위 차트에서 화면 버블이 군집되어 있는 곳과 군집에서 벗어나 있는 버블이 보이시나요? 이렇게 화면 버블이 군집에서 벗어나 있을 경우, 특정 화면이 평균적인 상황에서 벗어나 있음을 의미합니다.
위 차트의 버블A를 해석해 보면, 최근 30분 동안 89%의 성능 문제가 있었고, 화면 로딩 시간은 3,500ms(3.5초)였음을 알 수 있습니다. 즉, 문제 발생 89%는 전체 사용자 대비하여 상대적으로 많고, 기준치 대비 화면 로딩시간도 길었음을 의미하죠.
여기서 A화면은 크게 2가지 문제가 있음을 알 수 있는데요. 첫 번째는 문제 발생률과 성능 수치가 모두 높은 것, 두 번째는 평균적인 상황에서 벗어나 있다는 것입니다.
이럴 경우, 3번처럼 버블을 클릭 후 '성능 상세 분석' 을 통해 저하 문제를 해결하면 되겠죠?
이번 시간에는 A/B 대시보드의 '화면별 성능 현황'을 예시 그래프를 활용하여 해석하는 방법에 대해 알아보았는데요. 어떠셨나요? 이제 '화면별 성능 현황'의 버블차트를 보면 우리 앱의 성능을 한눈에 알 것 같지 않으신가요?
다음 시간에는 두 번째로 문의가 많았던 A/B 대시보드의 '최근 5분 지표'를 해석하는 방법에 대해 자세히 알아보겠습니다.
![](https://blog.imqa.io/content/images/2022/02/0214_-------_---------_contact.png)