앞 페이지에서 우리는 storefront의 IA와 라우트 맵을 정리했습니다. 이제 그 뼈대 위에 실제 구매자 화면을 올려야 합니다. 이번 단계의 목표는 단순히 화면 목록을 나열하는 것이 아닙니다. 사용자가 상품을 찾고, 이해하고, 구매를 결심하고, 주문을 완료하고, 결과를 확인하는 흐름이 끊기지 않도록 화면 책임을 정리하는 것입니다.
이커머스에서 storefront는 가장 중요한 사용자 경험 영역입니다. 사용자는 대부분 이 공간만 보고 서비스를 판단합니다. 그래서 화면 설계는 예쁜 카드와 배너를 만드는 문제가 아니라, 구매 결정에 필요한 정보를 적절한 시점에 적절한 밀도로 보여 주는 문제입니다.
이번 교재에서 storefront는 아래 한 줄의 흐름을 완성하는 데 초점을 둡니다.
상품 탐색 -> 상품 이해 -> 장바구니 구성 -> 주문/결제 -> 주문 확인
이 한 줄이 자연스럽게 이어지면 MVP 기준의 구매 경험은 성립합니다.
프론트엔드 구현에서 흔히 생기는 문제는 화면 단위로만 생각하고 흐름 단위로 보지 않는 것입니다.
예를 들어:
이런 문제는 대부분 화면 자체의 문제가 아니라, 화면 간 역할 분리가 흐렸기 때문에 생깁니다. 그래서 이번 페이지에서는 먼저 각 화면이 "어떤 결정을 돕는 화면인가"를 정리합니다.
이 페이지를 읽고 나면 아래 항목이 정리되어 있어야 합니다.
이 문서가 정리되면 다음 단계의 프론트 구현 순서가 자연스럽게 나옵니다.
구매자 화면은 아래 다섯 가지 질문에 답할 수 있어야 합니다.
이 질문에 대응하는 화면이 바로 storefront의 핵심 화면입니다.
이번 MVP에서 반드시 설계해야 하는 화면은 아래와 같습니다.
이번 교재에서는 마이페이지 전체, 찜 목록, 리뷰 관리, 쿠폰 센터 같은 부가 화면은 넣지 않습니다. 핵심 구매 흐름 완성이 우선입니다.
이 화면은 사용자가 처음 들어왔을 때 상품 탐색으로 자연스럽게 넘어가게 만드는 entry point입니다.
이번 교재는 실제 커머스 운영보다 학습용 MVP이므로, 홈은 화려함보다 진입 효율이 중요합니다.
상품 목록 화면은 사용자가 "무엇을 볼지"를 좁혀 나가는 공간입니다.
상세 화면은 사용자가 실제 구매 결정을 하는 가장 중요한 화면입니다.
이번 교재에서 인증 화면은 독립 목적이 아니라 구매 흐름을 이어 주는 관문입니다.
/cart 또는 /checkout 진입 전 로그인 유도 후, 다시 원래 흐름으로 보내 주는 처리장바구니는 사용자의 임시 구매 의사를 정리하는 화면입니다.
장바구니는 단순 목록 화면이 아닙니다. "지금 이 조합으로 주문할 것인가"를 확인하는 화면입니다.
이 화면은 구매 흐름의 마지막 핵심 단계입니다. 정보 입력보다 확인이 더 중요합니다.
이 실패 흐름을 화면에서 분명히 보여 주지 않으면 사용자는 "결제가 됐는지 안 됐는지"를 헷갈리게 됩니다.
주문 완료 화면은 단순 축하 메시지 화면이 아닙니다. 사용자가 "내 주문이 기록되었다"는 확신을 얻는 화면입니다.
이번 MVP에서 가장 중요한 흐름 차이는 인증 시점입니다.
따라서 화면 설계에서는 비회원이 어디까지 갈 수 있고, 어디서 로그인으로 전환되는지를 명확히 보여 줘야 합니다.
이번 교재에서 챗봇은 storefront의 핵심 보조 흐름입니다.
챗봇은 사용자가 막히는 지점에 나타나야지, 모든 화면에서 같은 강도로 튀어나와서는 안 됩니다.
이번 교재의 storefront 대표 흐름은 아래처럼 정리할 수 있습니다.
이 일곱 단계가 storefront MVP의 기본 골격입니다.
이번 교재를 따라 하는 학습자는 최소한 아래 화면 목록을 먼저 적어 두는 것이 좋습니다.
| 화면 | 목적 |
|---|---|
| 홈 | 카탈로그 진입 |
| 상품 목록 | 탐색과 비교 |
| 상품 상세 | 구매 판단 |
| 로그인/회원가입 | 인증 |
| 장바구니 | 임시 구매 상태 확인 |
| 주문/결제 | 최종 확인과 제출 |
| 주문 완료/상세 | 결과 확인 |
이 다섯 가지 실수는 storefront 구현 후반에 UX 부채로 남습니다.
이 페이지에서 우리는 구매자 storefront의 핵심 화면과 각 화면의 책임을 정리했습니다. 이제 홈, 상품 목록, 상세, 장바구니, 주문/결제, 주문 확인까지의 흐름이 선명해졌습니다. 다음 페이지에서는 운영자 admin 화면을 따로 설계해, 구매자 경험과 운영 경험의 차이를 더 분명하게 드러냅니다.
다음 페이지에서는 운영자 대시보드, 주문 목록, 상품 현황처럼 admin 영역의 화면을 기획합니다.