지금 읽는 곳두 방식의 전환율을 비교한 공식 자료가 있나목차
S2 › 이커머스 운영·수익성 관리 › 과목 211 › 레슨 10
상세페이지 사이즈·색상 옵션 선택 UI 드롭다운 vs 버튼형 전환율 비교
어느 쪽이 몇 퍼센트 낫다는 자료는 없습니다. 대신 무엇을 기준으로 고르는지는 정할 수 있습니다.
핵심요약
- 드롭다운과 버튼형 옵션 UI의 전환율 차이를 비교한 공식 데이터는 확인되지 않는다
- 판단 기준은 취향이 아니라 조작 비용이다. 옵션을 고르는 데 필요한 탭 수와 오조작 가능성으로 비교한다
- 옵션 수가 적고 선택이 판매를 좌우하는 경우에는 버튼형이, 옵션 수가 많고 목록이 긴 경우에는 드롭다운이 유리한 경향이 있다
- 품절 옵션 표시 방식이 전환율에 미치는 영향이 UI 형태보다 클 수 있다
- 옵션 UI 변경은 A/B 테스트로 검증하기 좋은 주제이므로 변경 요소를 하나로 한정한다
두 방식의 전환율을 비교한 공식 자료가 있나
확인되지 않습니다. 사이즈나 색상 옵션을 드롭다운으로 제공할 때와 버튼형으로 제공할 때 전환율이 얼마나 다른지 비교한 국내외 공식 데이터는 찾지 못했습니다. UI 패턴 효과는 상품군, 옵션 개수, 화면 크기에 따라 뒤집히는 값이라 일반해가 나오기 어려운 영역이기도 합니다.
전환율 비교는 아니지만 사용성 조사 쪽에는 참고할 값이 있습니다. 해외 조사기관 Baymard Institute는 사이즈 선택에 드롭다운 대신 버튼을 쓰라고 권고하면서, 자사 데스크톱 벤치마크 대상인 상위 93개 이커머스 사이트 가운데 71%가 버튼형을 쓰고 있고 이 비율이 2017년 63%에서 올랐다고 집계합니다. 사용성 테스트에서는 사이즈가 드롭다운 안에 숨어 있으면 이용자가 선택 자체를 지나쳐 오류 메시지를 부르고, 열어 보기 전에는 품절 여부를 알 수 없어 실망하고 나가는 장면이 관찰됐습니다. 해외 대형 사이트의 채택률과 실험실 관찰 결과이지 두 방식의 전환율 차이를 측정한 값이 아니고 국내 공식 통계도 아니므로, 버튼형이 몇 퍼센트 낫다는 근거로는 쓸 수 없습니다.
그래서 이 글은 어느 쪽이 낫다고 말하지 않습니다. 대신 두 방식이 각각 어떤 비용을 발생시키는지 정리하고, 우리 상품에서 어느 비용이 더 큰지 판단하는 절차를 씁니다.
조작 비용으로 비교하면 어떻게 갈리나
드롭다운은 화면 공간을 적게 쓰는 대신 선택에 최소 두 번의 조작이 듭니다. 열고, 고르고, 경우에 따라 닫아야 합니다. 옵션 목록이 화면을 덮는 방식이라 고르는 동안 상품 이미지와 가격이 가려지기도 합니다. 모바일에서는 목록이 길면 스크롤까지 더해집니다.
버튼형은 한 번의 탭으로 끝나고 선택지 전체가 항상 보입니다. 대신 화면 공간을 많이 씁니다. 옵션이 스무 개를 넘어가면 버튼이 화면을 여러 줄 차지해 정작 중요한 구매 버튼을 아래로 밀어냅니다. 폴드 위에 구매 버튼을 두는 배치가 일반적으로 권장되는데, 버튼형 옵션이 그 자리를 잡아먹는 상황이 실제로 자주 생깁니다.
그러면 어떤 경우에 무엇을 고르나
정리하면 세 가지 기준으로 갈립니다. 첫째, 옵션 개수입니다. 대여섯 개 이하이고 화면 두 줄 안에 들어온다면 버튼형이 조작 비용에서 유리합니다. 개수가 많고 목록으로 봐야 이해되는 구조라면 드롭다운이 낫습니다.
둘째, 옵션이 구매 결정에 얼마나 관여하는지입니다. 색상처럼 선택 자체가 구매 이유인 경우에는 옵션이 항상 보이는 편이 좋습니다. 반대로 배송 요일 선택처럼 부수적인 항목은 접어 두어도 무방합니다. 셋째, 옵션에 시각 정보가 붙는지입니다. 색상 견본이나 사이즈 실측처럼 눈으로 확인해야 하는 정보가 있으면 드롭다운의 텍스트 목록으로는 전달되지 않습니다.
UI 형태보다 더 크게 영향을 주는 요소는 무엇인가
현장에서 보면 드롭다운이냐 버튼이냐보다 품절 옵션 처리가 전환에 더 크게 작용하는 경우가 많습니다. 원하는 사이즈를 골랐는데 품절이라는 사실을 선택한 뒤에야 알게 되면 그 자리에서 이탈합니다. 품절 여부를 선택 전에 보이게 하고, 품절이라면 재입고 알림 같은 다음 행동을 그 자리에서 제시하는 구성이 필요합니다.
또 하나는 옵션 미선택 상태에서 구매 버튼을 눌렀을 때의 안내입니다. 안내 문구가 화면 밖에 뜨거나, 어떤 옵션이 비었는지 알려 주지 않으면 사용자는 버튼이 고장 났다고 판단합니다. 이 문제는 UI 형태와 무관하게 발생하고, 실기기에서 직접 해 봐야 발견됩니다.
옵션을 미리 선택해 두는 방식은 괜찮은가
조작 수를 줄이겠다고 특정 옵션을 기본 선택 상태로 두는 구성은 신중해야 합니다. 고객에게 유리한 기본값이라면 문제가 없지만, 추가 금액이 붙는 옵션이나 부가 서비스를 미리 선택해 두는 방식은 다릅니다.
공정거래위원회는 특정옵션 사전선택을 다크패턴 세부 유형으로 분류했고, 이 유형을 포함한 여섯 가지가 전자상거래법에 명시돼 2025년 2월 14일부터 시행됐습니다. 전환율을 조금 올리려다 제재 위험을 지는 선택이 되므로, 추가 비용이 발생하는 옵션은 고객이 직접 선택하게 두는 편이 맞습니다.
우리 몰에서 어느 쪽이 나은지 어떻게 검증하나
옵션 UI는 A/B 테스트로 검증하기 좋은 주제입니다. 결제 조건이나 가격을 건드리지 않으므로 고객 입장에서 불공정하게 느껴질 여지도 적습니다. 다만 유효한 실험이 되려면 A안과 B안 사이 변경 요소를 하나로 한정해야 합니다. UI 형태를 바꾸면서 품절 표시 방식이나 옵션 순서까지 손대면 결과 해석이 불가능해집니다.
기간과 표본도 미리 정합니다. 표본 크기는 기준 전환율, 검출하려는 최소 효과 크기, 유의수준, 검정력을 넣어 사전에 계산하고, 그 값에 도달하기 전에 중간 결과만 보고 종료하지 않습니다. 구글 옵티마이즈가 2023년 9월 30일부로 종료된 이후 웹사이트 A/B 테스트는 유료 도구나 쇼핑몰 솔루션 내장 실험 기능으로 해야 하므로, 도구부터 확인하고 시작하는 편이 좋습니다.