실습 시나리오 생성 및 이벤트 기반 미션 기능 설계

퍼널 분석을 통해 사용자 흐름과 전환 경로를 파악했다면, 이제는 학습자(또는 실습자)가 직접 퍼널을 설계하고 목표 이벤트를 기반으로 실습 미션을 수행할 수 있는 기능을 제공해야 합니다. 이번 글에서는 사용자가 직접 구성할 수 있는 실습 시나리오 생성 기능과 그에 따른 이벤트 미션 트래킹 로직을 구현하는 방법을 소개합니다.

1. 실습 시나리오란?

정의

실습자가 특정 목표(Event)를 설정하고, 사용자 여정(Flow)을 설계하여 실시간으로 트래킹 결과를 확인할 수 있도록 구성된 가상 실험 공간입니다.

예시 시나리오

시나리오 이름 목표 이벤트 흐름 구성

첫 방문 → CTA 클릭 → 회원가입 완료	FORM_SUBMIT	PAGE_VIEW → CTA_CLICK → FORM_SUBMIT
제품 검색 → 상세 페이지 진입 → 장바구니 담기	ADD_TO_CART	SEARCH_KEYWORD → PRODUCT_VIEW → ADD_TO_CART

2. 시나리오 생성 UI 구성

2-1. 실습 미션 생성 폼 예시 (React + Zustand)

<form onSubmit={createMission}>
  <input name="title" placeholder="미션 이름" />
  <select name="events" multiple>
    <option value="PAGE_VIEW">PAGE_VIEW</option>
    <option value="CTA_CLICK">CTA_CLICK</option>
    <option value="FORM_SUBMIT">FORM_SUBMIT</option>
  </select>
  <button type="submit">미션 생성</button>
</form>

2-2. Zustand 또는 Context를 활용한 시나리오 상태 관리

const useMissionStore = create((set) => ({
  missions: [],
  addMission: (mission) => set((state) => ({ missions: [...state.missions, mission] }))
}));

3. 이벤트 기준 미션 상태 체크 로직

3-1. 이벤트 발생 감지 함수

window.addEventListener("EVENT_CAPTURE", (e) => {
  const { name } = e.detail;
  if (activeMission.includes(name)) {
    completeEvent(name);
  }
});

3-2. 미션 완료 조건 판별

사용자가 정의한 이벤트 순서를 localStorage 또는 DB에 기록
최종 목표 이벤트까지 모두 도달하면 “완료” 상태 처리

4. 미션 UI 컴포넌트 예시

<MissionProgress title="회원가입 퍼널">
  <MissionStep name="PAGE_VIEW" status="done" />
  <MissionStep name="CTA_CLICK" status="done" />
  <MissionStep name="FORM_SUBMIT" status="pending" />
</MissionProgress>

5. 실습자에게 제공할 기능 요약

기능 설명

미션 생성	퍼널 흐름을 정의하고 이름 지정
실시간 진행 상태 보기	각 이벤트가 언제 발생했는지 시각적으로 확인
완료 조건 트래킹	최종 목표에 도달한 시간 및 전환율 기록
결과 내보내기	분석 리포트 형태로 결과 요약 (PDF, CSV 등)

다음 글에서는 실습 사이트의 데이터를 기반으로 자동 리포트 생성, 미션별 성과 요약, 분석 결과 저장 및 공유 기능 구현을 설명합니다.
→ 8편. 자동 리포트 생성 및 분석 결과 저장 기능 설계