Krafton Jungle/3. TIL

[WEEK15] 클릭스트림 (Clickstream)

munsik22 2025. 6. 24. 10:55

[출처] https://www.wordtracker.com/blog/keyword-research/what-is-clickstream-data

 

클릭스트림Clickstream은 웹사이트나 앱에서 사용자가 마우스 클릭이나 터치 등의 행동을 통해 이동하는 경로를 기록한 데이터다. 이러한 데이터는 사용자의 행동 패턴을 분석하여 웹사이트 개선, 마케팅 전략 수립, 개인 맞춤 서비스 제공 등에 활용될 수 있다고 한다.

클릭스트림은 사용자가 웹사이트나 애플리케이션을 사용할 때 생성되는 모든 클릭, 이동, 스크롤, 입력 등 행동 데이터를 순차적으로 기록한 것이다.
  • 기록 방식: 사용자가 웹사이트나 앱에서 링크를 클릭하거나, 버튼을 누르거나, 페이지를 탐색하는 등 일련의 행동을 추적하여 기록한다.
  • 활용 분야
    • 웹사이트 분석: 사용자의 행동 흐름을 파악하여 웹사이트의 문제점을 발견하고, 개선 방향을 설정하는 데 활용된다. 예를 들어, 사용자들이 특정 페이지에서 이탈하는 이유를 분석하여 콘텐츠를 개선하거나, 메뉴 구조를 변경하는 등의 조치를 취할 수 있다.
    • 마케팅 전략: 사용자의 관심사를 파악하여 맞춤형 광고를 제공하거나, 타겟 마케팅 캠페인을 기획하는 데 활용된다. 클릭스트림 데이터를 통해 사용자의 선호도와 행동 패턴을 분석하여 개인 맞춤형 서비스를 제공할 수 있다.
    • 개인화 서비스: 클릭스트림 데이터 분석 결과를 기반으로 개인 맞춤형 콘텐츠 추천, 상품 추천, 서비스 제공 등을 통해 사용자 경험을 향상시킬 수 있다.
  • 데이터 형태: 주로 웹 서버 로그, 데이터베이스, 분석 솔루션 등을 통해 수집 및 저장된다. 
  • 예시: 사용자가 쇼핑몰 웹사이트에서 특정 상품 페이지를 방문하고, 장바구니에 추가한 후 구매를 완료하는 일련의 과정을 클릭스트림 데이터로 기록할 수 있다. 이 데이터를 분석하면 사용자가 어떤 경로를 통해 상품을 발견하고 구매에 이르렀는지 파악할 수 있다.

클릭스트림의 구성 요소

  • 이벤트 타입: 클릭, 스크롤, 페이지 진입/이탈, 마우스 이동, 입력 등
  • 이벤트 타임스탬프: 언제 발생했는지
  • 세션 정보: 하나의 방문 단위. 쿠키 or 로그인으로 식별
  • 사용자 식별자: 유저 ID, IP 주소, 쿠키 등
  • 경로 정보: 방문한 페이지 URL, referrer, transition type 등

클릭스트림 기술 스택

  • 수집 (Frontend)
    • JavaScript SDK (예: Segment, RudderStack, Snowplow.js)
    • 직접 이벤트 리스너로 구현: window.addEventListener('click', ...)
  • 전송 (Logging)
    • HTTP 전송: Fetch API, Beacon API
    • Kafka, Kinesis 같은 스트리밍 플랫폼 사용
  • 저장/처리
    • 로그 저장: Amazon S3, HDFS
    • 실시간 처리: Apache Kafka + Kafka Streams, Apache Flink, Apache Spark Streaming
    • 배치 처리: Hadoop, Spark
  • 분석/시각화
    • Elastic Stack (ELK)
    • ClickHouse
    • BigQuery, Redshift
    • Tableau, Grafana, Superset 등

클릭스트림의 활용 예시

활용 분야 예시
UX 개선 사용자들이 어디서 이탈하는지 확인 후 UI 개선
추천 시스템 과거 클릭 기반으로 개인화 추천
퍼널 분석 구매까지 평균 몇 단계? 어디서 많이 이탈?
A/B 테스트 버튼 클릭률 비교
에러/이상 탐지 클릭 패턴이 갑자기 줄어들면 오류 가능성 탐지

기술적 고려사항

  • 실시간 처리 성능: 수백만 이벤트를 초당 처리해야 할 수 있음 → 스트리밍 처리 필수
  • 프라이버시 보호: GDPR, 개인정보보호법 이슈 있음 → 익명화, 옵트인(opt-in) 필요
  • 정확한 세션 분리: 쿠키/세션 만료 이슈 고려

클릭스트림 기술의 도전 과제

