29개 화면에 결제을 담는다는 것 — 커머스 기획기
29개 화면에 숨은 커머스 기획의 비밀. 장바구니부터 배송 추적까지, 사용자가 모르는 뒷단의 치밀한 설계를 해부합니다.
데모 체험
실제 서비스가 아닌, 핵심 기능 흐름만 담아 재구성한 익명화 목업입니다. 모든 데이터는 가상입니다.
화면 스켈레톤
실제 Figma 28개 화면 중 핵심 6개 화면 재구성고객사 화면은 저작권 보호를 위해 공개하지 않는 대신, 주요 화면의 구성을 와이어프레임으로 재구성했습니다.
현장 홈
출퇴근 기록
안전관리
위험 신고
품 결제
마이페이지
이 서비스가 해결하는 문제
온라인 쇼핑의 핵심 과제는 "어떻게 하면 사용자가 원하는 상품을 빠르게 찾고, 망설임 없이 구매하게 만들 것인가"입니다. 단순히 상품을 나열하는 것이 아니라, 탐색 → 비교 → 결정 → 결제 → 배송 확인까지 끊김 없는 경험을 설계해야 합니다.
특히 모바일 환경에서는 작은 화면에서의 정보 밀도, 엄지 하나로 가능한 조작성, 결제 과정의 이탈 방지가 기획의 승패를 가릅니다. 이 프로젝트는 29개 화면에 걸쳐 이 문제를 체계적으로 풀어냈습니다.
핵심 가치 제안
- 마찰 없는 결제 — 장바구니에서 결제 완료까지의 단계를 최소화하고, 각 단계에서의 이탈 원인을 제거하는 데 집중했습니다. 결제 실패 시 복구 플로우도 포함되어 있습니다.
- 직관적인 정보 구조 — 29개 화면이 일관된 UI 패턴을 따르기 때문에, 새로운 화면을 만나도 학습 비용이 거의 없습니다.
- 체계적인 에러 핸들링 — 네트워크 오류, 입력 실수, 권한 부족 등 예외 상황별 안내 화면이 설계되어 있어 사용자가 막히는 순간이 없습니다.
사용자 시나리오
주요 사용 흐름:
- 메인 화면에서 핵심 콘텐츠와 개인화된 추천을 확인합니다. 주요 기능으로의 진입점이 명확하게 배치되어 있습니다.
- 상세 페이지에서 충분한 정보를 확인하고 의사결정을 내립니다.
- 결제 또는 예약을 진행합니다. 최소한의 입력으로 빠르게 완료할 수 있도록 설계되어 있습니다.
관련 포스트
시세 따라 값이 바뀌는 커머스 — 설문으로 배합을 파는 맞춤 곡물 구독 설계
설문 문진으로 개인 배합을 추천하고, 곡물 단가가 시세에 따라 실시간으로 바뀌는 커머스. 그램 단위 가격 산정, 정기 구독 포인트 정책, 곡물별 주문 집계 같은 운영 설계까지 — 앱과 웹을 함께 만든 장기 협업 기록을 토대로 정리했다.
결제 버튼이 인쇄 버튼이다 — 커스텀 동화책 커머스의 주문 설계
아이 이름과 캐릭터, 편지를 넣어 한 권씩 인쇄하는 개인화 동화책 쇼핑몰. 결제 후 수정 불가 정책과 3단 관리자 권한, 사진 굿즈 템플릿까지 — 커머스가 제작 파이프라인이 되는 과정을 설계했다.
쇼핑몰 안의 쇼핑몰 — 인플루언서 커머스, 네 사용자의 정산 설계
인플루언서가 재고 없이 브랜드 상품을 소싱해 파는 이중 구조 커머스 플랫폼. 일반 사용자·셀러·공급 브랜드·운영자 네 역할의 화면과 정찰·비정찰 이원 수수료, 협찬-주문등록 흐름까지 하나의 플랫폼으로 묶었다.