Back to Blog

Agency / 2026.07

Report Studio — 광고 성과 리포트 자동화

xlsx 업로드 한 번으로 주간·월간 대시보드와 클라이언트 리포트(XLSX/PPT/PDF)를 만드는 브라우저-로컬 도구입니다. 마케터의 가장 큰 반복 노동을 줄이는 데 초점을 맞췄습니다.

기획·설계·구현·검증

Metrics

  • 단위 테스트 132개 + Playwright 실플로우 스모크
  • Lighthouse Perf 93 · A11y 100 · BP 96 · SEO 90 (CI 게이트 perf≥90/a11y≥95)
  • 메인 번들 583→325kB gz (Web Worker + 코드 스플릿)
  • 개인정보 값 미반출 — 테스트로 강제

Stack

React 19Vite 8TanStack Router/TableECharts 6Web WorkerSheetJS · pptxgenjsTypeScriptHTMLCSS

Problem

퍼포먼스 마케팅 에이전시의 리포팅은 매체별 원천 3종(검색광고 xlsx·GA4·리드 원장)을 수작업으로 취합해 매주 엑셀과 PPT를 다시 조립하는 일이었습니다. 반복 노동일 뿐 아니라, 복사-붙여넣기 과정에서 개인정보가 리포트에 섞여 들어갈 위험도 있었습니다.

Idea

팀의 주간 보고 루틴과 개인정보 혼입 리스크를 보면서, 리포트 조립을 브라우저-로컬 파이프라인으로 바꾸는 방향을 잡았습니다.

Decision

서버 없는 브라우저-로컬 SPA로 설계했습니다. 개인정보 컬럼은 파싱 단계에서 건수로만 환원되도록 하고 이를 테스트로 강제했습니다. 리포트 상태는 전부 URL 토큰으로 직렬화해 '링크가 곧 리포트'가 되게 했고, 무거운 XLSX/PPT 직렬화는 Web Worker로 옮겨 메인 스레드를 멈추지 않게 했습니다.

Outcome

원천 3종 자동 인식 → 이상치 감지·한국어 자동 인사이트·계산 지표가 포함된 대시보드 → 화이트라벨 XLSX/PPT/인쇄 PDF까지 한 흐름으로 이어집니다. 리포트 조립 노동이 업로드 1회로 줄었습니다.

문제

에이전시 리포팅의 실체는 종종 “데이터 분석”보다 조립 노동에 가깝습니다. 검색광고 다운로드, GA4 내보내기, 리드 원장처럼 포맷이 다른 세 원천을 매주 사람 손으로 합치고, 지난주 파일을 복사해 숫자를 바꾸는 방식이라 실수가 구조적으로 발생합니다. 특히 리드 원장에는 고객 개인정보가 들어 있어, 복사 실수 한 번이 사고가 됩니다.

결정

  • 서버를 만들지 않았습니다. 전 과정은 브라우저-로컬 처리입니다. 고객 데이터가 어디로도 전송되지 않는 것이 최선의 보안이고, 인프라 비용도 0입니다.
  • 개인정보는 코드로 차단. 파서가 이름/전화 컬럼을 건수로만 환원하며, “개인정보 값이 산출물에 나타나면 실패”하는 테스트를 두었습니다.
  • URL이 곧 상태. 기간/비교/매체 필터를 전부 URL 토큰으로 담았습니다. 리포트 공유는 링크 전달이 되고, 뒤로가기는 실행취소가 됩니다.
  • 정직 라벨. 자동 인사이트는 “규칙 기반 자동 생성”, 이상치는 “기계 감지·해석은 담당자 몫”이라고 화면에 명시합니다. 도구가 아는 것과 모르는 것을 구분하는 게 신뢰의 조건이라고 봤습니다.

성과

업로드 → 대시보드(KPI 8종 전기간 대비, 이상치 핀, 기간 메모, 사용자 정의 계산 지표) → 내보내기(XLSX 5시트, 대시보드 차트가 그대로 실리는 PPT, 인쇄 PDF)가 한 흐름입니다. 클라이언트별 화이트라벨(로고색·이름 스왑)까지 포함해, 납품 가능한 산출물이 클릭 한 번에 나옵니다.

성능·품질은 CI가 강제합니다: Lighthouse perf ≥90/a11y ≥95 게이트, 단위 테스트 132개, Playwright로 실제 다운로드까지 검증하는 스모크.