문서 언어: 한국어 업데이트: 2026-03-03

벌컨 (API)

개요

벌컨 API(Beacon API)는 웹 브라우저와 서버 간에 비동기식으로 소량의 데이터를 전송하기 위해 고안된 웹 표준 인터페이스이다. 주로 페이지 언로드(이동, 새로 고침, 닫힘) 시점에 사용자 행동, 성능 메트릭, 분석 데이터 등을 서버에 전달하는 용도로 사용된다. 전통적인 XMLHttpRequest나 fetch와 달리, 페이지가 완전히 종료되기 전까지 네트워크 요청을 보장하지 않아도 되므로, 페이지 종료와 동시에 빠르게 데이터 전송이 가능하다.

주요 목적

  1. 비동기 데이터 전송 – 페이지가 언로드되는 순간에도 백그라운드에서 데이터를 전송하여 사용자 경험을 방해하지 않는다.
  2. 신뢰성 향상 – 네트워크 연결이 불안정하거나 브라우저가 즉시 종료될 경우에도 전송이 시도된다.
  3. 경량 전송 – 소량(수백 바이트 이하)의 데이터를 전송하도록 설계돼, 오버헤드가 최소화된다.
  4. 보안 및 프라이버시 – HTTPS 전송을 기본으로 하며, CORS 정책을 적용한다.

동작 원리

  1. navigator.sendBeacon(url, data) 메서드 호출
  2. 브라우저는 Blob, ArrayBuffer, FormData 등 다양한 형식의 데이터를 POST 요청으로 변환한다.
  3. 요청은 백그라운드 전송으로 처리되며, 현재 페이지가 언로드되더라도 전송이 완료될 때까지 유지된다.
  4. 전송 성공 여부는 true 혹은 false 반환값으로 확인할 수 있다(실제 전송 결과는 파악 불가).

사용 예시

// 사용자 행동 로그를 서버에 전송
const url = 'https://example.com/log';
const payload = new FormData();
payload.append('event', 'page_exit');
payload.append('timestamp', Date.now());

if (navigator.sendBeacon(url, payload)) {
  console.log('Beacon 전송이 시작되었습니다.');
} else {
  console.warn('Beacon 전송을 시작할 수 없습니다.');
}

지원 브라우저

브라우저 지원 버전
Chrome 39+
Firefox 31+
Edge (Chromium) 79+
Safari (iOS) 11.3+
Safari (macOS) 11.1+
Opera 26+
Android WebView 39+

※ 구형 브라우저에서는 navigator.sendBeacon이 정의되지 않으므로 폴백(fallback) 로직이 필요하다.

보안·프라이버시 고려사항

  • HTTPS 전송: 현대 브라우저는 sendBeacon을 HTTPS(또는 localhost)에서만 허용한다.
  • CORS 정책: 대상 서버는 요청 출처(origin)를 허용하도록 CORS 헤더(Access-Control-Allow-Origin)를 설정해야 한다.
  • 데이터 크기 제한: 브라우저마다 최대 전송 크기가 다르며, 일반적으로 64 KB 이하 권장한다.
  • 사용자 동의: 분석·로그 전송 목적이라면 사전에 사용자 동의를 받아야 한다(예: GDPR, 개인정보 보호법).

관련 API·기술

  • fetch: 일반적인 비동기 HTTP 요청을 위한 표준 API. 페이지가 유지되는 동안에만 사용 가능.
  • XMLHttpRequest: 레거시 비동기 요청 방식. fetch와 비교해 복잡하고 사용이 제한적.
  • Service Worker: 백그라운드에서 네트워크 요청을 가로채고 캐시·전송을 제어할 수 있는 스크립트 환경.
  • Web Vitals: 웹 페이지 성능 지표를 수집·전송할 때 sendBeacon을 활용하는 경우가 많다.

역사 및 표준화

  • 제안 배경: 2012년 구글에서 페이지 언로드 시점에 분석 데이터를 전송하기 위해 제안. 기존 XMLHttpRequest는 페이지가 닫히면 취소되는 문제가 있었다.
  • W3C Recommendation: 2017년 12월, W3C에 의해 “Beacon API” 표준으로 최종 승인되었다.
  • 버전 관리: 초기 초안에서는 navigator.beacon 객체를 사용했으나, 최종 표준에서는 navigator.sendBeacon 메서드만 제공한다.

장점 및 한계

장점 한계
페이지 언로드 시점에도 데이터 전송 가능 전송 성공 여부를 즉시 확인할 수 없음
네트워크 및 UI 차단 최소화 전송 가능한 데이터 양이 제한적
HTTPS와 CORS 적용으로 보안 유지 구형 브라우저에서는 사용 불가
구현이 간단하고 브라우저 호환성이 높음 대용량 파일 전송에는 부적합

결론

벌컨 API는 사용자 행동 및 성능 데이터를 신뢰성 있게 수집하기 위한 효율적인 방법이며, 웹 성능 측정, 분석, 오류 보고 등 다양한 분야에서 활용되고 있다. 다만, 전송 데이터 크기와 보안·프라이버시 정책을 충분히 검토한 뒤 적용하는 것이 바람직하다.

둘러보기

더 찾아볼 만한 주제