데이터로 매력적인 랜딩 페이지 만들기 (Using Google analytics A/B Test)

지난 8월과 10월 지인들의 요청으로 mash-up 이라는 이름의 IT 개발 동아리 소개 페이지와 let us go 라는 iOS 컨퍼런스 소개 페이지를 만든 적이 있었습니다. 이는 실제 개발하는데 2일이 채 걸리지 않는 가벼운 프로젝트였었습니다.

하지만.

개발 외에 UX를 고려하거나 기획을 정하는 과정에서는 동아리(컨퍼런스)에 대해 알게 하고 모집하게 한다는 명확한 목적이 있었음에도 꽤 많은 의견 충돌이 있었습니다.

예를 들면

• 연사자와 타임라인 중 어떤 것을 상단 배치해야 사람들이 더 관심을 가지고 페이지를 끝까지 볼까?
• “모집하기”버튼을 어디에 배치해야 사람들이 더 참여를 많이할까?

와 같습니다.

다양한 의견 속에서 대부분의 사람들은 “직감”으로 의사 결정을 하거나 그럴싸한 사유가 있는 의견을 선택하게 됩니다. 이러한 의사 결정은 기대한 것과 다른 결과를 가져올 수 있습니다. 이런 과정에서 어떤 팀원 누군가는 찝찝함을 가져갈 수도 있고 의사결정을 하는데 필요 이상의 시간을 소요하게 되기도 하고요.

그래서 저희는 의사결정을 내릴 때 추측이나 가정에 의존하는 대신, “A/B 테스트”를 통해 진행하기로 하였습니다. (A/B 테스트(experiments, 실험)가 무엇인지 궁금하다면 ?)

😇 A/B 테스트 어떻게 하지???? (그거 어려운거 아냐?)

팀원들에게 A/B 테스트 제안을 하고 팀원들을 설득하고 난 뒤 제가 해야 했던 것은 어떻게 해야 쉽게 A/B 테스트를 할 수 있지? , 무료로 할 수 있는 방법은 없나? 이었고,

그러던 중 Google Anlaytics 와 Google Optimize 를 이용해서 저희가 원하는 A/B 테스팅을 쉽게 할 수 있다는 것을 알게 되었습니다.

Google Anlaytics는 웹 페이지에 대한 정보를 수집 분석하는 툴이며, Google Optimize는 A/B 테스트에 필요한 ‘표본 그룹 나누기’, ‘표본 크기 설정’, ‘데이터 분석 및 결과 안내’, ‘테스트 설정’의 기능들을 제공합니다.

실제로 Google Optimize를 사용 시 꼭 개발자가 아니어도 아래와 같이 실험을 설정하고 진행할 수 있습니다.

위와 같이 실험을 진행하는 것에 있어서 개발자가 해주어야 할 것은 Google Optimize 토큰을 넣어주는 것 뿐입니다.

GA와 Optimize 덕분에 A/B Test(실험) 개발에 대한 고민은 내려두고, 서비스 기획에만 집중할 수 있었습니다.

목표를 정하고 지표 만들기. (Using GA custom event)

기획을 하면서 정말 다양한 의견들이 나왔습니다. 그중에는 의사결정이 불필요해 보이는 것들도 있었고 이를 다듬을 필요가 있었습니다. 저희의 목적을 뚜렷하게 하고 난 후, 세세한 가설들을 세워 나갔습니다. 또한 우리가 그 목적을 달성했는지를 판단하기 위한 지표들을 설정했습니다.

여기서 Google Anlaytics를 활용하였는데, GA를 추가하기만 해도 페이지 점유 시간, 페이지 행동 등을 알 수 있지만, 이로 모든 지표를 보기에는 부족함이 있었습니다.

예를 들면 우리가 원하는 것은 사람들이 내용을 모두 끝까지 봤나? 이지 얼마나 오래 머물렀나? 가 아니다 보니 기본으로 제공하는 세션 시간으로는 위의 내용을 파악하기 힘들었습니다. 오래 머물렀다면 끝까지 봤을 가능성은 있겠지만 접속 후 잠시 자리를 비웠을 수도 있으니까요.

그렇기에 저희는 GA custom event를 사용하여 각 Section이 노출될 때 이벤트를 발송하게 하였습니다. (hero 노출 이벤트부터 => footer 이벤트까지 모두 균일하게 찍힌다면 끝까지 본 것일 테니?)

