brunch

You can make anything
by writing

C.S.Lewis

by 윤동구리 Jan 20. 2024

[서비스 분석] 팝업

무신사, 29cm, Kurly, 오늘의 집, etc

    많은 E커머스에서는 진입 시 메인 페이지에서 팝업을 띄워 고객의 이목을 집중 시키고 정보를 전달하고자 한다. 각 요소별로뜯어보며 서비스 별 팝업을 분석해보고자 한다.


1. 팝업 바텀시트 vs 레이어

    대부분의 경우 바텀시트로 팝업을 띄우고 있었다. 주목도를 높이기 위해 바탕을 살짝 어둡게 딤(dim) 처리하고 기존 화면이 사용 불가한 모달의 형태이지만, 여전히 기존 화면이 보이기에 하나의 뷰포트(viewport) 안에 많은 정보를 노출하고 싶을 때 사용한다. 무신사는 바텀 시트의 크기가 적당해 기획전 내용도 한 눈에 볼 수 있으나, 29cm는 바텀시트가 커서 기획전 내용이 가려진다는 점이 아쉽다.

    컬리는 화면 중앙에 뜨는 레이어 팝업을 사용하여 주목도를 더욱 높였다. 꼭 노출하고 싶은 내용이 있을 경우 유용하지만 메인 화면을 가려버린다. 주로 특별한 프로모션이나 혜택을 노출할 때 사용하고, 브랜드 콘텐츠나 단순 알림을 노출할 때는 잘 사용하지 않는다. 한편, 오늘의 집은 바텀시트를 사용했지만 화면을 완전히 가려버리는 사이즈라 레이어 팝업과 기능이 거의 유사하다고 할 수 있다.

(좌) 무신사, 29cm 바텀시트 팝업  (중) 컬리 레이어 팝업  (우) 오늘의 집 전면 바텀시트 팝업



2. 노출 개수

    팝업 방식에 따라서 노출 개수도 상이했다. 바텀시트 팝업의 경우 롤링하여 여러 개의 내용을 노출하는 경우가 많았는데 보통 5개 내외인 것으로 보인다. 점 혹은 숫자 인디케이터(indicator)를 사용하여 총 팝업의 개수를 표시했다. 여러 내용을 노출하면서도, 한 번의 클릭만으로 팝업 창을 탈출할 수 있다는 장점이 있다.

    반면 레이어 팝업은 하나의 팝업에 하나의 정보만을 담고 있었다. 주목도를 높이기 위해 롤링을 잘 사용하지 않으며 팝업도 단 한 개만 띄우는 경우가 많았다. 다만 컬리의 경우 레이어 팝업을 2개 이상 띄우는 경우가 있었는데. 메인 화면을 진입하기까지 두 번 클릭을 해야한다는 것이 조금 피로도가 높았다.

(좌) 점 인디케이터  (우) 숫자 인디케이터



3. 노출 방법 순서 vs 랜덤

    대부분의 서비스는 매 번 지정한 순서에 따라 팝업이 노출되었다. 서비스 제공자가 강조하고 싶은 정보를 순서대로 전달할 수 있지만, 뒤 쪽 팝업은 노출이 잘 안되 효율이 떨어진다는 단점이 있다.

    반면 무신사에서는 들어갈 때마다 팝업의 순서가 바뀌었다. 무신사에서는 딱 5개까지만 노출이 가능한 것으로 보이는데. 5개 이상의 팝업이 등록되어 있을 때는 어떤 팝업이 노출되는 지도 랜덤인 것 같았다. 여러 브랜드를 취급하고 많이 노출하기 위해, 또 노출의 공정성을 위하여 랜덤 노출 방식을 택한 것이라 생각한다. 물론 필요에 의해 수동으로 전시 순서를 설정할 수도 있을 것이라 추측해본다.



