Avo와 함께 프론트엔드 추적 개선하기

Source: Dev.to

Overview

이 글에서는 Super에서 Avo 📊 를 사용해 제품 분석 프론트엔드 트래킹을 어떻게 새롭게 바꾸었는지 설명합니다. 오랫동안 우리는 프론트엔드 이벤트를 문서화하기 위해 Google Sheets에 의존했으며, 이로 인해 소유권이 불명확하고 스키마가 일관되지 않으며 Segment에서 수동 QA가 느리고 번거로웠습니다. 이후 Avo의 Tracking Plan과 Inspector로 전환하면서 단일 진실의 원천, 개발자와의 적절한 브랜칭 및 피어‑리뷰 프로세스, 자동 검증을 갖추게 되었습니다.

➡️ Result: 더 깔끔한 데이터, 빠른 디버깅, 데이터와 엔지니어링 간 협업이 훨씬 원활해짐 ✅.

Introduction

정확한 트래킹은 신뢰할 수 있는 데이터 모니터링에 필수적입니다. 이를 통해 새로 출시된 기능이 기대대로 동작하는지 확인하고, 버그를 찾아 수정하며, 핵심 사용자 여정을 최적화할 수 있습니다 – 예를 들어 Super Credit 신청 퍼널이 그렇습니다.

트래킹이 잘못되면 나타나는 증상은 다양합니다:

• 이벤트 누락
• 속성 누락
• 속성 값 오타
• 중복 이벤트 전송

하지만 근본 원인은 거의 항상 동일합니다: 문서화가 부족하거나 부실함.

Our previous setup: Google Sheets as a tracking plan 📄

최근까지 프론트엔드 트래킹을 문서화하던 주요 솔루션은 Google Sheets였습니다. 새로운 기능마다 새 문서를 만들거나 새 탭을 추가해 추적해야 할 모든 이벤트를 나열했습니다.

What worked well

• 모두에게 친숙하고 간단함.
• 데이터 팀이 새 시트를 빠르게 만들고 공유할 수 있었음.

Data‑team responsibilities

• 이벤트 리스트 생성 및 유지 관리.
• 새로운 프론트엔드 트래킹이 필요할 때 이를 개발 팀에 전달.

Key pain points ⚠️

• 버전 관리 부실: 이벤트가 언제 삭제·수정됐는지, 왜 그런지 파악하기 어려움.
• 소유권 불명확: 누구든 시트를 편집할 수 있었고, 변경 사항이 자주 눈에 띄지 않음.
• 리뷰 프로세스 약함: 개발자에게 사양을 전달하기 전 명확한 “브랜칭”이나 피어‑리뷰 흐름이 없었음.
• 자동 검증 부재: Segment 디버거에서 수동으로, 특히 Super Credit 같은 복잡한 기능에서는 시간이 많이 소요되는 체크.
• 조화 지원 부족: 속성 재사용이나 일관된 명명 규칙을 강제하지 않아 스키마가 엉망이 됨.

이러한 한계 때문에 더 나은 솔루션을 찾기로 했습니다.

Exploring alternatives and discovering Avo

우리가 고려한 한 가지 옵션은 트래킹 이벤트를 JSON 파일로 문서화하고 GitHub를 이용해 버전 관리, 브랜칭, 리뷰를 하는 것이었습니다. 이는 무료이며 구조화된 관리가 가능했지만, 개발자 중심적이고 비엔지니어에게는 사용성이 떨어졌습니다.

조사 끝에 우리는 프론트엔드 트래킹 스키마 관리, 가시성, 모니터링에 초점을 맞춘 도구인 Avo를 발견했습니다.

Avo는 두 가지 주요 컴포넌트를 제공합니다:

• Tracking Plan
• Inspector

The Tracking Plan: a single source of truth 📘

Tracking Plan은 Segment를 통해 프론트엔드에서 전송되는 모든 이벤트를 정의하는 곳입니다. Avo에서는 카테고리별로 이벤트를 조직할 수 있습니다 – 예:

• App events
• Super Credit
• Merchant checkout

각 이벤트에는 다음이 포함됩니다:

• 이벤트가 발생하는 명확한 정의
• 전송할 속성 목록 (예: brandId, pageName, memberId)
• 해당 속성의 허용 값 및 형식(해당되는 경우)

What Avo improves

• ✅ 단일 진실의 원천: 프론트엔드 트래킹 사양이 여러 Google Sheet에 흩어지는 대신 한 구조화된 장소에 모여 있음.
• ✅ 브랜칭 및 리뷰: 이벤트 추가·수정이 개발 워크플로와 유사한 브랜치를 통해 이루어짐. 기여자는 브랜치를 만들고, 동료가 리뷰한 뒤 개발자에게 구현을 요청하고, 최종적으로 메인 트래킹 플랜에 병합됨.
• ✅ 향상된 버전 관리: 이벤트가 언제 생성·변경·보관됐는지 쉽게 확인 가능.
• ✅ 일관성 및 조화: 일관된 이벤트 명명과 속성 재사용을 장려해 기능 간 속성 값이 정렬됨.

The Inspector: validating implementation automatically 🔎

Inspector는 Segment와 Avo를 연결해 Avo가 다음을 수행하도록 합니다:

• 프론트엔드에서 들어오는 이벤트를 읽음
• Tracking Plan에 정의된 내용과 비교함

Benefits

• 이벤트가 올바르게 구현됐는지 자동으로 확인 🤝
• 속성 이름이나 값의 오타를 탐지
• 정의된 모든 필수 속성이 전송되는지 보장
• Segment 디버거에서의 수동 QA를 더 빠르고 체계적인 프로세스로 대체.

How we are using Avo today

우리는 Super Credit 기능을 중심으로 Avo 사용을 시작했습니다. 이미 다음과 같은 효과를 보았습니다:

• 데이터 팀과 개발자 간 협업 향상
• 프론트엔드 트래킹 사양을 검토·정제하기가 쉬워짐
• 트래킹 버그를 더 빠르고 효율적으로 식별·수정

현재 우리는 Avo 무료 버전을 사용 중이며, 몇 가지 제한이 있습니다:

• Inspector가 월별 분석할 수 있는 이벤트 양에 제한(현재 100,000 이벤트)
• 일부 유료 기능은 아직 제공되지 않음

유료 버전으로 업그레이드가 가치 있는지는 아직 검토 중입니다.

또한 레거시 프론트엔드 트래킹 문서를 이전하고 있습니다. 프론트엔드 결제와 Webflow(및 Super Credit) 관련 이벤트 정의의 약 80 %가 Google Sheets에서 Avo로 이동되었습니다. 다음 단계는 앱 관련 프론트엔드 이벤트에 대한 마이그레이션을 완료하는 것입니다.

Conclusion 🎯

전반적으로 Avo와의 경험은 매우 긍정적이었습니다. 사용자 친화적이며, 상당한 시간을 절감해 주었고, 데이터 팀 내부와 데이터‑개발 간 협업을 크게 개선했습니다.

즉석에서 사용하던 Google Sheets를 정식 스키마 관리·가시성 도구로 전환함으로써 트래킹 신뢰성을 높이고, 디버깅 속도를 빠르게 하며, 분석 결과의 신뢰성을 강화했습니다. 이는 궁극적으로 Super Credit 같은 기능을 더 큰 확신을 가지고 구축·개선하는 데 큰 도움이 됩니다.