기획 용어 3부: 이커머스 페이지 기획 시 알아야 하는 기본 용어

세 번째, 이커머스 페이지 기획을 위한 기본 용어 알아가세요!

기획 용어 시리즈물 세 번째 시간! 이커머스(상품 쇼핑몰) 페이지에 들어가는 결제 정산 페이지는 어떤 종류의 서비스이던 공통으로 들어가는 영역입니다. 그만큼 금융과 이커머스 영역은 일거리도 많고 금전과 관련되어있어 기획 설계에 까다로운 경우도 많습니다. 이번 편에서는 해당 영역에 기획하기 위한 기초 용어를 알아봅니다.

PDP & PIP 페이지

Product Detail Page 또는 Product Information Page의 약자로, 이커머스 서비스인 경우, 상품 상세 정보 페이지를 의미합니다. 해당 페이지에는 특정 상품에 대해서만 상세정보 또는 사용 시 안내 콘텐츠, 그리고 체크아웃 페이지로 연결되는 기능을 주로 제공하고 있습니다. 결제로 이어지는 바로 이전 화면인 만큼, 중요성이 크고 정보 콘텐츠가 많은 만큼 사용자가 지루하지 않게끔 잘 구성해줄 필요가 있습니다.   

Checkout 페이지

체크아웃 페이지는 PDP 또는 PIP페이지에서 구매 결정으로 이어지는 페이지를 말합니다. 결제 구매로 이어지는 페이지만큼 UX, UI기획이 중요한 페이지입니다. 인증 결제 수단을 선택하는 UI, 구매하신 상품에 대한 명시, 그리고 배송 관련 정보 입력이나 방법 선택 등을 포함하고 있죠. 해당 화면의 스텝은 최대한 짧고 명료하게 제공하여 사용자 이탈을 최소화해야 하며, 특히 대게 서비스들은 인증 결제 프로세스를 간단히 하여 사용자 불편 또는 이탈을 줄이려고 하고 있습니다. 체크아웃 페이지는 장바구니 페이지 혹은 PDP에서 구매하기 버튼 선택 시 진입하며 프로세스가 시작됩니다

롤링

롤링의 방법에는 자동 롤링과 수동 롤링 방법이 있습니다. 보통 서비스의 베너 영역을 보시면 사용자가 직접 제스처를 통해 탐색할 수 있는 베너가 있고, 또 N초마다 자동으로 전환되어 사용자가 수동으로 전환시킬 수 없는 베너도 있습니다. 이렇듯, 롤링은 대게 광고 이벤트 배너 UI 설계 시, 많이 사용되는 방법이며, front UI에서 롤링된다면 Back단에서는 자동 롤링인지 수동 롤링인지 그리고, 자동 롤링이라면 몇 초마다 전환시킬 것인지 지정해주는 기능이 있어야겠죠? 

그 밖에도 마지막 아이템에서 좌로 롤링 시, 첫 아이템으로 전환인지 막아 놓을 것인지 등도 기획 시 꼭 명시해주시길 바랍니다. 

Height값?

Height값이란, 화면에서 보이는 높이 영역을 의미합니다. UI를 설계하다 보면, 아코디언 형태로 특정 영역이 확장되기도 하고 축소되기도 하죠? 이럴 경우, Height값 영역을 어떻게 노출될 것인지는 늘 생각하고 설계해주시길 바랍니다. 패딩과 더불어 디자인/기획 시, 늘 고려해야 할 부분입니다. 

N뱃지

N뱃지란, 두 가지 UI 형태가 있습니다. N으로 노출되거나 정확히 몇 개인지 명시해주는 N1, N100… 형식으로 나눌 수 있습니다. 해당 기능은 새로운 아이템을 사용자에게 알리는데 중요한 기능이므로 마케터들이 사랑하는 UI이기도 합니다. 메인 화면에 신규 메뉴인 경우, 또는 현재 이벤트 중인 신규 상품인 경우 해당 UI를 적극적으로 활용하는 것을 권유드립니다! 

Flag & Label

리스트 항목을 탐색을 하면, 상기 그림과 같이 딱지 같은 것을 발견하실 수 있습니다. 해당 아이템이 인기 상품인지 최신 상품인지 등의 정보를 포함하고 있는 내용을 말하는데, 보통 플래그 혹은 라벨이라고 합니다. 이 기능 또한 어드민에서 설정 시, 관련 상품 아이템에 노출하게 되겠습니다. 

뒤에 “상태 값”에서도 설명하겠지만 배송 준비 같은 정보를 리스트 화면에서 제공하면, 상세 화면에 사용자가 들어가지 않고도 빠르게 해당 아이템의 정보를 파악하는데 용이하게 하는 기능도 합니다. 

