안녕하세요, [뷰저블 x UXO] 산학 협력 <모태UXO> 팀입니다.

혹시 아직도 디자인 결정을 내릴 때마다 여전히 ‘감’에만 의존하고 계신가요?

사용자 데이터, 중요하다는 건 알지만 막상 어디서부터 봐야 할지 막막하지는 않으셨나요?

‘뷰저블(Beusable)’은 히트맵과 저니맵으로 고객 데이터를 직관적으로 시각화해, 누구나 쉽고 빠르게 UX를 검증할 수 있도록 돕는 서비스입니다.
오늘은 ‘URL Split’을 활용한 A/B 테스트 과정을 함께 살펴보려 해요.

개요

01 A/B 테스트란?

02 빠른 검증과 결정, 그리고 Beusable

03 신입 디자이너지만, 데이터는 보고싶어

04 UX GPT가 해주는 메이크 오버

05 많이 좋아했다, B안…!

1. A/B 테스트란?

모든 기업이 공통으로 관심을 갖는 건 전환율과 매출을 높이는 일이에요. 그래서 더 나은 UX(User Experience)를 찾기 위해 계속해서 고민하죠. 이때 사용하는 방법 중 하나가 바로 A/B 테스트예요.

A/B 테스트
특정 요소를 두 가지 버전으로 나누어 실제 사용자를 대상으로, 클릭률·전환율 등 성과를 비교해 더 효과적인 안을 찾는 실험
- A안(Control Group): 기존 버전, 원래 상태
- B안(Experimental Group): 새로 바꾼 버전, 실험용 상태

모두의 일상에 깊이 스며든 대표적 OTT 플랫폼 넷플릭스도 전환율 고민에서 자유로울 수 없었어요. 첫 랜딩 페이지에서 방문자를 구독자로 전환해야 하기 때문이죠. 이를 위해 CTA(Click to Action) 버튼의 문구를 수정하고, 여러 카피안을 A/B 테스트하며 더 효과적인 UX 라이팅을 찾아냈어요.

