자동 리포트 생성 및 분석 결과 저장 기능 설계

사용자가 실습한 이벤트 데이터와 퍼널 분석 결과를 효과적으로 정리하고, 이를 활용할 수 있도록 자동 리포트 생성 기능을 추가할 수 있습니다. 이번 글에서는 자동 리포트 생성, 분석 결과 저장 및 공유 기능을 구현하는 방법을 설명합니다.

1. 자동 리포트 생성의 필요성

🔹 왜 리포트 기능이 필요한가?

실습자들이 자신의 분석 데이터를 쉽게 확인하고 기록할 수 있도록 함
GA4, Amplitude에서 제공하는 분석을 맞춤형 리포트로 변환
실습을 마친 후 결과를 저장하거나 공유할 수 있도록 지원

🔹 리포트에서 제공할 핵심 데이터

항목 설명

실습 완료된 퍼널	사용자가 수행한 이벤트 흐름
전환율	각 단계별 전환율 및 이탈률
이벤트 트래킹 결과	이벤트별 실행 횟수 및 발생 시간
사용자 속성 분석	디바이스, 지역, 브라우저 정보 등

2. 리포트 데이터 저장 및 처리 방식

2-1. 실습 결과 저장 로직 (Supabase 기준)

const saveReport = async (userId, reportData) => {
  await supabase.from("reports").insert({
    user_id: userId,
    data: reportData,
    created_at: new Date()
  });
};

2-2. 리포트 조회 기능

const getUserReports = async (userId) => {
  const { data } = await supabase
    .from("reports")
    .select("*")
    .eq("user_id", userId);
  return data;
};

3. PDF 및 CSV 다운로드 기능 구현

3-1. PDF 변환 라이브러리 (jsPDF 활용)

import jsPDF from "jspdf";

const generatePDF = (reportData) => {
  const doc = new jsPDF();
  doc.text("사용자 실습 리포트", 10, 10);
  doc.text(`총 이벤트 발생 수: ${reportData.eventCount}`, 10, 20);
  doc.save("user_report.pdf");
};

3-2. CSV 내보내기 기능

const exportCSV = (reportData) => {
  const csvContent = [
    "이벤트,발생 횟수",
    ...reportData.events.map(e => `${e.name},${e.count}`)
  ].join("\n");
  
  const blob = new Blob([csvContent], { type: "text/csv" });
  const link = document.createElement("a");
  link.href = URL.createObjectURL(blob);
  link.download = "user_report.csv";
  link.click();
};

4. 리포트 공유 기능 구현

4-1. 퍼널 분석 결과 공유 링크 생성

사용자가 자신의 리포트를 다른 사용자와 공유할 수 있도록 공개 URL 생성

const generateShareLink = async (reportId) => {
  const shareUrl = `https://analytics-playground.com/reports/${reportId}`;
  return shareUrl;
};

4-2. 공유된 리포트 페이지 구성

const ReportPage = ({ reportId }) => {
  const [report, setReport] = useState(null);

  useEffect(() => {
    fetch(`/api/report/${reportId}`).then(res => res.json()).then(setReport);
  }, [reportId]);

  return report ? <ReportView data={report} /> : <p>Loading...</p>;
};

5. 실습자 활용 예시

기능 활용 예시

PDF 내보내기	분석 실습 결과를 문서화하여 기록
CSV 다운로드	이벤트 데이터를 외부 분석 도구와 연동
공유 링크 생성	팀원들과 실습 결과 공유

다음 글에서는 사용자의 리포트를 대시보드에서 관리하고, AI를 활용하여 인사이트를 자동으로 제공하는 기능을 설명합니다.
→ 9편. AI 기반 자동 분석 인사이트 제공 및 대시보드 관리 기능