Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: add document about abtest basic #57

Merged
merged 1 commit into from
Aug 20, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
57 changes: 57 additions & 0 deletions docs/handbook/ab-test.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
---
sidebar_position: 2
---

# A/B 테스트란 무엇일까

A/B 테스트란 동일한 웹 페이지에 대해 둘 이상의 대안(A와 B) 중 어떤 것이 더 효과적인지 측정하는 무작위 실험입니다. 웹사이트 또는 앱 방문자들을 랜덤한 그룹으로 나누어 동시에 한 그룹에게는 A, 다른 그룹에게는 B를 보여주고 어떤 것이 더 효과적이었는지 측정합니다. 측정항목은 웹사이트마다 다릅니다. 예를 들어 이커머스 사이트의 경우 상품의 판매를 측정할 수 있고 콘텐츠 퍼블리싱 사이트의 경우 방문자가 콘텐츠를 얼마나 읽었는지 측정할 수 있습니다. 참고로 여기서 A는 원래 버전 의미하고 B는 새로운 버전을 의미합니다.

## A/B 테스트가 왜 필요할까

A/B 테스트는 왜 필요할까요? 이커머스 웹사이트를 예시로 들겠습니다. 이 경우 우리는 방문자들이 장바구니에 상품을 담고 결제까지 마치기를 원합니다. 하지만 많은 사람들이 방문하지만 구매 전환율은 아주 낮다면 왜 그런걸까요? 장바구니에 상품을 담기까지 했는데 결제까지 이어지지 않는다면 무엇이 문제일까요? A/B 테스트를 통해서 이런 문제를 개선할 수 있습니다.

1. 방문자의 어려움 해결 및 그에 따른 이탈률 감소

방문자들은 특정한 목적을 가지고 웹사이트 또는 앱에 방문합니다. 특정 제품을 구매하기 위해서일 수도 있고 어떤 주제에 대해 읽기 위해서일 수도 있습니다. 하지만 이런 목적을 달성하는 데에 방해요소가 있다면 방문자들은 사이트 또는 앱을 중간에 종료할 것입니다. 예를 들어 이커머스 사이트의 경우 제품 검색 결과 보여지는 UI가 너무 복잡하여 원하는 제품을 찾기가 어려울 수도 있고, 결제 페이지까지 가는 단계가 너무 많아서 도중에 물건을 구매할 마음이 사라져서 일 수도 있습니다.

구글 애널리틱스와 같은 방문자 행동 분석 도구를 통해 어디에서 많은 방문자 이탈이 일어나는지를 분석한 다음, 해당 페이지에서 A/B 테스트를 해보며 이탈율을 줄여 나갈 수 있습니다. 이는 방문자들의 전반적인 UX를 개선하여 사이트에서 더 많은 시간을 보내게 하고, 구매 전환과 같은 행동으로 이어질 확률도 높아집니다.

2. 추측이 아닌 데이터 기반 의사결정

A/B 테스트는 추측이 아닌 데이터에 의한 의사결정을 내리도록 돕습니다. 페이지에서 보낸 시간, 클릭률, 재방문율, 구매 전환율 등 통계적으로 유의미한 데이터를 가지고 어떤 것이 더 나은 버전인지를 결정할 수 있습니다.

3. 안전하게 더 나은 ROI(\*) 얻기

웹사이트를 통째로 개편하는 것은 그만큼 위험이 따릅니다. 개편하는 데에도 많은 리소스가 드는데 개편 후에 방문자들이 개편된 사이트를 더 좋아할지 확실하게 알 수 없습니다.

A/B 테스트는 이런 위험을 감수하지 않고 더 나은 ROI를 얻게 해줍니다. A/B 테스트를 통해 조금씩 조금씩 페이지를 변경해나가는 방법은 최소한의 수정으로 최대한의 효과를 산출하게 할 수 있습니다.

## A/B 테스트 프로세스

