Realtime Dashboard

이 프로젝트는 WebSocket을 활용하여 초당 수천 건의 이벤트를 실시간으로 수집하고 시각화하는 대시보드입니다. 기존의 폴링 방식이 가진 지연과 서버 부하 문제를 해결하기 위해 양방향 통신 채널을 도입했으며, 브라우저 측에서는 D3.js를 사용해 데이터를 즉각적으로 차트와 그래프로 렌더링합니다.

백엔드는 Supabase Realtime을 기반으로 구축되어 있으며, Postgres 테이블의 변경 사항이 클라이언트에 즉시 반영됩니다. 인증된 사용자만 대시보드에 접근할 수 있도록 Row Level Security 정책을 적용했고, 각 사용자에게 할당된 데이터만 스트리밍되도록 채널 필터를 설정했습니다.

프론트엔드는 Next.js App Router 위에서 동작하며, 서버 컴포넌트로 초기 데이터를 프리페칭한 뒤 클라이언트 컴포넌트에서 실시간 업데이트를 이어받는 하이브리드 렌더링 전략을 사용합니다. 이를 통해 첫 로드 시 빈 화면 없이 즉시 의미 있는 데이터를 보여줄 수 있습니다.

기술적 의사 결정

차트 라이브러리 선택 과정에서 Recharts, Chart.js, D3 세 가지를 비교했습니다. Recharts는 선언적 API가 편리했지만 커스터마이징에 한계가 있었고, Chart.js는 Canvas 기반이라 SVG 기반 인터랙션이 제한적이었습니다. 최종적으로 D3를 선택한 이유는 데이터 바인딩과 트랜지션을 세밀하게 제어할 수 있어 실시간 데이터 스트림에 가장 적합했기 때문입니다.

// WebSocket 연결 및 D3 차트 업데이트 예시
const channel = supabase
  .channel('events')
  .on('postgres_changes',
    { event: 'INSERT', schema: 'public', table: 'events' },
    (payload) => {
      const newPoint = transform(payload.new);
      updateChart(newPoint);
    }
  )
  .subscribe();