하이브리드 분석 아키텍처

I’m happy to translate the article for you, but I’ll need the full text you’d like translated. Could you please paste the content (excluding the source line you’ve already provided) here? Once I have it, I’ll translate it into Korean while preserving the original formatting and markdown.

하이브리드 분석 아키텍처

현대적이고 실용적인 해결책은 두 개의 분석 시스템을 결합하는 것입니다:

이 아키텍처는 두 가지 다른 목표를 분리합니다:

1. 제품 사용 이해
2. 상세 분석 및 마케팅 분석 수행

이러한 책임을 분리함으로써 쿠키 기반 추적에 전적으로 의존하지 않고 유용한 인사이트를 얻을 수 있습니다.

왜 하이브리드 접근이 필요한가?

• Basic Consent Mode를 사용할 경우, 분석 쿠키를 거부한 사용자는 GA에서 완전히 보이지 않게 되어 → 분석 데이터가 불완전해집니다.
• 하이브리드 아키텍처는 다음과 같이 해결합니다:
  • 기본 보고를 위해 프라이버시‑우선 분석 플랫폼 사용.
  • 심층 분석을 위해 명시적 동의가 있을 때만 GA 사용.

결과:

• 프라이버시
• 제품 인사이트
• 법적 안전

사이의 더 나은 균형을 제공합니다.

레이어 1 – 프라이버시 우선 분석

쿠키와 지속적인 식별자 없이 작동하도록 설계된 도구를 사용하세요.
대표적인 옵션은 다음과 같습니다:

• Umami
• Plausible

이 도구들은 일반적으로 다음을 제공합니다:

• 페이지 뷰
• 리퍼러
• 국가 / 지역 통계
• 디바이스 종류
• 간단한 제품 사용 이벤트

그리고 의도적으로 다음을 피합니다:

• 크로스 사이트 추적
• 지속적인 사용자 식별자
• 광고 프로필

이는 프라이버시 관점에서 정당성을 확보하기가 더 쉽다는 의미입니다.

Umami 설정

Umami는 클라우드 호스팅과 셀프 호스팅 두 가지 방식을 모두 제공합니다.

일반적인 온보딩 단계

1. Umami Cloud에서 계정을 생성합니다.
2. 웹사이트 도메인을 추가합니다.
3. 대시보드에서 추적 스크립트를 복사합니다.
4. 앱의 HTML 템플릿에 삽입합니다.
5. 페이지 뷰가 분석 대시보드에 나타나는지 확인합니다.

작성 시점에 Umami Cloud는 Hobby 티어를 제공하며, 월 약 10만 건의 이벤트를 무료로 사용할 수 있습니다(가격은 변동될 수 있음).

대시보드에서는 보통 다음을 확인할 수 있습니다:

• 상위 페이지
• 트래픽 소스
• 디바이스 종류
• 국가
• 사용자 정의 이벤트

이는 이미 많은 제품 관련 질문에 답하기에 충분합니다.

React + TypeScript 프로젝트에서 Umami 이벤트 추적

1. Umami 추적 스크립트 추가

<!-- Insert the script tag provided by Umami here -->

이 스크립트는 페이지 뷰를 자동으로 추적합니다.

2. 헬퍼 래퍼 만들기

// src/lib/analytics/umami.ts
declare global {
  interface Window {
    umami?: {
      track: (event: string, data?: Record<string, unknown>) => void;
    };
  }
}

export function trackEvent(
  name: string,
  data?: Record<string, unknown>
) {
  window.umami?.track(name, data);
}

3. 컴포넌트에서 헬퍼 사용

// src/components/OpenEditorButton.tsx
import { trackEvent } from "../lib/analytics/umami";

export function OpenEditorButton() {
  const handleClick = () => {
    trackEvent("open_editor");
  };

  return (
    <button onClick={handleClick}>
      Open editor
    </button>
  );
}

이 이벤트는 Umami 대시보드에 표시됩니다. 일반적인 제품 분석 이벤트 예시는 다음과 같습니다:

• open_editor
• view_gallery_item
• view_pricing_page
• start_publish
• publish_complete

레이어 2 – Google Analytics (Consent‑Based)

