11번가 검색 개편: 더 잘보이는 상품 리스트
커머스 앱의 검색 상품 리스트 개편
안녕하세요. 10월 28일, 11번가의 검색 페이지가 새롭게 바뀌었습니다. 오늘은 그 변화의 이야기를 전해드리려 해요. 검색창에 키워드를 입력하는 순간, 고객은 이미 ‘선택’을 준비하고 있어요. 이번 개편은 그 선택이 더 빠르고, 더 확신 있게 이루어지도록 검색의 구조와 흐름을 새롭게 다듬은 프로젝트예요.
11번가 검색,
더 ‘보기 쉽고 이해하기 쉬운’ 화면으로
— UI·UX 개편으로 바뀐 검색 리스트 이야기
검색은 쇼핑의 출발점입니다. 그만큼 ‘어떤 정보가 먼저, 어떻게 보이느냐’는 고객 경험을 좌우하죠.
이번 11번가 검색 UX·UI 개편은 바로 그 ‘보이는 질서’를 새로 정리한 작업이었습니다.
많은 것을 보여주는 대신, 고객이 빠르게 판단할 수 있는 정보만 남긴 것이 핵심입니다.
AS-IS '미쟝센 샴푸' 검색 시
‘덜 보이지만, 더 잘 보이게’
기존 11번가 검색 결과에는 생각보다 많은 정보가 담겨 있었는데요.
딜 플래그, 브랜드명, 할인명칭, 최대할인가, 가격, 배송비, 배송정보, 리뷰, 구매 수, 가격비교 버튼까지.
상품을 판단하는 데 모두 필요한 정보이지만, 각 요소가 제 역할을 하고 있었는지, 그리고 그에 맞는 UI 형태였는지에 대한 점검이 필요했습니다. 그래서 이번 UI 개편은 정보의 ‘양’을 줄이고, ‘효과’를 높이는 방향으로 진행했습니다. 고객이 화면을 복잡하게 해석하지 않아도, 한눈에 핵심을 파악할 수 있는 구조를 만드는 게 목표였습니다.
이미지가 말하는 정보 — 썸네일 영역 개선
이미지는 작아졌지만, 정보는 더 커졌습니다.
상품 이미지는 고객이 가장 먼저 마주하는 정보입니다. 이전에는 이미지만 크게 보여서 상품 정보가 밀려났다면, 지금은 이미지 크기를 약간 줄이고 텍스트 정보의 영역을 넓혔습니다.
이미지에는 살짝 그레이 컬러를 넣어 상품과 정보가 하나로 묶여 보이도록 했습니다. 스크롤할 때도 정보가 더 질서 있게 정리되어 보입니다. 또한 ‘랭킹 라벨’을 새로 추가해, 지금 보고 있는 상품이 카테고리 안에서 어느 위치에 있는지 선택의 기준을 바로 알 수 있습니다.
이미지 크기 148px -136px“보이는 금액 = 실제 최저가”
검색 결과에서 고객의 시선이 가장 먼저 머무는 곳은 ‘가격’입니다. 하지만 이전 화면에서는 ‘할인명칭’, ‘금액’, ‘최대할인가’, ‘할인율’이 뒤섞여 보여서 어떤 금액이 실제 구매가인지 한눈에 알아보기 어려웠습니다.
이번 개편에서는 가격 표기를 완전히 새로 정의했습니다.
이제는 고객이 보는 금액이 곧 최저가입니다. 복잡한 계산 없이, 고객의 눈에 들어오는 금액이 곧 최대 할인 금액이며, 가격 비교 없이도 “아, 이게 제일 저렴하구나”를 직감할 수 있습니다.
이전 화면에서는 가격 관련 정보가 네 개의 영역으로 나뉘어 있었습니다.
‘할인명칭’, ‘할인율·금액·배송비’, ‘최대할인가’, ‘객단가’가 각각의 고정된 위치를 차지하면서, 공간이 비어도 위로 붙지 않고 영역을 그대로 유지했죠. 그래서 화면 해상도나 디바이스 크기에 따라 줄바꿈이 불규칙하게 발생하고, 가격 정보가 끊겨 보이는 문제가 있었습니다.
이번 개편에서는 이 네 가지 정보를 하나의 유연한 영역으로 묶었습니다. 디바이스 해상도에 따라 ‘최대할인가’ 옆에 ‘객단가’가 붙거나 정보가 자연스럽게 재배치되도록 구조를 변경했습니다. 이제 금액 영역이 불필요하게 커지지 않으면서도, 고객은 가격 정보를 한눈에 이해할 수 있게 되었습니다.
혜택 정보를 정리하고, 더 잘 보이게
상품 정보 안에서 혜택은 구매를 결정짓는 중요한 요소입니다. 하지만 이전 화면에서는 라벨과 문구가 많고 제각각이어서 정보가 흩어져 보였습니다. 이번 개편에서는 핵심만 남기고, 흐름을 정리하는 일부터 시작했습니다. 상품명 위에 붙어 있던 플래그(딜 라벨)는 화면 하단으로 이동해 정보를 읽는 흐름을 방해하지 않도록 했으며, 그동안 상품 상세에서만 확인할 수 있었던 포인트 적립 정보를 리스트에서도 바로 볼 수 있도록 개선되었습니다. “최대 000P 적립”처럼 구체적인 숫자를 함께 보여줘 혜택을 더 명확하게 인식할 수 있습니다.
이제 혜택 정보는 더 단순하고, 고객이 한눈에 이해할 수 있는 방식으로 정리되었습니다.
버튼도 ‘맥락’을 담아야 합니다
이전의 ‘가격비교’ 버튼은 단순히 기능을 알리는 요소였습니다. ‘가격비교 NN’ 처럼 숫자만 보여줘서, 고객이 이 버튼을 눌렀을 때 어떤 상품을 볼 수 있는지 알기 어려웠죠.
이번 개편에서는 버튼의 역할을 정보 안내자로 바꿨습니다. 가격비교 버튼 안에 ‘공식’, ‘빠른배송’, ‘리뷰좋은’ 같은 문구를 함께 넣어, 고객이 더 나은 조건의 상품이 있다는 사실을 미리 인지할 수 있도록 했습니다.
버튼 하나를 눌러보기 전에도, “이 상품엔 더 좋은 선택지가 있겠구나”를 자연스럽게 느낄 수 있게 된 거예요.
작은 텍스트 변화지만, 고객의 탐색 흐름을 끊지 않고 이어주는 중요한 장치가 되었습니다.
결과적으로, 덜 보이지만 더 잘 보입니다
이번 검색 개편은 “많이 보여주는 페이지”를 만드는 일이 아니었습니다. 고객이 빨리 이해할 수 있는 화면을 만드는 일이었죠. 불필요한 요소를 덜어내고, 중요한 정보만 명확히 보이게 하는 것. 그 단순한 원칙이 11번가 검색의 새로운 기준이 되었습니다. 앞으로도 고객이 믿고 선택할 수 있는 검색 경험을 만들어 갈 수 있도록 노력하겠습니다.
TO-BE*이번 개편은 모바일 우선으로 적용되었어요. PC는 순차적으로 업데이트될 예정이에요.
