웹사이트는 쿠키로 내 정보를 어떻게 추적할까? (코드 예제로 알아보기)

웹사이트는 쿠키로 내 정보를 어떻게 추적할까? (코드 예제로 알아보기)

들어가며

이전 글에서 웹사이트마다 "쿠키 허용" 팝업이 뜨는 이유에 대해 알아봤다. 쿠키를 통해 방문 기록, 관심사, 구매 패턴 등을 수집할 수 있다고 했는데, 구체적으로 어떻게 저장되는 걸까?

이번 글에서는 실제 코드 예제를 통해 쿠키가 어떻게 사용자 정보를 저장하고 추적하는지 알아보자.

---

쿠키의 기본 원리

쿠키 자체는 그냥 작은 텍스트 파일이다. 쿠키가 직접 뭔가를 추적하는 게 아니라, 웹사이트의 JavaScript 코드가 사용자 행동을 감지하고 쿠키에 저장하는 구조다.

[사용자가 페이지 방문]
        ↓
[웹사이트 JS 코드가 행동 감지]
        ↓
[쿠키에 데이터 저장]
        ↓
[다음 방문 시 쿠키 읽어서 분석]
        ↓
[맞춤 광고/추천 제공]

---

1. 방문 기록 추적

사용자가 어떤 페이지를 방문했는지 기록하는 코드다.

function trackPageVisit() {
  // 기존 방문 기록 가져오기
  let visited = getCookie('visited_pages');
  visited = visited ? JSON.parse(visited) : [];

  // 현재 페이지 추가
  visited.push({
    url: window.location.pathname,
    time: new Date().toISOString()
  });

  // 쿠키에 저장 (최근 10개만 유지)
  document.cookie = `visited_pages=${JSON.stringify(visited.slice(-10))}; path=/; max-age=2592000`;
}

저장되는 쿠키 값 예시:

visited_pages=[{"url":"/product/123","time":"2024-01-15T10:30:00"},{"url":"/category/shoes","time":"2024-01-15T10:31:00"}]

이 데이터로 "이 사용자는 신발 카테고리를 자주 본다"는 것을 알 수 있다.

---

2. 관심사/취향 추적

사용자가 어떤 카테고리의 상품을 많이 보는지 저장한다.

function trackInterest(category, productId) {
  let interests = getCookie('user_interests');
  interests = interests ? JSON.parse(interests) : {};

  // 카테고리별 조회 횟수 증가
  interests[category] = (interests[category] || 0) + 1;

  document.cookie = `user_interests=${JSON.stringify(interests)}; path=/; max-age=2592000`;
}

// 사용 예시
trackInterest('shoes', 'nike-air-max');
trackInterest('shoes', 'adidas-ultra');
trackInterest('bags', 'gucci-123');

저장되는 쿠키 값:

user_interests={"shoes":2,"bags":1}

이 데이터를 보고 "신발에 관심이 많으시네요!"라며 신발 광고를 띄우는 것이다.

---

3. 구매 패턴 추적

장바구니에 담거나 구매한 상품 정보를 저장한다.

function trackPurchase(productId, category, price) {
  let purchases = getCookie('purchase_history');
  purchases = purchases ? JSON.parse(purchases) : [];

  purchases.push({
    productId: productId,
    category: category,
    price: price,
    date: new Date().toISOString()
  });

  // 90일간 유지
  document.cookie = `purchase_history=${JSON.stringify(purchases)}; path=/; max-age=7776000`;
}

저장되는 쿠키 값:

purchase_history=[{"productId":"123","category":"shoes","price":89000,"date":"2024-01-15"},{"productId":"456","category":"shoes","price":120000,"date":"2024-01-20"}]

이 데이터로 "지난번 구매하신 신발과 어울리는 양말 추천!"같은 맞춤 추천이 가능해진다.

---

4. 위치 정보 추적

위치 정보는 주로 두 가지 방법으로 수집한다.

async function trackLocation() {
  // 방법 1: IP 기반 (서버에서 대략적인 지역 파악)
  // 서버가 Set-Cookie: user_region=seoul 형태로 설정

  // 방법 2: 브라우저 Geolocation API (정확한 위치, 사용자 동의 필요)
  navigator.geolocation.getCurrentPosition((position) => {
    const locationData = {
      lat: position.coords.latitude,
      lng: position.coords.longitude,
      timestamp: new Date().toISOString()
    };

    document.cookie = `user_location=${JSON.stringify(locationData)}; path=/; max-age=86400`;
  });
}

