안녕하세요! 라프텔 프로덕트 디자이너 매미입니다.🫡 오늘은 멤버십 구매 유도 A/B 테스트 과정과 이를 통해 배운 점을 공유해보려고 합니다.<h1 id="22b9463d984d80bf8799ff43fb98b01c">배경</h1>라프텔은 기본적으로 멤버십 정기 결제를 통해 대부분의 작품을 자유롭게 감상할 수 있는 SVOD 서비스지만, 에피소드를 개별로도 소장 또는 대여할 수 있는 TVOD 서비스도 함께 제공하고 있습니다.어느 날 그로스 마케팅팀에서 인기 작품인 &lt;귀멸의 칼날: 도공마을 편&gt;을 시청한 사용자를 분석해 보았는데요. 멤버십 작품임에도 생각보다 많은 사용자들이 개별 구매를 통해 해당 작품을 본 것을 알 수 있었습니다. 이에 사용자들이 왜 이런 행동을 보였는지 의문이 생겼고 좀 더 깊이 들여다보게 되었습니다.<h2 id="22b9463d984d8041bf81f060e025e626">문제점</h2>&lt;귀멸의 칼날: 도공마을 편&gt;을 시청한 사용자 대상으로 설문조사를 진행한 결과, 의외의 답변이 있었습니다. 해당 작품을 멤버십으로 시청할 수 있는지 몰랐다는 내용이었습니다. 이러한 문제가 현재 UX 흐름과 어떤 관련이 있는지 확인해 보기 위해, 연관이 있는 건 아닐까 싶어 플레이어 화면을 다시 살펴보았습니다.<figure data-type="image-block" data-src="https://attachments.datarian.io/production-22d9463d-984d-8025-ad19-d407c2172c92-kAO42agYggEpD-cTD0ZH2K1QLaeCFBITsotw1hMiClw.webp" data-align="center" data-width="100%" data-show-caption="true" style="width: 100%; max-width: 100%"><img src="https://attachments.datarian.io/production-22d9463d-984d-8025-ad19-d407c2172c92-kAO42agYggEpD-cTD0ZH2K1QLaeCFBITsotw1hMiClw.webp" /><figcaption>사용자의 시청 플로우</figcaption></figure>사용자는 보통 작품을 탐색한 뒤, 상세 화면에서 원하는 에피소드를 선택해 플레이어 화면으로 이동해 시청을 시작합니다.<figure data-type="image-block" data-src="https://attachments.datarian.io/production-22d9463d-984d-8028-986a-ecb734041a30-dJADpT_aoF79ylWngWx7XUNv1sK2iR5evy3sklA9VhU.webp" data-align="center" data-width="100%" data-show-caption="true" style="width: 100%; max-width: 100%"><img src="https://attachments.datarian.io/production-22d9463d-984d-8028-986a-ecb734041a30-dJADpT_aoF79ylWngWx7XUNv1sK2iR5evy3sklA9VhU.webp" /><figcaption>플레이어 내 구매 바텀시트</figcaption></figure>아직 멤버십을 구매하지 않은 사용자에게는, 아래 이미지와 같이 플레이어 화면에 ‘구매하기’ 버튼이 보입니다. 이 버튼을 누르면 바텀시트가 등장하고 시청 구매 옵션이 보이는데요, 보통 상단에 개별 구매(대여 또는 소장) 버튼이 있고 하단에 후킹 문구와 함께 ‘멤버십 시작’ 버튼이 노출됩니다.UX 관점에서 주요 문제라 생각된 것은 에피소드와 ‘멤버십 시작’ 버튼 간의 연관성 부족이었습니다.개별 구매 버튼은 에피소드 회차 및 제목 정보 바로 아래에 있어 사용자가 해당 에피소드와 관련이 있다고 인식하기 쉽고, 자연스럽게 이 버튼을 통해 구매로 이어질 수 있겠다! 라는 생각이 들었습니다.반면, ‘멤버십 시작’ 버튼은 회차 및 제목 정보에서 다소 떨어진 위치에 있어 에피소드와의 연관성이 약하게 느껴졌습니다. 또한, 후킹 문구와 버튼 레이블이 해당 에피소드와 무관한 광고 요소로 인식되어 멤버십을 통한 시청 흐름으로 이어지지 않을 수 있을 것 같았습니다.추가로 비즈니스적 관점에서 SVOD를 주력으로 밀고 있기 때문에 사용자가 좀 더 멤버십으로 구매해서 볼 수 있도록 전반적으로 UX를 개선하는 시도도 필요해 보였습니다.<h1 id="22b9463d984d80ae92c9c16a170abc5c">목표 및 가설</h1><h2 id="22b9463d984d8077829ae404b024bded">목표</h2>사용자가 콘텐츠를 시청하는 과정에서 멤버십 상품을 명확히 인지하고 해당 옵션을 선택할 수 있도록 구매 흐름 내 UX를 개선한다.<h2 id="22b9463d984d808c8f33f6d6513d029a">가설</h2><ol><li>플레이어 내 구매 바텀시트에서 에피소드 정보와 멤버십 버튼 간의 연관성을 강화하면, 사용자가 멤버십을 더 잘 인지하고, 개별 구매 대신 멤버십을 선택할 가능성이 높아질 것이다.</li><li>플레이어 내 구매 바텀시트에서 멤버십 버튼의 시각적 강조와 개별 구매 옵션의 비중 축소를 통해, 사용자가 더 직관적으로 멤버십을 선택하게 될 가능성이 높아질 것이다.</li></ol><h2 id="22b9463d984d80d090f5f31b01b1d62f">시안</h2><figure data-type="image-block" data-src="https://attachments.datarian.io/production-22d9463d-984d-80d1-b00f-ef12c1ffa87e-AsNmvVkr2Xabib5VN6TMIsPC36033wYxeMDMBwhgWBE.webp" data-align="center" data-width="100%" data-show-caption="true" style="width: 100%; max-width: 100%"><img src="https://attachments.datarian.io/production-22d9463d-984d-80d1-b00f-ef12c1ffa87e-AsNmvVkr2Xabib5VN6TMIsPC36033wYxeMDMBwhgWBE.webp" /><figcaption>모바일 앱 시안</figcaption></figure><figure data-type="image-block" data-src="https://attachments.datarian.io/production-22d9463d-984d-80c8-9f7e-ebd42d67b027-hBEvrbY8KFRBxjAjlW-WdvS0EDKegVBagTQAVXrwvhE.webp" data-align="center" data-width="100%" data-show-caption="true" style="width: 100%; max-width: 100%"><img src="https://attachments.datarian.io/production-22d9463d-984d-80c8-9f7e-ebd42d67b027-hBEvrbY8KFRBxjAjlW-WdvS0EDKegVBagTQAVXrwvhE.webp" /><figcaption>웹 시안</figcaption></figure>여러 후보 중 최종 선택된 시안은 개발 리소스를 크게 들이지 않는 선에서 아래의 3가지를 변경하였습니다.<ol><li>멤버십 버튼 위치 변경<ul><li>멤버십 버튼을 에피소드 회차 및 제목 정보 아래로 옮겨 사용자가 좀 더 해당 에피소드와 연관 지어 생각할 수 있도록 수정했습니다.</li></ul></li><li>버튼 레이블의 UX Writing 수<ul><li>‘멤버십 시작’이라는 버튼 레이블을 ‘멤버십으로 보기’로 수정하여 해당 에피소드를 멤버십으로 볼 수 있다는 점을 직관적으로 표현했습니다.</li><li>추가로 멤버십 구매로 시청하는 것이 개별 구매로 보는 것보다 가격적 메리트가 있다는 것을 유추하고 인지할 수 있도록 ‘월 9,900원’을 앞에 추가하여 ‘월 9,900원 멤버십으로 보기’로 레이블을 최종 수정했습니다.</li></ul></li><li>개별 구매 중요도 낮추고 구매 선택지 줄이기<ul><li>기존에는 개별 구매 버튼을 누르면 결제 바텀시트가 즉시 노출되어 바로 구매가 가능했지만, 멤버십을 주력으로 미는 것이 확실한 상황인 만큼 중요도와 접근성을 낮춰도 된다고 판단했습니다.</li><li>이에 따라, 최대 두 개로 노출되던 개별 구매 버튼을 ‘하나씩 에피소드 구매’라는 하나의 버튼으로 합치고, 구매까지 한 뎁스 더 거치도록 변경하여 선택지를 단순화하고 멤버십 선택을 유도하고자 했습니다.</li></ul></li></ol><h2 id="22b9463d984d801b943adbb01a9d4bdd">봐야할 지표</h2>AS-IS 화면과 TO-BE 화면의 멤버십 버튼 클릭률을 주요 비교 지표로 삼았습니다.다만, AS-IS 화면에는 로그가 심어져 있지 않아 기존 데이터가 없는 상태이므로, 먼저 로그를 추가한 뒤 약 2~3주 정도 데이터를 수집하고 TO-BE 화면과 비교하기로 했습니다.또한, TO-BE 화면에서 멤버십 및 개별 구매 버튼의 클릭률이 기존보다 더 낮아지는 최악의 경우에는 이전으로 모두 원상복구 하기로 합의했습니다.<h1 id="22b9463d984d80d9a77ac0192411410a">결과</h1><figure data-type="image-block" data-src="https://attachments.datarian.io/production-22b9463d-984d-80b8-a193-f38c9df417d1-cv0xuND_BY6T8tDeDu4DIMwgWdYJ2WHAC3KmP-o3g5A.webp" data-alt="Web 멤버십 버튼 클릭율 비교" data-align="center" data-width="624" data-show-caption="true" style="width: 624px; max-width: 100%"><img src="https://attachments.datarian.io/production-22b9463d-984d-80b8-a193-f38c9df417d1-cv0xuND_BY6T8tDeDu4DIMwgWdYJ2WHAC3KmP-o3g5A.webp" alt="Web 멤버십 버튼 클릭율 비교" width="624" /><figcaption>Web 멤버십 버튼 클릭율 비교</figcaption></figure>(한 가지 매우 아쉬운 점은 배포 후에 앱 로그가 누락되는 문제가 발생하여, 결과 분석은 웹 데이터만을 바탕으로 진행했습니다.)위 그래프에서 볼 수 있듯, 멤버십 전환율은 배포 전후로 큰 변화 없이 비슷한 수준을 유지했습니다. 이는 멤버십 구매 의사가 명확한 사용자들은 UI 변화와 관계없이 구매를 진행한다고 해석할 수 있을 것 같습니다.제일 흥미로웠던 점은 배포를 기점으로 멤버십 버튼 클릭률이 기존 30~40%에서 20%대로 하락한 점이었습니다. 물론 보다 정확한 비교를 위해서는 동일 기간 내 A/B테스트가 이상적이지만, 현재 데이터만 보더라도 클릭률 저하가 분명하게 나타났다고 볼 수 있습니다.<figure data-type="image-block" data-src="https://attachments.datarian.io/production-22b9463d-984d-808d-9ca0-dd757df971cf-xc_imUG0BPXwKULocMH_zeoCgJ2ewUTRRCKr2KwX_iI.webp" data-alt="비용 측면의 메리트를 알리기 위해 가격을 붙인 멤버십 버튼" data-align="center" data-width="528" data-show-caption="true" style="width: 528px; max-width: 100%"><img src="https://attachments.datarian.io/production-22b9463d-984d-808d-9ca0-dd757df971cf-xc_imUG0BPXwKULocMH_zeoCgJ2ewUTRRCKr2KwX_iI.webp" alt="비용 측면의 메리트를 알리기 위해 가격을 붙인 멤버십 버튼" width="528" /><figcaption>비용 측면의 메리트를 알리기 위해 가격을 붙인 멤버십 버튼</figcaption></figure>클릭률이 떨어진 원인은 버튼에 멤버십 가격(9,900원)을 직접적으로 노출한 것이 영향이 크지 않았을까 생각되었습니다. 가격 노출로 인해 사용자가 부담을 느끼고 멤버십을 바로 포기하게 하는 것보다는, 일단 멤버십 구매 화면까지 들어오게 하고 그 안에서 구매를 고민할 수 있는 여지를 주는 쪽이 더 나은 흐름이라 판단했습니다.이러한 방향성을 바탕으로 레이블을 수정하는 2차 개선을 빠르게 진행했습니다.<h2 id="22b9463d984d80fc93e0dc6fc33e4a57">추가 실험 시안</h2><figure data-type="image-block" data-src="https://attachments.datarian.io/production-22d9463d-984d-80bc-a3a3-ede1f088d69e-XhwkHwr2AcpoMoY-kf88_-ib_Cy7wSIBJE_-8UYuIC0.webp" data-align="center" data-width="100%" style="width: 100%; max-width: 100%"><img src="https://attachments.datarian.io/production-22d9463d-984d-80bc-a3a3-ede1f088d69e-XhwkHwr2AcpoMoY-kf88_-ib_Cy7wSIBJE_-8UYuIC0.webp" /></figure>추가 실험에서는 레이블을 ‘월 9,900원 멤버십으로 보기’에서 ‘멤버십으로 무제한 보기’로 수정하여 배포하였습니다.<h2 id="22b9463d984d803b9a99e59e147ed955">추가 실험 결과</h2><figure data-type="image-block" data-src="https://attachments.datarian.io/production-22d9463d-984d-8066-a3fe-c9f08a3fb3c3-5GO0bM8r1xkL24zev-G8tFfxoiJ9XlTbIAkhpXVT4eY.webp" data-align="center" data-width="624" data-show-caption="true" style="width: 624px; max-width: 100%"><img src="https://attachments.datarian.io/production-22d9463d-984d-8066-a3fe-c9f08a3fb3c3-5GO0bM8r1xkL24zev-G8tFfxoiJ9XlTbIAkhpXVT4eY.webp" width="624" /><figcaption>Web 멤버십 버튼 문구 수정 후 클릭율 비교</figcaption></figure>놀랍게도 레이블 변경 후, 멤버십 버튼의 클릭률이 최대 50%대까지 상승했습니다.이 결과를 통해 사용자들이 가격 정보에 부담을 느끼고 있었으며, ‘무제한’이라는 표현이 더 직관적이고 긍정적인 인식으로 이어지는 강력한 클릭 유도 요소라는 점을 확인할 수 있었습니다.<figure data-type="image-block" data-src="https://attachments.datarian.io/production-22d9463d-984d-8027-8f47-ebac1813e2fb-aD9EW1Y_gOekzY-BgDGjLu7IxOeb_xeHj_SqTHHXYng.webp" data-align="center" data-width="624" data-show-caption="true" style="width: 624px; max-width: 100%"><img src="https://attachments.datarian.io/production-22d9463d-984d-8027-8f47-ebac1813e2fb-aD9EW1Y_gOekzY-BgDGjLu7IxOeb_xeHj_SqTHHXYng.webp" width="624" /><figcaption>실험 전, 1차 실험, 2차 실험 전체 흐름 그래프</figcaption></figure>위 그래프는 실험 전과 1차, 2차 실험까지의 흐름을 한눈에 볼 수 있게 한 것인데요, 문구와 UI를 바꾼 것이 실험 전보다 확실히 더 효과적임을 알 수 있고, 이를 바탕으로 해당 시안을 모바일 앱까지 적용하면서 실험을 최종 마무리했습니다.실험은 종료되었지만, 멤버십 버튼을 클릭하고도 구매로 이어지지 않은 사용자들을 다시 한번 붙잡을만한 무언가의 후속 시도가 필요하다고 보았고, 이 부분은 추후 별도 실험으로 진행해 볼 예정입니다.<h1 id="22b9463d984d8001b219ceb7184312f5">배운 점</h1><h2 id="22b9463d984d807b96a9f7456274e8ee">1. 직관성을 해치지 않게 정보를 제공하자.</h2>사실 버튼에 가격을 노출하는 시안을 만들 때, ‘가격 때문에 오히려 이탈하지 않을까?’ 하는 우려가 이미 있었습니다. 그럼에도 사용자가 가격적인 이점을 자연스럽게 발견하고 멤버십을 선택할 것이라는 기대가 더 컸습니다.하지만 실험 결과, 그 기대는 너무 이상적인 상황의 가정이었습니다. ‘이 정도면 사용자도 충분히 알 수 있지 않을까?’ 하는 기대보다는, 직관적으로 이해할 수 있도록 사용자를 최대한 돕는 것이 훨씬 더 나은 방향이라는 것을 다시 한번 깨닫게 되었습니다.하지만 덕분에 버튼에 가격을 바로 노출하는 방식은 사용자의 선택에 방해가 될 수 있으며, 앞으로는 이를 지양하거나 매우 신중하게 사용해야 한다는 중요한 교훈을 얻을 수 있었습니다.<h2 id="22b9463d984d802f9daadc409c2b2b24">2. 정답은 없다! 종합적으로 판단하자.</h2>해당 실험을 진행하면서 계속 고민이 되는 포인트가 여러 가지 있었습니다.예를 들어,<ul><li>멤버십을 무조건 강조하는 것이 좋은 것일까?</li><li>결과적으로 개별 구매도 매출에 도움 되는 부분인데 중요도를 낮추는 게 맞을까?</li><li>개별 구매만 이용하는 사용자들의 사용성에 문제 되지 않을까?</li><li>A/B 테스트를 하는 게 좋지 않을까?</li></ul>결국에는 사용자, 비즈니스, 리소스, 최종 목표 등을 종합적으로 고려해 균형 잡힌 방향을 찾는 것이 중요하다고 느꼈습니다. 정답이 하나로 떨어지지 않는 만큼, 상황에 맞는 최선의 선택을 하는 것이 현실적인 접근이라는 생각이 들었습니다.<h1 id="22b9463d984d80d899b9ecee481767ab">마무리하며</h1>일단 한번 개선해 보자! 라는 가벼운 출발에서 시작했지만, 예상보다 흥미로운 결과로 이어지면서 생각할 거리와 좋은 인사이트를 남겨준 의미 있는 과정이었습니다.앞으로도 작은 시도들이 더 나은 방향으로 이어질 수 있도록, 지속적으로 고민하고 실험을 이어갈 예정입니다. 읽어주셔서 감사합니다!🔮 라프텔을 향한 여정을 시작해보시겠어요?라프텔 채용 공고 바로가기<div data-type="bookmark" data-url="https://laftel.oopy.io/#ae31c277-0a56-4688-aa59-e5aa758de188" data-title="laftel.oopy.io" data-description="🔮 Laftel Vision" data-icon="https://oopy.lazyrockets.com/api/rest/cdn/image/987d7414-b4f9-4009-bcaf-2f5d1954c0f6.png?d=16" data-cover="https://oopy.lazyrockets.com/api/rest/cdn/image/cf870875-f611-433c-b1f6-a7f05c49de71.png"></div><div data-type="callout" data-emoji="✍🏻" data-background-color="rgba(235, 236, 237, 0.3)" style="background-color: rgba(235, 236, 237, 0.3);">Editor 혜정’s comment이 글의 원문은 라프텔 팀 블로그에 업로드 된 “<a href="https://blog.laftel.net/post/38" target="_blank">한 줄 수정했을 뿐인데, 클릭률이 20%에서 50%로!</a>”입니다.이 글은 프로덕트 디자이너분이 써주신 글이지만, 저는 데이터 분석가로서 이 글을 재미있게 읽었습니다. 많은 데이터 분석가들이 &#039;어떻게 하면 성과로 이어지는 분석을 할 수 있을까&#039; 고민하곤 하는데요. 이 글이 좋은 사례가 될 것 같아요. 분석을 할 때도 비즈니스 목표에 대해 이해하는 것은 정말 중요합니다. 만약 초반에 &#039;생각보다 많은 사용자가 개별 구매로 작품을 보고 있다&#039;라는 사실을 발견하는 데서 분석이 마무리되었다면, 지금과 같은 서비스 개선은 어려웠을 거예요. 회사가 SVOD를 핵심 모델로 성장시키고자 하는 목표를 명확히 알고 있었기 때문에, 사용자가 좀 더 멤버십으로 구매해서 볼 수 있도록 UX를 개선하는 시도와 분석을 해볼 수 있었던 것 같습니다.데이터 분석가는 직접 서비스를 개발하거나 디자인하지는 않습니다. 그러나 우리 서비스가 나아갈 방향을 함께 고민하고, 사용자의 행동 속에 숨은 의미를 데이터로 해석하며, 동료들의 의사결정 배경을 이해하려 할 때 진정한 가치를 만들어 낼 수 있다고 생각해요. 결국 데이터는 그 자체로 목적이 아니라, 우리가 더 나은 결정을 내리도록 돕는 좋은 &#039;수단&#039;이라는 점을 다시 한번 느낍니다. 데이터를 정확히 읽는 기술만큼이나 그 안에 담긴 비즈니스와 사용자의 맥락을 이해하는 마음이 분석가에게 참 중요한 것 같습니다.</div>

