[개인프로젝트] 장바구니 담기 전환 데이터 분석 & 개선안 제안 - 번외) 유저 플로우차트 만들어보기

 

과제 최종 결과물

[20260617]_권민정__장바구니_전환율_개선_제안 (1).pdf

7.82MB

 

 

 

---

 

MVP 개요

이번 개선안의 핵심은 고가 패션 상품을 구매하려는 사용자가
PDP에서 구매 판단에 필요한 정보를 구매 의사결정 흐름에 맞게 확인하고,
장바구니에 담을 만큼의 구매 확신을 얻도록 돕는 것이다.

 

최종 개선안을 한 번에 전체 PDP 개편으로 가져가기보다,
1차 MVP에서는 최소 기능만 반영해 A/B 테스트로 효과를 검증하는 방향으로 설계했다.

---

MVP의 목적

고가 패션 상품은 단순히 디자인이나 가격만으로 구매를 결정하기 어렵다.
사용자는 장바구니에 담기 전 사이즈, 핏, 소재, 착용감, 실제 후기, 배송, 반품 가능성 등을 확인하려고 한다.

하지만 기존 PDP에서는 이런 정보들이 사용자 관점의 구매 판단 순서대로 정리되어 있지 않아,
사용자가 정보를 많이 보더라도 구매 확신으로 이어지지 않을 수 있다.

 

따라서 이번 MVP의 목적은 아래와 같다.

구분	내용
대상 사용자	30만 원 이상 고가 패션 상품을 신중하게 비교하는 사용자
대상 화면	고가 패션 상품 PDP
핵심 문제	구매 리스크를 낮추는 판단 정보가 PDP 안에서 충분히 구조화되어 있지 않음
MVP 목적	사용자가 구매 판단 정보를 더 쉽게 확인하고 장바구니에 담을 만큼의 확신을 얻도록 돕기
핵심 KPI	PDP → 장바구니 담기 전환율

---

 

1차 MVP 반영 범위

이번 MVP에서는 모든 기능을 한 번에 반영하지 않고,
정보 구조 개선 효과를 확인할 수 있는 최소 기능만 포함했다.

기능	반영 여부	이유
스티키 앵커 메뉴	반영	사용자가 원하는 판단 정보로 빠르게 이동할 수 있음
상품 정보 구조화 및 순서 재구성	반영	사용자의 구매 판단 흐름에 맞게 정보를 확인할 수 있음
후기 이미지 전용 영역 추가	반영	실제 착용감과 실물 정보를 더 쉽게 확인할 수 있음
핵심 판단 정보 요약 카드	미반영	운영·개발 공수가 커 후속 단계로 분리
후기 데이터 정보 구조화	미반영	리뷰 태깅, 분류, 데이터 정제 공수가 커 후속 단계로 분리

 

1차 MVP의 핵심은
전체 PDP를 완전히 바꾸는 것보다, 구매 판단 정보에 더 쉽게 접근할 수 있도록 만드는 것이다.

---

개선안 User Flow

단계	사용자 행동	MVP가 제공하는 경험
1	고가 패션 상품 PDP 진입	상품 요약 정보 우선 확인
2	구매 판단 시작	스티키 앵커 메뉴 노출
3	필요한 정보 선택	후기 / 상품 상세 / 혜택·배송 / 구매 유의사항으로 빠른 이동
4	판단 정보 확인	사이즈, 핏, 소재, 착용감, 실물 후기, 반품 가능성 확인
5	구매 확신 형성	구매 실패 리스크를 낮게 인식
6	장바구니 담기 여부 결정	확신이 있으면 장바구니 담기, 부족하면 추가 탐색 또는 이탈

---

Step 1. 사용자가 고가 패션 상품 PDP에 진입한다

사용자는 검색 결과, 홈, 광고, 오가닉 유입 등을 통해 PDP에 들어온다.

조건	내용
사용자 조건	고가 상품 비교 쇼핑 사용자
가격 조건	30만 원 이상 상품
카테고리 조건	패션 카테고리 상품
상황	구매 전 여러 판단 정보를 확인해야 하는 상태

 

이 사용자는 고가 상품이기 때문에 구매 실패 비용이 크고, 사이즈나 핏이 맞지 않을 경우 반품·교환 부담도 생길 수 있다.

