본문으로 건너뛰기
버전: 4.6.1

통합 방법 개요

NetFUNNEL JavaScript 에이전트는 두 가지 주요 통합 방법을 지원합니다:

  • URL 트리거 통합 (UTI)
  • 코드 기반 통합 (CBI)

코드 기반 통합은 두 가지 제어 유형으로 더 세분화됩니다:

  • 코드 기반 통합 - 기본 제어: 진입 속도 제어 (키가 빠르게 반환됨)
  • 코드 기반 통합 - 구간 제어: 고정된 동시 사용자 수 유지 (구간 종료까지 키 보유)

URL 트리거 통합​

무엇을 하나요?

  • 코드 변경 없이 콘솔에서 URL 트리거 규칙만 구성하여 "이 URL로 오는 트래픽에 대기열을 적용합니다"라고 선언합니다.

사용자 경험 (UX)

  • 대기실이 필요할 때 사용자는 VWR 페이지로 리디렉션됩니다 → 진입이 허용되면 원래 대상 페이지로 돌아갑니다.

특징

  • 빠르게 적용 가능 (배포 불필요), 캠페인/랜딩 페이지/딥 링크에 적합
  • 전체 페이지 진입을 광범위하게 보호
  • 키 반환은 기본적으로 자동 (data-nf-return-key)

언제 적합한가요?

  • 외부 유입이 많은 프로모션/이벤트/랜딩 URL.

코드 기반 통합​

무엇을 하나요?

  • JavaScript 코드에서 NetFUNNEL 함수를 호출하여 트래픽 제어를 적용합니다
  • 대기실을 언제 어디에 적용할지 완전히 제어할 수 있습니다
  • 앱 흐름의 특정 지점에서 함수를 호출합니다

사용자 경험 (UX)

  • 대기실이 필요할 때 현재 화면에 모달/레이어가 열립니다 → 진입이 허용되면 모달이 닫히고 후속 로직이 즉시 실행됩니다.

특징

  • 트래픽 제어 타이밍에 대한 정밀한 제어
  • 네이티브 웹 UI 경험
  • 웹 앱 및 복잡한 사용자 흐름에 최적

제어 유형 간의 주요 차이점:

  • 기본 제어 (코드 기반 통합): 진입 속도 제어 (키가 빠르게 반환됨)
  • 구간 제어 (코드 기반 통합): 고정된 동시 사용자 수 유지 (구간 종료까지 키 보유)

언제 적합한가요?

  • 로그인/결제/주문/업로드와 같은 앱 내 버튼 클릭 작업 보호
  • 페이지 액세스 단위가 아닌 비동기 백엔드 API 호출 보호

제어 유형​

NetFUNNEL JavaScript 에이전트는 세 가지 제어 유형을 지원합니다:

제어 유형목적최적 용도키 관리
URL 트리거 통합페이지 진입 속도 제어랜딩 페이지, 프로모션 URL, 외부 링크자동 키 반환 - 페이지 진입 보호
코드 기반 통합 - 기본 제어작업 속도 제어버튼 클릭, API 호출, 페이지 탐색작업 완료 후 키 빠르게 반환
코드 기반 통합 - 구간 제어동시 사용자 수 유지다단계 프로세스, 결제 흐름구간 종료까지 키 보유 (전체 프로세스 완료)

제어 유형 비교​

URL 트리거 통합​

무엇을 하나요:

  • 사용자가 특정 페이지에 얼마나 빠르게 액세스할 수 있는지 제어
  • URL 패턴이 일치하면 트래픽 제어가 자동으로 적용됩니다
  • 페이지가 로드되면 키가 자동으로 반환됩니다
  • 코드 변경 불필요

키 관리: 키는 기본적으로 자동으로 반환됩니다 (data-nf-return-key).

사용 사례:

  • 랜딩 페이지 보호
  • 프로모션 URL 제어
  • 외부 링크 방어
  • 캠페인 페이지 관리

예제 흐름:

코드 기반 통합 - 기본 제어​

무엇을 하나요:

  • 사용자가 특정 작업을 얼마나 빠르게 수행할 수 있는지 제어
  • 각 사용자가 작업을 시작할 때 키를 받습니다
  • 작업이 완료되면 키가 빠르게 반환됩니다
  • 이전 사용자가 키를 반환한 후에만 다음 사용자가 진입할 수 있습니다

키 관리: 특정 작업이 완료되면 즉시 키가 반환됩니다 (예: 페이지 로드, API 호출 완료).

