쉽게 읽는 데이터Ⅰ화면별 성능 현황(버블 차트)

'화면별 성능 현황'에 사용된 버블 차트에 대해 간략히 알아보고, 이를 통해 어떻게 '화면별 성능 현황'을 해석하는지 여러 가지 예시를 통해 정리해 보았습니다.

작성일 2022년 02월 14일

안녕하세요, IMQA입니다.

지난주 발행된 새롭게 추가된 A/B 대시보드! 눈치채셨나요?에서는 A/B 대시보드에 대해 설명드렸는데요. 해당 콘텐츠가 포스팅된 이후 많은 분들께서 피드백을 주셨습니다 😀 화면이 직관적이라 한눈에 보기 너무 편하다는 긍정적인 반응과, 차트를 해석하는 방법에 대한 문의가 굉장히 많았답니다.(피드백은 언제나 환영입니다 🤗)

그래서 이번 시간에는 많은 분들이 문의를 주셨던 차트를 해석하는 방법에 대해 이해하기 쉽게 설명하려 합니다. 첫 번째 시간인 이번 시간에는 '화면별 성능 현황'에 사용된 버블 차트에 대해 간략히 알아보고, 이를 통해 어떻게 '화면별 성능 현황'을 해석하는지 여러 가지 예시를 통해 정리해 보았습니다.


버블 차트 (bubble chart)란?

버블 차트란 2개의 축으로 이루어진 산점도의 활용형 그래프로 X축,Y축 변수 위 제3의 변수를 원의 크기로 표현한 것입니다. 버블 차트는 데이터의 흐름과 핵심 변수가 무엇인지 한눈에 파악하고 싶을 때 주로 사용합니다.

위 이미지는 앤드루 아벨라(Andrew Abela)가 고안한 차트 유형 도표로 차트의 사용 목적을 확인할 수 있는데요.차트를 살펴보면 사용 목적을 비교, 관계, 분포, 구성으로 나누는데 버블 차트는 관계, 그리고 3개의 변수를 나타냅니다.

즉, 3종류의 데이터로 상호 관계를 확인할 수 있으며, 많은 데이터를 한눈에 볼 수 있는 장점이 있죠.

버블 차트 자체는 단독으로도 사용되지만, 지도와 결합하여 버블 맵(bubble map)으로 많이 사용됩니다.


버블 차트에 대해 알아보았다면, IMQA 화면을 함께 볼까요?

이전 포스팅에서 말씀드렸듯이 A/B 대시보드는 많은 데이터를 한 화면에 보여줘야 하기 때문에 데이터 시각화에 집중하였는데요. 위 이미지를 보시면 라인 차트, 스파이더 차트, 버블 차트, 히스토그램 등 데이터를 정확하고 쉽게 해석을 위해 여러 가지 차트가 사용된 것을 볼 수 있죠.

버블 차트가 사용된 화면별 성능 현황을 자세히 살펴볼까요?

화면별 성능 현황은 A,B 프로젝트의 최근 30분동안 사용자가 방문한 화면 분포를 버블 차트로 표현하였는데요. (1분마다 갱신)

가로축은 *문제 발생률 / 세로축은 성능 수치(화면 로딩시간, 응답시간, CPU, 메모리)로 표현하였고, 이는 '0'에 가까울수록 좋은 성능이라는 것을 의미합니다.
버블은 사용자가 방문한 화면으로 크기는 방문자 수를 나타냅니다.

*문제 발생률: 최근 30분 동안의 성능 지표 별 기준치를 넘는 데이터의 비율(기준치 이상 데이터 / 전체 데이터)*100

4가지 데이터(문제 발생률, 성능 수치, 버블, 버블의 크기)를 통해  A, B프로젝트의 상호 관계를 파악할 수 있고, 버블을 통해 평균적인 성능눈에 띄는 성능 저하 화면을 직관적으로 확인할 수 있답니다.

또한 A 프로젝트의 성능 기준치를 실선, B 프로젝트의 성능 기준치를 점선으로 표시하여 기준치 이상·이하의 데이터도 한눈에 확인할 수 있죠.

또한, 화면 버블을 클릭하면  '화면 성능 분석'을 통해 성능 저하 원인을 상세하게 분석할 수 있습니다.

화면 성능 분석

아래 예시 이미지를 통해 버블의 위치에 따라(4사분면) 어떻게 해석되는지 알아보겠습니다.

총 5개의 예시 화면을 통해 설명하며, 목차는 아래와 같습니다.
(목차의 5번은 4사분면에 포함되지 않는 특정 케이스임)

  1. 문제 발생률 ↓ 성능 수치 ↑
  2. 문제 발생률 ↑ 성능 수치 ↑ (가장 관리가 필요한 현상)
  3. 문제 발생률 ↓ 성능 수치 ↓ (가장 이상적인 현상)
  4. 문제 발생률 ↑ 성능 수치 ↓
  5. 특정 화면이 평균적인 상황에서 벗어난 경우

이해를 돕기 위해 아래와 같이 상황 설정을 해보죠.

예시 상황: A 금융 앱 운영자가 화면 로딩시간을 2,000ms(2초)내로 만들고 싶어 한다. 이에 화면 로딩시간을 2,000ms(2초)를 기준치로 설정하였다.


1. 문제 발생률 ↓ 성능 수치 ↑

4사분면 중 1번에 해당되는 위 차트를 보시면, 버블이 좌측 상단에 모여있는 것을 볼 수 있죠.

이것은 문제 발생률은 낮으나, 성능 수치가 높다는 것을 의미합니다.