따라서 PDP에서 필요한 판단 정보를 충분히 확인해야 장바구니 담기 행동으로 넘어갈 수 있다.

---

Step 2. PDP 상단에서 상품 요약 정보를 확인한다

사용자는 PDP에 진입하자마자 상품의 기본 정보를 먼저 확인한다.

요약 정보	사용자 질문
상품명 / 브랜드	내가 찾던 상품이 맞나?
가격	가격이 합리적인가?
할인 / 혜택	실제 구매가는 얼마인가?
대표 이미지	디자인이 마음에 드는가?
옵션	원하는 색상이나 사이즈가 있는가?
반품 / 배송	언제 받을 수 있는가?

 

이 단계의 목적은 사용자가 PDP 진입 직후
“이 상품을 더 볼 만한 이유가 있는지” 빠르게 판단하도록 돕는 것이다.

---

Step 3. 스티키 앵커 메뉴를 통해 필요한 정보로 이동한다

(기존 PDP에서는 사용자가 원하는 정보를 찾기 위해 계속 스크롤해야 했다고 가정)

예를 들어 리뷰를 보고 싶어도 리뷰 영역이 어디에 있는지 찾아야 하고,
반품 정보를 확인하고 싶어도 페이지 하단까지 내려가야 할 수 있다.

 

MVP에서는 PDP 상단 또는 스크롤 중 고정되는 영역에 스티키 앵커 메뉴를 제공한다.

 

앵커 메뉴	이동 위치
상품 요약	가격, 옵션, 기본 정보
후기 이미지 / 텍스트	후기 이미지 전용 영역 / 텍스트 내용
상품 상세	사이즈, 핏, 소재 등
혜택 / 배송	할인, 적립, 배송 조건
구매 유의사항	취소, 반품, 교환 안내

 

스티키 앵커 메뉴의 목적은 사용자가 모든 정보를 처음부터 끝까지 읽게 만드는 것이 아니다.
사용자가 지금 불안하거나 궁금한 정보로 빠르게 이동할 수 있게 하는 것이다.

---

Step 4. 상품 상세 정보를 구매 판단 순서대로 확인한다

기존 PDP에서는 상품 정보가 상세 이미지, 옵션, 리뷰, 배송 정보, 반품 안내 등으로 흩어져 있을 수 있다.

MVP에서는 정보를 사용자의 구매 판단 흐름에 맞게 재구성한다.

순서	섹션	사용자 관점 질문
1	상품 요약 정보	이 상품이 내가 찾던 상품인가?
2	후기 / 후기 이미지	실제로 괜찮은 상품인가?
3	상품 상세 정보	사이즈, 핏, 소재, 착용감이 나에게 맞을까?
4	혜택 및 배송 정보	가격, 혜택, 배송 조건이 괜찮은가?
5	구매 취소 및 반품 안내	실패했을 때 리스크를 감당할 수 있는가?

 

사용자가 구매 결정을 내릴 때 실제로 떠올리는 질문 순서에 맞춰 PDP를 재구성

---

Step 4-1. 사용자가 후기 이미지 전용 영역을 확인한다

고가 패션 상품에서 후기는 단순한 만족도 확인이 아니라,
구매 실패 리스크를 낮추는 판단 정보로 작동한다.

특히 후기 이미지는 직관적으로 아래 질문에 즉답할 수 있다.

사용자 질문	후기 이미지가 주는 정보
실제 색감이 어떤가?	상품 이미지와 실물 차이 확인
착용했을 때 핏이 어떤가?	체형별 핏 참고
소재감이 괜찮은가?	광택, 두께, 질감 유추
크기가 적당한가?	실제 착용/사용 맥락 확인
다른 사람들은 만족했나?	구매 신뢰 형성

 

이번 MVP에서 후기 이미지 전용 영역을 추가한 이유는
리뷰 접근성과 리뷰 확인 필요성을 동시에 개선하기 위해서다.

즉, 사용자가 리뷰를 “찾아봐야 하는 정보”가 아니라
구매 전에 자연스럽게 확인해야 하는 판단 정보로 인식하도록 만드는 것이 목적이다.

---

