UX 개선 파이프라인
A · B · C 비교

A/B Test 종합 비교

3개 라운드의 개선 verdict, 핵심 지표, 전체 페르소나 인터뷰를 한곳에서 비교합니다.

종합 비교

개선 포인트 중심 화면 비교

8건 · A→B 4 · B→C 4

verdict별로 문제, 판정, 변경점, 대표 스크린샷을 묶었습니다. 스크린샷은 우선 고정된 persona/turn 증거를 사용하고, 누락된 경우에만 행동 로그 기반 자동 매칭으로 대체합니다.

1차 → 2차 (A → B) 개선

1차 → 2차 (A → B)수용a-p1

비교하기 즉시 피드백 + 하단 고정 트레이

비교 버튼 클릭 시 토스트 알림 + 화면 하단 고정 바 표시. 아이템 0개일 때만 트레이 숨김.

문제

A에서는 비교 목록에 담겼는지, 어디서 실행해야 하는지 즉시 알 수 없어 반복 스크롤이 발생했습니다.

변경점
  • 비교 추가 후 즉시 피드백 제공
  • 하단 고정 트레이로 CTA 위치 고정
  • 선택 수량을 계속 노출
Before · A 원본

대표 증거 스크린샷

After · B 개선1

개선 후 대표 스크린샷

1차 → 2차 (A → B)수용a-p2

필터 UI 열림 상태 시각화

필터 패널 open/close를 chevron 회전 + 핑크 선택 상태(border-[#ff2e98] bg-[#fff5f7])로 표시.

문제

필터를 눌렀는데 열린 상태와 적용 상태가 분명하지 않아 사용자가 같은 버튼을 반복 클릭했습니다.

변경점
  • 필터 버튼 활성 상태 강조
  • chevron 방향으로 open/close 표현
  • 선택된 조건 칩을 핑크 틴트로 유지
Before · A 원본

대표 증거 스크린샷

After · B 개선1

개선 후 대표 스크린샷

1차 → 2차 (A → B)수용a-p3

가격 구간 필터 칩 추가

월 3만원 이하 / 3~5만원 / 5만원 이상 칩을 필터 영역에 추가. 기본 정렬(premium-first)은 비즈니스 전략상 유지.

문제

저예산 탐색자가 고가 요금제 위주 노출에서 벗어나지 못해 가격 기준 탐색을 수행하기 어려웠습니다.

변경점
  • 가격 구간 칩 추가
  • premium-first 정렬은 유지
  • 저가 탐색을 별도 경로로 보완
Before · A 원본

대표 증거 스크린샷

After · B 개선1

개선 후 대표 스크린샷

1차 → 2차 (A → B)조건부a-p5

세그먼트 퀵필터 칩 (시니어·청소년·복지)

메가메뉴 변경 대신 요금제 목록 상단 칩 형태로 진입점 추가. '시니어/복지', '청소년/학생', '전체' 균등 배치.

문제

연령/상황별 요금제를 이름만으로 추론해야 해서 청소년, 시니어, 복지 대상 사용자가 많이 돌아다녔습니다.

변경점
  • 상단 세그먼트 칩으로 빠른 진입 제공
  • 메가메뉴 구조는 변경하지 않음
  • 기존 칩 스타일로 시각 체계 유지
Before · A 원본

대표 증거 스크린샷

After · B 개선1

개선 후 대표 스크린샷

2차 → 3차 (B → C) 개선

2차 → 3차 (B → C)수용c-p1

비교 페이지가 선택 화면의 planList를 그대로 사용

/plan/all-list/compare의 별도 PLANS 배열 제거. /mobile/plan/mplan/plan-all/data.ts의 planList를 canonical source로 두고 adapter에서 dataDetail/tethering/call/sms/membership/features 등 비교 전용 필드 보강.

문제

선택 화면의 요금제 ID와 비교 화면의 데이터 소스가 달라 사용자가 담은 요금제가 비교 화면에서 사라졌습니다.

변경점
  • 선택 화면 planList를 canonical source로 지정
  • 비교 전용 필드는 adapter에서 보강
  • 선택 화면 요금제 삭제 없이 compare 쪽을 확장
Before · B 개선1

대표 증거 스크린샷

After · C 개선2

개선 후 대표 스크린샷

2차 → 3차 (B → C)수용c-p2

선택 화면 — plan.id 보존 + 플로팅 바 + ids 쿼리 CTA

/mobile/plan/mplan/plan-all에서 비교 선택 시 plan.id를 변환 없이 compareList에 저장. 플로팅 바에 선택된 요금제 이름·수량 유지. 비교 CTA는 /plan/all-list/compare?ids=<선택한 plan ids>로 이동.

문제

비교 목록에 담는 순간 원래 plan.id가 보존되지 않아 비교 CTA가 잘못된 ids 쿼리를 만들었습니다.

변경점
  • plan.id를 변환 없이 compareList에 저장
  • 선택 이름과 수량을 플로팅 바에 유지
  • CTA가 ids 쿼리를 그대로 전달
Before · B 개선1

대표 증거 스크린샷

After · C 개선2

개선 후 대표 스크린샷

2차 → 3차 (B → C)수용c-p3

비교 페이지 — ids 쿼리를 같은 planList에서 조회

/plan/all-list/compare가 ids 쿼리를 받아 선택 화면과 같은 planList 기반 데이터에서 조회. 선택 화면 모든 plan id는 비교 화면에서도 유효. 누락 시 adapter 매핑을 추가하여 해결 (선택 화면에서 삭제하지 않음).

문제

비교 페이지가 자체 PLANS 배열만 믿어 선택 화면의 유효 ID를 무효로 취급했습니다.

변경점
  • ids 쿼리를 planList 기반으로 조회
  • 선택 화면 모든 ID를 비교 화면에서 유효화
  • 누락은 adapter 매핑 추가로 해결
Before · B 개선1

대표 증거 스크린샷

After · C 개선2

개선 후 대표 스크린샷

2차 → 3차 (B → C)수용c-p4

선택 화면에도 없는 ID만 복구 상태 처리

parseCompareIds가 valid ids와 unknownIds를 분리. unknownIds가 있을 때만 비교 페이지 상단에 작은 안내 박스를 띄우고, 유효 ID는 정상 비교 진행.

문제

잘못된 ID 하나 때문에 전체 비교가 깨지거나 사용자가 담은 정상 항목까지 잃는 상황이 있었습니다.

변경점
  • valid ids와 unknownIds 분리
  • 유효 항목은 계속 비교
  • 무효 ID만 작은 복구 안내로 처리
Before · B 개선1

대표 증거 스크린샷

After · C 개선2

개선 후 대표 스크린샷