커머스 프로젝트의 결제, 33개 화면으로 풀어보다
쇼핑몰 하나에 33개 화면이 필요한 이유. 2023년 프로젝트에서 만난 기획의 디테일과 놓치기 쉬운 포인트를 공유합니다.
데모 체험
실제 서비스가 아닌, 핵심 기능 흐름만 담아 재구성한 익명화 목업입니다. 모든 데이터는 가상입니다.
화면 스켈레톤
실제 Figma 143개 화면 중 핵심 7개 흐름 재구성고객사 화면은 저작권 보호를 위해 공개하지 않는 대신, 주요 화면의 구성을 와이어프레임으로 재구성했습니다.
대시보드
수업 관리
클래스 상세
수강권 관리
수강권 등록
판매·결제 내역
운영 설정
이 서비스가 해결하는 문제
온라인 쇼핑의 핵심 과제는 "어떻게 하면 사용자가 원하는 상품을 빠르게 찾고, 망설임 없이 구매하게 만들 것인가"입니다. 단순히 상품을 나열하는 것이 아니라, 탐색 → 비교 → 결정 → 결제 → 배송 확인까지 끊김 없는 경험을 설계해야 합니다.
특히 모바일 환경에서는 작은 화면에서의 정보 밀도, 엄지 하나로 가능한 조작성, 결제 과정의 이탈 방지가 기획의 승패를 가릅니다. 이 프로젝트는 33개 화면에 걸쳐 이 문제를 체계적으로 풀어냈습니다.
핵심 가치 제안
- 스마트한 탐색 경험 — 검색어 자동완성, 다중 필터, 정렬 옵션을 조합하여 사용자가 원하는 것을 3번의 터치 안에 찾을 수 있도록 설계했습니다.
- 마찰 없는 결제 — 장바구니에서 결제 완료까지의 단계를 최소화하고, 각 단계에서의 이탈 원인을 제거하는 데 집중했습니다. 결제 실패 시 복구 플로우도 포함되어 있습니다.
- 데이터로 말하는 의사결정 — 핵심 지표를 한눈에 파악할 수 있는 대시보드를 제공합니다. "무엇을 보여줄까"보다 "무엇을 안 보여줄까"가 더 중요한 설계였습니다.
- 충돌 없는 예약 시스템 — 실시간 가용성 확인, 중복 예약 방지, 알림 연동으로 예약 노쇼를 줄이는 구조입니다.
사용자 시나리오
주요 사용 흐름:
- 앱을 처음 실행하면 온보딩 화면이 나타납니다. 소셜 로그인 또는 이메일로 간편하게 가입할 수 있습니다.
- 메인 화면에서 핵심 콘텐츠와 개인화된 추천을 확인합니다. 주요 기능으로의 진입점이 명확하게 배치되어 있습니다.
- 검색 또는 카테고리 탐색으로 원하는 항목을 찾습니다. 필터와 정렬로 결과를 좁혀갑니다.
- 상세 페이지에서 충분한 정보를 확인하고 의사결정을 내립니다.
- 결제 또는 예약을 진행합니다. 최소한의 입력으로 빠르게 완료할 수 있도록 설계되어 있습니다.
- 진행 상태를 실시간으로 추적합니다. 각 단계별 알림으로 놓치는 정보가 없습니다.
관련 포스트
한 잔을 선물하는 커머스 — 지도와 알림톡으로 설계한 주류 O2O
취향 태그로 고르는 주류 큐레이션, 지도에서 찾는 제휴 업장, 알림톡으로 전달되는 티켓 선물까지. 업장별 결제키 정산 구조와 확장 기능으로 다섯 해째 운영을 이어 온 주류 O2O 커머스 분석.
명함 한 장으로 여는 온라인 상점 — 택배 인프라 위에 세운 소상공인 커머스
택배 물류망을 가진 기업과 소상공인 판매자를 잇는 주문 플랫폼. 디지털 명함으로 상점을 알리고 주문·결제·배송 추적이 한 흐름으로 이어지는 사용자·판매자·관리자 3자 커머스를 단계적 오픈으로 완성한 기획 기록.
쇼핑 앱 뒤편의 광고 장터 — 사용자·광고주·운영자 3면 플랫폼 기획기
패션 콘텐츠 피드와 핫딜로 사용자를 모으고, 그 지면을 월 단위 구좌로 광고주에게 판매하는 3면 플랫폼. 사용자 앱·광고주 웹·최고관리자 웹을 하나의 광고 정책으로 꿰어낸 기획 과정을 협업 기록에서 재구성했다.