Step 5. 사용자가 구매 실패 리스크를 낮게 인식한다

고가 패션 상품 사용자가 장바구니에 담기 전 가장 크게 느끼는 부담은
잘못 구매했을 때의 손실감이다.

MVP는 아래 판단 정보를 통해 구매 실패 리스크를 낮추는 것을 목표로 한다.

구매 리스크	MVP에서 제공하는 정보
사이즈 실패	사이즈 정보, 착용 후기
핏 실패	후기 이미지, 착용감 정보
소재 기대 불일치	소재 설명, 실물 후기
색상 차이	리뷰 이미지
반품 부담	취소 / 반품 / 교환 안내
정보 탐색 피로	스티키 앵커 메뉴, 정보 재구성

 

사용자는 이 정보를 확인하면서
“이 상품을 장바구니에 담아도 괜찮겠다”는 확신을 얻는다.

---

Step 6. 사용자가 장바구니 담기 여부를 결정한다

판단 정보를 충분히 확인한 사용자는 아래 흐름 중 하나로 이동한다.

사용자 상태	행동
구매 확신이 생김	옵션 선택 후 장바구니 담기
아직 확신이 부족함	다른 섹션 추가 탐색
정보가 부족하다고 느낌	PDP 이탈
비교가 더 필요함	검색 결과나 다른 상품으로 이동

 

이번 MVP의 목표는 모든 사용자를 무조건적으로 장바구니에 담게 만드는 것이 아니다.

정보 부족이나 판단 피로 때문에 이탈하던 사용자가 필요한 판단 정보를 확인한 뒤,

합리적으로 장바구니에 담을 수 있도록 돕는 것이다.

---

A/B 테스트 관점의 User Flow

그룹	화면	사용자 경험
A 그룹	기존 PDP	기존 정보 구조 유지
B 그룹	개선 PDP	스티키 앵커 메뉴, 정보 배치 재구성, 후기 이미지 전용 영역 제공

 

 

여태까지의 내용을 기반으로 AI 에게 유저플로우 시나리오 요청

지금까지 정리한 내용을 바탕으로 A/B 테스트 관점에서의 사용자 흐름(User Flow) 시나리오를 작성해 주세요.

요구 사항은 다음과 같습니다.
- 그룹 A와 B 각각에 대한 사용자 흐름
- '예/아니오(Yes/No)' 선택에 따른 분기 시나리오 포함
- 시작점: PDP(상품 상세 페이지) 진입
- 종료점: 장바구니 이동, 앱 이탈, 재검색 등
- 논리적이고 구조적인 흐름
- 지나치게 극단의 예외 상황(edge ​​case)까지 고려할 필요는 없으나, 발생 확률이 30% 이상인 경우는 예외 상황으로 간주하여 포함해야 함

 

---

 

A 그룹 User Flow: 기존 PDP

 

A-1. PDP 진입

• 사용자가 30만 원 이상 고가 패션 상품 PDP에 진입한다.

 

A-2. 상품 기본 정보 확인

• 사용자는 상품명, 브랜드, 가격, 대표 이미지, 옵션을 확인한다.

분기 1. 상품에 1차 관심이 생겼는가?

• Yes: 상세 정보 탐색으로 이동
• No: 재검색 또는 앱 이탈

 

A-3. 기존 PDP에서 정보 탐색

• 사용자는 리뷰, 상품 상세, 혜택, 배송, 반품 정보를 직접 스크롤하며 찾는다.

분기 2. 필요한 정보를 쉽게 찾았는가?

• Yes: 구매 확신 판단으로 이동
• No: 재검색 / 다른 상품 탐색 / PDP 이탈

 

A-4. 구매 확신 판단

• 사용자는 사이즈, 핏, 소재, 후기, 반품 가능성을 확인한 뒤 장바구니에 담을지 판단한다.

분기 3. 장바구니에 담을 만큼 확신이 생겼는가?

• Yes: 옵션 선택 → 장바구니 담기
• No: 재검색 / 다른 상품 탐색 / 앱 이탈

---

 

B 그룹 User Flow: 개선 PDP

 

B-1. PDP 진입

• 사용자가 30만 원 이상 고가 패션 상품 PDP에 진입한다.

 

B-2. 상품 요약 정보 확인

