프론트엔드
상품 조회 25% 향상시킨 온스타일 상세페이지 개편 비하인드
두줄요약
온스타일 상품 상세페이지를 정보 구조와 개발 프레임워크까지 함께 개편했습니다. 그 결과 고객당 조회 페이지 수가 25% 늘고 클릭과 주문 지표도 개선했습니다.
문제 상황
- 상품 상세페이지가 주문, 배송, 방송 정보, 프로모션이 결합된 복잡한 구조로 정보 과부하와 동선 연결 부재가 발생
- 일부 패션 상품군의 별도 템플릿 운영과 레거시 프론트 구조로 인해 개발 생산성과 확장성이 저하
- 혜택, 쿠폰, 배송 정보가 분산되어 고객 인지와 액션 유도가 약한 상태
해결 방법
- 상품의 핵심 구매요소를 온스타일만의 차별화 정보와 혜택으로 재정의하고 상·하단 구조로 정보 위계 재배치
- 추천 상품, 방송 게이트, 브랜드관, 프로모션, 검색어 노출로 추가 탐색 동선 설계
- 백엔드를 포함한 컴포넌트 기반 구조로 단일화하고, backbone.js를 vue.js로 전환해 로직 정리와 모듈화를 진행
성능/운영 포인트
- 로컬 빌드 시간을 10초대로 단축해 개발 생산성 개선
- 상품 페이지 내 추천 클릭 18% 증가, 전체 클릭 35% 증가, 고객당 조회 페이지 수 25% 증가
- 주문 고객 비중 5% 증가와 함께 내부 운영자가 정보 확인하기 쉬운 구조로 개선