Google Analytics는 다음과 같은 심층 분석을 제공합니다:

• 사용자 여정
• 퍼널
• 캠페인 기여도
• 전환 분석
• 재방문 세션

GA는 쿠키와 식별자를 사용하므로, 동의 후에만 초기화되어야 합니다.

1. Consent Helper

// src/lib/analytics/consent.ts
export function getConsent(): boolean | null {
  const value = localStorage.getItem("cookie_consent");
  if (value === "true") return true;
  if (value === "false") return false;
  return null;
}

export function setConsent(value: boolean) {
  localStorage.setItem("cookie_consent", value ? "true" : "false");
}

2. Google Analytics Wrapper

// src/lib/analytics/googleAnalytics.ts
import ReactGA from "react-ga4";

const GA_ID = process.env.REACT_APP_GA_ID;
let initialized = false;

export function initGA() {
  if (!GA_ID || initialized) return;
  ReactGA.initialize(GA_ID);
  initialized = true;
}

export function trackPageView(path: string) {
  if (!initialized) return;
  ReactGA.send({
    hitType: "pageview",
    page: path,
  });
}

3. Consent‑Based Initialization

// src/lib/analytics/consentHandlers.ts
import { setConsent } from "./consent";
import { initGA } from "./googleAnalytics";

export function acceptAnalytics() {
  setConsent(true);
  initGA();
}

export function declineAnalytics() {
  setConsent(false);
}

4. Load GA on Page Load (if previously accepted)

// src/App.tsx
import { useEffect } from "react";
import { getConsent } from "./analytics/consent";
import { initGA } from "./analytics/googleAnalytics";

export function App() {
  useEffect(() => {
    if (getConsent()) {
      initGA();
    }
  }, []);

  return null; // Replace with your app’s root component
}

하이브리드 설정을 통한 사용자 여정

Visitor arrives
   ↓
Umami analytics runs for everyone
   ↓
Cookie banner appears
   ├─ Accept → Google Analytics is initialized
   └─ Decline → Google Analytics stays disabled

혜택

• 모든 방문자에 대한 기본 제품 분석 제공.
• 동의한 사용자에 대한 심층 인사이트 제공.
• 보다 명확하고 투명한 개인정보 보호 모델.

언제 어떤 도구를 사용할까

이러한 역할을 분리하는 것이 바로 하이브리드 아키텍처가 잘 작동하는 이유입니다.

권장 시작 설정 (특히 개발자‑중심 웹 앱에 대해)

1. Umami를 모든 방문자에게 사용합니다.
2. Google Analytics는 명시적 동의 후에만 사용합니다.
3. 초기에는 고급 동의 모드를 사용하지 않습니다.

얻는 혜택

• 첫날부터 유용한 분석 제공.
• 법적 모호성 감소.
• 나중에 광고나 구독 기능을 추가하더라도 깔끔한 기반.

최종 생각

프라이버시‑우선 분석 도구는 종종 쿠키‑프리이며 컴플라이언스 관점에서 더 간단하다고 홍보합니다. 이는 복잡성을 줄일 수 있지만, 여러분의 법적 의무를 검토할 책임을 제거하지는 않습니다.

경험 법칙: 투명하게 행동하세요 –
익명 제품 분석은 제품 개선에 도움을 줍니다
선택적 분석 쿠키는 동의한 사용자에게 더 깊은 인사이트를 제공합니다

하이브리드 접근 방식을 구현하고, 사용자에게 명확히 문서화하면 인사이트와 프라이버시 사이의 견고한 균형을 이룰 수 있습니다.

Per Reporting

• 사용자는 일반적으로 그 정도의 정직함에 잘 반응합니다.

기사

1. 쿠키 동의가 분석을 방해하는 이유
2. Google 동의 모드 설명 (React + TypeScript)
3. 광고, 추적 및 EU와 UK의 법적 현실
4. 하이브리드 분석 아키텍처

이 시리즈는 CSSEXY를 구축하는 실제 작업을 기반으로 하며, 사용자 행동을 이해하는 것이 제품 개선에 필수적인 시각 UI 플랫폼입니다.

모든 기사들은 CSSEXY에서도 제공되며 Gallery에서 찾을 수 있습니다.