저장되는 쿠키 값:

user_location={"lat":37.5665,"lng":126.9780,"timestamp":"2024-01-15T10:30:00"}
user_region=seoul

이 데이터로 "서울 강남점에서 픽업 가능합니다!" 같은 지역 맞춤 안내가 가능해진다.

---

실제 서비스에서 사용하는 쿠키 예시

Google Analytics

_ga=GA1.2.1234567890.1705312200
_gid=GA1.2.9876543210.1705312200

쿠키명	용도	유효기간
_ga	사용자 고유 식별	2년
_gid	세션 식별	24시간

Facebook Pixel

_fbp=fb.1.1705312200.1234567890

페이스북은 이 쿠키로 사용자가 어떤 사이트를 방문하고, 어떤 상품을 봤는지 추적한다. 그래서 쇼핑몰에서 본 상품이 인스타그램 피드에 광고로 뜨는 것이다.

---

잠깐, 쿠키에 저장 용량 제한은 없을까?

위 예제들을 보면 쿠키에 꽤 많은 데이터를 저장하는 것처럼 보인다. 하지만 실제로 쿠키에는 저장 용량 제한이 있다.

쿠키 저장 제한

항목	제한
쿠키 1개당	약 4KB (4,096 bytes)
도메인당 쿠키 개수	약 50개 (브라우저마다 다름)
도메인당 총 용량	약 80KB~180KB

브라우저별 차이

브라우저	쿠키당 크기	도메인당 개수
Chrome	4KB	180개
Firefox	4KB	150개
Safari	4KB	50개
Edge	4KB	50개

4KB를 초과하면?

// 이렇게 긴 데이터 저장 시도하면
document.cookie = `data=${'a'.repeat(5000)}; path=/`;

// 결과: 저장 안 됨 (조용히 실패하거나 잘림)

---

그래서 실무에서는 어떻게 할까?

앞서 보여드린 예제들은 쿠키의 원리를 설명하기 위한 것이다. 실제 서비스에서는 쿠키에 모든 데이터를 저장하지 않는다.

실무 방식: 쿠키에는 ID만 저장

// ❌ 이렇게 안 함 (용량 초과 위험)
document.cookie = `purchase_history=[{...거대한 데이터...}]`;

// ✅ 실제로는 이렇게 함
document.cookie = `user_id=abc123`;  // ID만 저장

// 서버에서 user_id로 조회
// DB: user_id=abc123 → 방문기록, 구매내역, 관심사 등 전부 조회 가능

쿠키에는 사용자를 식별할 수 있는 ID나 토큰만 저장하고, 실제 추적 데이터는 서버 DB에 저장하는 방식이다.

실무 데이터 흐름

[사용자 방문]
     ↓
[쿠키에서 user_id 확인] → 없으면 새로 발급
     ↓
[사용자 행동 발생] (페이지 조회, 상품 클릭 등)
     ↓
[서버로 이벤트 전송] { user_id: "abc123", event: "view_product", product_id: "nike-123" }
     ↓
[서버 DB에 저장]
     ↓
[다음 방문 시 DB에서 조회하여 맞춤 서비스 제공]

대용량 클라이언트 저장이 필요하다면?

쿠키 외에도 브라우저에서 사용할 수 있는 저장소가 있다.

저장소	용량	용도
Cookie	4KB	인증, 세션 ID
LocalStorage	5~10MB	설정, 캐시 데이터
SessionStorage	5~10MB	탭별 임시 데이터
IndexedDB	수백MB~GB	대용량 구조화 데이터

쿠키는 용량이 작은 대신 매 요청마다 서버로 자동 전송된다는 특징이 있다. 그래서 인증/세션 용도로 적합하고, 대용량 데이터는 다른 저장소를 사용한다.

---

마치며

정리하면 이렇다.

1. 쿠키 자체는 단순한 텍스트 저장소 (최대 4KB)
2. 웹사이트의 JavaScript 코드가 사용자 행동을 감지
3. 쿠키에는 사용자 ID만 저장하고, 상세 데이터는 서버 DB에 저장
4. 다음 방문 시 쿠키의 ID로 서버에서 데이터 조회하여 맞춤 서비스 제공

"이 광고가 왜 나를 따라다니지?"라는 의문이 있었다면, 이제 그 원리를 이해했을 것이다. 쿠키 설정에서 광고/분석 쿠키를 거부하면 이런 추적을 어느 정도 막을 수 있다.