그래서 위 차트로 버블A를 해석해 보면, 최근 30분 동안 10%의 성능 문제가 있었고, 화면 로딩시간은 3,500ms(3.5초)였음을 알 수 있습니다. 즉, 문제 발생률은 10%로 전체 사용자 대비하여 상대적으로 적으나, 기준치 대비 화면 로딩시간은 길었음을 의미하죠.

상대적으로 관리의 중요성은 높지 않으나, 예의주시해야 할 화면입니다.

2. 문제 발생률 ↑ 성능 수치 ↑ (가장 관리가 필요한 현상)

4사분면 중 2번에 해당되는 위 차트는 우측 상단에 모여 있는데요.

이것은 문제 발생률과 성능 수치가 모두 높다는 것을 의미합니다.

위 차트로 버블A를 해석해 보면, 최근 30분 동안 89%의 성능 문제가 있었고, 화면 로딩시간은 3,500ms(3.5초)였음을 알 수 있습니다. 즉, 문제 발생률은 89%로 전체 사용자 대비하여 상대적으로 많고, 기준치 대비 화면 로딩시간도 길었음을 의미하죠.

이 차트는 가장 관리가 시급한 현상으로 해당 화면 다수의 데이터가 긴 로딩시간 즉, 느림 현상으로 앱을 원활히 사용하지 못했음을 의미합니다.

또, 버블은 사용자가 방문한 각각의 화면을 나타낸다고 했었죠? 따라서 버블의 크기가 커질수록 해당 화면을 방문한 사용자가 많다는 것을 의미하는데요.

만약, 위 차트처럼 A의 버블의 크기가 1,2번의 차트보다 커진다면 어떻게 해석할 수 있을까요?

다수의 사용자가 동일한 화면에서 느린 화면을 겪었다는 것을 의미하며, 이는 다수의 사용자가 앱을 사용하면서 느린 화면으로 불편을 겪었을 확률이 크다고 볼 수 있습니다.

이와 같은 현상이 발생했을 경우! 버블을 클릭 후 '성능 상세 분석'을 통해 즉각적으로 저하 문제를 해결해야 해야 합니다.

3. 문제 발생률 ↓ 성능 수치 ↓ (가장 이상적인 현상)

4사분면 중 3번에 해당되는 위 차트는 버블이 좌측 하단에 모여 있는데요.

이것은 문제 발생률과 성능 수치가 모두 낮다는 것을 의미합니다.

마찬가지로 위 차트로 버블A를 해석해 보면, 최근 30분 동안 10%의 성능 문제가  있었고, 화면 로딩시간은 1,600ms(1.6초)였음을 알 수 있습니다. 즉, 문제 발생률은 10%로 전체 사용자 대비하여 상대적으로 적고, 기준치 대비 화면 로딩시간도 짧았음을 의미하죠.

이 차트는 가장 이상적인 차트로 해당 화면 소수의 데이터가 짧은 로딩시간 즉, 느림 현상 없이 원활히 앱을 사용했음을 의미하며 앱 운영자는 이 차트의 형태가 지속되도록 관리해야 합니다.

4. 문제 발생률 ↑ 성능 수치 ↓

4사분면 중 마지막 4번에 해당되는 위 차트는 우측 상단에 모여 있음을 알 수 있죠.

이것은 문제 발생률은 높고, 성능 수치는 낮다는 것을 의미합니다.

위 차트로 버블A를 해석해 보면, 최근 30분 동안 89%의 성능 문제가 있었고, 화면 로딩시간은 1,600ms(1.6초)였음을 알 수 있습니다. 즉, 문제 발생률은 89%로 전체 사용자 대비하여 상대적으로 많으나, 기준치 대비 화면 로딩시간은 짧았음을 의미하죠.

1번 화면과 동일하게 상대적으로 관리의 중요성은 높지 않으나, 예의주시해야 할 화면이죠.

5. 화면 버블이 군집에서 벗어난 경우

마지막으로, 위 차트에서 화면 버블이 군집되어 있는 곳과 군집에서 벗어나 있는 버블이 보이시나요? 이렇게 화면 버블이 군집에서 벗어나 있을 경우, 특정 화면이 평균적인 상황에서 벗어나 있음을 의미합니다.

위 차트의 버블A를 해석해 보면, 최근 30분 동안 89%의 성능 문제가 있었고, 화면 로딩 시간은 3,500ms(3.5초)였음을 알 수 있습니다. 즉, 문제 발생 89%는 전체 사용자 대비하여 상대적으로 많고, 기준치 대비 화면 로딩시간도 길었음을 의미하죠.

여기서 A화면은 크게 2가지 문제가 있음을 알 수 있는데요. 첫 번째는 문제 발생률과 성능 수치가 모두 높은 것, 두 번째는 평균적인 상황에서 벗어나 있다는 것입니다.

이럴 경우, 3번처럼 버블을 클릭 후 '성능 상세 분석' 을 통해 저하 문제를 해결하면 되겠죠?


이번 시간에는 A/B 대시보드의 '화면별 성능 현황'을 예시 그래프를 활용하여 해석하는 방법에 대해 알아보았는데요. 어떠셨나요? 이제 '화면별 성능 현황'의 버블차트를 보면 우리 앱의 성능을 한눈에 알 것 같지 않으신가요?

다음 시간에는 두 번째로 문의가 많았던 A/B 대시보드의 '최근 5분 지표'를 해석하는 방법에 대해 자세히 알아보겠습니다.

Share on

Tags

IMQA 뉴스레터 구독하기

국내외 다양한 기술 소식을 선별하여 매월 전달해드립니다. IMQA 뉴스레터를 통해 기술 이야기를 함께해보세요.

구독하기