데이터 기반 개인화 추천 (3/3): UX편

기술의 발전은 UX 디자이너에게 엄청난 도전과 변화를 이끌어 냈습니다. 이전까지 UX 디자이너의 업무 목표가 작은 스마트폰 화면에 맞춰 최적의 디자인과 정보 구조를 설계하는 것이었다면, 이제는 기술의 도움을 받아 고객의 진정한 심리와 콘텍스트(Context)를 분석하여 경험을 설계하는 데에 집중하는 것이 되었죠. 특히 인공지능과 대용량 실시간 데이터 처리 기술은 e-커머스, 금융, 제조 등 다양한 분야에서 개인화 혁신을 불러왔고 이러한 기술들을 어떻게 사용자 관점에서 유의미하게 해석하고 기능화할 수 있을지를 풀어내는 키맨(Key Man), ‘UX 디자이너’의 역할이 날로 중요해지고 있습니다.

많은 사람들이 단순히 UX 디자이너의 업무를 사용자가 보기에 아름답고 편리한 디자인을 설계하는 것이라고 생각하지만, 서비스 전반의 유용성, 편의성, 감성 등을 고려하여 기능을 설계하여야 하기 때문에 매우 고난이도의 업무 과업들이 제시되고 있습니다. 기술에 대해 깊이 있게 이해해야 하고 기술을 설계하는 과정은 물론 예를 들어 추천 엔진이라면 엔진이 풀어내는 기술적 언어를 어떻게 사용자의 입장에서 해석할 수 있을지 등 프로젝트 전반에 관여하게 됩니다.

고객 여정을 획기적으로 줄여주는 개인화 추천 UX

e-커머스에서 개인화 추천 UX는 고객이 수십 개의 페이지를 거치지 않아도 즉각적으로 원하는 행동을 취할 수 있도록 합니다. 또한 사업적으로 매출 향상을 유도하죠. 예를 들어 고객의 취향에 꼭 맞는 원피스를 추천 알고리즘을 통해 메인에서 바로 제안할 수 있는데, 고객 입장에서는 원피스를 탐색하기 위해 수십 번의 검색과 상세 상품 보기 과정이 사라지게 됩니다. 삼겹살을 구매하려는 고객에게는 삼겹살 상품 상세 페이지나 장바구니에서 ‘쌈장, 마늘, 고추, 상추’ 등을, 마라탕 소스를 구매하려는 고객에게는 ‘땅콩 소스와 납작 당면’을 함께 추천하여 다시 검색을 하거나 탐색하는 과정을 줄이며 ‘고객이 귀찮다고 생각되는 행동’을 없애줍니다.

고객의 구매 여정 별로 어떤 니즈와 불편함이 있는지를 분석하고, 어떤 상품 추천 알고리즘을 적용해야 태스크를 줄여줄 수 있을지를 도출하는 것이 e-커머스 UX 디자이너의 역할이라고 말할 수 있습니다.

UX 디자이너가 반드시 알아야 할 추천 로직의 기본과 예시

e-커머스의 상품 추천은 크게 3가지의 기본적인 로직으로 구성됩니다. 상품과 상품, 고객과 상품, 검색어와 상품의 연관성을 바탕으로 추천을 할 수 있는데요 상세 알고리즘은 이 글의 ‘트렌드와 기술편’을 참고해주세요. 

고객의 주요 여정 별로는 구체적으로 어떻게 상품 추천 UX를 실현할 수 있을까요? 메인과 카테고리, 검색결과, 상품 상세, 장바구니로 구분하여 설명 드리겠습니다.

메인

고객의 탐색을 서포트해주는 역할을 하며 상품 상세 또는 카테고리 페이지로 재유입 될 수 있도록 ‘최근 행동 이력’에 기반하여 개인화 추천을 제공해야 함 (예: 최근 클릭한 상품이 지닌 속성/카테고리와 유사한 상품 추천)

검색결과 / 카테고리

