집계를 미리 해 두어 분석 화면의 시간 초과를 해결했습니다
VODA는 웹사이트 방문자의 페이지뷰, 클릭, 스크롤을 모아 트래픽 그래프와 히트맵으로 보여 주는 분석 서비스입니다. 이용 사이트가 늘어 기존 구조로는 버티기 어려워지자 4명이 TFT를 꾸려 아키텍처를 새로 설계했고, 저는 이벤트 수집, 메시지 처리, 집계, 페이지 캡처를 맡았습니다.
- 5건직접 해결한 수집과 집계 문제
- 4가지맡아서 개발한 구성 요소
- 4명아키텍처 재설계 TFT 인원
방문자의 마우스가 오래 머문 곳을 페이지 위에 겹쳐 보여 줍니다. 좌표 수집과 집계가 이 화면의 데이터를 만듭니다. 서비스 소개 자료에 실린 화면이며, 회사 이름은 가렸습니다.
- 맡은 역할
- 클릭 좌표 수집을 고치고, SQS 메시지를 Elasticsearch 문서로 바꾸는 처리, 집계 결과를 미리 만들어 두는 정제기, 전체 페이지를 캡처하는 크롤러를 개발했습니다.
- 만들어낸 결과
- 기기마다 어긋나던 클릭 좌표를 바로잡고, 메시지 누락과 중복을 막았습니다. 분석 화면은 Elasticsearch에서 매번 집계하는 대신 정제기가 미리 만든 결과를 읽게 바꿔 시간 초과를 해결했습니다.
- 1좌표 수집마우스 아래 맨 앞 요소를 기준으로 좌표 기록
- 2메시지 처리SQS 메시지를 Elasticsearch 문서 양식으로 가공
- 3데이터 정제기주기적으로 집계해 RDS 테이블에 저장
- 4페이지 크롤러풀 페이지 스크롤 사이트도 전체 화면 캡처
기존 구조와 새 구조
Web Agent방문자의 페이지뷰, 클릭, 스크롤 수집
voda-server수집 데이터를 MySQL에 저장하고 정제와 화면 응답까지 한 서버가 처리
분석 화면트래픽 그래프와 히트맵
수집
- Web Agent방문자의 페이지뷰, 클릭, 스크롤 수집좌표 기록 방식 개선
- API Gateway, SQS마우스와 스크롤 이벤트를 큐에 보관
- pv-recorder, mouse-recorder메시지를 Elasticsearch 문서로 저장메시지 가공, 병렬 수집, 중복 제거
- page-crawler페이지 화면과 요소 위치 수집전체 페이지 캡처
저장소
- Elasticsearch이벤트 로그와 집계 결과
- MySQL고객사, 페이지 정보, 리포트
정제
- 집계 정제기마우스와 스크롤 데이터를 주기적으로 집계정제기 구축
- forecast방문 추이 예측
시각화
- presenter분석 화면에 데이터를 보내는 API집계 결과 응답
- voda-analytics관리자용 분석 화면
이 기술로 기대하는 변화
이벤트를 놓치지 않는 수집
수집기를 여러 컨테이너로 나눠 큐에 쌓인 메시지를 제때 가져가고, 같은 메시지가 두 번 와도 기록은 하나만 남습니다.
기기와 상관없이 맞는 히트맵
좌표를 웹 요소 기준으로 기록해, 화면 크기가 달라도 같은 버튼의 클릭이 같은 자리에 모입니다.
기다리지 않는 분석 화면
무거운 집계를 미리 해 두어, 관리자가 화면을 열면 시간 초과 없이 그래프와 히트맵이 나옵니다.
문제와 해결
문제페이지 절대 좌표로 기록해, 같은 버튼을 눌러도 화면 크기에 따라 다른 위치로 남았습니다.
해결마우스 아래 맨 앞에 있는 웹 요소를 찾아, 그 요소 안의 좌표로 기록했습니다.
문제분석 화면을 열 때마다 Elasticsearch Aggregation으로 집계하니 응답이 늦어 시간 초과가 났습니다.
해결주기적으로 집계해 RDS 테이블에 저장하는 정제기를 새로 만들어, 화면은 집계 결과만 읽게 했습니다.
문제관공서 사이트에 많던 섹션 단위 풀 페이지 스크롤에서는 일반 캡처로 첫 섹션만 찍혔습니다.
해결Selenium API 대신 Chrome에 직접 요청을 보내, 캡처 높이를 전체 스크롤 길이로 늘리고 모바일 방식으로 캡처했습니다.
문제SQS 메시지를 1분 동안 가져가지 않으면 큐 한도를 넘어 데이터가 빠졌습니다.
해결비동기 작업 큐로 여러 Docker 컨테이너에 수집 명령을 나눠, 메시지를 병렬로 가져오게 했습니다.
문제병렬로 가져오자 같은 메시지를 두 번 가져와 로그가 중복됐습니다.
해결메시지 시간과 사용자 ID로 문서 ID를 만들어, 같은 메시지는 덮어쓰게 했습니다.
분석 서비스 화면
시간대별, 요일별 방문 추이와 예측값을 보여 줍니다. 서비스 소개 자료에 실린 화면이며, 회사 이름은 가렸습니다.