brunch

You can make anything
by writing

- C.S.Lewis -

by charian Jun 20. 2016

쇼핑몰 이탈률 잡기 첫 번째!

우커머스에 preloader를 달자!

시작하기 전 전제조건을 좀 설정해야겠다.

본 내용은 워드프레스의 우커머스 이야기다.

본 내용은 워드프레스의 Jupiter 테마를 사용했을때의 이야기다.

결제 PG는 이니시스와, 연동 시스템은 아임포트를 사용하였다.

본 내용은 개발자가 보기에 매우 웃긴 이야기일 수 있다.


앞서 꾸준히 이야기하고 있지만, 본 매거진은 개발자가 아닌 디자이너가 쇼핑몰을 만들어 가는 이야기이다.

매출과 마케팅, UX와 UI 등 전반에 걸쳐 어떤 부분을 보완하고 있는지 차근차근 이야기하고 있다.

즉, 개발자가 아니므로 본 이슈 조차도 나에겐 꽤 큰 의미가 있기에 글을 작성하고 있다.


사건의 발단은 이렇다.

어제까지의 결제페이지

결제 페이지에서 정상적으로 주문자 정보를 입력하고 결제 방법을 선택 후 주문 확정을 누르게 되면 연동되어 있는 이니시스의 결제창이 올라오게 되어 있다.

이니시스의 결제창이 올라오게 되면 화면 전반에 반투명한 흰색의 레이어가 오버레이 되고 그 위로 결제창이 뜨게 된다.


반투명한 레이어가 결제 정보 위를 덮은 모습


반투명한 레이어 위에 pg 결제창이 나타난 모습

자 여기서 문제가 발생한다.

일반적인 경우에선 보통 여기에서 결제를 쭈욱 진행하게 되는데, 인터넷이나 뭐 어떤 기타 등등의 사정에 의해 딜레이가 발생하는 경우가 문제다.

결제창이 늦게 뜨면 사용자는 그저 반투명 레이어를 쭈욱 보고 있어야만 하는 참사가 발생한다.

고객은 시스템이 정지한 것으로 판단하고 이탈.

혹은 새로고침 후 재결제 시도.

대강.. 내 쇼핑몰을 예로 들면 10~15%의 이탈이 발생했다.


아 놀랍도다... 15%의 이탈이라니!

그래서 오늘 loader를 삽입한 내용을 공유할까 한다.


우커머스는 위 반투명한 레이어를 blockUI라는 녀석을 사용하여 작동시킨다.

wp-content/plugins/woocommerce/assets/js/jquery-blockui에 존재하는 jquery.blockUI.jsjquery.blockUI.min.js를 참조한다.

압축된 녀석을 사용하므로 우커머스는 min을 사용하게 되니, 작업 편의상 blockUI.js 의 내용을 모두 min으로 복사하여 사용하도록 하자.


나는 대략 저런 녀석으로 작업을 하였음

기본적인 구조는

js에서 div 컨테이너 안에 blockUI blockOverlay라는 클래스를 가진 녀석을 만드는데 그 녀석이 저 반투명 레이어에 해당한다.

본래 그 내부에 메시지가 작성되어 들어가야 하는데 개발자가 아니므로 그런 건 잘 모르고 그냥 하드코딩으로 넣었다.


jquery.blockUI.min.js 의 301번째 줄에

lyr2 = $('<div class="blockUI blockOverlay" style="z-index:'+ (z++) +';display:none;border:none; opacity: 1 !important;margin:0;padding:0;width:100%;height:100%;top:0;left:0;">'+'<div class="checkout_indicator"><div class="mk-li-rocket"></div><div class="checkout_indicator_label">진행중입니다.<br>결제창을 닫지 말고 기다려주세요!</div><div class="checkout_indicator_loader"><img src="https://heebeandry.com/wp-content/uploads/2014/08/294.gif"></div></div>'+'</div>');

로 작성해 넣었다.


스타일은

.checkout_indicator {

    width: 80%;

    position: fixed;

    left: 40%;

    margin-left: -30%;

    background: #ef4723;

    padding: 25px 0px;

    border-radius: 6px;

    text-align: center;

    color: #fff;

    margin-top: 20px;

}

.checkout_indicator .mk-li-rocket {

    font-size: 50px;

    margin-bottom: 10px;

}

.checkout_indicator_label {

    line-height: 18px;

}

.checkout_indicator_loader {

    padding-top: 15px;

}

.blockOverlay {

    opacity: 1 !important;

    background: rgba(255, 255, 255,.4) !important;

}

이렇게 넣어 주었다.

position을 fixed로 작성한 것은 모바일을 대응하기 위함이다.

아.. 이런 건 강의를 통해 알려주는 것이 좋을 텐데.. 블로그로 설명하려니 참 어렵다.

내부 메시지를 강제로 하드코딩해서 넣어주는 방식이다.


저렇게 하드 코딩해서 넣어주면 결제 방식과 현재 금액 위에도 저 레이어가 발생하게 되는데,

그것을 방지하기 위해 아래의 css를 삽입해 주었다.

.woocommerce-checkout-review-order-table .blockOverlay {

    opacity: 0 !important;

}

.woocommerce-checkout-payment .blockOverlay {

    opacity: 0 !important;

}


그리고 현재 작동 중임을 알리기 위해 gif 로더 이미지도 작업하여 넣어주었다.

http://preloaders.net/


apng 형식으로 만들면 좋았을 텐데, 구버전 브라우저(아 쉣)에선 지원을 하지 않으므로 가급적 gif로 만드는 것이 좋다.

나 같은 경우 windows 스러운 가로로 점이 이동하는 애니메이션을 배경을 투명으로 하여 흰색으로 선택해 만들어두었다.


자, 참 쉽죠?(?!)


원리만 알면 사오 년 차 혹은 오륙 년 차 디자이너는 어렵지 않게 할 수 있다.

물론 개발자에겐 껌일 수 있겠다.

다만, 이 글을 읽는 학생이나 사회 초년생 혹은 이삼 년 차 디자이너에겐 어려울 수 있는데..

감히 말하자면 음.. "쏘리"


새롭게 적용된 로더를 체험해보시려면 아래의 링크를 클릭클릭.

회원가입 후 주문 고고!

https://heebeandry.com/


charian 소속Heebean 직업디자이너
구독자 3,485
매거진의 이전글 소셜 바이럴, 08리터 마케팅 진행 후기

매거진 선택

키워드 선택 0 / 3 0

댓글여부

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