Design
카페24 이커머스 UI 구성 및 Figma 와이어프레임 설계 예시
chunote
2025. 4. 8. 16:32
반응형
카페24로 온라인 쇼핑몰을 구축하고자 한다면, 사용자 친화적인 UI 설계와 직관적인 페이지 구성이 필수입니다. 이 글에서는 이커머스 사이트에서 꼭 필요한 주요 페이지 구성과 함께 Figma로 와이어프레임 설계 시 고려해야 할 항목을 정리해 드립니다.
1. 홈페이지 (Main Page)
- 탑 배너(Hero Section): 시즌 프로모션 또는 인기 상품 강조
- 카테고리 메뉴: 상품군, 성별, 브랜드 필터링
- 추천 상품, 신상품, 베스트 상품 슬라이더 구성
- 고객 리뷰 하이라이트
- 푸터 영역: 고객센터, SNS, 이용약관 등
2. 상품 리스트 페이지 (Category Page)
- 필터 사이드바: 가격, 색상, 사이즈 선택 가능
- 정렬 기능: 인기순, 신상품순, 낮은 가격순 등
- 상품 썸네일: 이미지, 가격, 평점, 찜 아이콘
3. 상품 상세 페이지 (Product Detail Page)
- 이미지 슬라이더 + 확대 기능
- 상품 정보: 가격, 옵션(색상/사이즈), 적립금
- 배송, 교환/환불 정보 탭 구성
- 리뷰 및 Q&A 별도 영역 제공
4. 장바구니 페이지 (Cart Page)
- 상품 목록 + 수량 변경 및 삭제 기능
- 예상 결제 금액 요약
- 주문하기 버튼 강조
5. 주문서 작성 페이지 (Order Page)
- 주문자 정보 입력
- 배송지 정보 입력
- 결제수단 선택 (카드, 무통장, 간편결제 등)
6. 마이페이지 (My Page)
- 주문 내역 조회
- 쿠폰 및 적립금 내역
- 회원 정보 수정
- 후기 작성, 문의 내역 확인
7. Figma 와이어프레임 구성 예시
홈페이지 와이어프레임 구조
[Top Navigation Bar]
[Main Hero Banner - Carousel]
[Category Menu]
[Best Items Section]
[New Arrivals Section]
[Review Highlights Section]
[Promotional Banners]
[Footer]
상품 리스트 페이지
[Filter Sidebar] | [Grid of Product Cards]
| [Image / Price / Title / Rating / Wishlist]
상품 상세 페이지
[Product Images Left] | [Product Info Right]
[Tabs: Info / Reviews / Q&A]
장바구니 및 주문서
[Product Table] + [Payment Summary]
[Shipping & Payment Info Input Fields]
[Order Button]
마이페이지
[Sidebar Navigation] | [Main Content Area: Orders, Coupons, Reviews]
Figma 설계 팁
- Auto Layout 활용해 반응형 제작
- Components 설정으로 재사용 가능 요소 구성
- Mobile / Tablet / PC 해상도별 화면 설계 필수
- 카페24의 EC Design Lab 참고
이커머스 UI 구성은 사용자의 구매 여정을 고려해 쉽고 편리하게 설계되어야 합니다. 위 구성을 바탕으로 Figma에서 시안을 만들어보면 카페24 쇼핑몰 구축도 수월하게 진행할 수 있습니다. 실사용자 중심의 구조와 다양한 디바이스 대응을 함께 고려해보세요.
반응형