[제로베이스 UI/UX 파트타임 스쿨] 12주차 - (목) 카트 리스트와 주문 & 디자인 스타일 가이드 정리

제로베이스 81일차 학습노트이다.
오늘은 쇼핑몰 앱에서 구매 흐름의 마지막 단계인 카트 리스트와 주문 화면을 Adobe XD로 구성하는 실습을 진행했다. 또한 지금까지 배운 디자인 시스템과 컴포넌트들을 되짚어보며 디자인 스타일 가이드의 정리 작업도 함께 수행했다. 사용자 중심의 플로우를 시각적으로 정리하고, 반복 가능한 UI 요소들을 정리하는 시간이기도 했다.

---

오늘의 강의 내용

 

1. 카트 리스트와 주문
카트 리스트 화면은 사용자가 장바구니에 담은 상품들을 한눈에 확인하고, 수량 조절이나 삭제 등의 기본적인 액션을 수행할 수 있도록 구성했다. 상품 정보(이미지, 이름, 가격)와 함께 수량 조절 버튼(+/-), 체크박스 등을 배치하여 상품 관리가 가능한 구조로 설계했다.

각 상품 모듈은 동일한 형태의 카드 디자인으로 반복 구성했으며, 카드 하단에는 상품 금액 합산이 자동으로 표시되도록 시각적 구성을 배치했다. 하단에는 고정형 주문 버튼을 두어 주문 단계로의 흐름을 자연스럽게 유도했다.

주문 화면에서는 사용자가 실제 결제를 진행하기 전 배송 정보, 결제 방법, 최종 금액 요약 등을 확인할 수 있도록 구성했다. 각 영역은 명확히 구분되도록 여백과 텍스트 위계를 조절했으며, 사용자 오작동을 방지하기 위해 ‘결제하기’ 버튼을 명확히 강조했다. 전반적으로 구매 흐름의 명확한 단계 구분과 정보 우선순위를 UX 관점에서 정리한 실습이었다.

 

2. 디자인 스타일 가이드의 정리
디자인 스타일 가이드는 지금까지 진행한 프로젝트 내에서 사용된 컬러 시스템, 타이포그래피, 아이코노그래피, 버튼 스타일, 폼 필드, 카드 모듈, 그리드 시스템 등 UI 요소 전반을 정리하는 작업이었다.

Adobe XD 내에서 자주 사용하는 컴포넌트들을 별도 아트보드에 정리하고, 각각의 속성값(폰트 크기, 컬러값, 패딩, 마진, 그림자 효과 등)을 표기해두었다. 특히 실무에서 활용될 수 있도록 각 UI 요소의 쓰임새에 대한 주석을 간단히 덧붙이는 방식으로 구성했다.

이러한 스타일 가이드 정리는 디자인 시스템의 일관성을 유지하고, 팀 협업 및 개발 연동 시 기준을 제시할 수 있는 핵심 도구라는 점에서 중요한 과정이었다. 텍스트 스타일이나 버튼 상태(기본/호버/클릭), 입력창 포커스 스타일 등 UI 세부 요소까지 정리해두어 이후 반복 사용에 효율을 높였다.

---

오늘 실습한 카트 리스트와 주문 UI 구성은 사용자 입장에서 복잡하지 않고 빠르게 결정을 내릴 수 있는 구조를 설계하는 데 초점을 맞췄고, 디자인 스타일 가이드 정리는 앞으로 다양한 프로젝트에서 재사용 가능한 기준을 구축하는 데 매우 실질적인 도움이 될 것이라 느꼈다.

 

이 글은 제로베이스 UI/UX 파트타임 강의 자료 일부를 발췌하여 작성되었습니다.