뉴욕타임즈와 여기어때는 어떻게 A/B 테스트를 했을까?

코드스테이츠 PMB 16기 W5D3

해외와 국내 사례를 각각 하나씩을 살펴보는 만큼, 글이 두 개로 분리되어 있습니다.

The New York Times

로고가 참 기깔나는 New York Times(이하 NYT)는 미국의 신문사다. 1851년 창간된 유구한 역사를 가진 신문사이지만 아직도 세계적인 위상을 가지고 있다. 그리고 그 비결에는 '디지털 퍼스트'가 있다. 1990년대부터 일찍이 디지털 서비스를 시작했고 여러 시행착오 끝에 성공적인 비즈니스 모델을 구축했다. 이제는 구독자 수가 600만 명을 넘겨 종이 신문보다 온라인 구독으로 더 큰 매출을 내고 있다. 이렇게 온라인 비즈니스를 성공적으로 해낼 수 있었던 것에는 역시 data-driven의 역할이 있었다.

NYT Open

NYT는 NYT Open이라는 페이지에서 본인들의 프로덕트를 어떻게 디자인하고 빌드했는지 상세한 아티클로써 설명하고 있다. 거기서도 Data라는 탭에서 그들이 얼마나 Data-driven한 기업인지 열심히 설명하고 있다.

이렇게 데이터를 잘 활용하고 있는 NYT인 만큼 당연히 A/B 테스트도 진행 중일 것이다. 공식적으로 NYT에서 '우리는 이런 A/B 테스트를 한다'라고 구체적으로 밝힌 기사가 있다. 이에 관해 간단히 정리된 글과 더불어 웹 스크래퍼를 통해 그들의 A/B 테스트에 대해 실험을 한 아티클도 있어서 충분한 참고가 될 것 같았다. 밑에서 정리하여 설명할 것이지만 자세한 내용이 궁금하다면 아래 링크들을 참조하길 바란다.

Which Headlines Attract Most Readers? (Published 2016)

Changing the headline to be more conversational | AB Test Cases

How the New York Times A/B tests their headlines

 

정리하자면, NYT는 더 많은 사람들이 기사를 읽게 하기 위해 헤드라인을 여러 번 바꾸고 있다는 것이다. 원문에 따르면 테스팅 툴을 이용해서 실시간으로 들어오는 유저들을 반으로 갈라 다른 제목의 같은 기사를 보여준다고 한다. 모든 기사에 대해서 하는 것은 아니고, 예상보다 조회수가 나오지 않는 소수의 기사들에 대해 테스트를 했으며, 세번째 아티클에 따르면 최대 8회까지 제목을 바꾼 적이 있다고 한다.

문제정의 : 클릭 수가 예상보다 저조하다.

그들이 가장 신경 써야할 것은 '클릭 수'이다. 어떻게 하면 더 많은 사람들이 헤드라인을 클릭할 수 있을까? 한국에서는 이를 위해 하는 수법들을 흔히 접할 수 있다. '충격', '경악', '아찔', 뭐 이런 단어들을 여기저기 넣어주면 된다. 하지만 NYT는 그들 나름대로의 규칙이 있는데, 헤드라인을 보고 들어온 독자들이 글을 읽고 실망해서는 안 된다는 것이다. '과한 어그로는 끌지 말자' 정도로 해석할 수 있겠다. 어그로를 끌지 않는 선에서 가장 흥미로운 제목을 지어야 하는 것인데, 아래의 사례를 보면 어떤 식인지 감이 올 것이다.

좌 : as-is / 우 : to-be

직관적으로는 제목이 짧을수록 사람들이 정보를 빠르게 받아들여 클릭을 할 것 같은데, 위의 테스트는 그렇지 않다는 것을 볼 수 있다. 트럼프가 레슬링장에서 찍은 사진을 두고 '모든 것은 전부 레슬링인가?'라는 제목을 처음에 썼었는데, 이게 조회수가 잘 나오지 않아서 조금 더 구어체로 바꾸고 'Fake'라는 강력한 단어를 써서 제목을 바꿨더니 클릭 수가 10배나 상승했다는 케이스이다.

그러면 이렇게 바꾸는 주기는 얼마나 길까? 웹 스크래핑 결과를 보면, 아니다 싶은 기사들은 거의 실시간에 가까울 정도로 제목이 자주 바뀐다. 그리고 그 결과가 때로는 다이나믹하다. 처음엔 저조한 클릭 수를 기록한 기사의 제목을 6시간 동안 5번을 바꾼 끝에 인기 차트에 올라가기도 하는 등 제목이 굉장히 중요한 요소라는 것을 알 수 있다.

