과제 최종 결과물
MVP 개요
이번 개선안의 핵심은 고가 패션 상품을 구매하려는 사용자가
PDP에서 구매 판단에 필요한 정보를 구매 의사결정 흐름에 맞게 확인하고,
장바구니에 담을 만큼의 구매 확신을 얻도록 돕는 것이다.
최종 개선안을 한 번에 전체 PDP 개편으로 가져가기보다,
1차 MVP에서는 최소 기능만 반영해 A/B 테스트로 효과를 검증하는 방향으로 설계했다.
MVP의 목적
고가 패션 상품은 단순히 디자인이나 가격만으로 구매를 결정하기 어렵다.
사용자는 장바구니에 담기 전 사이즈, 핏, 소재, 착용감, 실제 후기, 배송, 반품 가능성 등을 확인하려고 한다.
하지만 기존 PDP에서는 이런 정보들이 사용자 관점의 구매 판단 순서대로 정리되어 있지 않아,
사용자가 정보를 많이 보더라도 구매 확신으로 이어지지 않을 수 있다.
따라서 이번 MVP의 목적은 아래와 같다.
| 구분 | 내용 |
| 대상 사용자 | 30만 원 이상 고가 패션 상품을 신중하게 비교하는 사용자 |
| 대상 화면 | 고가 패션 상품 PDP |
| 핵심 문제 | 구매 리스크를 낮추는 판단 정보가 PDP 안에서 충분히 구조화되어 있지 않음 |
| MVP 목적 | 사용자가 구매 판단 정보를 더 쉽게 확인하고 장바구니에 담을 만큼의 확신을 얻도록 돕기 |
| 핵심 KPI | PDP → 장바구니 담기 전환율 |
1차 MVP 반영 범위
이번 MVP에서는 모든 기능을 한 번에 반영하지 않고,
정보 구조 개선 효과를 확인할 수 있는 최소 기능만 포함했다.
| 기능 | 반영 여부 | 이유 |
| 스티키 앵커 메뉴 | 반영 | 사용자가 원하는 판단 정보로 빠르게 이동할 수 있음 |
| 상품 정보 구조화 및 순서 재구성 | 반영 | 사용자의 구매 판단 흐름에 맞게 정보를 확인할 수 있음 |
| 후기 이미지 전용 영역 추가 | 반영 | 실제 착용감과 실물 정보를 더 쉽게 확인할 수 있음 |
| 핵심 판단 정보 요약 카드 | 미반영 | 운영·개발 공수가 커 후속 단계로 분리 |
| 후기 데이터 정보 구조화 | 미반영 | 리뷰 태깅, 분류, 데이터 정제 공수가 커 후속 단계로 분리 |
1차 MVP의 핵심은
전체 PDP를 완전히 바꾸는 것보다, 구매 판단 정보에 더 쉽게 접근할 수 있도록 만드는 것이다.
와이어프레임 보완
기존 제작했던 와이어프레임 초안 (AS-IS)
와이어프레임 제작 - 핵심 구성 요소
1. 핵심 화면 선별
선택한 User Flow를 바탕으로, 해결 방안을 설명하는 데 필요한 핵심 화면을 선정합니다.
핵심 포인트 : 해결방안에서 보여주고 싶던 화면이 충실하게 나와있는가
2. 화면 프레임 생성
Figma, Excalidraw, Whimsical, Miro 등 원하는 와이어프레임 도구를 활용해
모바일(375px) 또는 웹(1440px) 기준의 화면을 구성합니다.
핵심 포인트 : 해결방안에서 보여주고 싶던 화면이 충실하게 나와있는가
3. 레이아웃 구성
색상이나 디자인 요소보다는 박스와 텍스트만 활용해 화면 구조를 표현합니다.
이미지 영역: 회색 박스 + Image
버튼: 박스 + 버튼명
텍스트 영역: 선(Line) 또는 텍스트 영역 표기
핵심 포인트 : 화면만 봐도 어떤 요소가 어디에 있는지 파악 가능한가
4. 화면 흐름 연결
도구의 프로토타입 기능 또는 화살표를 활용해 화면 간 이동 흐름을 연결합니다.
핵심 포인트 : 어떤 버튼을 누르면 어느 화면으로 이동하는지 연결선이 있는가
5. 화면 설명
각 Wireframe 화면에 사용자 행동을 설명하는 설명을 포함합니다.
핵심 포인트 : "이 화면에서 사용자가 무엇을 하는가"가 화면별로 명시되어 있는가
AS-IS 기준 보완 필요 사항 체크해보기
| 기준 | 현재 상태 | 보완 필요 여부 |
| 핵심 화면 선정 | PDP 개선 화면 중심으로 잘 선정됨 | 좋음 |
| 모바일 프레임 | 모바일 PDP 기준으로 구성됨 | 좋음 |
| 박스/텍스트 중심 표현 | 색상은 있지만 구조 파악은 잘 됨 | 약간 보완 |
| 핵심 컴포넌트 표시 | 1, 2, 3번 MVP 반영 요소가 명확함 | 좋음 |
| 화면 간 이동 흐름 | 한 화면 중심이라 버튼 클릭 후 이동 흐름은 약함 | 보완 필요 |
| 화면별 사용자 행동 설명 | 우측 설명은 있으나 “사용자가 무엇을 하는지”가 더 명확하면 좋음 | 보완 필요 |
| A/B 테스트 관점 | 지표와 실험 조건은 있음 | 좋음 |
1. “화면 흐름 연결”이 아직 약함
현재는 하나의 긴 PDP 화면 안에 컴포넌트가 표시되어 있어서,
사용자가 앵커 메뉴를 눌렀을 때 어디로 이동하는지가 조금 약하게 보일 수 있다.
아래처럼 화면을 3개 정도로 쪼개 추가 제작 해보기
| 화면 | 보여줄 내용 |
| 화면 1 | PDP 진입 / 상품 요약 / 스티키 앵커 메뉴 |
| 화면 2 | 앵커 메뉴 클릭 후 후기 이미지 전용 영역으로 이동 |
| 화면 3 | 구매 판단 정보 확인 후 옵션 선택 / 장바구니 담기 |
현재 화면은 유지하되, 옆에 화면 2개를 추가해서
“앵커 클릭 → 해당 섹션 이동 → 장바구니 담기” 흐름 보여주기
2. 사용자 행동 설명을 더 구체적으로 작성 필요
기능 설명은 되어 있는데, “각 화면에서 사용자가 무엇을 하는가”에 대한 내용 없음
| 컴포넌트 | 현재 의미 | 보완 내용 |
| 스티키 앵커 메뉴 | 원하는 정보로 이동 | 사용자는 후기/상세/혜택 및 배송/구매 유의사항 중 확인하고 싶은 정보 선택 |
| 상품 정보 구조화 | 정보 순서 재구성 | 사용자는 구매 판단 순서대로 상품 정보를 확인한다 |
| 후기 이미지 영역 | 스타일 후기 확인 | 사용자는 실물감, 착용감, 색감, 크기를 이미지로 확인한다 |
| 옵션/장바구니 영역 | 구매 행동 | 사용자는 구매 확신이 생기면 옵션을 선택하고 장바구니에 담는다 |
3. 새로 추가된 “후기 이미지 전용 영역”의 역할을 명시해두기
초록색 영역으로 표시하고 어떤 영역인지 라벨을 달아놓아 인지는 되지만,
고가 패션 상품의 구매 리스크를 낮추는 역할로 새로 추가된 영역인만큼
왜 이 영역이 중요한지 간략하게라도 명시하면 좋을 듯
실물감·착용감·스타일링 확인 영역
보완 필요 사항 Figma MAKE로 수정해보기
1. Figma MAKE에 위 보완사항 내용을 토대로 한 프롬프트 구체적으로 입력하기
현재 와이어프레임을 기반으로,
“고가 패션 상품 PDP → 장바구니 전환율 개선 MVP”를 더 명확하게 설명할 수 있도록 보완해주세요.
목표는 하나의 긴 PDP 화면을 보여주는 것에서 더 나아가,
사용자가 개선 PDP에서 어떤 행동을 하고, 어떤 정보로 이동하며,
어떤 판단을 거쳐 장바구니에 담는지 흐름이 보이도록 만드는 것입니다.
전체 스타일은 기존 와이어프레임 톤을 유지해주세요.
과한 컬러나 시각 디자인 요소는 사용하지 말고, 박스와 텍스트 중심의 와이어프레임 형태로 구성해주세요.
보완 방향
기존 모바일 PDP 와이어프레임은 유지하되, 오른쪽 또는 하단에 핵심 화면 흐름을 4단계로 추가해주세요.
- PDP 진입 화면
- 스티키 앵커 메뉴 사용 화면
- 후기 이미지 영역 확인 화면
- 옵션 선택 및 장바구니 담기 화면
각 화면은 모바일 프레임 기준으로 구성하고, 화면 간 이동은 화살표로 연결해주세요.
Screen 1. PDP 진입 화면
사용자는 고가 패션 상품 PDP에 진입합니다.
화면에 포함할 요소:
- 상품 대표 이미지 영역
- 상품명
- 브랜드
- 가격
- 옵션 선택 영역
- 배송 정보
- 스티키 앵커 메뉴
스티키 앵커 메뉴에는 아래 항목을 넣어주세요.
- 요약
- 후기
- 상품 상세
- 혜택·배송
- 구매 유의사항
화면 설명 문구:
“사용자는 상품명, 가격, 대표 이미지, 옵션 등 기본 정보를 확인하고 상품에 대한 1차 관심 여부를 판단한다.”
Screen 2. 스티키 앵커 메뉴 사용 화면
사용자가 스티키 앵커 메뉴에서 ‘후기’를 선택하는 장면을 보여주세요.
화면에 포함할 요소:
- 상단에 고정된 스티키 앵커 메뉴
- ‘후기’ 탭 선택 상태
- 후기 섹션으로 이동하는 흐름 표시
- 버튼 또는 탭 클릭을 나타내는 작은 화살표
화면 설명 문구:
“사용자는 스티키 앵커 메뉴를 통해 후기, 상품 상세, 혜택·배송, 구매 유의사항 중 필요한 정보를 빠르게 선택한다.”
Screen 3. 후기 이미지 영역 확인 화면
사용자가 후기 이미지 전용 영역에 도달한 화면을 보여주세요.
화면에 포함할 요소:
- 후기 이미지 전용 영역
- 2x3 형태의 이미지 박스 그리드
- 별점 또는 후기 요약 영역
- 실물감, 착용감, 색감, 크기 확인을 나타내는 짧은 텍스트
후기 이미지 영역 옆에는 강조 라벨을 추가해주세요.
라벨 문구: “실물감·착용감 확인 영역”
화면 설명 문구: “사용자는 후기 이미지 영역에서 상품 이미지로 알기 어려운 실물감, 착용감, 스타일링 레퍼런스를 확인한다.”
Screen 4. 옵션 선택 및 장바구니 담기 화면
사용자가 구매 판단 정보를 확인한 뒤 장바구니에 담는 화면을 보여주세요.
화면에 포함할 요소:
- 옵션 선택 영역
- 사이즈 또는 색상 선택 박스
- 구매 유의사항 요약
- 반품/교환 안내 요약
- 장바구니 담기 버튼
장바구니 버튼은 화면 하단에 고정된 형태로 보여주세요.
화면 설명 문구: “사용자는 구매 실패 리스크가 낮아졌다고 판단하면 옵션을 선택하고 장바구니에 담는다.”
화면 간 연결
각 화면은 아래 흐름대로 화살표로 연결해주세요.
PDP 진입
→ 스티키 앵커 메뉴에서 ‘후기’ 선택
→ 후기 이미지 영역 확인
→ 구매 판단 정보 확인
→ 옵션 선택
→ 장바구니 담기
각 화살표 위에는 사용자의 행동을 짧게 표시해주세요.
- 상품 확인
- 후기 탭 선택
- 후기 이미지 확인
- 구매 리스크 판단
- 장바구니 담기
기존 보드에서 유지할 요소
기존에 정리된 1차 MVP 반영 범위는 유지해주세요.
- 스티키 앵커 메뉴 제공
- 상품 정보 구조화 및 순서 재구성
- 후기 이미지 전용 영역 추가
- 검증 지표 영역
2차 확장 기능은 흐리게 처리하거나 별도 영역으로 유지해주세요.
- 핵심 판단 정보 요약 카드 제공
- 후기 데이터 정보 구조화
2. 요청 & 기다리기...
3. 결과물 받고 피드백 & n차 수정
'스터디 > 프로젝트' 카테고리의 다른 글
| [개인프로젝트] 장바구니 담기 전환 데이터 분석 & 개선안 제안 - 번외) 유저 플로우차트 만들어보기 (0) | 2026.07.01 |
|---|---|
| [개인 프로젝트] 장바구니 담기 전환 데이터 분석 & 개선안 제안 - 7) 피드백 반영해보기 (0) | 2026.06.30 |
| [역기획 프로젝트] 배달의민족 성장 전략 - 7) 프로젝트 회고 (0) | 2026.06.26 |
| [역기획 프로젝트] 배달의민족 성장 전략 - 3-1) 핵심 문제 정의 Part.2 (0) | 2026.06.23 |
| [역기획 프로젝트] 배달의민족 성장 전략 - 3) 핵심 문제 정의 (0) | 2026.06.22 |