4. 노출 대상 비회원 vs 회원

    고객 별로 혜택이 상이하기에 특정 고객에게만 팝업을 노출할 수도 있다. 비회원 혜택(가입 유도)을 회원에게 노출할 필요가 없기에 비회원만을 타겟하는 경우가 많았다. 비로그인을 비회원이라고 구분하기도 하는데 이럴 경우 회원이 비회원 한 경우를 배제하기 어렵다. 그래서 UTID를 기준으로 회원번호와 매칭되지 않는 UTID를 비회원이라 정의하기도 한다.

    회원 중에서도 특정 연령대, 성별 혹은 방문 횟수, 구매 경험에 따라 다른 혜택 정보를 노출하기도 한다. 서비스의 목표에 따라 고객 세그먼트는 상이하겠지만, 서버 부하를 막기 위해 정의한 고객 세그먼트를 DW에 보관하는 방식을 택할 것이라 추측한다.



5. 전시 영역 메인 vs 상품 페이지

    메인이 노출 효율이 제일 높기에 주로 메인 페이지에서 팝업이 떴다. SSFshop의 경우 특정 브랜드 프로모션을 할 경우에는 브랜드 관에서 팝업을 띄우기도 했다. 다른 패션 버티컬과는 다르게 자사 브랜드가 있어 브랜드 개별 콘텐츠나 프로모션을 진행하는 경우가 많기 때문이라 추측한다. 목적에 따라 노출 페이지를 다양화 할 수 있지만 구매/탐색 동선에 방해되지 않도록 하는 것이 매우 중요하다. 따라서 상품상세 페이지나 장바구니 페이지, 주문서 페이지에서 단순 콘텐츠 팝업은 지양하는 것이 좋다.

    컬리나 쿠팡에서는 상품을 장바구니에 담았을 때, 장바구니에서 주문하기를 눌렀을 때 바텀시트가 뜨는데. 동일한 형태를 띠고 있지만 그 목적이 매우 다르다. 상품 탐색과 구매를 돕기 위한 것으로 브랜드나 프로모션을 알리기 위한 팝업과는 별개로 보는 게 맞아보인다.

(좌) 컬리 (우) 쿠팡 상품상세 페이지, 장바구니 페이지



6. 노출 주기

    팝업은 고객의 시선을 끌어잡기도 하지만 메인 페이지 진입을 방해하기도 한다. 원치 않는 팝업이 계속 뜰 경우 오히려 고객이 바로 이탈되는 결과를 낳기도 한다. 피로도가 쌓이지 않도록 팝업 노출 주기를 설정하는 게 중요한데. 백 오피스에서 노출 주기 자체를 일 1회, 주 1회, 전시 기간 내 1회, 월 1회로 설정할 수도 있고 고객이 직접 클릭하도록 '오늘 하루 미 노출' 버튼을 제공할 수도 있다. 일부 서비스는 홈 버튼 클릭시 마다 팝업이 뜨는 반면, 앱을 완전히 종료하고 재 진입 할 때만 팝업이 뜨는 경우도 있다.



7. UI

    주로 이미지 1개와 텍스트(타이틀,내용)으로 구성되어 있었는데, 최대 노출 가능한 텍스트 수를 제한하고 컬러를 활용하여 간결하고 집중하게 정보를 전달하고 있다. 29cm의 경우 일부 팝업에 한해서는 이름을 개인화 하여 노출하고 있었지만, 팝업 내용까지 개인화 된 것 같지는 않았다. 반면 무신사는 문구를 개인화 하지는 않지만 연령에 따라 개인화 하여 서로 다른 팝업을 노출하는 것으로 보인다.

    백 오피스에서 간단하게 팝업을 설정할 수 있도록 규격이 정해진 경우가 대부분이었으나, 오늘의 집의 경우는 이미지로 제작하여 다채롭게 팝업을 노출하고 있었다. 팝업을 한 번에 하나밖에 띄우지 않으니 매 번 이미지를 제작해도 공수가 크게 소요되지 않기 때문이 아닐까 싶다.

    대부분은 팝업 외 영역을 클릭하면 자동으로 닫기가 되고, 팝업 영역을 클릭하면 해당 링크로 연결이 됐는데. 29cm만 '지금 확인하기' CTA를 클릭하지 않으면 연결이 안되서 불편하다고 느꼈다.



* APP으로 확인해 본 부분으로 실제 운영과 상이할 가능성이 높습니다!

브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari