brunch

클릭의 흐름까지 설계한 11번가 패션뷰티 개편

by 십일번가 DESIGN

안녕하세요. 11번가 패션뷰티탭이 새롭게 개편되었습니다!

브랜드, 상품, 기획전을 더 감도 있게 탐색할 수 있도록 설계한 ‘패션뷰티탭 2.0’을 소개합니다.

이번 개편은 고객의 쇼핑 흐름을 중심으로 상품 → 카테고리 → 브랜드를 자연스럽게 연결하고,

나만의 취향에 맞는 상품을 추천받아 만나볼 수 있도록 구성된 것이 특징이에요.

fb_image_info_01.png



“하나의 탭으로 보여주는 패션뷰티”의 시작


먼저 패션뷰티 서비스의 첫 시작인 ‘패션뷰티탭 1.0’버전부터 소개해드릴게요.

11번가에는 오랫동안 패션과 뷰티를 전담하는 공간이 따로 없었는데요. 고객들은 명품 중심의 'OOAh', 스트릿 트렌드 중심의 '#ootd' 등 다양한 버티컬(vertical) 서비스를 오가며 원하는 상품을 찾아야 했어요.

고객에게 더 풍성한 쇼핑 경험을 제공하려면 백화점, 대형 제휴사의 브랜드까지 아우르는 일관된 뷰가 필요했습니다. 그렇게, 2024년 5월 '패션뷰티탭'이 탄생했습니다.


이미지1.png



저희는 고객의 쇼핑 흐름 안에서 ‘패션’과 ‘뷰티’를 한 공간에서 보여주고 싶었습니다.

