취향을 발견하고, 옷을 고르는 화면.
의류 관련 플랫폼 1 to Z의 웹·모바일 디자인 시안. 홈부터 상품 탐색, 주문과 배송 조회까지 18개 화면을 정리했습니다.
- PROJECT
- 1 to Z
- 참여한 일
- 개인 디자인 시안 · UI/UX 구성
- 작업
- 웹 5개 · 모바일 13개 디자인 화면
작업에 담은 생각.
작업 범위
의류 관련 플랫폼의 웹·모바일 화면을 구성한 디자인 시안입니다. 상품 목록과 상세, 브랜드 이야기와 에디토리얼, 찜과 장바구니, 주문 이후 화면까지 담았습니다.
화면 전체로 확인하기
디자인 화면 18개를 화면별 기능과 함께 정리했습니다. 각 화면의 전체 흐름은 페이지 안에서 확인할 수 있습니다.
시안과 실제 서비스 구분
화면에 있는 상품·가격·주문·회원·회사 정보는 예시입니다. 실제 판매, 고객 수, 구매 성과나 개발 완료를 주장하지 않습니다.
개인 프로젝트 기록입니다. 공개 링크의 현재 서비스 상태는 달라질 수 있습니다.
화면으로 보는 작업
디자인 시안입니다. 화면 속 상품, 가격, 리뷰, 주문·회원·회사 정보는 시안의 예시이며, 실제 서비스 운영이나 실적을 뜻하지 않습니다. 구성 이유는 화면을 바탕으로 정리한 해석입니다.
01 / WEB
쇼핑 웹사이트
화면 해설
상품 카테고리, 검색과 브랜드·에디토리얼 콘텐츠를 한 홈에서 보여주는 의류 플랫폼 시안입니다.
구성 이유 · 해석
제품만 나열하지 않고 이미지와 이야기를 함께 배치해, 취향을 발견한 뒤 상품으로 이동하는 흐름을 읽을 수 있습니다.
화면 목록으로 ↑
02 / WEB
브랜드 소개 사이트
화면 해설
1 to Z의 소개와 이미지 중심 섹션을 길게 이어가는 브랜드 소개 화면입니다.
구성 이유 · 해석
쇼핑 화면과 소개 화면을 분리해 서비스의 분위기와 지향점을 설명할 공간을 둔 구성입니다.
화면 목록으로 ↑
03 / WEB
웹 상품 목록
화면 해설
왼쪽 필터에서 카테고리·브랜드·가격·컬러를 선택하고, 오른쪽에서 상품과 선택된 조건을 확인하는 화면입니다.
구성 이유 · 해석
탐색 조건과 결과를 동시에 볼 수 있게 나누고, 선택 조건을 칩으로 다시 보여줘 현재 목록의 기준을 확인하기 쉽습니다.
화면 목록으로 ↑
04 / WEB
웹 블레이저 상세
화면 해설
블레이저 상품의 이미지와 구매 정보를 시작으로 상세 콘텐츠를 길게 보여주는 웹 상품 페이지입니다.
구성 이유 · 해석
목록에서 생긴 관심을 제품 확인과 구매 검토로 이어가는 단계입니다. 긴 정보는 페이지 안에서 화면을 따라 내려가며 확인할 수 있습니다.
화면 목록으로 ↑
05 / WEB
웹 에디토리얼 아티클
화면 해설
사진과 긴 글로 브랜드·스타일의 이야기를 풀어내는 웹 에디토리얼 화면입니다.
구성 이유 · 해석
빠른 상품 탐색과 별도로 충분히 읽을 수 있는 콘텐츠 영역을 두어, 제품을 선택할 맥락을 보여주는 구성입니다.
화면 목록으로 ↑
06 / MOBILE
앱 홈
화면 해설
모바일 첫 화면에서 상품과 콘텐츠를 소개하고 하단 내비게이션으로 주요 영역에 진입하는 시안입니다.
구성 이유 · 해석
작은 화면에서는 핵심 콘텐츠를 세로로 이어 배치하고 주요 이동 위치를 반복해 보여줍니다.
화면 목록으로 ↑
07 / MOBILE
카테고리
화면 해설
전체·의류·가방·슈즈·라이프 탭, 브랜드·가격·컬러 필터와 2열 상품 목록을 보여줍니다.
구성 이유 · 해석
필터를 상단에 모으고 적용 조건을 칩으로 남겨, 화면이 좁아도 목록의 기준을 되짚을 수 있도록 구성했습니다.
화면 목록으로 ↑
08 / MOBILE
에디토리얼 발견
화면 해설
쇼핑과 구분되는 발견 영역에서 이미지와 에디토리얼 콘텐츠를 탐색하는 모바일 화면입니다.
구성 이유 · 해석
이야기로 취향을 발견하는 경로를 상품 검색과 별도로 둔 점이 이 화면의 역할입니다.
화면 목록으로 ↑
09 / MOBILE
검색
화면 해설
검색어를 입력하며 원하는 상품이나 브랜드를 찾아가는 진입 화면입니다.
구성 이유 · 해석
탐색 시작과 결과 확인을 분리하면 사용자가 어떤 대상을 찾는지 먼저 정리할 수 있습니다.
화면 목록으로 ↑
10 / MOBILE
검색 결과
화면 해설
입력한 검색어에 대응하는 결과를 모바일 목록으로 보여주는 시안입니다.
구성 이유 · 해석
카테고리 탐색과 유사한 상품 표현을 사용해 검색 이후에도 익숙한 방식으로 비교할 수 있는 구성입니다.
화면 목록으로 ↑
11 / MOBILE
상품 상세
화면 해설
상품 사진, 할인 가격·쿠폰, 배송 안내, 컬러·사이즈 선택과 하단 장바구니·구매 버튼을 보여줍니다.
구성 이유 · 해석
제품 확인 → 옵션 선택 → 구매 검토 순서로 정보를 배열하고, 마지막 행동은 하단에 모아 구분했습니다.
화면 목록으로 ↑
12 / MOBILE
오브젝트 스튜디오
화면 해설
브랜드 소개, 브랜드 찜, 이야기·전체 상품·컬렉션 탭과 관련 상품을 담은 브랜드 화면입니다.
구성 이유 · 해석
브랜드의 이야기와 상품을 한 화면에 연결해, 소개를 읽은 뒤 같은 브랜드의 제품을 찾기 쉽게 구성했습니다.
화면 목록으로 ↑
13 / MOBILE
찜
화면 해설
관심을 표시한 상품을 다시 찾아보는 모바일 찜 목록 시안입니다.
구성 이유 · 해석
발견 즉시 구매하지 않아도 후보를 모아 비교할 수 있는 별도 경로를 제공합니다.
화면 목록으로 ↑
14 / MOBILE
장바구니
화면 해설
선택한 상품과 주문 정보를 확인하고 결제 단계로 이어지는 장바구니 화면입니다.
구성 이유 · 해석
탐색과 결제 사이에 검토 단계를 두어 구매 대상을 다시 확인할 수 있게 구성했습니다.
화면 목록으로 ↑
15 / MOBILE
주문·결제
화면 해설
배송지, 주문 상품, 쿠폰·적립금, 결제 수단과 최종 결제 금액을 차례로 확인하는 화면입니다.
구성 이유 · 해석
정보를 구획별로 나누고 최종 금액과 버튼을 마지막에 배치해, 확인해야 할 내용과 결제 행동을 구분했습니다.
화면 목록으로 ↑
16 / MOBILE
주문 완료
화면 해설
주문 완료 상태를 알리고 주문 이후의 확인 흐름을 보여주는 모바일 시안입니다.
구성 이유 · 해석
결제 입력 단계와 완료 상태를 분리해, 사용자가 현재 단계가 끝났다는 점을 인지하도록 구성했습니다.
화면 목록으로 ↑
17 / MOBILE
마이페이지
화면 해설
적립금·쿠폰·찜, 주문 단계와 배송 중인 상품, 취향·리뷰·배송지 관리 메뉴를 모은 화면입니다.
구성 이유 · 해석
요약 숫자와 주문 상태를 앞에 두고 관리 메뉴를 뒤에 배치해, 현재 필요한 확인과 계정 관리를 나눴습니다.
화면 목록으로 ↑
18 / MOBILE
주문 상세·배송 조회
화면 해설
브랜드별 배송 단계와 이동 기록, 주문 상품, 배송지와 결제 내역을 확인하는 화면입니다.
구성 이유 · 해석
브랜드별로 배송 블록을 분리해 한 주문의 상품들이 서로 다른 상태일 수 있다는 점을 보여줍니다.
화면 목록으로 ↑