• 사용자는 상품명, 브랜드, 가격, 대표 이미지, 옵션, 배송 정보를 확인한다.

분기 1. 상품에 1차 관심이 생겼는가?

• Yes: 스티키 앵커 메뉴 확인
• No: 재검색 또는 앱 이탈

 

B-3. 스티키 앵커 메뉴 확인

• 사용자는 원하는 판단 정보로 빠르게 이동할 수 있다.

앵커 메뉴	이동 섹션
후기	후기 이미지 영역
상품 상세	사이즈, 핏, 소재, 착용감
혜택 / 배송	할인, 배송 조건
구매 유의사항	취소, 반품, 교환 안내

 

분기 2. 필요한 정보로 이동했는가?

• Yes: 선택한 섹션 확인
• No: 일반 스크롤 탐색

 

B-4. 구매 판단 정보 확인

• 사용자는 후기 이미지, 상품 상세, 혜택/배송, 구매 유의사항을 확인한다.

분기 3. 구매 실패 리스크가 낮아졌는가?

• Yes: 장바구니 담기 판단으로 이동
• No: 재검색 / 다른 상품 탐색 / PDP 이탈

 

B-5. 장바구니 담기 판단

• 사용자는 필요한 판단 정보를 확인한 뒤 최종적으로 장바구니에 담을지 결정한다.

분기 4. 장바구니에 담을 만큼 확신이 생겼는가?

• Yes: 옵션 선택 → 장바구니 담기
• No: 재검색 / 다른 상품 탐색 / 앱 이탈

---

 

플로우차트 만들기

 

개발자 시절 써먹던 꿀팁 대방출 .... ✨

 

 

1. AI에 시나리오 내용을 기반으로 draw.io용 Mermaid 요청하기

 

요구사항은 세부적일수록 내가 수정할 포인트가 최소화된다!

지금까지 정리한 내용을 기반으로 A 그룹과 B 그룹의 유저 플로우차트를 만들거야.
draw.io에서 복사 붙여넣기 하면 될 수준으로 Mermaid 작성해줘.

상세 요구사항은 다음과 같아.
- 서비스에서의 화면 변화 또는 기능 접점 / 사용자 판단 또는 행동 / 분기점은 각각 다른 도형과 색상으로 만들어져야해.
도형은 아래 내용을 기준으로 하고, 색상은 적절한 것으로 골라 적용해줘.
서비스에서의 화면 변화 또는 기능 접점 : 기본 라운딩 사각형
사용자 판단 또는 행동 : 라운드 서클형
분기점 : 마름모
- 분기점에 대한 내용은 질문 형태 ("~~인가?") 로 구성해줘.
- A 그룹과 B 그룹의 핵심 차이가 직관적으로 드러날 수 있도록 만들어줘.
- 모든 선은 곧은 직선 형태여야 하고, 가로든 세로든 수평이 유지되어야 함
- 선의 시작과 끝은 도형의 가운데 (마름모일 경우 가장 가까운 꼭지점) 이어야 함
- 각 도형 유형별 크기는 텍스트에 관계없이 일정해야 하고, 최대 크기는 모눈 기준 가로/세로 모두 8칸을 넘지 않아야 함

 

 

2. AI가 전달해준 Mermaid를 복사하기

 

 

3. draw.io에서 배치 > 삽입 > Mermaid 클릭

 

 

4. 2번 내용을 붙여넣기 후 삽입 버튼 클릭 -> 초안 완성!

 

 

 

6. 원하는대로 수정하기

 

 

 

---

A/B 그룹 핵심 차이

비교 항목	A 그룹	B 그룹
정보 탐색 방식	직접 스크롤	앵커 메뉴로 빠른 이동
리뷰 접근	리뷰 영역을 직접 찾아야 함 이미지와 텍스트 혼합 되어 직관적이지 않음	후기 이미지 영역 분리 제공으로 접근성/직관적 인지 강화
정보 구조	기존 순서 유지	구매 판단 순서로 재구성
주요 이탈 원인	정보 탐색 어려움, 확신 부족	구매 목표에 상품 자체가 불일치, 정보 자체가 부족
기대 효과	기존 전환율 유지	구매 판단 부담 감소, 장바구니 전환율 개선