전체 시스템 아키텍처 및 기능 흐름

앞선 글에서 설명한 것처럼, Analytics Playground는 단순한 웹사이트가 아닙니다. 이 프로젝트는 사용자가 실습용 분석 환경을 직접 구축하고, 트래픽 흐름을 체험하고, 다양한 분석 도구를 삽입하여 테스트해볼 수 있도록 설계된 샌드박스형 분석 실습 플랫폼입니다.

이번 글에서는 이 시스템이 어떻게 구성되어 있으며, 각 기능이 어떤 흐름으로 작동하는지 소개합니다.

1. 아키텍처 구성도

사용자 → 메인 사이트 (Next.js)
      → 로그인 후 → 사용자 대시보드 (Subdomain)
                          ↓
         ┌──────────────────────────────────┐
         │             실습용 데모 사이트             │
         │  - 홈 / 상품리스트 / 상세 / 블로그 / 폼 등 │
         └──────────────────────────────────┘
                          ↓
                사용자 삽입 스크립트 실행
                          ↓
                GA4 / Amplitude로 데이터 전송

2. 주요 기술 스택

파트 기술 비고

프론트엔드	Next.js	CSR + SSR 혼합 구조
인증	Supabase / Firebase	이메일 기반 로그인
UI 프레임워크	Tailwind CSS	반응형 UI, 빠른 구성
서브도메인 처리	Next.js Middleware	사용자별 route 동적 처리
스크립트 삽입	DOM API, dangerouslySetInnerHTML	사용자별 script 삽입 처리
배포	Vercel	도메인 라우팅에 유리
데이터베이스	Supabase / Firestore	사용자 정보 및 이벤트 설정 저장

3. 기능 흐름: 사용자 입장부터 이벤트 수집까지

3-1. 사용자 가입 및 로그인

메인 페이지에서 계정을 생성하거나 로그인합니다.
로그인 시 사용자 정보를 기반으로 고유 식별자(subdomain)를 생성합니다.
예시: user123.analytics-playground.com

3-2. 서브도메인 환경 구성

사용자가 로그인하면 자동으로 해당 서브도메인으로 리다이렉트됩니다.
해당 도메인에서는 사용자의 설정에 따라 스크립트가 삽입됩니다.
모든 페이지(Home, Product, Blog 등)는 동일한 구조에서 제공됩니다.

3-3. 사용자 스크립트 삽입

대시보드에서 GA4 또는 Amplitude 스크립트를 입력합니다.
해당 스크립트는 사용자의 사이트 head 또는 body에 삽입됩니다.
이를 통해 사용자는 실제로 분석 이벤트 데이터를 수집할 수 있습니다.

3-4. 이벤트 트리거 및 시뮬레이션

실습용 사이트에서는 페이지 진입, CTA 클릭, 장바구니 추가, 검색 등 다양한 이벤트가 발생합니다.
사용자가 설정한 분석 도구로 이벤트가 전송되며, 이를 DebugView, LiveView 등에서 확인할 수 있습니다.

4. UX 흐름 시나리오 (기본 데모 흐름)

단계 페이지 발생 이벤트

①	홈	페이지뷰, CTA 버튼 클릭
②	상품 목록	카드 클릭, 필터 선택
③	상세 페이지	장바구니 클릭, 이미지 보기
④	체크아웃	사용자 정보 입력, 전환 이벤트
⑤	블로그	게시글 클릭, 스크롤 이벤트

이 흐름을 통해 사용자는 GA4의 Path Exploration, Amplitude의 User Flow 기능 등을 실습할 수 있습니다.

5. 사용자별 격리 환경 처리 방식

사용자는 각자의 서브도메인에서만 script를 실행할 수 있습니다.
삽입된 스크립트는 별도의 Sandbox 영역에서 DOM 조작 없이 실행되도록 제한됩니다.
인증된 사용자만 대시보드 접근 및 script 수정이 가능합니다.

다음 글에서는 기능별로 어떻게 구현하는지, 첫 번째 단계인 **“회원가입 및 서브도메인 자동 생성”**을 다룹니다.

→ 3편. 사용자 계정 생성과 서브도메인 자동화 구현