위의 숫자가 매겨진 문장들이 바뀌었던 제목이다

이렇게 여러 기사를 통해 실험하면서 그들이 얻은 결론은 무엇이었을까? 읽은 자료를 통해 추측컨대 그들이 처음부터 어떤 가설을 설정해두고 테스트를 진행한 것 같진 않고, 실험을 진행하면서 효과가 있는 방법을 가설로 세우고 몇 번의 추가 검증을 했을 것으로 보인다. 어찌 됐든 그들이 설정한 가설을 다음과 같다.

가설 : 헤드라인을 좀 더 회화체(conversational)로 바꾸면 클릭 수가 증가할 것이다.

그리고 위의 'fake' 기사 같은 사례를 통해 이 가설을 입증했다. 명확하고, 힘있는 단어들로 살아있는 문장을 쓰면 더 많은 사람들이 글을 읽게 할 수 있다는 것이다. 그런 면에서 내 블로그의 제목은 0점에 가깝다.😂 센스 있게 제목을 잘 짓는 동기분들이나 선배들의 글을 보면 참 대단하고 생각이 든다.

— 정리 —
문제정의 : 클릭 수가 예상보다 저조하다.
가설 : 헤드라인을 좀 더 회화체로 바꾸면 클릭 수가 증가할 것이다.
기간 : 거의 실시간으로 바꿈
타겟 : 모든 방문자
테스트 형식 : 헤드라인 변경

 

내가 PM이라면?

가설 : 홈페이지의 메인 기사 헤드라인에 동영상이 있다면 클릭 수가 증가할 것이다.

NYT의 홈페이지에 처음 들어가보고 가장 인상 깊었던 점은 신문사치고는 굉장히 이미지 중심의 홈페이지를 구성해놓았다는 것이다. CNN이나 영국 신문사 The Times와 비교해봤을 때 한번에 보여지는 기사의 수가 적고 레이아웃의 중앙에 시각자료를 배치해놓음으로써 시원시원한 느낌을 주고 있다.

거기에 추가로 느꼈던 점은 가장 상위 기사인 비행기 사진 기사보다 그 밑에 홍수가 난 영상이 더 눈길을 끌었다는 것이었다. 물론 자연재해는 언제나 자극적인 소재이지만, 우측에 맥북이 있는 GIF 역시 눈길을 끄는 것을 보면 확실히 영상이 더 클릭 수가 높을 것 같았다. 이 글을 쓰는 지금도 나는 헤드라인을 읽지 않았다.(😂)

따라서 내가 PM이라면, 같은 기사를 놓고 하나는 짤막한 동영상이나 GIF를 게시하고 다른 하나는 그 중 가장 임팩트 있는 장면 하나만 캡쳐해 사진으로 게시할 것이다. 변수가 굉장히 통제되어 있기 때문에 10회 정도의 실험으로도 유의미한 결과값을 얻어낼 수 있을 것이라고 생각한다. 또한 헤드라인 기사일수록 시각자료가 크게 디스플레이되기 때문에 더욱 유의미한 실험이 될 것이다.

 

 

---

민니가 노래를 참 잘하더라.. (클릭 시 노래)

여기어때

사실 나는 과제를 하면서 여기어때를 고려해본 적이 별로 없었다. 앱의 첫 화면이 한국 서비스 특유의 많은 정보를 어떻게든 다 집어넣으려는 느낌이라 그랬던 것 같다. 에어비앤비 같은 경우 처음부터 추천 숙소를 크게 보여주고 검색을 유도하는 것과 다르게 여기어때는 굉장히 많은 카테고리를 격자식으로 진열해놓았다. (온갖 혜택과 이벤트를 넣어놓은 야놀자보다는 낫다.)

그런데 내가 여기어때를 주제로 고르게 된 이유는 굉장히 좋은 아티클을 읽게 돼서이다. 사실 이 글 하나로 과제가 끝날 정도로 진행했던 A/B 테스트에 관해 깔끔하면서도 자세하고 기록되어 있다.

A/B 테스트를 실패해도 괜찮은 이유

