Skip to content

Mixpanel을 활용한 사용자 행동 패턴 분석

Yujin edited this page Jan 17, 2025 · 2 revisions

들어가며: 사용자 피드백으로부터 시작된 개선

부스트캠프에서 6주간 블록 코딩을 기반으로 정적 웹사이트를 만들 수 있는 BooLock을 만들었다. 서비스를 완성한 후 캠퍼분들에게 서비스를 사용한 후 피드백을 부탁드렸었다. 여러 피드백을 바탕으로 서비스를 개선해 나갔지만 사용자는 자신의 행동 중 어디가 불편한지 잘 모르는 경우도 있고 데이터를 이용해서 행동 속에서 사용자의 불편함을 객관적으로 도출해보고 싶다는 생각이 들었다.

Mixpanel을 통해 사용자 행동 흐름 분석하기

mixpanel을 사용하면 사용자의 행동 흐름을 파악할 수 있도록 플로우 리포트를 제공한다. 사용자의 행동 흐름을 수집해서 보여줌 모두가 직관적으로 데이터를 보고 직접 분석도 할 수 있어야 설득력이 생긴다고 생각했다.

Mixpanel이 사용자의 행동 흐름을 파악하는 방식

우선 mixpanel을 사용하려면 서비스에 설치한다.

npm install --save mixpanel-browser

공식 문서에 프로젝트 별로 설정하는 방법이 나와있고 javaScript 환경에서 어떻게 설정해야 하는지 참고해 진행했다. 앱초기에 initMixpanel을 호출하고 이후 track하고 싶은 사용자 action이 수행될 때 실행되는 함수에서 trackEvent를 호출했다.

import mixpanel from 'mixpanel-browser';

const isProduction = import.meta.env.MODE === 'production';

export const initMixpanel = () => {
  const MIXPANEL_TOKEN = import.meta.env.VITE_MIXPANEL_TOKEN;
  mixpanel.init(MIXPANEL_TOKEN, { debug: true });
  _connectUser();
};

const _connectUser = () => {
  const userId = localStorage.getItem('userId');
  if (userId) {
    mixpanel.identify(userId);
  }
};

export const trackEvent = (eventName: string, properties?: Record<string, any>) => {
  const baseProperties = {
    debug: !isProduction,
    userId: localStorage.getItem('userId') || 'anonymous',
    timeStamp: new Date().toISOString(),
  };
  mixpanel.track(eventName, {
    ...baseProperties,
    ...properties,
  });
};

사용자 행동 하나하나를 event라는 데이터로 수집한다. event는 고객이 웹사이트에서 특정 행동을 취할 때 발생하며, 해당 이벤트를 local storage에 여러 번 모아 전송하는 batch 형태로 작동하고 있음을 확인했다.

mixpanel에서 flow는 이러한 이벤트의 연속적인 흐름을 나타낸다. 연속된 이벤트 흐름에서 어떤 사용자가 이탈하는지도 파악 가능하다.

image

행동 정의

우선 1차적으로 사용자가 워크스페이스에 진입한 후 작업 흐름이 어떻게 되는지 분석해보고 싶어 사용자의 행동을 정의하였다. 예전에 학교 수업을 들으면서 맥락질의 인터뷰로 직접 작업 흐름을 분석하던 때와 비교해보면 더 많은 사용자로부터 데이터를 수집할 수 있고 또한 서비스 내에서 이를 시각적으로 잘 정리해서 보여주기 때문에 정보 수집과 정리 과정에 들어가는 시간을 훨씬 단축할 수 있다는 사실을 알게 되었다.

이벤트 종류

이벤트 이름 영문명 추가 전송 데이터
블록 드래그 block_drag_completed type: block type
블록 삭제 block_deleted type: block type
CSS 클래스 생성 css_class_created item: classname
CSS 클래스 선택 css_class_selected item: classname
CSS 클래스 종류 선택 css_category_selected item: category
CSS 클래스 항목 체크 css_category_item_checked item: category itemvalue: value
CSS 클래스 값 입력 css_category_item_inputted item: category itemvalue: value
프리뷰 탭 전환 preview_tab_clicked item: tab
블록 자체 값 변경 block_content_changed item: block namevalue: value
저장 workspace_saved  
블록 생성 block_created  

Mixpanel에서 event 수집한 결과 보기

mixpanel에서 flow report를 선택해 유저의 행동 흐름을 볼 수 있는 보드를 선택했고 이벤트의 흐름을 어떻게 보여주는지 파악했다. 추가로 어떤 이벤트가 가장 많이 발생하는지도 확인할 수 있었다.

image

핵심 질문 정의

이제 대시보드 분석을 통해 어떤 점을 개선할 수 있는지 질문을 명확히 정의해보고자 한다. 우선 UX를 개선해볼 수 있는 지점은 다음과 같다. 다음 글에서는 해당 질문에 맞게 MixPanel의 분석 대쉬보드를 편집하는 방법에 대해 알아보고자 한다.

  • 사용자가 블록 조립을 완료하는 데 걸리는 시간은 얼마나 되는가?
  • 블록 조립 중 특정 작업(추가, 삭제, 편집)에서 이탈하는 사용자가 많은가?
  • 특정 블록 유형의 사용 빈도는 어떤가?
  • 초보 사용자와 숙련 사용자의 행동 패턴에 차이가 있는가?

참고