[IT] FE 레거시 코드 리팩토링 강의 정리 3 (feat. 데이터 분석)

원티드 프리온보딩 챌린지 "레거시 유지보수와 데이터 모으기" 4일차 강의

 

이번 강의는 사용자의 데이터를 수집하고 분석하는 방법에 대한 강의이다. 아무래도 현 직장이 상용 서비스를 운영하기보단 솔루션을 주로 만드는 회사다보니 잘 감이 오지 않았던 강의긴 한데, 새롭고 신기했다. 언젠간 쓸 일이 있을지도 모르니, 정리해둔다.

 

개요

• Data Driven: 데이터를 기반으로 의사결정을 내리는 것을 말한다.
• 데이터를 수집하고 분석하여 그 다음엔 어떤 기능을 만들지, 뭘 더하고 뭘 뺄지 결정하는 전략을 수립한다.
• 보통 마케팅팀이 기획하며, 여기서 프론트엔드 개발자가 할 일은 '데이터 수집' 이다.

 

 

데이터 수집 단계

• 수집할 데이터 정의: 어떤 페이지에서 일어날 수 있는 행동 중 수집할 것들에 대해 정의한다. 예를 들면 어떤 페이지에 들어왔으며, 그 페이지에서 몇 개의 게시글을 읽었는지, 무슨 버튼을 눌렀는지, 팔로우를 취소했는지, 팔로우를 취소당한 사람에 대한 정보 등이다.
• 사용자 속성 정의: 사용자의 나이대, 마케팅에 동의했는지, 팔로우한 친구 수는 몇 명인지, 관심사는 무엇인지 등에 대한 데이터를 정의한다.
• 이벤트 설계: 위에서 정의한 내용을 이벤트 텍소노미(Event Taxonomy) 라는 문서로 정의한다. 의도와 속성(파라미터)에 대한 내용이 들어가 있어야 한다.
• 심기: 여기서부터 프론트엔드 개발자가 할 일이다. 이벤트 추적 도구를 이용하여 사용자 행동을 추적한다.

 

 

사용자 행동 추적 도구들

• GA(Google Analytics): 무료이며, 유료버전(GA360)도 있다.
• 믹스패널: UI가 직관적이고 쓰기 쉬우나 기능이 적다.
• 앰플리튜드(AWS꺼): 시각화에 좋다.
• 앱스플라이어: 모바일 앱 광고 성과 측정(어트리뷰션) 등에 주로 쓴다.
• 에어브릿지: 통합이 쉽지만 좀 비쌈
• 태블로: 데이터 시각화 툴
• 클라리티(Clarity): 스크롤, 히트맵 등 시각화하는 툴

 

GTM(Google Tag Manager)

위와 같은 도구들은 하나만 쓰는 게 아니라 여러 개를 같이 쓸 때가 많은데, 이러면 중복 이벤트들이 많이 발생한다. 그럴 때 GTM을 사용하여 한 번에 관리한다.

즉, GTM에 여러가지 툴들을 연동시켜 놓고, 우리 코드에는 GTM 하나만 연동시키면 된다.

그러면 GTM은 여러가지 사용자 이벤트들을 수집하여 위의 행동 추적 도구들로 전송해주는 역할을 한다.

 

 

Logger로 관리하기

GTM과 연동이 되지 않는 제품 등을 관리할 때 logger를 같이 사용한다. react-gtm-module 등의 라이브러리를 사용하여 연동할 툴을 연동하고, logger로 다른 이벤트를 로깅한다.

• 이벤트 텍소노미를 받아서 이벤트 이름을 가져오고, 이벤트 이름들을 객체 하나에 모두 저장해놓는다.
• 연동해야 하는 툴을 react-gtm-module의 TagManager를 통해 연동하고 logger를 만든다.
• 모든 툴을 통합관리하는 메인 로거를 만든다.
• 코드 내에서 메인 로거만 불러서 모든 이벤트를 전송한다.

logger.logEvent({event: "이벤트명", custom: {from: "ASIDE_BAR"}});