// GA event.js
const sendGAEvent = (category, action = '', label = '') => {
  trackCustomEvent({
    category,
    action,
    label,
  });
};

export default sendGAEvent;

export const GA_ACTION = {
  EXPOSE: '화면노출',
  CLICK: '클릭',
}

// 각 Section
export const SomeSection = () => (
	useEffect(() => {
    sendGAEvent('메인화면', GA_ACTION.EXPOSE);
  }, []);
)

위와 같은 코드를 통해 GAEvent를 보냈고 아래와 같은 결과를 받아 볼 수 있었습니다. (iOS 컨퍼런스 당일날 지표)

A/B 테스트(실험) 생성하기

테스트의 경우 Google Optimize를 통해 매우 쉽게 만들 수 있었습니다.

Optimize에서 제공하는 실험 방식은 크게 두 가지인데 하나는 url redirect 하는 것이고, 하나는 DOM을 직접 수정하는 것입니다.

URL Redirect는 사용자가 URL로 접속 시 google optimize가 알아서 유저를 나눠 우리가 지정한 URL로 redirect를 시켜주는 방식이며, DOM을 조작하는 방식은 google optimize가 페이지 랜딩 전 dom을 test에 맞게 바꾸는 방식이며 저희의 경우 DOM을 직접 수정하는 방식으로 진행하고, 아래와 같이 실험군과 대조군, 원하는 지표를 설정하였습니다. (적용 방법에 대한 자세한 설명은 Optimize 설명 참고)

여기서 실험군과 대조군을 설정할 때 주의해야 할 것이 두가지가 있습니다.

1. 항상 대조군(원본)을 둘 것

   여러개의 실험군이 있고 실험 군 중에 나은 것을 보고 싶다 하더라도, 항상 대조군(원본)은 존재해야합니다. 기존 대비 얼마나 차이가 있는지 확인하기 위해서 입니다.

2. 테스트할 변수는 하나만 선택하자.

   실험을 진행하다 보면 테스트하고 싶은 변수가 여러개가 존재할 것 입니다. 하지만 효과를 정확하게 측정하기 위해서는 하나의 ‘독립변수’로 분리시켜 측정 하여야 합니다. 여러 요소가 섞일 경우 정확히 어떤 요소가 퍼포번스에 영향이 갔는지 알기 어렵기 때문입니다.

결과 보기

테스트 결과를 보는 방법은 매우 간단합니다. 충분한 데이터가 모일 때 까지 기다리기만 하면 됩니다. 아래와 같이 지표로 알려줌과 동시에 어떤 대안을 선택하는 것이 좋은지 알려주기도 합니다.

여기서 주의해야 할 점은, 실험 중에 실험 내용을 수정하게 될 경우 기존에 진행하고 있던 실험의 신뢰도가 떨어질 수 있기 때문에 실험을 진행한 후 버그나 너무 눈에띄게 지표가 안좋아지는게 아니라면 중간에 끊는 일은 되도록이면 피해야 합니다.

마무리

다양한 의사 결정을 “뇌피셜”과 “추측”으로 하는 것이 아닌 고객의 반응을 토대로 결정하고 개선해 나가는 것에 대해서는 매우 매우 중요하고 좋은 행동이라 생각됩니다. 의견 협의를 위해 불필요한 감정 소모나 시간을 줄일 수 있었으며, 기획이 휘청휘청 거리는 과정에서 디자이너나 개발자의 공수 또한 매우 줄었습니다.

A/B 테스트를 진행한 것 외에 GA와 Optimize의 선택 또한 매우 좋았다고 생각됩니다.

GA에서 설정한 목표들이나 event를 바로 가져가 쓸 수 있는 점, 상황에 따라서는 Data Tracking에 크게 신경 쓰지 않아도 되는 점, 테스트에 대한 공수가 거의 없는 점과 최대 3개까지는 무료로 실험을 동시에 진행시킬 수 있는 점.

위의 장점을 보았을 때 사이드 프로젝트에서 쓰기에는 너무 좋았습니다.

다만, 실험 진행 중에 사소한 수정도 허용되지 않는 점(코드상 변경이 있더라도 반영이 되지 않는다.)과 async 방식의 실험만 진행 가능하고 이로 인해 TTI에 대한 손실이 있을 수 밖에 없는 점은 실제 실무에서 적용하기에는 무리가 있을 것 같다는 생각이 들었습니다.