[쇼핑몰 구축기] 원페이지 체크아웃(One Page Checkout) 구현으로 구매 단계 줄이기

이전에 바로구매 버튼을 통해서 쇼핑 단계를 줄이는 방법에 대해서 살펴 보았는데요. 이렇게 구매 단계를 줄이는 다양한 방법이 존재합니다.

오늘 소개하려는 원페이지 체크아웃(One Page Checkout)은 장바구니 확인과 결재 단계를 동시에 처리할 수 있는 방법입니다.

[결제 단계 최적화] 우커머스 원페이지 체크아웃(One Page Checkout) 구현 방법

쇼핑몰 구축기를 연재하는 이유

최근 지인이 워드프레스를 이용해 쇼핑몰 구축을 시도하면서 배웠던 배웠던 다양한 경험들을 해당 쇼핑몰 블로그에 연재해 왔는데요.

쇼핑몰이 상품만 파는 것이 아니라 쇼핑몰을 방문하는 고객들에게 열가지 유용한 정보를 제공하는 블로그의 효용성이 높다는 점을 십분 활용하고, 처음 시작하는 쇼핑몰의 신뢰성을 주기 위해 비록 삽질이지만 삽질기를 낱낱히 공개하기로 했다고 하네요.

그 쇼핑몰의 주소는  https://puripia.com로 아직도 공사중이기는 합니다.) 

쇼핑몰 구축 시 도와주었던 인연으로 그 쇼핑몰을 알리고 쇼핑몰 구축 경험담을 보다 널리 알리기 위해서 여기 happist.com에도 같이  공유합니다. 조금 사심이 있기는 합니다.

[결제 단계 최적화] 우커머스 원페이지 체크아웃(One Page Checkout) 구현 방법

여기에서는 결제 단계 최적화 기법의 하나로 원페이지 체크아웃에 대해서 알아봅니다.

체크아웃 페이지를 구성하는 방식은 체크아웃 단계를 몇 페이지로 구현했느냐에 따라서 원페잊 체크아웃과 다단계 체크아웃(Multi-step checkout)으로 나눌 수 있습니다.

1. 원페이지 체크아웃(One Page Checkout)이란

원페이지 체크아웃이란 구매 상품 리뷰(구매 상품 갯수 및 구매 여부 조절), 청구 및 배송지 입력 그리고 결제 수단까지를 한 페이지에서 모두 진행하는 것을 말합니다.

여러 단계를 거치지 않고 한 페이지에서 진행되므로 상대적으로 빠르고 간편하게 결제를 진행할 수 있습니다.

• 상대적으로 클릭해야하는 횟수가 줄어듭니다.
• 여러 단계를 거치지 않기 때문에 보다 쉬워 보입니다.

반면에 부정적인 면도 분명히 존재합니다.

• 원페이지 체크아웃은 상대적으로 길어지기 때문에 고객들이 부담을 느낄 수 있습니다. 부담을 느끼고 쇼핑을 중단할 가능성도 있죠.
• 상대적으로 길기 때문에 고객들이 어디까지 했는지 모를 수 있고, 혼란스러워 할 수 있습니다. 이는 앞에서 지적 사항과 연관이 깊습니다.
• 사이트 속도가 느려집니다. 한페이지에 많은 정보를 제공하려고 하기 때문에 속도가 느려질 수 있고 이는 고객들이 쇼핑을 중단할 수 있는 위험성을 가지고 있습니다.
• 분석하기가 애매합니다. 원페이지 체크아웃의 어느 단계에서 쇼핑을 중단했는지와 같은 중요한 정보를 얻기 힘듭니다.

2. 원페이지 체크아웃 구현 방법

원페이지 체크아웃을 가장 잘 구현하려면 어떻게 해야할까요?

2.1. WooCommerce One Page Checkout(79$)

컨셉적으로 원페이지 체크아웃은 우커머스 원페이지 체크아웃(WooCommerce One Page Checkout) 플러그인이 잘 구현되어 있다는 생각입니다.
원페이지 체크아웃 컨셉에 충실한 플러그인이라고나 할까요?

여기에서는 Choose Your product, Billing Details, Additional Information, Your order, Proceed checkout을 한 페이지에서 구현해 놓고 있습니다.

아래 이미지를 참조해 보시죠.

2.2. Woocommerce one page checkout and layouts

얼마전에 배포되기 시작한 완전히 새로 등장한 플로그인이 Woocommerce one page checkout and layouts입니다.

이 플러그인은 한 페이지 내에서 Billing details, Shipping methods, Payment Method, Conform Your Order, Cart total, Proceed To Paypal과 같은 단계를 한페이지에서 보여주고 있습니다.

사용해보지는 않았는데 참고로 공유드립니다.
아래는 플러그인 소개 시 공유하는 원페이지 체크아웃 이미지입니다.

3.3. WooCommerce Direct Checkout Pro(10$)

최근에 WooCommerce express checkout이라는 이름으로 새롭게 런칭하고 있는 “우머커스 다이렉트 체크아웃 프로(WooCommerce Direct Checkout Pro) 플러그인은 “바로구매” 기능과 “원페이지 체크아웃”기능을 동시에 제공하고 있는 플러그인입니다.

제가 사용하는 플러그인으로 가격은 상대적으로 저렴하고, 싼 가격만큼 원페이지 체크아웃 기능은 섬세하지 못합니다. 특히 모바일 최적화가 아직 이루어지 않았습니다.

아래 초기 세팅 후 모바일에서 보여지는 모습압니다.

이 플러그인의 모바일 최적화에 대해서는 아래 글을 참조해 조정하면 좋을 것 같습니다.

[쇼핑경험 개선] 우커머스 쇼핑몰에 바로구매 버튼 추가로 구매 단계 줄이기

여러가지 튜닝을 거치면 모바일에서 이와 같은 모습으로 보여질 수 있습니다.