멤버십 구매 유도 실험에서 발견한 버튼 레이블의 중요성

한 줄 수정했을 뿐인데, 클릭률이 20%에서 50%로!

라프텔의 홈 콜렉션 UI A/B 테스트 사례를 소개합니다

사용자의 클릭, 어떻게 유도할 수 있을까?

글로벌 라프텔의 소셜 로그인 도입 후기

한 줄 수정했을 뿐인데, 클릭률이 20%에서 50%로!

Contents

데이터 분석 소식을
매월 받아보세요

🔮 라프텔 데이터 분석 사례 모아보기

함께 읽어보면 좋은 글

당근 팀과 데이터 분석

사용자 행동 로그 데이터 분석 해야하는 이유

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

데이터 분석 소식을
매월 받아보세요데이터 분석 소식을 받아보세요

한 줄 수정했을 뿐인데, 클릭률이 20%에서 50%로!

Contents

데이터 분석 소식을 매월 받아보세요

🔮 라프텔 데이터 분석 사례 모아보기

함께 읽어보면 좋은 글

당근 팀과 데이터 분석

사용자 행동 로그 데이터 분석 해야하는 이유

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

데이터 분석 소식을 매월 받아보세요데이터 분석 소식을 받아보세요

데이터 분석 소식을
매월 받아보세요

데이터 분석 소식을
매월 받아보세요데이터 분석 소식을 받아보세요