📊 웹 사용자 행동 분석 대시보드 – MongoDash (설계·진행 중)

1.📝 프로젝트 개요

MongoDash는 웹 페이지 내에서 사용자가 발생시키는 클릭, 호버, 호버 유지 시간 등의 마우스 이벤트를 수집하고, 이를 분석·시각화하는 대시보드 서비스입니다.

만들게 된 배경

• 취업준비로 포트폴리오를 관리하고 있었는데, 어느 부분에서 면접관이 관심을 가지는지 궁금해짐
• 그러나, 노션페이지에서 따로 스크립트를 넣어 사용자 이벤트를 추적하기 힘듬.
• 그래서 새로 포트폴리오 사이트를 제작하고, 어느 부분에 가장 관심있어 하는지 시각적으로 보여주기 위한 프로젝트를 시작함
• 현재 보고있는 페이지가, 바로 유저 이벤트를 집계하기 위해 만들어진 포트폴리오 사이트임

주요 목적

• 특정 UI 영역에서 사용자가 얼마나 머물렀는지 분석
• 클릭 발생 위치·빈도·패턴 파악
• 호버 시간 기반 관심도 분석
• 포트폴리오 개선을 위한 정량적 근거 제공

현재는 기획/설계 단계이며, MongoDB를 기반으로 이벤트 로그를 안정적으로 수집 → 저장 → 조회 하는 서버 아키텍처를 구성 중입니다.

2.⚙️ 시스템 구조 (설계 단계)

1. 클라이언트 – Event Collector (프론트)

   • 수집할 이벤트
     • mousemove (좌표만, 일정 간격 샘플링)
     • click (좌표 + timestamp)
     • mouseenter / mouseleave (hover 시작/종료 시간)
     • hoverDuration (호버 유지 시간 계산)
   • 전송 방식
     • 5초 or 300건 단위로 배치 전송
     • 이벤트를 즉시 서버에 보내지 않고 메모리 큐에 저장 → 일정량 쌓이면 POST 호출

2. 서버 – Kotlin + Spring Boot

   • 비동기 API를 통해 대량 이벤트 수신
   • JSON 배열 형태로 들어온 이벤트를 파싱
   • 기본적으로 MongoDB에 저장하되, 저장 부하가 높을 때를 대비해 Redis 큐 사용 고려

3. MongoDB – Event Store

   • 세부 이벤트를 Document 형태로 저장
   • 클릭/호버를 다른 컬렉션으로 분리하거나, 하나의 컬렉션에 type 필드로 구분할지 설계 검토 중
   • TTL 인덱스로 오래된 로그 자동 제거 기능 예정

4. Dashboard API

   • 특정 시간대별 클릭 히트맵 생성
   • UI 요소별 평균 호버 시간 계산
   • 페이지별 관심도 분석 API 제공

3.📌 현재까지 진행된 부분

• WSL + Docker를 활용한 MongoDB 개발 환경 구축
  • mongod 실행 및 포트 포워딩
  • Compass 로 DB/컬렉션 조회 성공
  • mongosh는 tar.gz 바이너리 설치로 해결
• Kotlin + Spring Boot 프로젝트 초기 구조 생성
  • Gradle + Kotlin DSL 기반 설정
  • MongoConfig 및 Repository 동작 확인
  • /events API 엔드포인트 작업 중

4.📁 이벤트 데이터 구조 (설계)

클릭 이벤트

{
  "type": "click",
  "sessionId": "abc-123",
  "timestamp": 1732501205000,
  "x": 500,
  "y": 620,
  "target": "#login-button"
}

호버 시작 / 종료 이벤트

{
  "type": "hover_start",
  "sessionId": "abc-123",
  "timestamp": 1732501205000,
  "x": 320,
  "y": 450,
  "target": "#menu-item-1"
}

{
  "type": "hover_end",
  "sessionId": "abc-123",
  "timestamp": 1732501208000,
  "x": 320,
  "y": 450,
  "target": "#menu-item-1"
}

호버 지속시간 이벤트 (서버 계산)

{
  "type": "hover_duration",
  "sessionId": "abc-123",
  "start": 1732501205000,
  "end": 1732501208000,
  "duration": 3000,
  "target": "#menu-item-1"
}

5.🧩 예상되는 이슈

🔥 문제 1 – 클릭·호버 이벤트 폭주 시 MongoDB 성능 저하

현재 판단: MVP 단계에서는 insertMany 로 시작하고, 실제 트래픽에서 병목이 보이면 Redis Queue → BulkWrite 로 확장 예정.

🔥 문제 2 – 호버 지속시간 계산 위치 (프론트 vs 서버)

현재 판단: hover start/end 이벤트만 받고, duration 은 서버에서 계산하는 방향이 적합.

🔥 문제 3 – 대시보드 조회 속도 개선

현재 판단: 초기에는 Mongo 단일 조회 로 시작하고, 대시보드가 준비되면 Redis 캐싱 도입 예정.

♻️ 요약

• MongoDash는 웹 사용자 마우스 행동(클릭·호버·호버 시간)을 수집·분석·시각화하는 서비스입니다.
• 현재 설계 단계이며 DB 구조·API 구조를 구축 중입니다.
• 이벤트 스키마와 시스템 흐름을 명확히 정의했으며, 성능·확장성을 위한 여러 옵션을 검토하고 있습니다.
• 향후 BulkWrite, Redis Queue, TTL 인덱스 등을 도입해 서버 확장성을 확보할 계획입니다.

위 내용은 현재 진행 상황과 설계 아이디어를 정리한 것이며, 실제 구현 시 세부 사항은 변경될 수 있습니다.