← 포트폴리오 목록
가맹 리드 관리 및 상담 데이터 분석 대시보드
본사가 상담신청 리드를 관리하고 카피 성과를 지속적으로 검토할 수 있도록, 실시간 리드 파이프라인·채널별 성과 분석·계산기 응답 로그·랜딩 카피 버전 관리를 통합한 관제 대시보드를 React + TypeScript 기반으로 설계·구현합니다.
WebSocket 리드 상태 동기화 엔진 구현Socket.io로 리드 접수·상태 전이 이벤트를 상태바·퍼널·큐 3개 화면에 동시 반영하는 구조를 설계합니다.
채널×지역 사전 집계 파이프라인 설계PostgreSQL Materialized View로 채널×지역 리드 집계를 사전 계산해 대시보드 조회 구조를 구현합니다.
계산기 응답 히스토그램 분석 구조 구축계산기 입력 로그를 구간별로 집계하는 쿼리를 설계해 상담으로 이어질 가능성이 높은 조건대를 도출하는 구조를 구현합니다.
Overview
프로젝트 개요
본사가 상담신청 리드를 관리하고 카피 성과를 지속적으로 검토할 수 있도록, 실시간 리드 파이프라인·채널별 성과 분석·계산기 응답 로그·랜딩 카피 버전 관리를 통합한 관제 대시보드를 React + TypeScript 기반으로 설계·구현합니다. 리드 유입부터 카피 A/B 버전 교체까지 하나의 관제탑 구조 안에서 다룰 수 있도록 구성합니다.
요구사항 정의
프로젝트 핵심 과제
프로젝트 진행 시 해결한 핵심 기술 과제입니다.
실시간 리드 이벤트를 상태바·퍼널·우선순위 큐 3개 화면에 지연 없이 동시 반영하는 상태 동기화 구조 설계가 필요합니다
채널×지역 교차 집계처럼 조합 경우의 수가 큰 데이터를 Materialized View로 사전 계산하면서 최신성을 유지하는 갱신 전략 설계가 필요합니다
계산기 입력값처럼 연속형 데이터를 의미 있는 구간으로 나누어 히스토그램화하는 버킷 설계가 필요합니다
비개발 인력이 직접 다루는 카피 버전 관리 화면에서 잘못된 입력으로 랜딩페이지 렌더링이 깨지지 않
방지하는 유효성 구조 설계가 필요합니다
핵심 기능 1
실시간 리드 파이프라인 현황
상단 슬림 상태바에 '금일 신규 상담 신청', '평균 응답 대기 구간', '진행 중 리드 수'를 실시간 카운터로 노출하고, 하단 메인 패널에는 신규 리드가 접수부터 상담 완료까지 이동하는 단계별 퍼널을 시각화해
핵심 기능 2
지역·채널별 리드 성과 분석
네이버·인스타그램·지인추천 등 유입 채널별 리드 수와 희망 지역 분포를 교차 분석하는 차트를 배치하고, 기간 필터로 주별·월별 추이를 비교할 수 있도록 구성합니다
핵심 기능 3
계산기 응답 로그 및 퍼널 인사이트
랜딩페이지 수익 계산기에 입력된 값(투자금·기간·비중)의 분포를 히스토그램으로, 계산기 사용 후 상담신청까지 이어진 구간을 별도 카드로 정리해 어떤 조건대의 방문자가 실제 상담으로 이어지는지 파악할 수 있도록
핵심 기능 4
랜딩 카피 A/B 버전 관리
헤드라인·서브헤드·CTA 문구를 버전별로 등록하고 노출 비중을 조정할 수 있는 카피 관리 패널로, 개발자 없이도 마케팅 담당자가 직접 문구를 교체하거나 새 버전을 추가할 수 있도록 구성합니다
구현 과정
프로젝트 진행 단계
STEP 1
리드/카피 버전 데이터 모델링
리드·계산기 로그·카피 버전 테이블 6~8개 설계, 채널×지역 집계용 Materialized View 정의
STEP 2
실시간 리드 파이프라인 API 개발
Express + Socket.io 기반 리드 접수·상태 전이 API 10여개 구현, Redis 캐시 계층 적용
STEP 3
관제탑 UI 및 차트 구현
React 기반 상태바·퍼널·채널 분석 차트 6종 구현, Recharts 히스토그램 커스터마이징
STEP 4
카피 CMS 및 통합 테스트
카피 버전 관리 폼·미리보기 패널 구현, 리드-분석-카피 3개 모듈 통합 테스트 진행
프로젝트 성과
WebSocket 리드 상태 동기화 엔진 구현Socket.io로 리드 접수·상태 전이 이벤트를 상태바·퍼널·큐 3개 화면에 동시 반영하는 구조를 설계합니다.
채널×지역 사전 집계 파이프라인 설계PostgreSQL Materialized View로 채널×지역 리드 집계를 사전 계산해 대시보드 조회 구조를 구현합니다.
계산기 응답 히스토그램 분석 구조 구축계산기 입력 로그를 구간별로 집계하는 쿼리를 설계해 상담으로 이어질 가능성이 높은 조건대를 도출하는 구조를 구현합니다.
카피 버전 배분 로직 설계노출 비중 기반 카피 버전 배분 미들웨어를 Express에 구현하고, 슬롯 단위 버전 스키마를 설계합니다.
Review
기술적 주안점
- WebSocket 실시간 이벤트와 전역 상태 동기화를 결합해 상태바·퍼널·큐가 하나의 데이터 소스를 공유하는 관제 구조를 구현합니다
- Materialized View 기반 사전 집계로 채널×지역 교차 분석 차트가 대시보드 진입 즉시 렌더링되는 구조를 구현합니다
- 계산기 입력 로그를 구간별로 집계해 어떤 조건의 방문자가 상담신청으로 이어지는지 데이터로 드러내는 분석 구조를 구현합니다
