🎬 세션 리플레이 도입

실제 사용자 경험 분석을 위한 OpenReplay 셀프호스팅

EFA(FEQA 겸)이민호

💡 세션 리플레이란?

사용자의 웹사이트 방문 세션을 비디오처럼 녹화하여

실제 클릭, 스크롤, 입력 등 모든 행동을 재생하고
사용자 경험의 문제점을 정확히 파악하는 분석 도구

❓ 왜 세션 리플레이가 필요한가?

🔍

버그 재현 용이

사용자가 겪은 문제를 그대로 재생하여 버그 원인을 빠르게 파악

📊

데이터 기반 의사결정

추측이 아닌 실제 사용자 행동 데이터로 UX 개선 우선순위 설정

💡

숨겨진 문제 발견

통계로는 알 수 없는 사용자 불편 지점과 이탈 원인 발견

📹 Clarity 실제 동작 화면

Microsoft Clarity의 세션 리플레이 기능 시연

🤔 도구 선택 과정

1️⃣

Clarity 검토 - Microsoft의 무료 세션 리플레이 도구, 기능 우수

⚠️

보안 이슈 발견 - 회사 보안 정책상 사용자 데이터를 외부 서버로 전송 불가

🔒

셀프호스팅 필요 - 모든 데이터를 자체 서버에 저장해야 함

❌

Clarity 한계 - 셀프호스팅 미지원, 클라우드 서비스만 제공

✅ OpenReplay 선택 이유

🔓

오픈소스

완전한 오픈소스 프로젝트로 코드 검토 가능, 커스터마이징 자유

🏠

셀프호스팅 지원

자체 서버에 완전히 설치 가능, 모든 데이터를 내부에서 관리

🐳

Docker & Kubernetes 지원

컨테이너 기반 배포로 확장성과 관리 효율성 확보

⚡

강력한 기능

세션 리플레이, DevTools, 성능 모니터링, 에러 트래킹 등 종합 분석

🎯 OpenReplay 주요 기능

세션 리플레이

픽셀 단위 완벽한 사용자 행동 재생
콘솔 로그 및 네트워크 요청 함께 확인
에러 발생 시점 정확한 재현
모바일/데스크톱 모든 디바이스 지원

개발자 도구 통합

Redux, MobX 등 상태 관리 추적
GraphQL, Fetch/XHR 요청 모니터링
브라우저 콘솔 로그 기록
JavaScript 에러 상세 분석

성능 모니터링

페이지 로드 시간 측정
프레임 드롭 및 렌더링 이슈 감지
메모리 사용량 추적
느린 네트워크 요청 식별

보안 & 프라이버시

민감 정보 자동 마스킹
데이터 완전 내부 저장
GDPR 준수
세밀한 접근 권한 제어

🛠️ 셀프호스팅 구축 진행중

✅ 완료

Docker 기반 로컬 환경 구축

Docker Compose로 PostgreSQL, ClickHouse, Redis, MinIO 등 전체 스택 구성
Nginx 리버스 프록시 설정으로 서비스 통합
Python(Chalice) 백엔드 + React 프론트엔드 연동 성공

🔄 진행중

오픈소스 버전 주요 이슈 해결

❌ resources.py 파일 누락 → stub 파일 생성으로 우회 처리
❌ MinIO CORS 에러 → nginx.conf에 CORS 헤더 추가 (S3 서명 포함)
❌ Presigned URL 포트 문제 → s3.py 수정으로 localhost:9000 자동 변환

📋 대기

다음 단계

Kubernetes 클러스터 배포 준비 (Helm Chart 기반)
프로덕션 환경 스토리지 및 네트워크 설정
실제 서비스에 추적 코드 통합 및 모니터링 시작

🖥️ 실제 OpenReplay 호스팅 화면

자체 구축한 OpenReplay 대시보드 - 완전한 데이터 통제

🎯 기대 효과

보안을 지키면서도 강력한 분석 도구 확보
실제 사용자 행동 데이터로 UX 개선
데이터 기반 의사결정 문화 구축

OpenReplay 셀프호스팅으로
안전하고 효과적인 세션 분석을 시작합니다! 🚀