이번 글에서는 MVP 개발범위인 자사몰을 개발하기 위한 와이어 프레임을 작성해 보겠습니다.
와이어프레임: 화면의 구조와 정보 배치만 그린 설계도.
원래 그림으로 표현해야 하지만, 디자인에 Claude Design을 사용할 예정이라 그에 맞게 글로 정리해봤습니다.
예전 글에서 설정했던 MVP 개발 범위는 아래와 같습니다.
- 인증: 로그인, 회원가입 등
- 사용자: 프로필, 배송 주소, 결제수단 관리 등
- 상품: 상품 목록, 상품 상세, 리뷰, 문의 등
- 주문: 장바구니, 주문, 결제, 환불 등
- 어드민: 쇼핑몰 관리자가 구매자, 상품정보 등을 관리하는 페이지
각 기능들을 좀 더 구체적인 기능들로 분리하고, 개발하기 좋게 페이지 단위로 정리해보겠습니다.
쿠팡, 네이버 쇼핑, 자사몰 등 실제 운영중인 사이트들을 참고하였습니다.
헤더
- 회원가입
- 이메일 or 휴대폰 인증
- 약관 동의
- 로그인
- 비밀번호 로그인
- Google 로그인
- 비밀번호 찾기
- 상품 검색
- 장바구니
메인 페이지
- 상품 목록 조회
- 상품 목록 필터, 정렬
마이 페이지
- 프로필 관리
- 비밀번호 변경
- 약관 선택 동의 관리
- 배송 주소 관리
- 결제수단 관리
- 리뷰 관리
- 문의 관리
- 회원탈퇴
상품 상세
- 상품 정보
- 사업자 정보
- 상품 옵션 선택
- 장바구니
- 바로구매
- 리뷰
- 문의
- 배송 및 반품 안내
장바구니
- 장바구니 상품 목록 보기
- 장바구니 상품 옵션 변경
- 결제 금액 정보
- 주문
푸터
- 이용약관
- 전자금융거래약관
- 개인정보처리방침
- FAQ(자주 묻는 질문)
그리고, 관리자가 상품, 주문, 문의,회원을 관리하기위한 어드민 페이지도 필요합니다.
어드민
- 전체 상품 관리
- 전체 주문 관리
- 전체 회원 관리
- 전체 문의 관리
- 판매 통계 (연별, 월별, 일별)
이번 글에서는 MVP 와이어 프레임을 작성해봤습니다.
다음 글에서는 작성한 와이어 프레임과 Claude Design을 활용하여, 실제 서비스에 사용할 UI디자인 및 프론트엔드 코드를 생성해보도록 하겠습니다.