기존 11번가에는 각기 다른 전문관(OOAh, #ootd)이 있었지만, 브랜드 중심으로 탐색하려는 고객에게는 오히려 단편적인 정보로 느껴졌어요.

‘패션뷰티탭 1.0’에서 다양한 브랜드 콘텐츠를 화보 플레이로 풀어내며 시도했지만, 고객의 탐색 흐름을 더 자연스럽게 잇기에는 아쉬움이 있었습니다. 콘텐츠는 풍부했지만, 흐름을 유도하는 구조적 연결 고리는 더 정교할 필요가 있었어요.


fb_image_info_02.png





패션뷰티탭 2.0, 어떤 모습으로 바뀌었을까?


1.0 오픈 후 5개월 뒤, 고객 중심의 탐색 구조를 다시 설계한 ‘패션뷰티탭 2.0’버전을 선보이게 됩니다.

고객이 하나의 상품을 통해 브랜드와 카테고리, 관련 기획전까지 자연스럽게 이어질 수 있고 운영 효율성을 고려한 전략적 구성으로 패션뷰티 2.0에서 새롭게 설계하였습니다.


특히 아래 4가지 방향에 중점을 두었습니다.


01. 상품 → 카테고리 → 브랜드로 이어지는 탐색 흐름 강화

고객이 하나의 상품만 보고 끝나지 않게 관련된 카테고리나 브랜드, 기획전까지 연결되길 기대했어요.

패션뷰티탭 2.0은 이 흐름을 명확하게 설계해, 고객의 다음 클릭을 자연스럽게 유도합니다.


02. 고객 관심 기반의 맞춤형 모듈 조합 구성

단일 추천이 아닌, 관심 있는 주제나 브랜드, 장바구니 이력 등을 기반으로 맞춤형 모듈을 조합합니다.

탭 전체가 고객 맞춤형으로 구성되기 때문에 처음 진입했을 때부터 ‘내 취향이 반영된 공간’이라는 인상을 받을 수 있습니다.


03. 탐색 결과를 확장할 수 있도록 연관 콘텐츠를 계층적으로 배치

탭 내 주요 진입 지점에 OOAh, #ootd 등 브랜드별 관문을 배치하여 버티컬 게이트웨이를 강화하였고 기획전, 베스트, 브랜드, 개인화 추천 등 다양한 콘텐츠를 연결하되, 동시에 너무 많은 정보를 한 번에 던지지 않도록 순차적으로 탐색할 수 있는 흐름을 설계했습니다.


04. 딥구좌 및 광고상품 연계

패션뷰티 전용 딥구좌 운영을 통해 브랜드 홍보 및 광고 상품과의 연결 지점 확보하여 고객에게는 ‘내 취향에 맞는 패션/뷰티 공간’으로, 브랜드에게는 ‘더 넓은 노출 기회’로 기능합니다.


fb_image_info_03.png





브랜드, 고객, 모두를 위한 설계


셀러(브랜드)

브랜드 입장에서 패션뷰티탭에 노출된다는 건 곧, 고객에게 한 번 더 도달할 수 있는 기회를 의미합니다.

정제된 큐레이션 구조 속에 브랜드/상품을 함께 소개할 수 있는 홍보 채널이자, 개인 맞춤형 추천을 통해 실질적인 구매 연결을 유도하는 퍼포먼스 채널로 가능합니다.

또한, 포커스 클릭 광고와 브랜드 AD 상품이 노출되는 영역과 전략을 세분화해, 브랜드의 니즈에 맞는 방식으로 참여할 수 있도록 구성했습니다.


사업부(운영자)

운영자 입장에서는 자동화된 추천 모듈을 통해 효율적인 운영이 가능해졌습니다.

예를 들어, 고객이 최근 본 상품 중 딜 진행 중인 상품을 자동으로 보여주는 모듈, 최근 본 상품과 함께 보면 좋을 상품을 자동 추천하는 모듈, 내가 자주 보는 카테고리/브랜드/기획전을 기반으로 콘텐츠를 보여주는 모듈까지, 자동화와 수동 운영이 적절히 조화된 구조로 운영 부담을 줄였습니다.

또한, 브랜드의 무드가 잘 보여야 하는 빌보드 배너의 경우 텍스트, 딤드, 내비게이션 등 디자인 요소를 개발로 고정 처리해, 운영자는 이미지 중심의 콘텐츠 운영에만 집중할 수 있도록 가이드를 제공했습니다.


고객

고객은 자신의 관심사에 맞춘 콘텐츠로 탐색 구조가 직관적으로 바뀌었다는 경험을 하게 됩니다.

모듈별로 영상/카드/UI 패턴을 다양화해 고객이 자연스럽게 머물고 탐색할 수 있도록 설계했습니다.

더 많은 상품을 ‘보는’ 것을 넘어서, 자신에게 맞는 상품을 ‘발견하고 연결’하는 경험을 제공합니다.


fb_image_info_04.png





디자인으로 만들어낸 탐색의 흐름


하나의 탭 안에 ‘패션’과 ‘뷰티’, 두 개의 독립된 세계를 공존시킨다는 건 결코 단순한 일이 아니었습니다.

초기 기획 단계부터 참여해 서비스 탐색의 흐름 과정에서 끊임없이 질문을 던졌습니다.


- 패션과 뷰티, 정말 하나로 담을 수 있을까?
- 고객이 상품을 탐색하고 혜택을 확인하고 구매까지 도달하도록 흐름을 설계하려면?
- 브랜드는 어디에, 어떤 방식으로 보여야 고객의 클릭을 이끌 수 있을까?


작은 것 하나까지 놓치지 않으려는 노력 끝에, 다양한 형태의 UI를 시도했습니다.

리스트형 카드, 화보 중심의 배치, 스와이프형 상품, 다양한 조합을 실험했고 패션뷰티 카테고리 특성에 맞게 이미지 기반으로 탐색하는 고객에게 더 직관적으로 다가갈 수 있는, 실제로 스크롤 완주율도 가장 높게 나타나는 현재 구조로 선택하였습니다.


패션뷰티 탭은 기획부터 디자인, 개발, 운영까지 전 단계에 걸쳐 조율이 필요했던 프로젝트였습니다.

특히 흩어져 있는 패션뷰티 백데이터 코드 재정비와 구조적 제약이 있는 11번가 표준 UI 시스템(PUI) 내에서 원하는 레이아웃을 구현하기 위해, 퍼포먼스와 구현 가능성 사이에서 개발과 긴밀하게 협업하며 구조와 스타일을 반복 조정했습니다.

기획과 디자인 이후, 실제 개발 단계에서도 화면 정의서와 QA(품질 점검), 퍼블리싱 리뷰 등 전체 프로세스에 참여했습니다. 정식 오픈 직전까지도 서비스 품질을 높이기 위해 디테일을 반복 점검했고, 다양한 시나리오에서 고객 흐름이 끊기지 않도록 전환율 중심으로 개선을 이어갔습니다.









그럼 고객의 반응은 어땠을까요?


10월 28일 오픈 이후 사용자 반응은 명확했습니다.
‘탐색이 편해졌다’는 피드백이 늘어났고, 10월 28일부터 11월 11일까지 UV(순 방문자 수)는 160.2% 증가하였고 PV(총 페이지뷰)는 240.4% 증가하였어요.
고객이 더 오래 머무르고, 더 많이 눌러보는 흐름이 만들어진 거죠.

페이지 내 모듈 중 ‘내 관심 상품 딜’, ‘VT 추천’, ‘내 관심 카테고리’, ‘겟잇특가’, ‘추천 반복 모듈’, ‘랭킹’ 등
고객 관심 기반의 맞춤형 구성은 전체 거래의 약 80%를 차지했습니다.

단순히 유입이 늘어난 게 아니었어요.
고객 한 사람당 상품 노출 수, 클릭 수, 구매액 모두가 올라간 확실한 경험 개선의 결과였습니다.


fb_image_info_05.png


앞으로의 우리는


오픈 이후에도 지속적으로 데이터를 보며 패션뷰티 서비스를 개선하고 있는데요.

인기 브랜드들과의 긴밀한 협력을 통해 고객이 더 많은 혜택을 경험할 수 있도록 하겠습니다.

11번가 안에서 고객이 패션과 뷰티를 감도 있게 즐길 수 있는 그 경험, 계속해서 진화해 나가겠습니다.


패션뷰티 홈 바로가기 →

* 11번가 패션뷰티는 모바일 버전만 있습니다.






keyword
작가의 이전글11번가 검색 개편: 더 잘보이는 상품 리스트