Segment 이벤트 검증이 왜 이렇게 답답한가 (그리고 내가 해결한 방법)
Source: Dev.to
소개
분석 이벤트를 검증하는 것은 간단해야 합니다. 하지만 그렇지 않습니다.
한 번이라도 이벤트가 올바르게 발생하는지 확인해야 했다면, 아마도 다음 과정을 겪었을 것입니다: 동작을 트리거하고, 디버깅 도구를 열고, 이벤트를 클릭한 뒤, 방대한 JSON 페이로드를 펼쳐서 스크롤… 더 스크롤… 그리고 관심 있는 한두 개의 속성이 실제로 존재하는지 확인합니다. 그런 다음 다시 반복합니다. 또 다시.
대부분의 경우, 여러분은 데이터를 탐색하고 있는 것이 아니라 매우 구체적인 질문에 답하려고 합니다:
- 이 이벤트가 필요할 때 발생하나요?
- 올바른 속성을 포함하고 있나요?
- 그 속성들이 정확한가요?
우리가 의존하는 도구들은 Segment에 전송하는 전체 페이로드를 보여줄 뿐이며, 행운을 빌어줄 뿐입니다. 이는 제가 1년 전, QA 라운드에서 너무 많은 분석 티켓이 생성된 후 겪었던 상황이었습니다. 이벤트를 확인하던 시스템은 오류가 잦았고 버그가 빠져나갔기 때문에, 저는 더 나은 솔루션을 만들기로 결심했습니다.
TL;DR
Analytics X‑Ray – Chrome 확장 프로그램
기능 위시리스트
- 실제로 중요한 속성을 쉽게 찾을 수 있음.
- 잡음이 많은 이벤트를 필터링.
- 더 나은 타임라인 시각화.
- 이상한 UI 문제 없음.
Building the Extension
저는 Cursor의 도움을 받아 프로젝트를 시작했으며, 이를 내부 도구이자 AI‑지원 개발을 실험할 기회로 삼았습니다. 며칠 만에 기능적인 확장 프로그램을 만들었고, 이를 통해 분석 디버깅이 즐거워졌습니다. MVP는 빠르게 완전한 분석 도구로 성장했습니다.
주요 기능
읽기 쉬운 타임라인
- 키워드별 색상 코딩된 이벤트 (Page, View, Click 등).
- 페이지 탐색 및 새로고침 시 구분선을 추가해 명확한 구분 제공.
간소화된 이벤트 보기
- 페이로드를 위한 접을 수 있는 섹션.
- 색상 코딩된 속성 유형.
- 가장 중요한 데이터를 강조하기 위한 속성 고정.
이벤트 필터링
- 이벤트 이름, 속성 키 또는 값으로 검색.
- 잡음이 많은 이벤트를 완전히 숨김.
채택 및 영향
개인 도구로 시작한 것이 팀의 내부 도구가 되었습니다.
- 우수한 내부 채택 – 주당 70명 이상의 활발한 사용자(거의 전체 엔지니어링 팀).
- 개발자, QA 엔지니어, 데이터 분석가가 사용합니다.
- 많은 잠재된 분석 버그를 발견했습니다.
- 문제를 더 일찍 포착하고, 추가 기능도 도입했으며, 다른 내부 개발 도구 분야로까지 확장되었습니다.
- 사용자 경험이 지속적으로 개선되었습니다.
이와 같은 내부 도구를 구축함으로써 우리 팀의 워크플로우가 크게 개선되었습니다.
오픈 소스
몇 달간 만지작거리던 끝에, 도구의 분석 부분이 더 넓은 기술 커뮤니티에 도움이 될 수 있겠다는 생각이 들었습니다. 오픈‑소스를 염두에 두고 다시 만들었고, Analytics X‑Ray가 탄생했습니다.
Segment를 사용하고 위 내용이 공감된다면, 확장 프로그램을 확인해 보세요:
기여를 환영합니다—사용해 보시면 알려 주세요!