네이버 통합검색은 방대한 클릭 로그를 히트맵과 히스토그램으로 시각화하여 사용자의 행동 패턴을 직관적으로 분석하고 있습니다. 단순한 정량적 수치를 넘어 시각적 데이터를 활용함으로써 서비스 개선을 위한 구체적이고 객관적인 근거를 확보하는 것이 핵심입니다. 이를 통해 빠르게 변화하는 검색 서비스 환경에서도 사용자 중심의 최적화된 UX를 도출하는 기술적 노하우를 공유합니다.
**히트맵과 히스토그램을 통한 데이터 시각화**
* 클릭 로그를 히트맵 형태로 변환하여 사용자가 페이지 내 어느 요소에 가장 많이 반응하고 어디에서 이탈하는지 시각적으로 즉각 파악합니다.
* 히스토그램을 활용해 단순 클릭 횟수뿐만 아니라 데이터의 분포와 흐름을 분석하여 사용자 행동의 맥락을 이해합니다.
* 숫자로만 이루어진 정량적 데이터의 한계를 극복하고, 서비스 개선을 위한 직관적인 인사이트를 제공합니다.
**동적 검색 서비스 대응 및 인프라 구축**
* 실시간으로 변화하고 고도화되는 네이버 통합검색 환경에 맞춰 클라이언트 로그를 수집하고 시각화하는 FE 인프라 기술을 적용했습니다.
* 다양한 UI 구성 요소와 서비스 변화 속에서도 시각화 데이터의 정확성을 유지하기 위해 겪은 시행착오와 해결 방안을 포함합니다.
* 웹 페이지 내 사용자 소비 방식을 정밀하게 확인하고 싶은 개발자와 기획자를 위해 기술적 구현 방법론을 제시합니다.
데이터 분석 결과가 실제 서비스 개선으로 이어지기 위해서는 수치 뒤에 숨겨진 사용자의 의도를 읽어내는 것이 중요합니다. 시각적 분석 도구를 활용하면 데이터 해석의 격차를 줄이고, 팀 구성원 모두가 공감할 수 있는 서비스 개선 방향을 설정하는 데 큰 도움이 될 것입니다.
Datadog의 Heatmap은 시간에 따른 값의 분포를 시각화해 평균이나 단일 백분위수만으로는 보이지 않는 이상치와 분산을 보여준다. 핵심은 대규모 원시 데이터를 모두 저장하거나 조회하지 않고도 분포 정보를 유지하는 근사 자료구조와 다단계 집계를 활용하는 것이다. 그 결과 데이터 규모와 조회 범위가 커져도 일정한 응답성과 시각화 품질을 제공한다.
## 평균 그래프만으로는 부족한 이유
- 평균값은 데이터의 분산, 꼬리 분포, 이상치를 숨길 수 있다.
- 예를 들어 요청 시간의 평균이 200ms여도 일부 요청이 수 초 이상 걸리면 사용자 경험에 큰 문제가 생길 수 있다.
- Heatmap은 다음 두 축을 함께 표현한다.
- 가로축: 시간
- 세로축: 관측값의 크기
- 색상: 해당 시간대와 값 구간에 포함된 데이터 수 또는 밀도
- 이를 통해 특정 시간대에 지연 시간이 어느 구간에 집중됐는지, 긴 꼬리가 발생했는지 확인할 수 있다.
## 대규모 분포 데이터를 다루는 문제
- 모든 원시 측정값을 저장한 뒤 요청마다 분포를 계산하면 저장 공간과 조회 비용이 지나치게 커진다.
- 데이터가 많을수록 정확한 히스토그램을 만들기 위해 필요한 값 구간도 복잡해진다.
- 시간 범위와 화면 크기에 따라 필요한 시간 버킷 수가 달라지므로, 고정된 해상도의 데이터만으로는 확대·축소와 다양한 쿼리를 지원하기 어렵다.
- 따라서 저장 단계에서부터 분포를 압축하고, 조회 시 필요한 해상도로 재구성할 수 있어야 한다.
## 스케치 기반 분포 집계
- Datadog은 개별 값을 모두 보관하는 대신 분포를 요약하는 스케치 자료구조를 사용한다.
- 스케치는 값의 정확한 목록을 저장하지 않고, 값이 어떤 범위에 얼마나 많이 존재하는지를 근사한다.
- 이러한 구조는 다음 특성을 가진다.
- 메모리 사용량이 데이터 개수에 비례해 계속 증가하지 않는다.
- 여러 호스트나 서비스에서 생성한 스케치를 병합할 수 있다.
- 분산 환경에서 수집기와 저장소가 독립적으로 집계할 수 있다.
- 평균, 분위수, 개수 등 분포 관련 질의를 효율적으로 계산할 수 있다.
- 특히 로그 형태의 값 분포를 다룰 때는 작은 값에는 세밀한 구간을, 큰 값에는 상대적으로 넓은 구간을 적용해 넓은 값 범위를 적은 수의 버킷으로 표현할 수 있다.
## 시간축과 값축의 버킷화
- Heatmap은 데이터를 시간 구간과 값 구간의 2차원 셀로 나누어 표현한다.
- 각 셀에는 해당 시간·값 범위에 속하는 관측치의 개수가 저장된다.
- 시간축은 조회 범위와 화면의 픽셀 수에 맞춰 적절한 해상도로 조정된다.
- 값축 역시 선형 또는 로그 스케일로 변환할 수 있어, 밀리초 단위의 작은 지연과 수 초 단위의 큰 지연을 동시에 표현할 수 있다.
- 확대하면 더 세밀한 버킷을 사용하고, 축소하면 여러 버킷을 합쳐 전송 데이터와 렌더링 비용을 줄인다.
## 병합 가능한 집계의 장점
- 각 에이전트, 호스트, 서비스 또는 시간 파티션에서 만든 요약 데이터를 중앙에서 병합할 수 있다.
- 병합은 원시 데이터를 다시 전송하는 것보다 훨씬 적은 네트워크·저장 비용으로 수행된다.
- 서로 다른 집계 수준의 데이터를 조합할 수 있으므로 짧은 기간은 높은 정밀도로, 긴 기간은 낮은 정밀도로 조회할 수 있다.
- 이 방식은 데이터 수가 매우 많아져도 처리 비용을 원시 이벤트 수가 아닌 요약 데이터 크기에 가깝게 유지한다.
## 시각화와 성능의 균형
- 브라우저가 모든 이벤트를 직접 처리하지 않고, 서버가 화면에 필요한 형태의 버킷 데이터를 반환한다.
- 프런트엔드는 반환된 셀의 개수와 색상 강도를 이용해 캔버스 또는 유사한 그래픽 방식으로 Heatmap을 그린다.
- 데이터 해상도를 화면 크기에 맞추면 다음 효과를 얻을 수 있다.
- 불필요한 데이터 전송 감소
- 렌더링 속도 향상
- 확대·축소와 시간 범위 변경에 대한 빠른 응답
- 다만 근사 집계이므로 정확한 원시값 목록이 필요한 분석에는 적합하지 않고, 전체적인 분포와 이상 패턴을 파악하는 용도로 사용하는 것이 적절하다.
## 실용적인 결론
평균이나 단일 백분위수만으로 시스템 상태를 판단하기보다 Heatmap으로 분포 전체를 확인하면 지연 시간 급증, 이상치, 특정 구간의 집중 현상을 더 쉽게 발견할 수 있다. 대규모 관측 데이터를 처리하는 시스템을 설계할 때는 원시 데이터 보존과 별개로 병합 가능한 스케치, 다단계 시간 버킷, 화면 해상도 기반 쿼리를 함께 고려하는 것이 효과적이다.
naver원문