그래도 조금 더 축약해서 정리하자면, 우선 그들은 올해의 목표였던 '사용자가 숙소 예약을 좀 더 일찍 하도록 유도하기'를 위해 실험을 설계하다가 한 가지 문제점을 발견하게 된다. '사용자는 특가 기간을 인지하지 못하기 때문에 숙소를 더 일찍 예약하지 않는다'는 것이었다. 이 문제를 해결하기 위해 그들은 A/B 테스트 실험을 하게 된다.

문제정의 : 숙소 상세 페이지에서 사용자는 미리예약 특가 정보를 확인하기 어렵다.
가설 : 사용자는 여행 일정을 설정하는 캘린더 UI 근처에 미리 예약 날짜의 특가 정보를 본다면, 유연한 일정 계획을 가지고 있는 사용자는 미리예약특가 기간 중 하나의 기간으로 날짜를 변경해 예약할 것이다.

가설을 보며 감탄한 점은 가정과 결과를 굉장히 디테일하게 정의했다는 것이었다. 그냥 '사용자'가 아니라 '유연한 일정 계획을 가지고 있는 사용자'라고 지정한 부분에서 '역시 현업이다'라는 생각이 들었다. 그래도 쉽게 축약하자면, '미리 예약 특가 정보를 잘 보이게 하자' 정도의 말이겠다.

출처 : 여기어때 UX Center 미디엄 블로그 (상단에 링크)

여러 고민 끝에 변경한 UI는 굉장히 합리적으로 보인다. 이전에는 미리 예약에 관한 정보를 인지할 수 없었고, 나 역시 그런 게 있는 줄 몰랐었다. 반면 새로운 UI는 관련 정보를 쉽게 확인할 수 있을 뿐더러 특가 기간을 설정했는지 아닌지에 따라 맞춰서 안내하기까지 한다. 나의 견해로는 '당연히' 더 좋을 것이라고 생각되는데 PM이라면 주관을 버리고 데이터로 증명해야 하는 것이 당연할 것이다.

2주 동안 as-is와 to-be를 나눠 보여주는 A/B 테스트를 진행한 결과 예약 전환율과 총매출액 상승에 큰 기여를 했다고 한다. 반면, 실험의 원래 목적이었던 '예약 날짜 앞당기기'는 저조한 성과를 거두는 아이러니한 결과를 얻었다. 이외에도 테스트를 하며 '이랬다면 더 좋았을 걸' 하는 것들이 원문에 적혀있는데, 좋은 글이니 안 읽어봤다면 한번씩 읽어보면 좋을 것 같다.

— 정리 —
문제정의 : 숙소 상세 페이지에서 사용자는 미리예약 특가 정보를 확인하기 어렵다.
가설 : 사용자는 여행 일정을 설정하는 캘린더 UI 근처에 미리 예약 날짜의 특가 정보를 본다면, 유연한 일정 계획을 가지고 있는 사용자는 미리예약특가 기간 중 하나의 기간으로 날짜를 변경해 예약할 것이다.
기간 : 2주
타겟 : 예약 상세 페이지 방문자
테스트 형식 : UI 변경

 

내가 PM이라면?

사용자에게 불편한 점이면서 동시에 기업에게도 비효율적인 무언가를 찾기 위해 눈에 불을 켜고 이리저리 돌아다니다 보니 '이건 뭐지?' 싶은 것이 있었다. 바로 숙소들을 둘러보는 페이지에 '필터' 옆에 선착순 할인 등 적혀 있는 글씨였다. 앱을 사용하며 몇 번 본 적은 있는데 한번도 눌러본 적은 없어서 눌러봤다. 나는 탭 메뉴를 예상했는데 눌러보니 필터였다..! 저 글씨들이 애초에 눈에 잘 안 띄고 필터라고는 생각되지 않아서 사용할 생각을 해본 적이 없었던 것이었다. 심지어 옆에 필터 버튼이 따로 있다. (그리고 둘이 다르게 생겼다.)

좌 : as-is / 우 : to-be

따라서 나의 가설은

가설 : 숙소 둘러보기 페이지 상단의 필터 버튼을 to-be와 같이 바꾸면 필터 버튼의 사용 횟수가 늘어날 것이다.

이것이 얼마나 중요한 버튼이든, 일단 귀중한 화면 한 구석을 차지하고 있다면 어떻게든 많이 쓸 수 있게 만드는 것이 도리라고 생각한다. 따라서 조금 더 '누르고 싶게' UI를 변경한다면 사용자들이 쉽게 필터링을 할 수 있을 것이고, 검색에 소요되는 총 시간도 줄어들 것이라고 생각한다.