* [GoodUI] Netflix A/B Tested These 4 Button Labels With "Try It Now" Possibly Leading (https://goodui.org/leaks/netflix-a-b-tested-these-4-button-labels-with-join-now-possibly-leading/)

바로 ‘TRY IT NOW’였습니다. 이 문구는 넷플릭스의 유저가 꼭 되어야만 할 것 같은 압박감을 줄였어요. A/B 테스트 결과를 통해 이런 효과를 확인할 수 있었죠.

이처럼 A/B테스트는 효과적인 디자인을 찾을 수 있게 도와줍니다. 하지만 실무에 돌입하면 여러 제약이 생기기 마련이죠. 여러 부서와의 협업을 바탕으로 실험 설계, 트래픽 분배, 충분한 샘플 확보, 그리고 최종적인 통계 분석 등의 단계를 거치면 많은 시간이 소요될 수밖에 없어요.

2. 빠른 검증과 결정, 그리고 Beusable

전통적인 A/B 테스트는 더 나은 UX를 찾아내는 데 효과적이지만, 시간이 많이 소요된다는 한계가 있어요. 하지만 요즘 UX/UI 트렌드는 신속하게 검증하고 결정을 내리는 것이에요. 혹시 PoC라고 들어보셨나요?

PoC(Proof of Concept)
- 새로운 아이디어나 기술·제품이 실제로 구현 가능한지, 사용자의 니즈에 부합하는지, 효과가 있는지 등 최소한의 시제품으로 빠르게 검증하는 과정
- 빠른 가설 검증으로 추후 나타날 위험이나 실패를 미리 경험 가능

PoC는 최근 UX 설계에서 주목받는 검증 방법이에요. 아이디어가 떠오르거나 개선 포인트가 생기면, 최소한의 기능을 담은 시제품을 가지고 바로 검증에 들어가는 것이죠. 그렇다면 기존 A/B 테스트의 느린 의사결정 시간을 단축하고, 디자이너가 직접 데이터를 확인하며 PoC를 진행할 수는 없을까요?

이 글에서는 ‘뷰저블(Beusable)’을 활용해 진행한 A/B 테스트 과정을 소개하려 합니다. 이제 UX 디자이너의 시선으로 그 과정을 따라가볼까요?

TIP 뷰저블의 A/B Testing 기능을 사용하면 데이터가 낯설었던 디자이너·기획자·마케터도 복잡한 지표를 쉽게 읽고 비교할 수 있어요.

3. 신입 디자이너지만, 데이터는 보고 싶어

UX 디자이너가 된 지 어느덧 3개월 차. 드디어 제게 첫 업무가 주어졌습니다. 바로 도서 ‘Data Driven UX’를 소개하는 페이지를 대상으로 A/B 테스트를 진행하는 업무였어요.

A/B 테스트 툴을 이것 저것 찾아보다가 뷰저블을 알게 됐습니다. 국내 서비스라 접근성이 좋고, 인터페이스도 직관적이어서 ‘신입 디자이너인 나도 데이터 분석을 해볼 수 있지 않을까?’라는 생각에 한 번 사용해보기로 했어요.

본격적으로 뷰저블을 사용하기에 앞서 현재 페이지의 현황과 문제점을 분석해 보았어요.

문제 1. 도서 이미지가 average fold(평균 접힌 부분) 상단을 대부분 차지해서 핵심 콘텐츠인 도서 소개 글이 스크롤을 내려야만 보인다.
문제 2. 도서 소개 글 바로 위에 배너가 삽입되어 있어 시선을 분산시키고 서비스 탐색 흐름을 방해한다.

정리하자면 상단의 도서 이미지와 배너가 화면 대부분을 차지해 도서 소개 영역의 노출이 늦어지고, 이로 인해 사용자의 관심이 떨어진다고 판단했습니다.

현황을 분석해 보니, 이번 A/B 테스트의 목표가 보다 명확해졌어요. 바로 도서와 서비스에 대한 사용자의 관심을 높이는 것!
이를 관찰하기 위해 뷰저블에서 측정 가능한 3가지 주요 지표를 선정하고, 목표치를 아래와 같이 설정해 보았어요.

KPI	기존	목표
'도서 소개' 도달률	32%	70%
평균 체류 시간	45s	60s
클릭 전환율	81.8%	≧ 81.8%

다음으로, 앞서 파악한 문제점을 바탕으로 B안을 만들기 위한 가설을 설정해보았어요.

가설1. 도서 소개 글이 average fold 안에 노출되면, 사용자의 스크롤 도달율과 평균 체류 시간이 증가할 것이다.
가설2. 도서에 대한 관심이 높아지면 서비스에 대한 관심도 자연스럽게 증가해서, ‘Get Started’와 같은 서비스 관련 버튼 클릭 전환율이 상승할 것이다.

이제 가설을 입증하기 위해 아래와 같이 B안을 제작했습니다.
먼저 상단의 도서 이미지를 삭제하여 페이지 진입 시 바로 도서 정보가 보이도록 했어요. 그리고 도서 소개 영역 위의 배너를 제거해 시선 분산 요소를 최소화하고, 화면 중반부까지 방해 없이 탐색할 수 있도록 디자인했습니다.

뷰저블에서 A/B 테스트 설정하기

이제 A/B 테스트를 설정해볼게요. 뷰저블의 A/B Testing 기능에는 두 옵션이 존재합니다. 두 개의 URL을 등록해 비교하는 ‘URL Split’과 페이지의 원하는 텍스트를 쉽게 변경할 수 있는 ‘UX Writing’이죠.

저는 B안의 URL이 있으니 ‘URL Split’을 통해 A/B 테스트를 진행하기로 했어요. A/B 테스트 설정 방법은 아래와 같아요.

‘URL Split’ 기능에 대해 더 알아보기: https://forum.beusable.net/ko/solomon/post/795

‘UX Writing’ 기능에 대해 더 알아보기: https://forum.beusable.net/ko/solomon/post/1023

B안을 등록하는 과정에서 A/B Testing에 할당할 트래픽 비율 설정과 분석 기간을 설정했습니다. 나아가 전환 목표를 설정해, 단순히 페이지 내에서의 행동 지표 뿐 아니라 사용자가 다음 단계로 얼마나 이동했는지도 한눈에 확인하려고 해요.

TIP 실제 비즈니스 성과와 직결되는 경로를 목표로 설정해두면, A안과 B안 중 어느 쪽이 더 효율적으로 전환을 이끌어냈는지 명확하게 비교할 수 있어요.

이렇게 A/B 테스트를 설계하고 한 달이 지났습니다. A안과 B안, 과연 어떤게 더 나은 디자인이었을까요? 지금부터 데이터를 기반으로 같이 확인해봐요.

‘도서 소개’까지 얼마나 많은 사용자들이 도달했을까?

이번 A/B 테스트에서 첫 번째로 설정한 KPI는 ‘도서 소개’ 콘텐츠까지 도달한 사용자의 비율이었어요. 이 부분이 Book 페이지의 핵심 콘텐츠라고 판단했기 때문이에요.

먼저 A안과 B안을 비교하기 위해 ‘히트맵 비교’ 기능을 활용했어요. 뷰저블은 Click, Move, Scroll, Path Plot 등 다양한 히트맵을 제공하고 있습니다. 이 중 핵심 콘텐츠까지 도달한 사용자 비율을 확인해야 하니까 스크롤 히트맵을 선택하고 구체적인 지표를 확인해볼게요.

TIP 두 안을 비교할 때는 반드시 같은 종류의 히트맵을 선택해야 해요.

원하는 콘텐츠 영역에 마우스를 올리면 해당 영역까지 도달한 사용자 비율이 히트맵 위에 표시되는 것을 볼 수 있어요.

A안에서는 ‘도서 소개’까지 전체 PV 중 36%만이 도달했어요. 이를 개선하기 위해 B안에서는 70% 이상의 사용자가 ‘도서 소개’ 영역까지 도달하는 것을 목표로 삼았습니다. 결과는 75%로, A안보다 약 40%p 높았고(약 11명 더 도달) 목표치도 7.1% 초과 달성했네요!

이는 B안에서 도서 이미지를 삭제해 ‘도서 소개’가 Average Fold 상단에 노출되었기 때문입니다. 즉, 사용자가 스크롤 하지 않아도 핵심 정보를 접할 수 있었고, 이로 인해 도달률이 크게 상승한 걸 확인할 수 있었어요.

웹 페이지의 체류시간이 어떻게 달라졌을까?

두 번째 KPI 는 바로 웹 페이지에 방문한 사용자들의 평균 체류 시간입니다.

사용자들이 도서 소개 페이지에 관심을 많이 가졌다면, 체류 시간도 길겠죠? ‘리포트 비교’ 중 다양한 지표들을 한눈에 볼 수 있는 ‘요약’ 기능을 활용할거예요.

A안의 평균 체류시간은 45초였어요. 이는 일반적인 정보성 페이지 대비 다소 짧은 편이라고 판단해, 사용자가 웹 페이지에 평균 1분 이상 머무르도록 하는 것을 목표로 삼았습니다. 이렇게 된다면 도서 내용을 충분히 탐색하고, 자연스럽게 다음 행동으로 이어질 수 있을 것이라 기대했죠.

A/B 테스트 결과, B안의 평균 체류시간은 82.2초를 기록하며 목표치를 37% 초과 달성했습니다.

TIP 평균 체류시간(Avg. Duration) 이외에 클릭 전환율, 클릭 이탈률 등 다양한 핵심 지표를 그래프와 표로 비교해볼 수 있어요.

TIP Clicks per PV, Click PV Rate? 지표가 헷갈린다면 ⓘ 표시에 마우스를 올려 쉽게 의미를 확인해보세요.

사용자들의 클릭은 어디로 향했을까?

지금까지 A안과 B안의 ‘도서 소개’ 도달률과 평균 체류 시간을 비교해보았습니다. 두 KPI 모두 B안에서 목표치를 웃돌았네요. 그렇다면 이미지 없이 주요 정보에 빠르게 접근할 수 있도록 한 B안이 정답이었던 걸까요?

마지막으로 사용자들의 클릭 전환율을 확인해보겠습니다.

클릭 전환율(Click Conversion Rate)은 앞서 평균 체류시간을 살펴봤던 ‘요약’에서 함께 확인할 수 있습니다.

목표는 A안의 클릭 전환율인 81.8% 이상 달성이었는데, 아쉽게도 B안에서는 75%로 떨어졌어요. B안이 스크롤 도달률과 평균 체류시간에서는 우수했지만, 서비스에 대한 관심과 행동을 유도하는 데에는 A안이 더 효과적이었던 것으로 보입니다.

추가적으로, ‘전환 목표 분석’ 기능을 활용해보겠습니다. 이는 사전에 등록한 목표 페이지(URL)에 얼마나 도달했는지를 비율로 나타낸 지표예요.

서비스에 대한 주요 내용을 담고 있는 페이지들을 등록했는데, 세 지표 중 두 개에서 A안이 우세하다는 결론이 나왔습니다. 마찬가지로 B안에서 서비스에 대한 적극적인 탐색 유도가 이루어지지 않았다고 볼 수 있습니다.

TIP A/B 테스트를 설정할 때 등록한 전환 목표 페이지 별 실제 전환율을 한눈에 확인할 수 있어요.

4. UX GPT가 해주는 메이크 오버

KPI	목표	지표	결과
'도셔 소개' 도달률	70%	75%	+7.1%
평균 체류시간	60s	82.2s	+37%
클릭 전환율	≧ 81.8%	75%	-8.3%

지금까지 분석한 A/B 테스트 결과를 표로 정리해봤어요.

A안에 비해 B안에서 클릭 전환율은 낮아졌지만, 스크롤 도달율과 평균 체류시간은 목표치를 각각 7.1%, 37% 초과 달성했습니다. 이 결과를 보니 ‘B안이 더 나은 디자인이다’라는 생각이 들었어요.

하지만 A/B Testing 리포트 상단에 위치한 UX GPT는 A안을 추천하고 있었어요. A안이 안정적인 사용자 행동 패턴을 보이고, 평균 체류 시간 대비 클릭 전환율 성과가 좋다고 하네요.

TIP UX GPT는 뷰저블에서 제공하는 데이터 기반 의사결정 도우미예요.

‘UX GPT’ 기능에 대해 더 알아보기: https://forum.beusable.net/ko/post/2514

제가 분석 과정에서 놓친 부분이 있었던 걸까요? KPI를 잘못 설정했던 것은 아닐까요? UX GPT 덕분에 데이터를 다시 한 번 꼼꼼히 들여다보기로 했습니다.

체류 시간의 함정: 긍정적 몰입이 아닌 인지적 혼란

가장 먼저 스크롤 히트맵을 다시 열었습니다. 그리고 저는 제 눈을 의심할 수밖에 없었죠. B안의 평균 체류 시간이 길었음에도 불구하고, 페이지 최하단까지 스크롤을 내린 사용자는 오히려 A안이 훨씬 많았어요. B안 사용자 대부분은 페이지 상단에서 벗어나지 못하고 있었습니다.

그 순간 머릿속에서 가설 하나가 떠올랐습니다.

B안의 긴 체류 시간은 긍정적인 몰입이 아니라, 길을 잃은 사용자의 혼란과 헤맴의 시간은 아니었을까?

이미지가 사라지면서 정보의 시각적 단서와 영역 구분이 모두 사라진 탓에, 사용자들은 빽빽한 텍스트의 숲에서 길을 잃고 내용을 이해하는 데 훨씬 더 많은 시간을 허비하고 있었던 겁니다. 결국 긴 체류 시간은 사용자의 만족이 아닌, 인지적 혼란을 의미했던 셈이죠.

클릭 데이터의 진실: 사용자의 탐색, 방황, 그리고 이탈

확신을 얻기 위해 클릭 데이터를 파고들기 시작했습니다.

우선 B안에서는 도서 상세 소개 전에 이미지를 제공하지 않았습니다. 이 때문에 사용자들은 책에 대한 시각적 단서를 충분히 확보하지 못했고, 그 결과 ‘도서 이미지 더보기’ 좌우 스크롤 버튼을 압도적으로 많이 클릭했어요.

이는 곧 사용자들이 결핍된 시각 정보를 채우기 위해 반복적으로 같은 요소에 매달렸음을 보여줍니다.

반면 A안 사용자들의 행동은 명쾌했습니다. Clicks per PV 상위 5개 항목을 보면 ‘References’, ‘Journey Map’ 등 플랫폼의 주요 탐색 요소들이 자리했습니다. A안 사용자들은 책에 대한 긍정적 인상을 바탕으로 서비스 전반에 대한 호기심을 키우며, 적극적으로 플랫폼을 탐색했어요.

여기에 더해, B안은 단순히 전환율만 낮았던 게 아니었습니다. 이탈율 역시 A안보다 높았습니다. 이는 사용자가 원하는 정보를 제때 찾지 못한 채 페이지 안에서 방황하다 결국 떠나버렸음을 의미합니다.

정리하자면, B안의 클릭은 정보를 찾지 못해 헤매는 ‘좌절’에 가까웠고, 그 결과 높은 이탈율로 이어졌습니다. 반대로 A안의 클릭은 만족스러운 정보 습득에서 출발해 서비스 전체를 탐험하는 ‘발견’의 여정이었습니다.

서로 다른 탐색의 깊이

마지막으로, 사용자들이 우리 서비스 자체에 얼마나 깊은 관심을 보였는지 확인해 보았습니다. 여기서 A안과 B안의 가치는 극명하게 갈렸어요.

A안의 사용자들은 ‘References’, ‘Journey Map’ 등 플랫폼의 핵심 기능을 탐색하는 주요 버튼들을 훨씬 더 적극적으로 클릭하는 경향을 보였습니다.

균형 잡힌 정보(텍스트+이미지)를 통해 책에 대한 긍정적 인상을 받은 사용자들이 자연스럽게 ‘이 서비스를 더 알아보고 싶다’는 관심으로까지 이어졌던 것이죠.

결론적으로 B안은 사용자를 페이지 안에 ‘가두는 데’는 성공했지만, 마음을 얻는 데는 실패했습니다. 반면 A안은 사용자가 서비스에 대한 호감을 갖고 더 넓은 탐색의 여정으로 나아가게 만들고 있었어요. 예상과 달리 B안보다 훨씬 질 높은 사용자 경험을 제공하고 있었던 거예요!

5. 많이 좋아했다, B안…!

신입 디자이너의 좌충우돌 A/B 테스트기, 잘 보셨나요? 비록 B안은 기각됐지만, 결코 A/B 테스트가 실패한 것은 아닙니다. PoC(Proof of Concept) 방식으로 핵심 가설을 빠르게 실험하여 신속히 결과를 얻을 수 있었기 때문이죠.

무엇보다 뷰저블을 통해 데이터 분석팀 없이도 디자이너가 A/B 테스트를 직접 설계하고 분석할 수 있었어요.

이처럼 디자이너는 물론, 마케터나 기획자처럼 데이터가 익숙하지 않은 비(非)전공자분들도 뷰저블만 있다면 ‘비(BE)전공자’처럼 데이터를 쉽게 볼 수 있답니다. 디자이너이지만, 기획자이지만, 마케터이지만 데이터는 보고 싶으신 분들께 뷰저블을 추천합니다. :)

오늘 제공해 드린 내용이 유용했길 바라며 다음에 더 좋은 콘텐츠로 찾아뵙겠습니다! 👋

뷰저블 사용해보기: https://www.beusable.net

* 본 글은 산학 협력 과제 진행을 위해 제품을 무료로 제공 받아 작성되었습니다.

디자이너지만 데이터는 보고싶어!

디자이너지만 데이터는 보고싶어!