어떤 UX Writing이 페이지에 적합한지 고민되시나요? Besuable A/B 테스트를 통해 함께 알아보아요!
–
안녕하세요, [뷰저블 x UXO] 산학 협력 <탐방탐방 돌을 던지자> 팀입니다.
데이터 분석이나 A/B 테스트, 해보고 싶지만 시작 전부터 머리가 지끈했던 적 있으신가요?
“이거 기획부터 개발까지 다 알아야 하는 거 아냐?” 하고 겁먹었던 분들, 혹은 사용자 행동 패턴을 분석해 보고 싶었지만 복잡한 과정 때문에 포기했던 분들, 주목해주세요!
뷰저블은 이런 고민을 한 번에 날려주는, 쉽고 빠른 A/B 테스트 도구입니다. 개발 지식이 없어도 단 몇 번의 클릭만으로 테스트를 세팅하고, 클릭률·전환율 같은 핵심 지표를 바로 확인할 수 있죠. 게다가 복잡한 숫자만 던져주는 게 아니라, 실제 화면 위에 데이터가 시각화되어 보여서 누구나 직관적으로 이해할 수 있습니다.
저희 역시 뷰저블의 간편한 기능을 체험하기 위해 UX Writing을 바꿔보면서 A/B 테스트를 진행했습니다. 저희와 같이 세팅부터 결과 분석 방법까지 하나씩 알아가볼까요?
개요
01 A/B Test와 UX Writing에 대해
02 UX Writing 기능은 어떻게 사용하나요?
03 UX Writing 기능을 이용한 데이터 분석 방법 – UXO 사이트를 활용하여!
04 뷰저블에서만 경험할 수 있는 UX Writing
1. A/B Test와 UX writing에 대해
1. A/B 테스트란? 개념과 활용 목적
뷰저블로 바로 들어가기 전에, 혹시 A/B 테스트에 대해 들어본적 있으신가요? A/B 테스트는 한 페이지에서 특정 요소만 변경한 두 가지 이상의 디자인 시안을 비교해, 목표 사용자 행동을 가장 효과적으로 유도하는 시안을 선택하는 과정입니다. 여기서 말하는 디자인 시안 간의 차이점은 대규모 리뉴얼이 아닌 UI 요소의 구조 순서, 문구, 버튼 등을 말해요.
쇼핑몰에서 세일 상품 판매를 더 늘리고 싶다고 가정해볼게요. 그럴 때 A/B 테스트를 활용할 수 있습니다. 예를 들어, 상품 페이지에서 세일 기간을 어떻게 보여줄지를 비교하는 거죠.
A안: “세일은 8월 19일까지”처럼 단순히 세일 기간만 표시
B안: 실시간으로 줄어드는 카운트다운 타이머 표시
두 페이지 모두 같은 UI, 같은 상품, 같은 문구를 쓰지만, B안은 시간의 압박감을 주어서 ‘지금 바로 사야겠다’는 마음을 불러일으킵니다. 실제로 이런 방식이 구매 전환율을 높이는 경우가 많습니다
* [요즘IT] 바로 활용하는 12가지 AB 테스트 사례(https://yozm.wishket.com/magazine/detail/897/)
실제로 해커스 어학원 홈페이지에서는 특별 수강의 수업료 환급을 강조할 뿐만 아니라 다음과 같이 타이머를 띄워, 초조함을 유발시킴과 동시에 결제를 유도하죠
앞서 쇼핑몰 예시를 들었지만, A/B 테스트는 꼭 구매 전환에만 쓰이는 건 아닙니다. 회원 가입률을 높이거나, 제품의 브랜드 가치를 강조하거나, 발행 시기와 관계없이 다양한 콘텐츠의 클릭률을 끌어올리는 등 여러 목표에 활용됩니다. 이처럼 사용자의 행동을 유도하는 데 폭넓게 쓰이는 A/B 테스트가 가장 효과적인 UX Writing을 찾는 데 어떻게 쓰이는지, 좀 더 깊게 살펴볼까요?
–
2. UX Writing 사례와 개념: 왜 중요한가?
UX writing의 중요성에 대해 아시나요? UX writing은 사용자가 제품이나 서비스를 만났을 때, “아, 이거 써보고 싶다”라고 느끼게 만드는 첫 한마디이자 행동을 이끄는 중요한 장치입니다.
2007년 12월, 오바마 캠페인의 디지털 분석 팀은 웹 방문자를 이메일 구독자로 전환하는 데 어려움을 겪고 있었습니다. 방문자가 메일을 남기도록 하는 첫 관문인 CTA 버튼 문구를 실험해보기로 결정했죠.
처음 오바마 대선 캠페인 페이지에 방문하면 ‘Sign Up’이라는 빨간 버튼이 스플레쉬 화면에서 사용자들을 반겼습니다. 하지만 사용자들은 그 버튼을 잘 클릭하지 않았고, 이에 그들은 문제를 더 정밀하게 접근해 “Sign Up”이라는 버튼 문구를 “Learn More,” “Join Us Now,” “Sign Up Now”등의 총 3가지 대안으로 바꾸어 A/B 테스트를 진행했습니다.
* [WeeklyEDGE] AI 시대 스타트업 펀딩의 진화 (https://stibee.com/api/v1.0/emails/share/SQdhamaAStBV9q9Zbuc6rDYXAOWtWHA=)
이 중 “Learn More”는 기존 문구인 “Sign UP”대비 가입률이 18.6% 증가하며 유의미한 결과를 냈죠. 사용자들은 왜 “Sign UP”보다 “Learn More”에 더 반응하였을까요? 그 이유는 방문자가 즉시 회원 가입을 요청받는 느낌보다 정보를 얻는 첫 단계처럼 느껴져, 부담이 적었기 때문입니다. 이처럼 오바마 캠페인의 UX writing을 활용한 A/B Test는 단어 하나의 차이가 사용자의 선택을 바꾸고, 궁극적으로는 캠페인의 성공에 결정적인 영향을 미칠 수 있다는 점을 보여준 사례입니다.
이 경험은 UX 라이팅이 단순한 문장 작성이 아니라, 사용자 경험과 비즈니스 성과를 직접 좌우하는 전략적 요소임을 분명하게 보여줍니다. 따라서 작은 문구 하나에도 세심한 고민과 검증이 필요하며, 실제로 A/B 테스트를 통해 지속적으로 개선해 나가는 과정이 반드시 동반되어야 합니다!
3. 결론: 좋은 UX Writing이란?
그렇다면 좋은 UX Writing이란 무엇일까요? 일반적으로 ‘좋은 UX Writing’은 사용자 관점에서 작성되어, 긍정적인 반응을 이끌고, UX 디자이너가 설계한 흐름 속에서 사용자가 원하는 행동(구매, 회원가입, 콘텐츠 탐색 등)을 자연스럽게 하도록 돕는 글입니다. 이런 ‘좋은 UX Writing’을 작성하기 위해서는, 몇 가지 원칙을 참고하여 지키는 것이 중요합니다. 대표적으로, Google Material Design에서 제시한 UX Writing 가이드에서는 다음과 같은 원칙을 제안합니다.
이러한 원칙들은 유용한 기준이지만, 결코 UX Writing의 절대적인 답은 아닙니다. 사실 UX Writing의 명시적인 답은 없습니다. 플랫폼과 브랜드의 성격에 따라 적용해야 할 원칙이나, 문구의 톤이 달라지기 때문이죠.
예를 들어, 앞서 언급한 오바마 캠페인 페이지에서는 ‘Sign Up’처럼 버튼에 구체적인 기능을 명시하기보다, 참여를 간접적으로 자극하는 문구(’Learn More’)로 클릭을 유도할 수 있습니다. 반면, 금융 서비스에서는 오히려 정확성과 신뢰성이 서비스의 핵심이므로, 모호한 표현보다 ‘매수하기’같은 직설적인 안내가 더 적합합니다. 결국, UX Writing의 기준은 플랫폼이 원하는 사용자 행동, 브랜드 이미지, 서비스 특성 등에 따라 달라진다는 것을 알 수 있습니다.
따라서 원칙을 참고하되, 실제로 우리 플랫폼과 사용자의 반응 데이터를 기반으로 조율하는 과정이 필요합니다. 이제 본격적으로 뷰저블 A/B 테스트의 UX Writing을 사용해보죠.
2. UX Writing 기능 어떻게 사용하나요?
A/B 테스트에서 UX Writing 기능을 활용할 때는 다음과 같은 순서로 진행해요.
1. 분석 웹페이지 설정하기
2. 페이지의 HTML 스크립트에 트래킹 코드 심기
3. A/B 테스트 세팅 및 UX Writing 수정하기
4. A/B 테스트 세팅 등록하기
5. A/B 테스트 분석 실행하기
6. UX Writing 리포트 보기
이렇게 간단한 과정을 거치게 되는데, 각 단계를 스크린샷으로 확인하고, 저희가 실제로 해보며 궁금했던 부분도 함께 짚어볼까요?
1. 분석 웹페이지 등록하기
–
Q1. A/B 테스트의 기간은 어느정도가 적당한가요?
유의미한 양의 데이터를 수집하려면 너무 짧은 기간으로는 부족할 수 있습니다. 그래서 최소 1주일 이상은 기한을 잡고 테스트를 진행하시는 것을 추천드려요!
–
Q2. 매치 유형은 무엇이고, 어떤 매치 유형으로 설정해야 하나요?
매치 유형은 분석할 페이지의 URL 구조 및 접근 방식에 대응되며, 다음과 같은 URL 구성에서 분석 페이지 URL이 일치하는 정도를 바탕으로 설정해요.
주로 사용되는 매치로는 등록 URL과 완전히 일치하는 Exact와 Domain과 Path 값이 일치하는 Simple 매치가 있어요.
- • Exact 매치는 등록 URL과 정확히 일치하는 URL에 접속한 사용자의 데이터를 수집해요. 보통 광고 파라미터를 배제하고 분석하고자 하는 유입 경로가 즐겨찾기나 직접 URL 등일 때 활용합니다.
- • Simple 매치는 등록 URL의 Domain 과 Path 값이 일치 URL에 접속한 사용자의 데이터를 수집하며, Parameter나 Fragment 등의 변수가 추가되면 구분없이 해당 URL의 데이터도 수집하죠. 주로 직접 접속 외에도 광고나 SNS 같은 외부 트래픽에서의 유입 경로 데이터를 확인하고자 할 때 활용해요.
이 중에서 A/B 테스트를 실행하려면 Exact 매치를 써야해요. 나머지 매치 유형에 관해선 아래 링크의 글을 확인해주세요!
뷰저블 매치 유형에 대해 더 알아보기: https://forum.beusable.net/ko/solomon/post/732
–
2. 페이지의 HTML에 트래킹 코드 심기
Q3. 뷰저블 트래킹 코드는 어디서 가져오고 어디에 입력하면 되나요?
트래킹 코드는 공통으로 로드 되는 레이아웃에 삽입하는데, 보통 HTML 스크립트의 </body> 태그 직전에 넣는게 적합해요. 중복해서 넣으면 데이터 수집에 문제가 발생하므로 주의해주세요! 만약 레이아웃 구조 상 body가 모든 페이지의 공동 영역이 아니라면, 상황에 따라 header나 footer에 입력해요. 이 코드만 입력하면 분석하고자 하는 사이트에 일괄 적용되어 추가 작업이 필요하지 않답니다.
–
[추가 질문] framer로 만든 사이트는 트래킹 코드를 어디에 입력해야 하나요?
framer 사이트의 Site Settings의 General에 들어가, custom code 부분의 <body> 태그의 끝 칸에 트래킹 코드를 입력하고, publish를 눌러주세요.
–
3. A/B 테스트 세팅 및 UX Writing 수정하기
Q4. A/B 테스트는 어디서, 어떻게 세팅할 수 있나요?
리포트 보기로 들어간 후, 좌측 메뉴에 A/B Testing을 클릭하면 설정 페이지가 나와요. 거기서 B안 페이지명을 입력하고, 트래픽 비율을 설정하면 돼요. 모든 방문자를 분석하고 싶으면 A와 B 각각 50%씩 배분하면 돼요! 100% 비율 내에서 입력한 비율대로 A,B 페이지에 각각 자동 분배합니다.
–
Q5. 어떤 부분의 Writing을 수정할 수 있나요?
페이지 내 편집 개수 20개 내에서 텍스트로 구분되는 모든 요소는 수정이 가능하답니다!
–
4. A/B 테스트 세팅 등록하기
Q6. A/B 테스트 등록 후에도 수정할 수 있나요?
등록 직후에도 수정할 수 있지만, A/B 테스트 분석이 정식으로 등록된 후에는 수정이 안 돼요. 분석 실행 여부는 UXO heatmap → 분석 페이지 URL에서 분석 상태에 실행이 적혀있냐 아니냐를 통해 확인할 수 있어요.
–
5. A/B 테스트 분석 실행하기
Q7. 시키는대로 등록까지 완료했는데 트래킹코드 미설치라고 떠요! 어떻게 해결할 수 있나요?
페이지의 분석 상태가 미설치로 나오는건 트래킹코드나 매치타입 문제보다는, 시간의 문제예요. 모든 페이지는 등록 이후 리포트 열람까지 약 2시간정도 소요되며, 실제로 방문자가 최소 1PV 이상은 발생해야만 분석 상태가 실행으로 전환되기 때문에 조금만 기다리면 해결된답니다.
트래킹 코드 설치 후 미설치로 뜨는 현상에 대해 더 알아보기: https://forum.beusable.net/ko/post/287
–
6. A/B 테스트 UX Writing 리포트 보기
Q8. 테스트 기간 중에도 데이터를 실시간으로 확인할 수 있나요?
리포트 보기 버튼은 테스트 기간 중 언제든지 활성화되어있어요. 다만 데이터가 반영되려면 약간의 시간차가 있으니 이 점 유의해주세요.
3. UX Writing 기능을 이용한 데이터 분석 방법 – UXO 사이트를 활용하여!
A/B 테스트를 위한 세팅 과정이 완료되었다면, 이제는 뷰저블의 리포트와 히트맵을 통해 UX Writing 개선에 필요한 지표들을 한눈에 볼 수 있습니다. 리포트와 히트맵에서는 각각 보여주는 데이터가 다른데요, 한편 살펴보죠.
–
1. 리포트
우선 리포트는 PV(페이지 뷰), 평균 체류 시간 등과 같은 정량적 데이터를 제공합니다. 이를 통해 사용자가 각 버전에서 얼마나 오래 머무르고, 어떤 페이지가 더 많은 전환을 이끌어내었는지 등을 명확한 수치로 사용자의 반응을 비교할 수 있습니다. 명확한 수치로 개선 효과를 증명해야 한다면 리포트를 이용해 분석하는 것이 효과적입니다.
뷰저블 리포트는 위의 사진과 같이 다양한 지표를 보여줍니다. 각각 어떤 수치를 나타내고, 어떻게 이 데이터를 유의미하게 분석할 수 있는지 함께 살펴볼까요?
이 수치들을 종합적으로 살펴보면 더 유의미한 결과를 얻을 수 있습니다.
예를 들어, Click per PV는 높지만 전환율이 낮다면 사용자가 여러 요소를 시도해봤지만 서비스 기획자가 의도한 목표나 정보에 도달하지 못했다고 해석할 수 있어요. 이 경우에는 CTA 문구나 배치, 혹은 프로세스 흐름을 다시 점검해 보는 게 필요하겠죠.
반대로 Click per PV Rate이 낮지만 평균 체류 시간이 길다면, 사용자가 콘텐츠를 읽거나 탐색하는 데에는 시간이 꽤 걸리지만 실제 상호작용(클릭)은 잘 일어나지 않는 상황을 의미합니다. 이는 버튼이나 링크의 시각적 인지도가 낮거나, 행동을 유도하는 요소가 부족하다는 신호일 수 있습니다.
이렇게 하나의 지표만 따로 해석하기보다는 여러 지표를 함께 비교하는 게 핵심이에요. 그래야 단순히 지표의 숫자를 넘어 ‘사용자 행동 맥락’을 읽어낼 수 있어요. 여기에 히트맵 분석까지 더하면, 문제 구간의 원인까지 훨씬 더 명확하게 파악할 수 있답니다.
–
2. 히트맵
히트맵은 사용자 클릭, 스크롤, 마우스 이동 경로 등 행동 패턴을 시각적으로 보여주는 분석 도구입니다. 이를 활용하면 사용자가 실제로 어떤 부분에 관심을 갖고, 어디에서 이탈하거나 머무르는지를 한눈에 확인할 수 있죠. 그래서 버튼이나 문구 같은 특정 요소에 사용자가 주목하는지, 페이지 안에서 어떤 흐름을 따르는지, 혹은 어디에서 이탈하는지를 파악할 때 효과적입니다.
히트맵에서는 다음과 같이 데이터를 구분해 분석할 수 있습니다.
A. 디바이스 별 분석
PC, 태블릿, 모바일로 세분화해 디바이스별 이용 비중과 행동 패턴을 비교할 수 있습니다. 예를 들어 UXO 페이지 분석에서 PC 사용 비중이 높게 나타난다면, 해당 환경에 맞춰 화면 레이아웃, 폰트 크기, 클릭·터치 영역 등을 더 정교하게 최적화할 필요가 있다는 의미입니다.
B. 유입 경로 분석
직접 유입, 검색엔진 등 방문 경로별로 행동을 나누어 볼 수 있습니다. 예를 들어 SNS 링크를 통해 유입된 사용자들이 A안에서 전환 버튼 클릭률이 높다면 해당 채널에 맞는 카피와 디자인 전략을 A안에 반영하는 등의 인사이트를 얻을 수 있습니다.
C. 행동 유형별 분석
히트맵은 단일 행동 데이터뿐 아니라 인터랙션 시퀀스까지 파악할 수 있어, 개선 방향 설정에 강력한 근거를 제공합니다. 히트맵 내 행동 유형별 분석은 이미지와 같은 지표를 통해 파악할 수 있습니다.
D. 신규/재방문 분석
신규 사용자와 재방문 사용자의 행동 패턴을 별도로 확인할 수 있습니다. UXO 홈페이지의 히트맵 분석 결과, 신규 사용자는 스크롤 비율이 높아 페이지 전반을 폭넓게 탐색했지만, 실제 클릭 수는 많지 않았습니다. 이는 콘텐츠를 관심 있게 훑어보지만, 주요 액션(모집 알림 신청, 학회 소개 등)으로 이어지지 않는 경향을 보여줍니다.
반면 재방문 사용자는 스크롤 범위는 상대적으로 좁았지만, 방문 즉시 ”모집 알림 신청” 버튼과 “학회 소개” 버튼의 클릭 비율이 신규 사용자보다 높게 나타났습니다. 즉, 재방문 사용자는 필요한 정보나 목표 행동이 명확해 ‘목표 지점’만 빠르게 접근하는 목표 지향적 탐색 패턴을 보인 것으로 해석할 수도 있겠죠.
E. 요소별 클릭·호버 데이터
히트맵에서도 리포트의 주요 지표인 Click PV Rate, Clicks per PV를 볼 수 있지만, 개별 요소 단위로 클릭 데이터를 확인할 수 있다는 점이 다릅니다. 버튼, 이미지, 링크 등 특정 요소를 선택하면 해당 요소의 클릭 수 뿐만 아니라 마우스오버 → 클릭까지 걸린 평균 시간(Hover→Click Time), 그리고 호버 대비 클릭 전환 비율(Hover→Click Rate)까지 제공합니다.
UXO 홈페이지에서는 [7기 모집 알림 신청] 버튼에 Hover→Click Rate가 33.3%, Hover→Click Time이 0.1초로 나타났는데요, 이는 사용자가 버튼 위에 마우스를 올리자마자 바로 클릭했다는 뜻으로, 버튼의 텍스트가 주는 의미가 사용자들에게 명확하게 전달되고 있다는 신호일 수 있습니다.
3. UX Writing 개선안 도출
지금까지는 UXO 홈페이지를 통해 세팅 과정을 살펴봤습니다. 다만 데이터 분석과 개선안 도출을 보여드리기에는 테스트 세팅 시기상 조금 이른 점이 있어, 개선안 도출은 뷰저블 페이지의 A/B 테스트 결과를 예시로 설명드리겠습니다.
뷰저블 페이지의 A/B 테스트 결과를 기반으로 UX Writing 개선안을 도출했습니다. 리포트와 히트맵, 그리고 UX GPT 분석을 함께 참고해, 사용자가 어떤 문구에서 더 많이 클릭하고 전환했는지를 쉽게 확인할 수 있었죠. 뷰저블 페이지에서는 ‘요금제’라는 단어를 사용한 A안이 B안 대비 클릭 전환율이 유의미하게 높게 나타났다는 결과를 발견했습니다.
이 분석을 토대로 A안에서 전환율이 높아진 이유를 검토하고, 실제 웹사이트의 UX Writing 개선안 도출에도 반영할 수 있습니다. 이렇게 뷰저블에서는 데이터 기반으로 빠르고 간편하게 UX Writing 개선안을 도출할 수 있어, 반복적인 A/B 테스팅과 사이트 최적화 작업에 큰 도움을 줄 수 있습니다.
4. 뷰저블에서만 경험할 수 있는 UX Writing
지금까지 뷰저블을 통해 손쉽게 A/B 테스트를 진행하고, 결과 분석까지 해봤습니다! 어땠나요? 쉽게 따라할 수 있을 것 같나요?
뷰저블을 활용한 A/B테스트의 장점은 무엇보다 간편하고 빠르게 진행할 수 있다는 점입니다. 활발히 사용되는 웹사이트에서 직접 코드를 건드리며 A/B 테스트를 진행하는 대신, 몇 단계만 간단하게 거치면 A/B 테스팅 환경을 설정할 수 있습니다. 등록 후에는 실제 방문자들에게 A안과 B안이 랜덤으로 보여지고, 그 과정에서 클릭률·전환율 같은 데이터가 자동으로 쌓이게 됩니다. 반면, 뷰저블과 같은 툴을 사용하지 않고 A/B테스트를 진행하려면 기획자·디자이너·개발자까지 다 모여서 의견 조율하고 개발까지 거쳐야 해서 시간과 노력이 많이 들죠. 이럴때 뷰저블을 사용하면 번거로운 협업 과정 없이도 바로 테스트하고, 실제 사용자 데이터를 얻을 수 있답니다.
간단하고 빠르다는 장점 말고도 뷰저블을 사용해야 하는 이유가 또 있습니다! 앞서 설명드린 뷰저블만의 데이터 분석 방법이 그 중 하나죠. 뷰저블은 A/B 테스트를 쉽게 세팅하는 데서 그치지 않고, 테스트 이후 리포트, 히트맵, UX GPT 등 다양한 기능을 제공해 사용자가 실제 데이터를 직접 보고 해석할 수 있도록 돕습니다. 특히 사용자가 데이터를 더 쉽게 이해할 수 있도록, 실제 화면을 캡처한 위에 데이터를 표시해 시각화를 통한 효율성을 높입니다. 이렇게 시각화된 결과는 복잡한 수치를 문자로만 보지 않아도 , 사용자의 행동 패턴을 직관적으로 파악할 수 있게 해주죠.
‘UX GPT’ 기능에 대해 더 알아보기: https://forum.beusable.net/ko/post/2515
혹시 지금 사용자 행동 데이터를 얻고 싶지만, 복잡한 과정 때문에 망설이고 계신가요? 그렇다면 간편하게 등록하고 쉽게 데이터 분석까지 할 수 있는 뷰저블과 함께 시작해보는 건 어떨까요?
–
►뷰저블 사용해보기: https://www.beusable.net
*본 글은 산학 협력 과제 진행을 위해 제품을 무료로 제공 받아 작성되었습니다.
