사용자 대시보드 최적화 및 분석 결과 비교 기능 추가

이전 글에서는 AI 기반 분석 인사이트 제공 기능을 구현하는 방법을 다루었습니다. 이번 글에서는 사용자가 자신의 실습 데이터를 더욱 쉽게 확인하고, 다른 데이터와 비교할 수 있도록 대시보드를 최적화하는 방법을 설명합니다.

이를 통해 사용자는 자신의 실습 결과를 직관적으로 확인하고, A/B 테스트나 트렌드 분석을 수행하여 데이터 기반 의사결정을 내릴 수 있습니다.

1. 사용자 대시보드 최적화 개요

✅ 기존 문제점

개별 실습 데이터는 볼 수 있지만, 이전 실습 결과와 비교하거나 개선점을 확인하는 기능이 부족
실시간으로 변하는 데이터를 직관적으로 볼 수 있는 시각적 인터페이스 부족

✅ 개선 목표

실시간 데이터를 반영하여 대시보드 UI를 직관적으로 개선
이전 실습 데이터와 현재 데이터를 비교하는 기능 추가
A/B 테스트 및 사용자 세그먼트 분석을 위한 비교 차트 제공

2. 대시보드 주요 기능 설계

기능 설명

실시간 이벤트 로그	사용자의 이벤트 트래킹 결과를 실시간으로 표시
실습 결과 비교	이전 실습 데이터와 현재 데이터를 비교
A/B 테스트 결과 분석	실습자가 다른 변수를 테스트하고 결과를 비교할 수 있도록 지원
트렌드 분석	날짜별 전환율 변화를 확인하고 패턴 분석

3. 실시간 이벤트 로그 구현

3-1. Next.js API Route에서 실시간 이벤트 데이터 가져오기

import { supabase } from "../../lib/supabase";

export default async function handler(req, res) {
  const { userId } = req.query;
  const { data } = await supabase
    .from("events")
    .select("*")
    .eq("user_id", userId)
    .order("created_at", { ascending: false })
    .limit(10);

  res.status(200).json(data);
}

3-2. React 컴포넌트에서 실시간 로그 표시

const EventLog = ({ userId }) => {
  const [events, setEvents] = useState([]);

  useEffect(() => {
    fetch(`/api/events?userId=${userId}`)
      .then((res) => res.json())
      .then(setEvents);
  }, [userId]);

  return (
    <div className="p-4 bg-gray-100 rounded">
      <h2 className="text-lg font-bold">실시간 이벤트 로그</h2>
      <ul>
        {events.map((e) => (
          <li key={e.id}>{e.event_name} - {new Date(e.created_at).toLocaleTimeString()}</li>
        ))}
      </ul>
    </div>
  );
};

4. 실습 결과 비교 기능 구현

4-1. 비교할 실습 데이터 가져오기

const fetchComparisonData = async (userId) => {
  const { data } = await supabase
    .from("reports")
    .select("*")
    .eq("user_id", userId)
    .order("created_at", { ascending: false })
    .limit(2);
  return data;
};

4-2. 대시보드에서 실습 데이터 비교 차트 표시 (Recharts 사용)

import { LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer } from 'recharts';

const ComparisonChart = ({ data }) => (
  <ResponsiveContainer width="100%" height={300}>
    <LineChart data={data}>
      <XAxis dataKey="date" />
      <YAxis />
      <Tooltip />
      <Line type="monotone" dataKey="conversion_rate" stroke="#8884d8" />
    </LineChart>
  </ResponsiveContainer>
);

5. A/B 테스트 결과 비교 기능

A/B 테스트는 사용자가 두 가지 이상의 변형(예: CTA 버튼 색상, 페이지 구조 등)을 테스트하고, 각 변형의 전환율을 비교하는 방식입니다.

5-1. A/B 테스트 결과 저장

const saveABTestResult = async (userId, variation, conversionRate) => {
  await supabase.from("ab_test_results").insert({
    user_id: userId,
    variation,
    conversion_rate: conversionRate,
    created_at: new Date()
  });
};

5-2. A/B 테스트 비교 UI

const ABTestResults = ({ results }) => (
  <table className="table-auto w-full">
    <thead>
      <tr>
        <th>버전</th>
        <th>전환율</th>
      </tr>
    </thead>
    <tbody>
      {results.map((r) => (
        <tr key={r.variation}>
          <td>{r.variation}</td>
          <td>{r.conversion_rate}%</td>
        </tr>
      ))}
    </tbody>
  </table>
);

6. 향후 확장 기능 아이디어

AI 기반 비교 분석 (자동으로 개선점을 추천)
사용자 세그먼트별 분석 (신규 vs 기존 사용자 비교)
시각적 리포트 생성 (GA4 / Amplitude 데이터를 한눈에 보기 쉽게 정리)

다음 글에서는 대시보드에서 자동 보고서를 생성하고, 이를 PDF 또는 공유 가능한 링크로 변환하는 기능을 설명합니다.
→ 11편. 자동 보고서 생성 및 공유 기능 구현