학교 커뮤니티 리브랜딩 프로젝트 막바지 무렵.. AB 테스트를 진행하게 되었다.
AB 테스트 : 2가지 이상의 버전을 사용자 그룹에게 나눠 보여주고 어떤 버전이 더 좋은 결과를 만드는지 데이터를 통해 비교하는 방법
이라고 한다.
우리 프로젝트의 A/B 테스트의 목표는
1. A/B 테스트를 통해 글쓰기 버튼과 글쓰기 박스의 사용자 선호도를 분석한다.
2. 두 가지 옵션을 각각 50% 사용자에게 배정하여 클릭 데이터를 수집한다.
3. 최종적으로 더 나은 사용자 경험을 제공하기 위해 UI를 확정한다.
어떤 플랫폼을 선택해야하는지 찾아보니, hackle과 firebase를 많이 쓰는 듯했다.
처음에 hackle이 간단해보여 선택하였지만, 막상 로그인하고, 회의하고, 다른 기능 개발하고 다시 접속해보니 무료 체험 기간이 끝나 있었다. 계정을 돌려서 뭐 할 수야 있겠다만, 아직 아무도 써보지 않은 플랫폼에 대해 너무 번거로울 것 같았다.
그래서 어쩔 수 없이 firebase를 선택했지만, firebase에서는 A/B 테스트 기능을 무료로 제공해준다고 했다.
이미 firebase analytics와 다른 기능으로 firebase sdk가 연동되어 있었기 때문에 오히려 꿀..?
그래서 이번에 React Native와 TypeScript를 활용해 Firebase Remote Config를 설정하고, A/B Testing를 구현하면서 겪었던 경험을 정리하고자 한다.
1. Firebase SDK 연동
나는 이미 운영이 되고 있는 앱이었기에 때문에 별도 추가로 sdk를 연동할 필요가 없었다.
하지만 sdk 버전 업그레이드 하는 경우, 교체할 경우가 필요하다면 다시 sdk를 다운 받아서 프로젝트 파일 gradle에 추가해야한다.
sdk 파일 확인은 firebase 프로젝트 개요 > 프로젝트 설정 > 일반 > 내 앱 부분에서 확인할 수 있다.
2. Firebase Remote Config 설정 과정
우선 A/B 테스트를 사용하려면 Remote Config를 먼저 설정해야 한다.
Remote Config : 앱의 동작이나 UI를 코드 수정 없이 Firebase 콘솔에서 관리, 업데이트할 수 있는 도구
A/B 테스트는 Remote Config의 설정값(파라미터)을 기반으로
- A/B 테스틀 그룹을 원하는 비율에 맞게 분류하고 배포해야 한다.
- 실시간 설정을 변경하고 즉시 반영해야 한다.
- Firebase Analytics와 통합을 해서 통계를 받아야 한다.
위 이유로 Remote Config를 꼭 설정해주어 하는 것이다.
초기에 프로젝트 설정하고 나면 바로 매개변수를 작성하는 폼이 주어질 것이다.
실험 부분은 나중에 A/B Testing 연동 후에 생길 것이다.
쓰리핀을 누르면 A/B Test 버튼이 나오는데 누르면, 원하는 목표/ 타켓팅 및 분포/ 변수 에 대해 작성해주면 된다.
유지 같은 부분은 목표가 달성하고 나서, 해당 유저가 설정한 기간(ex. 4~7일) 동안에도 해당 목표를 달성하는지를 설정하는 부분이라고 했다.
(티스토리를 작성하면서 목표를 잘못 설정했다는 것을 알았다.
나는 사용자별로 화면에 컴포넌트가 표기되는 거에 집중했기에 screen_view 로 설정하면 된다고 생각했다.
하지만 이 이벤트는 화면에 표기되는 것이 데이터에 집계되는 것이었고, 이는 우리 프로젝트와 맞지 않았다.
내가 원하는 목표를 달성하려면 custom_click 이라는 활성화 이벤트를 별도로 만들어주고, Firebase Analytics 에 이벤트를 전송해주는 코드를 작성해줘야 한다.)
+ 이제 정상적으로 동작한다. Firebase Analytics 연동하기는 아래 글을 추가하였다.
https://acorncse.tistory.com/33
우선 Firebase 설정을 끝났으니, 프로젝트 파일에서는 다음과 같이 진행하였다.
1. React Native에서 Firebase 패키지 설치하기
npm install @react-native-firebase/app @react-native-firebase/remote-config
2. fetch와 activate 호출해 Remote Config 값 가져오고 앱에 반영하기
그 과정에서의 문제와 깨달음은 이러하다.
- Remote Config 호출 주기 제한
Firebase Remote Config는 기본적으로 설정 값을 1시간마다 갱신한다. 테스트 환경에서 값을 반복 호출하고 있었는데, 통계에 더이상 잡히지 않아 문제가 있다고 생각했는데, 중복으로 데이터를 쌓지 않기 위해서 1시간 단위로 맞춰놓은 것이다. - 에뮬레이터 환경의 한계
Firebase A/B 테스트는 디바이스별/앱 단위로 데이터를 집계한다. 그래서 개발 환경인 애뮬레이터에서 계정을 바꿔서 로그인해도 같은 컴포넌트를 할당 받는 것이다. - Firebase 버전 호환
Firebase 버전 16.5.0 을 사용하고 있었기에 20.0.0 대 버전에서 지원하는 함수와 호환되지 않는 부분이 존재하였다.
전체 코드
useEffect(() => {
const loadConfig = async () => {
try {
const remoteConfigInstance = remoteConfig();
const currentComponent = remoteConfigInstance
.getValue('write_component')
.asString();
if (currentComponent) {
setConfig({
componentToUse: currentComponent,
});
} else {
await remoteConfigInstance.fetchAndActivate(); // 값을 가져온 후 activate()를 호출해 설정 값 즉시 반영
const newComponent = remoteConfigInstance
.getValue('write_component')
.asString();
setConfig({
componentToUse: newComponent,
});
}
} catch (error) {
console.log('Remote Config error:', error);
}
};
loadConfig();
}, []);
추후 작업
custom_click 활성화 이벤트 : Firebase Analytics 연동하기
깨달음
firebase의 새로운 기능에 대해 많은 걸 깨달았고, 다음에는 이걸 한 번에 적용할 수 있을 거라는 자신감이 생겼다.
참고 자료
'Development Tools > Firebase' 카테고리의 다른 글
| Firebase Analytics 연동: A/B 테스트 커스텀 이벤트 통계 (0) | 2024.12.06 |
|---|