사용자가 잠재적으로 선택할 수 있는 경로 수는 특정 웹사이트의 페이지 수에 따라 크게 증가한다. 경로 분석을 위한 많은 도구는 지나치게 선형적이며 인터넷 사용의 복잡성을 고려하지 않는다. 대부분의 경우, 가장 일반적인 경로를 따르는 사용자는 5% 미만이다. 그러나 모든 사용자가 동일한 경로를 사용하더라도 어떤 페이지가 행동 결정에 가장 큰 영향을 미치는지 알 수 있는 방법은 여전히 ​​없다. 대부분의 고객이 웹사이트에서 이탈하는 지점을 파악할 수 있는 보다 선형적인 경로 분석 방식에서도 "왜?"라는 요소는 여전히 간과된다. 경로 분석의 주요 과제는 사용자가 특정 경로를 따르도록 규제하고 강제하려는 데 있다. 실제로 사용자는 매우 다양하고 특정 선호도와 의견을 가지고 있다. (참고)

클릭스트림 기술이 ‘흥미로운 이유’

  • 비즈니스 의사결정과 제품 개선의 핵심 데이터가 됨
  • 프론트엔드부터 백엔드, 데이터 엔지니어링, ML까지 모두 아우르는 엔드투엔드 기술 스택이 필요함
  • 실시간성과 정확도 모두 챙겨야 하므로 기술적 난이도도 꽤 높음

만약 웹 프로젝트에 적용한다면?

React 앱에서 사용자 클릭/스크롤을 수집 → Node.js 백엔드로 전송 → Kafka로 스트리밍 → ClickHouse에 저장 → Superset으로 시각화

"클릭스트림 기술의 난이도"는 단순히 클릭 이벤트를 기록하는 수준에서는 낮지만, 실제 서비스 수준의 클릭스트림 분석 시스템을 구축하려고 하면 데이터 수집 → 전송 → 처리 → 저장 → 분석까지 풀스택으로 구성해야 해서 난이도가 꽤 높아진다고 할 수 있다.

1. 수집 (클라이언트 → 서버)

🔹 난이도: 낮음 ~ 중간

  • window.addEventListener()로 클릭, 스크롤, input 등 이벤트는 쉽게 수집 가능
  • 문제는 "얼마나 정확하게", "얼마나 누락 없이" 수집하느냐
    • SPA (React 등)에서는 페이지 전환 없이 라우팅 → 이벤트 누락 가능
    • 속도가 느리거나 이벤트 전송 실패 시 재전송 로직 필요
    • 사용자가 로그인을 안 한 경우 익명 세션 처리 (쿠키, 세션 관리)

🔸 고급 이슈

  • Mobile Web/App 환경에서의 이벤트 수집 일관성
  • GDPR/CCPA와 같은 개인정보보호법 고려 필요

2. 이벤트 전송 및 큐 처리 (Backend / Stream Layer)

🔹 난이도: 중간 ~ 높음

  • 사용자 수가 많아지면 초당 수천~수만 이벤트 발생
  • 전통적인 REST API는 병목이 생기므로 비동기 큐 + 스트리밍 구조 필요: Kafka, Kinesis, RabbitMQ 등의 사용 필수
  • 이벤트의 순서 보장, 중복 제거, 유실 방지가 주요 과제

🔸 고급 이슈

  • 멀티 노드 환경에서의 세션 동기화
  • 모바일 환경에서 오프라인 저장 후 재전송 처리 (local queueing)

3. 실시간 처리 및 집계 (Stream Processing)

🔹 난이도: 높음

  • Kafka → Flink / Spark Streaming / Beam 등으로 이벤트 처리: "유저가 어떤 순서로 클릭했는지", "30초 내 이탈한 세션만 필터" 등
  • 실시간 처리를 위해서는 Windowing, State 관리, Event time 처리 필요: 지연 도착 이벤트 처리, out-of-order event 재정렬 등도 어려운 포인트

🔸 고급 이슈

  • Flink의 RocksDB 백엔드 튜닝
  • Exactly-once 처리 보장
  • 지연 이벤트 처리 (allowedLateness, watermark tuning)

4. 저장 (OLAP DB / Data Lake)

🔹 난이도: 중간

  • OLAP DB (ClickHouse, BigQuery, Druid 등)는 대량의 시계열 데이터를 저장하는 데 특화
  • 문제는: "성능과 비용을 잡으면서 저장하고 쿼리할 수 있는가?"
    • 실시간 데이터 삽입 속도 vs 쿼리 응답 시간 트레이드오프
    • 파티셔닝, 인덱싱 전략 잘못 잡으면 쿼리 느려짐 or 비용 폭증

5. 시각화 및 분석

🔹 난이도: 낮음 ~ 중간 (하지만 중요한 최종 단계)

  • Grafana, Superset, Metabase 등으로 시각화
  • 유저 퍼널, 이탈률, 세션 히트맵 등 도출 가능
  • 단순한 대시보드는 쉬우나, BI 분석 수준으로 구성하려면 도메인 지식 필요
구성 요소 난이도 구현 난이도 학습 곡선 DevOps 난이도
클라이언트 이벤트 수집 ★☆☆☆☆ 쉬움 낮음 거의 없음
이벤트 전송/큐 시스템 ★★☆☆☆ 중간 중간 중간
스트리밍 처리 시스템 ★★★★☆ 어려움 높음 높음
실시간 OLAP 저장소 ★★★☆☆ 중간 이상 중간 높음
분석/대시보드/BI ★★☆☆☆ 중간 낮음 낮음