구매를 유도하는 키워드 및 기획전 추천이 목표이며, 상품 수가 저조한 경우 다른 키워드를 제시함으로써 보완적 역할을 함 (예: 자사에 서울우유 취급 상품이 부족한 경우, 취급 상품 수가 많은 매일 우유를 추천하여 보완할 수 있음)

상품상세

구매 전환율을 높이기 위해 누적 클릭 수를 늘려야 함. 유사 대체 상품과 보완 상품을 추천하여 병매를 유도해야 함 (예: 삼겹살 구매 고객에게 쌈장과 상추를 추천)

장바구니

이미 상품을 담았더라도 추가 탐색을 유도할 수 있어야 하며 최종적으로는 장바구니 객단가 향상이 목표 (예: 자주 구매 상품, 할인율이 높은 상품, 장바구니에 담은 상품 중 연관 상품 등을 추천) 

1. 고객의 탐색을 서포트하고 추가 탐색을 유도하는 메인

메인은 고객을 카테고리나 상품 상세 페이지로 이동하도록 도와주는 역할을 합니다. 고객의 최근 행동 이력(검색어, 상품 상세 클릭)을 바탕으로 개인화할 수 있습니다. e-커머스에서 가장 개인화 추천이 잘 구성되어 있다고 일컬어지고 있는 아마존닷컴을 예로 설명 드리겠습니다.

아마존 닷컴은 메인에서 고객의 상품 상세 페이지 클릭 데이터를 기반으로 유사 상품을 추천하고 있습니다. 한걸음 더 나아가 획기적으로 구매 전환율을 높이기 위해 고객이 최근 보았던 상품들 중에서 할인율이 높은 상품 등을 추천하는 전략을 취하기도 합니다.

많은 e-커머스들이 더이상 메인에 카테고리 별 상품을 단순히 늘어놓지 않으며 아마존을 비롯하여 쿠팡, 위메프, 11번가 등 다양한 국내외 서비스들이 메인을 개인화 추천 영역으로 활용하고 있습니다.

2. 기획전과 키워드를 제안하여 콘텍스트를 상기시킴으로써 구매를 유도하며, 다른 브랜드나 키워드를 제안하여 보완 역할을 하는 검색결과/카테고리

검색어와 카테고리에 기반한 연관 추천 상품을 제공할 수도 있습니다. 특정 키워드의 부족한 상품 검색 결과를 보완하는 역할을 수행하기도 하는데요, 위에서도 언급한 것처럼 오뚜기 카레 검색 결과의 상품 수가 부족하면 청정원 카레를 추천할 수 있습니다. 오뚜기 카레를 검색하였는데 상품 검색 결과가 0개라면 청정원 카레 상품을 보여줌으로써 상호보완 역할을 수행하도록 유도할 수 있습니다. 고객의 상품 검색 결과 품질에 따른 이탈을 막아주죠. 추가적으로 연관 기획전이나 브랜드를 추천하여 더욱 다채로운 구매 경험을 제안할 수 있습니다.

다시 아마존닷컴의 검색결과 예시를 살펴볼까요? 아마존에서 레티나 세럼을 검색한 결과 페이지입니다. 검색결과 중간 중간 ‘베스트셀러’ 상품을 노출하고 있었습니다. 너무나 많은 상품 선택지들이 있을 때 타인이 많이 구매한 상품을 노출해주어 더욱 빠르게 어떤 상품을 살지 의사결정하도록 도와주는 역할을 합니다. 나아가 핫딜 상품과 유사 브랜드 기획전을 추천하여 빠른 의사결정을 돕고 있네요.

검색 결과와 유사한 연관 상품을 추천하기도 합니다. 레티나 세럼 외에 페이스 리프팅 세럼이나 안티에이징 세럼 등을 추천한 것을 이미지를 통해 알 수 있습니다. 또는 상품 탐색 결과에 기반하여 연관 상품을 제안하기도 합니다. 제가 탐색했던 상품의 동일 브랜드가 먼저 노출되어 있네요.

3. 대체 상품과 보완 상품을 추천하여 병매를 유도하는 상품상세