사용 사례:

  • 버튼 클릭 속도 제한
  • API 호출 스로틀링
  • 로그인 시도 제어
  • 페이지 탐색 보호

예제 흐름:

코드 기반 통합 - 구간 제어​

무엇을 하나요:

  • 특정 구간에서 고정된 수의 동시 사용자를 유지합니다
  • 사용자는 슬롯이 사용 가능해질 때까지 대기열에서 대기합니다
  • 사용자가 전체 구간을 완료할 때까지 키가 보유됩니다
  • 현재 사용자가 구간을 종료할 때만 다음 사용자가 진입합니다

키 관리: 전체 다단계 프로세스 동안 키가 보유되며, 전체 구간/프로세스가 완료될 때만 반환됩니다 (예: 결제 완료, 결제 처리 완료).

사용 사례:

  • 결제 프로세스 제어
  • 결제 흐름 관리
  • 다단계 양식 완료
  • 리소스 집약적 작업

예제 흐름:

의사 결정 매트릭스​

요구 사항권장 방법제어 유형키 관리 전략
"랜딩 페이지에 사용자가 얼마나 빠르게 액세스할 수 있는지 제한하고 싶습니다"URL 트리거 통합N/A자동 키 반환 - 페이지 진입 보호
"사용자가 버튼을 얼마나 빠르게 클릭할 수 있는지 제한하고 싶습니다"코드 기반 통합기본 제어 (코드 기반 통합)빠른 키 반환 - 개별 작업 보호
"동시에 결제할 수 있는 사용자 수를 제한하고 싶습니다"코드 기반 통합구간 제어 (코드 기반 통합)결제 완료까지 키 보유 - 동시 사용자 수 제어
"로그인 화면을 보호하고 싶습니다"코드 기반 통합기본 제어 (코드 기반 통합)빠른 키 반환 - 간단한 진입 보호
"다단계 프로세스를 제어하고 싶습니다"코드 기반 통합구간 제어 (코드 기반 통합)프로세스 완료까지 키 보유 - 점유 유지
"API 호출을 스로틀링하고 싶습니다"코드 기반 통합기본 제어 (코드 기반 통합)빠른 키 반환 - 호출당 속도 제한
"결제 처리를 제어하고 싶습니다"코드 기반 통합구간 제어 (코드 기반 통합)결제 완료까지 키 보유 - 리소스 관리

구현 복잡도​

URL 트리거 통합​

  • 설정: 간단함
  • 코드: 불필요
  • 유지 관리: 낮음
  • 키 관리: 자동
  • 최적 용도: 빠른 구현, 페이지 수준 보호

코드 기반 통합 - 기본 제어​

  • 설정: 간단함
  • 코드: 최소
  • 유지 관리: 낮음
  • 키 관리: 간단함 (빠른 반환)
  • 최적 용도: 빠른 구현, 간단한 사용 사례

코드 기반 통합 - 구간 제어​

  • 설정: 보통
  • 코드: 더 복잡함
  • 유지 관리: 중간
  • 키 관리: 복잡함 (완료까지 보유)
  • 최적 용도: 복잡한 워크플로우, 리소스 관리

여러 방법을 함께 사용할 수 있나요?​

예! 동일한 애플리케이션에서 여러 방법을 사용할 수 있습니다:

// 랜딩 페이지 보호를 위한 URL 트리거
// (콘솔에서 구성)

// 로그인을 위한 기본 제어
function handleLogin() {
    Netfunnel.nfStart("login_project", "login_segment", loginCallback);
}

// 결제를 위한 구간 제어
function startCheckout() {
    Netfunnel.nfStartSection("checkout_project", "checkout_segment", checkoutCallback);
}

일반적인 패턴:

  • 페이지 진입 보호를 위해 URL 트리거 통합 사용
  • 진입점(로그인, 주요 기능)에 기본 제어 (코드 기반 통합) 사용 - 페이지 로드 후 빠른 키 반환
  • 중요한 프로세스(결제, 결제 처리)에 구간 제어 (코드 기반 통합) 사용 - 전체 프로세스 완료까지 키 보유
연습 프로젝트 사용 가능

연습할 기본 프로젝트가 필요하신가요? NetFUNNEL 통합 연습을 위해 준비된 웹 애플리케이션(바닐라 JavaScript MPA) 템플릿을 포함한 샘플 프로젝트를 확인하세요.