EN
모든 작업

한화비전 · 2025.04 – 2025.05

한화비전 Keeper AI 리포팅 – AI CCTV 실시간 매장 분석 대시보드

AI CCTV 데이터를 실시간으로 보여주는 매장 분석 대시보드, 초기 로딩 2초 이내

역할
프론트엔드 개발 (프리랜서) · 아키텍처 설계·개발 주도
기간
2025.04 – 2025.05
기술
  • Next.js
  • React
  • TypeScript
  • TanStack Query
  • Chart.js
한화비전 Keeper AI 리포팅 – AI CCTV 실시간 매장 분석 대시보드

개요

AI CCTV로 분석한 매장 데이터를 대시보드로 보여주는 서비스의 프론트엔드 아키텍처 설계와 개발을 주도했습니다. 기획자가 없는 환경에서 요구사항을 화면 흐름으로 직접 정리했습니다.

배경

문제

AI CCTV가 분석한 방문·체류·동선 데이터를 점주가 한눈에 보고 매장 운영에 활용할 수 있는 화면이 필요했습니다.

주요 작업

  • 방문자 수, 체류시간, 이동 동선 등 매장 데이터의 실시간 시각화 대시보드 설계·개발
  • TanStack Query 기반 서버 상태 관리와 캐싱 전략 설계
  • Chart.js로 대시보드 차트 UI 전체 개발, 고객 이동 동선 시각화와 인터랙티브 차트 구현
  • 실시간 데이터 처리와 렌더링 최적화

성과

  • 초기 로딩 2초 이내

    서버 상태 캐싱과 렌더링 최적화로 복잡한 대시보드의 초기 로딩을 2초 이내로 줄였습니다.

  • 실제 매장 도입 논의로 연결

    PoC 완성도를 인정받아 실제 매장 도입 논의로 이어졌습니다.

핵심 기능

  • 01

    방문·체류 통계

    시간대별 방문객, 성별·연령대, 체류시간을 실시간 차트로 보여줍니다.

  • 02

    고객 이동 동선 시각화

    출입구부터 매대까지 고객이 이동한 흐름을 시각화합니다.