상품 상세에서는 고객의 상품 탐색 여정을 줄이면서도 끊임없이 연관 상품을 제시하는 것이 중요합니다. 탐색중인 상품의 유사한 대체재를 제시하여 원하는 상품이 아닐 경우 추가 탐색을 할 수 있도록 유도하고, 원하는 상품이 맞더라도 함께 구매할 수 있는 보완 상품을 제시하여 업셀링을 유도해야 합니다. 아마존은 크게 추가 상품 탐색과 업셀링을 위해 상세 페이지에서 다음 추천 전략들을 취하고 있습니다.

4. 상품 추가 탐색 및 고객 객단가 향상을 목표로 하는 장바구니

장바구니는 첫째도 둘째도 고객의 객단가* 향상입니다. 고객이 하나만 살 것을 두 개, 세 개 사도록 만들어야 하죠. 아마존은 이러한 장바구니 목표를 잘 달성하고 있습니다.

*객단가 : 고객이 1회 구매 시 평균적으로 결제하는 금액을 의미합니다. 매출에서 결제수를 나누면 객단가가 산출됩니다.

아마존의 장바구니에서는 해당 상품을 구매한 사용자가 동일 브랜드 상품군 중 함께 많이 구매한 상품을 제안합니다. 또한 역시나 연관 상품들도 노출하여 추가 구매를 유도하죠. 바로 ‘Add to Cart’ 버튼을 두어 별도 상품 상세 페이지 탐색 과정을 거치지 않도록 한 것이 눈에 띕니다.

개인화 추천 영역을 어디에 배치해야할까? 뷰저블로 페이지 분석하여 UI 배치 전략 도출하기

그렇다면 위에서 말씀드린 다양한 페이지 별 개인화 추천 영역은 어느 곳에 배치해야 할까요? 뷰저블을 활용하여 추천 영역을 배치할 최적의 위치를 찾아봅시다. 뷰저블의 스크롤 히트맵, 무브 히트맵, 패스 플롯을 활용해볼까요?

스크롤 히트맵

고객이 많이 도달하는 영역 또는 오래 체류하는 구간의 주변에 배치하여 시선을 유도합시다. 많이 도달할 수록 히트맵의 색이 붉고 오래 체류할 수록 선 그래프의 선이 높습니다. 보통 e-커머스는 상세 페이지의 경우 구매하기 CTA의 주변으로 체류시간이 높게 나타나는데, 해당 영역 주변으로 추천 영역을 둘 수 있습니다. 

무브 히트맵 

고객의 마우스 탐색이 많이 일어나는 영역의 근처에 두어 추가 탐색을 유도합시다. 고객의 마우스 탐색이 몰릴 경우 스크롤 히트맵과 마찬가지로 붉은 색으로 탐색 궤적이 표기됩니다. 스크롤 히트맵 상으로 고객의 체류 시간이 적더라도 호버가 많이 일어난다면 ‘빠르게 활발히 탐색을 하는 구간’으로 볼 수 있습니다. 보통 상품평 영역이 이러한 구간인데요, 이 주변으로 추천 상품들을 배치할 수 있습니다.  

패스 플롯(Path Plot) 

고객의 탐색 여정과 정확한 콘텐츠 탐색 위치를 파악하여 추천 영역을 탐색 여정의 초반에 둘지, 중반에 둘지, 후반에 둘지 정보의 우선순위를 결정합시다. 패스플롯으로 탐색 순차와 콘텐츠를 살펴봅시다. 일단 탐색 상품에 대해 다 둘러보게 한 뒤에 추천 상품을 제시할 것인지, 상품의 요약정보를 파악한 후 바로 추천 상품을 둘 것인지 등 정확한 고객의 탐색 여정을 기반으로 한 정보의 우선순위를 구성할 수 있습니다. 

오늘은 데이터 기반 개인화 추천 중에서도 UX 디자이너가 깊이 관여해야하는 추천 기능에 대해 아마존닷컴을 예시로 살펴보았습니다. 나아가 뷰저블로는 어떻게 분석할 수 있을지 히트맵 분석 아이디어를 전달드렸습니다. 다음에도 더욱 풍성한 글로 돌아오겠습니다. 이상 뷰저블이었습니다.