상태 값

상태 값이란, 아이템의 진행 단계를 말하는 것으로, 앞장에서 말한, Flag 도는 라벨 UI로 나타내거나, text 그대로 노출될 수 있습니다. 구체적으로 설명드리자면, 특정 아이템의 상태를 지정하는 것을 일컫습니다. 

설계 시, 이 부분은 매우 섬세하게 기획해야 하는 부분으로, 점검 기능이 있다면, 점검 중인지, 점검 완료인지, 점검 전인지, 진행 단계를 지정해주는 작업입니다. 더 예를 들어보면, 상품을 주문한 경우, 결제 완료인지, 배송 중인지, 배송 완료 중인지를 기획해줘야 하는 것이며, 쿠폰을 예시를 든다면, 해당 쿠폰이 유효기간이 만료되었는지, 현재 사용 가능한 쿠폰인지 등을 지정해줄 필요가 있겠습니다. 

빠른 인증/보안 해제 단계   

아이폰의 지문인식, 페이스 인증, 음성명령 같은 생체인식 방법과, 패턴 입력, 지문 입력, ARS 인증… 다양한 인증 방법이 있지만! 이러한 쉬운 인증은 모바일 앱 초기 진입과 등록과정에서 사용자 경험을 쉽게 만들고 있습니다! 한 가지 단적인 예로, 핀란드의 유니클(unicul)은 얼굴인식 스캔을 통해 30초에서 5초까지 계산하는 시간을 단축한 결과가 있구요! (참고: 소비자의 67%가 평균 11개의 사용자 이름과 패스워드를 기억해야 합니다) 

사용자의 빠른 선택을 돕는 AI쇼핑& 탐색

페이스북, GrokNet(그로그넷) 컴퓨터 비전 시스템을 이용해 사용자 개인 맞춤형 이미지를 검색하고 순위를 매겨요. 사용자가 마음에 드는 특정 옷장, 가구, 전자제품의 사진을 업로드하면 정확한 아이템을 또는 비슷한 아이템을 찾아 즉시 구매하죠 오차 없는 사이즈, perfitt perfit은 발과 신발 내부 사이즈를 정확하게 측정하여 분석 시스템과 매칭 AI솔루션으로 사용자 발에 맞는 신발을 추천하여 사용자의 선택을 용이하게 합니다! 

오프라인 가게에서 결제 시, 빠른 스캔

계산대에서 가맹점의 QR코드를 계산하기 위해 스캔하는 데 사용하거나 신용카드 결제라고 말해서 카드 정보를 근처 BLE 비콘을 통해 가맹점에 보낼 수 있습니다! 비대면 모바일앱 서비스 결제 시, 프로세스 최소화 네이버 통장, 카드 등록과 간단 인증을 통해 최종 결제 진행이 빨라졌어요!

리워드&혜택&포인트 적립

스타벅스 앱은 사용자들이 신속하게 결제할 수 있고 지출 내역과 매장 위치를 알 수 있게 하는 대시보드! 사용자에게 다음번 보상 이정표를 미리 가늠해 볼 수 있는 그래프와 애니메이션으로 무료 음료 보상을 보여줘 재방문을 유도합니다! 스타버스 앱을 통해 등록된 스타벅스 카드의 바코드를 POS기에 부착된 바코드 스캐너로 스캔!

정산하기

여러 결제 방법이 있다. 무통장입금, 카드결제, QR결제 등... 각 서비스마다 차이점은 다르지만 카드결제가 용이하게 설계되어있는 경우가 많습니다. 보통 청구, 고지, 결제, 정산 순으로 진행됩니다. 결제 후, 정산되는 시스템은 Front사용자 앱 보다 기사 앱이나 운영자 앱에서 필요할 가능성이 큽니다. 특히 결제 서비스 정책을 세울 때, 정산이 정확히 언제 되는지 확인될 필요가 있습니다. 서비스 탈퇴 시, 계산서 발행을 목적으로 정산을 위한 데이터를 적재되며 유효기간 확인이 필수이며, 복잡한 Back-end(백엔드) 구조와 시스템을 파악해야 Front의 사용자 경험을 디자인합니다. 

정리하면!

Back-end, Front-end 화면 기획에 필수로 알아야 하고, 또 필드에서 소통을 위해 알고 있어야 할 기본 개념들을 알아보았습니다. 결제, 정산 프로세스와 주문 배송단계에 대해 잘 숙지하고 있어야 합니다. 쇼핑 이커머스 페이지 설계 시, QR 같은 스캔 방식과 간편 결제, 무통장 입금 등 여러 결제방식에 대해 늘 고려하여 기능을 붙일 필요가 있습니다.