내 브라우저의 숫자가 사이트 방문자 수는 아닙니다

작은 웹사이트를 만들 때 화면 한쪽에 방문 숫자를 붙이고 싶어집니다. 페이지가 열릴 때 저장된 값을 하나 늘리면 카운터는 쉽게 만들 수 있습니다. 하지만 그 숫자를 “사이트 전체 방문자”라고 이름 붙이면 측정 범위가 달라집니다.

localStorage가 보관하는 값의 범위

MDN은 localStorage를 문서의 출처(origin)에 대한 저장소로 설명합니다. 값은 브라우저 세션이 바뀌어도 남을 수 있습니다. 이 저장소 자체가 서버에서 여러 사용자의 방문을 모아주는 집계 장치는 아닙니다. localStorage 설명

출처를 구분할 때는 프로토콜, 호스트, 포트가 관계합니다. 따라서 비슷해 보이는 주소라도 같은 저장소라고 단정할 수 없습니다. 출처의 개념은 MDN의 동일 출처 정책 문서에서 확인할 수 있습니다. 출처의 구분

저장소 두 개로 살펴본 간단한 모델

아래 코드는 실제 브라우저가 아니라 서로 독립된 Map 두 개로 저장소를 흉내 냅니다. 한쪽에서 값을 늘려도 다른 쪽의 값은 합쳐지지 않는 구조를 보기 위한 예시입니다.

function countView(storage) {
  const next = Number(storage.get('views') || 0) + 1;
  storage.set('views', String(next));
  return next;
}
const browserA = new Map();
const browserB = new Map();
countView(browserA); // 1
countView(browserA); // 2
countView(browserA); // 3
countView(browserB); // 1

편집팀은 이 코드 모델을 실행해 A의 값이 3, B의 값이 1인 것을 확인했습니다. 여기서 알 수 있는 것은 독립 저장소를 사용한 계산의 결과입니다. 실제 브라우저의 동기화, 저장소 차단, 삭제, 여러 탭의 동시 변경 같은 동작까지 검증한 것은 아닙니다.

새로고침 횟수와 사람 수도 다릅니다

이 모델은 호출될 때마다 수를 늘립니다. 같은 사람이 다시 열어도 늘고, 저장소가 별개라면 같은 사람이 다른 환경에서 열 때 새 값으로 시작할 수 있습니다. “몇 번 실행됐는가”라는 값에서 “몇 명이 왔는가”를 바로 알아낼 수는 없습니다.

또 데이터가 사라졌거나 읽히지 않는 상황을 방문자가 0명이었다는 뜻으로 바꾸면 안 됩니다. 측정이 없다는 상태와 실제 0을 관측했다는 상태는 구분해 표시해야 합니다.

숫자 옆에 측정 범위를 붙이세요

작은 개인용 도구라면 “이 브라우저에서 연 횟수”처럼 범위를 드러내는 이름을 쓸 수 있습니다. 저장소를 초기화하면 값도 달라질 수 있다는 안내를 함께 두는 편이 좋습니다. 방문자 분석이 목적이라면 어떤 요청을 수집하고 중복을 어떻게 다루는지 정의한 별도 측정 설계가 필요합니다.

표시하려는 항목	먼저 정할 질문
페이지 열림 횟수	어느 환경에서, 어떤 동작을 셀 것인가
방문자 수	사람 또는 기기를 어떤 기준으로 구분할 것인가
기간별 변화	시작·종료 시각과 누락 범위를 어떻게 기록할 것인가

멋진 숫자보다 먼저 필요한 것은 그 숫자가 무엇을 뜻하는지에 대한 설명입니다. Clockgarden IT도 측정 자료가 없는 방문자·수익을 임의의 숫자로 표시하지 않습니다.