실제 A/B 테스트의 설계와 구현은 훨씬 복잡할 수 있지만 여기서는 간단한 흐름만 소개하도록 하겠습니다. 예를 들어 각종 뉴스들을 모아서 보여주는 뉴스 어플이 있다고 가정하겠습니다. 이 어플에 들어가면 뉴스들이 리스트 형태로 나열되고, 현재는 페이지네이션을 통해 더 많은 뉴스를 볼 수 있는 상태라고 가정해봅시다. 그런데 혹시 페이지네이션 방법이 아니라 스크롤이 어느 부분에 오면 다음 뉴스를 자동으로 불러오게 하는 무한 스크롤을 구현하면 유저들이 더 많은 뉴스를 읽을까요? 이를 검증하기 위해 A/B 테스트를 해보려고 합니다.

| ![infinite-scroll-vs-pagination](https://www.knowband.com/blog/wp-content/uploads/2019/05/infinite-scroll-and-pagination.jpg) |
| :---------------------------------------------------------------------------------------------------------------------------: |
| _이미지 출처 - <https://www.knowband.com/blog/ecommerce-blog/pagination-vs-infinite-scrolling/>_ |

1. 가설 설정

우선 검증하고자 하는 가설을 세워야 합니다. 제가 세운 가설은 **페이지네이션보다 무한 스크롤을 사용했을 때 방문자들이 이 어플에서 더 많은 시간을 보낼 것이다**라는 가설입니다.

2. 메트릭 설정

메트릭은 위에서 세운 가설이 참인지 거짓인지를 판단하기 위해 측정해야 하는 항목을 의미합니다. 이 가설이 맞는지 검증하려면 **방문자들이 해당 어플에서 머문 시간**을 측정해야 합니다.

3. 실험 설계

가설이 맞는지를 올바르게 검증하려면 검증하려는 가설 외의 다른 환경은 모두 동일해야 합니다. 예를 들어 뉴스의 노출 순서가 달라진다든지, 뉴스 헤드라인의 폰트 크기가 바뀐다든지 등의 추가 변경사항이 없어야 합니다. 새로운 버전에서의 달라진 점은 페이지네이션 대신 무한 스크롤이 적용됐다는 점 뿐이어야 합니다.

4. 결과 도출

실험 결과를 통해 측정된 메트릭 간 차이가 통계적으로 유의미한지 확인하여 더 나은 버전이 무엇인지 결정합니다.

## 마무리

A/B 테스트의 개념, 이점, 프로세스에 대해 간단하게 설명해보았습니다. A/B 테스트에는 여러가지 솔루션이 있지만 만약 구글 애널리틱스를 사용하고 있다면 [구글 옵티마이즈](https://optimize.google.com/)를 사용해서 간단한 [A/B 테스트](https://support.google.com/optimize/answer/6211930#zippy=%2C%EC%9D%B4-%EB%8F%84%EC%9B%80%EB%A7%90%EC%97%90-%EB%82%98%EC%99%80-%EC%9E%88%EB%8A%94-%EB%82%B4%EC%9A%A9%EC%9D%80-%EB%8B%A4%EC%9D%8C%EA%B3%BC-%EA%B0%99%EC%8A%B5%EB%8B%88%EB%8B%A4)를 수행할 수도 있습니다. 다만 현재는 UA만 지원하고 GA4는 지원하고 있지 않으니 참고하시기 바랍니다. A/B 테스트의 개념을 이해하는 데 도움이 되었기를 바라며 글을 마치겠습니다.

(\*) ROI: 비용 대비 수익 비율. ROI가 높다는 것은 투자비용 대비 좋은 성과를 냈다는 의미입니다.
2 changes: 1 addition & 1 deletion docs/handbook/tutorial-basics/_category_.json
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
{
"label": "Tutorial - Basics",
"position": 2
"position": 3
}
2 changes: 1 addition & 1 deletion docs/handbook/tutorial-extras/_category_.json
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
{
"label": "Tutorial - Extras",
"position": 3
"position": 4
}