NEW 기획 디자인 개발 프로덕트 아웃소싱 프리랜싱

기획

기획 용어 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 같은 스캔 방식과 간편 결제, 무통장 입금 등 여러 결제방식에 대해 늘 고려하여 기능을 붙일 필요가 있습니다.

댓글 0

NINA.C

UX를 전공하고 UXUI, 서비스 기획자, 강사, 작가 활동을 하는 NINA입니다. 대중성 있는 UX를 연구하며 디자인 비즈니스를 구상하고 있습니다.

당신이 사인하기 전에 알아야 할 것들: ②일을 맡길 때

아웃소싱

당신이 사인하기 전에 알아야 할 것들: ①일을 할 때

아웃소싱

2022년 주목해야 할 IT 키워드 10가지

기획

비정규 직원과 커뮤니케이션 툴로 협업하는 방법

아웃소싱

UX측면에서 잘 만들어진 B2C사례 9부, 텍스트 콘텐츠 플랫폼의 UX는?

디자인

초보자를 위한 스토리보드 작성 팁

기획

외주 잘 맡기는 방법 3부: 외부 업체와 Co-working 하기

아웃소싱

ERP 중심의 물류전산화 2부, ERP 제품 집중 분석

프로덕트

UX측면에서 잘 만들어진 B2C사례: 8부, 피그마와 캔바

디자인

UX측면에서 잘 만들어진 B2C사례: 7부, 노인을 위한 UX는 있다

디자인

UX측면에서 잘 만들어진 B2C사례: 6부, 테슬라의 경험디자인

디자인

외주 잘 맡기는 방법 2부: 분쟁과 리스크를 줄이는 9가지 팁

아웃소싱

기획 용어 10부, JD로 보는 직무 개념 및 용어

기획

기획 용어 9부, AI 음성인식 기획 기초 용어

기획

ERP 중심의 물류 전산화 1부, ERP 가볍게 다가가기

프로덕트

기획 용어 8부, 팝업과 오류 유형 정리

기획

기획 용어 7부, 메뉴 혹은 내비게이션 개념 정리

기획

기획 용어 6부: 시작하기 프로세스 기초개념 알기

기획

외주 잘 맡기는 방법 1부: 외주 계약 전에 꼭 보세요!

아웃소싱

코로나로 인해 고용 및 비즈니스 환경은 어떻게 변화하고 있을까?

아웃소싱

UX측면에서 잘 만들어진 B2C사례: 5부, 교통서비스와 길안내

디자인

화면 정의와 기능 정의 3부, 유용한 상세 가이드 꿀팁

기획

기획 용어 5부: 인터랙션/제스처 알아가기

기획

‘아웃소싱’ 하기 전에 꼭 알아야 할 것들

아웃소싱

어디까지 왔나요? AI 적용사례

개발

프리랜서가 겪는 문제와 해결방안

프리랜싱

알아두면 좋을 IT관련 웹사이트들: 5부, IT 채용 정보 웹사이트

아웃소싱

화면 정의와 기능 정의 2부, 기획자를 위한 디스크립션 작성 원칙

기획

UX측면에서 잘 만들어진 B2C사례: 4부, 나이키 러닝 NRC & Fitbit

디자인

알아두면 좋을 IT관련 웹사이트들: 4부, UX디자이너가 포트폴리오를 만들 때

디자인

기획 용어 4부: 검색 기획/설계를 위한 기본 용어 알고 가기

기획

왜 아웃소싱인가?

아웃소싱

알아두면 좋을 IT관련 웹사이트들: 3부, 기획자의 웹사이트 10개

기획

UX측면에서 잘 만들어진 B2C사례: 3부, 카카오 모빌리티와 이브이패스

디자인

화면 정의와 기능 정의 1부, 기획자를 위한 화면 정의 원칙

기획

알아두면 좋을 IT관련 웹사이트들: 2부, IT 트렌드 세터를 위한 웹사이트 추천

기획

자율주행 기술의 현황: 3부, 자율주행차 디자인이 다른 점은?

개발

알아두면 좋을 IT관련 웹사이트들: 1부, 성장러를 위한 IT 웹사이트

기획

자율주행 기술의 현황: 2부, 움직이는 스마트폰, 무인 자동차!

개발

UX측면에서 잘 만들어진 B2C사례: 2부, 토스와 기업은행 아이원뱅킹

디자인

기획 용어 2부: UI 기획 시 알아야 하는 기초 용어

기획

기획 용어 1부: 웹, 앱 UI 설계 전 알아야 하는 기본 개념

기획

자율주행 기술의 현황: 1부, 완전 초짜들을 위한 자율주행 이해하기!

개발

UX측면에서 잘 만들어진 B2C사례: 1부, 디터람스 제품 디자인

디자인

프리랜서와의 프로젝트를 안정감 있게 이어가려면

기획

같은 분야를 다룬 글들을 권해드려요.

요즘 인기있는 이야기들을 권해드려요.

일주일에 한 번!
전문가들의 IT 이야기를 전달해드려요.

[구독하기] 버튼을 누르면 개인정보 처리방침에 동의됩니다.

일주일에 한 번! 전문가들의 요즘IT 이야기를 전달해드려요.

[구독하기] 버튼을 누르면 개인정보 처리방침에 동의됩니다.