[제로베이스 UI/UX 파트타임 스쿨] 12주차 - (화) 메인페이지 2 & 콘텐츠 상세페이지

제로베이스 79일차 학습노트이다.
오늘은 쇼핑몰 앱 UI 흐름의 연장선에서 메인페이지 2와 콘텐츠 상세페이지를 Adobe XD로 실습하며 구성했다. 실제 서비스처럼 다양한 상품을 효과적으로 보여주기 위한 레이아웃 구성과 상품에 대한 구체적인 정보 제공 방식, 사용자 인터랙션 설계에 초점을 맞춘 수업이었다.

---

오늘의 강의 내용

 

1. 메인페이지 2 (Main Page 2)
메인페이지 2는 이전에 구성했던 메인페이지와 구조적으로는 큰 차이가 없지만, 가운데의 주요 콘텐츠 카드 디자인이 변화된 버전으로 실습되었다.

중앙에 배치된 대형 카드 영역에는 특정 이벤트 상품이나 추천 아이템을 강조할 수 있도록 설계했으며, 카드 안에는 텍스트와 버튼, 배경 이미지가 통합된 형태로 구성해 사용자 주목도를 높이는 방식으로 구성되었다. 이 외의 상단 검색 아이콘, 하단 내비게이션 바, 상품 리스트 등은 메인페이지 1과 동일한 방식으로 유지되며 디자인 시스템의 일관성을 고려했다.

콘텐츠 강조 방식이 달라졌을 뿐 전체적인 구조는 동일한 템플릿을 바탕으로 재사용했기 때문에, Adobe XD에서 컴포넌트를 기반으로 수정하고 활용하는 효율적인 방식을 다시 한번 확인할 수 있었다.

 

2. 콘텐츠 상세페이지 (Content Detail Page)
콘텐츠 상세페이지는 특정 상품(가방)을 클릭했을 때 연결되는 화면으로, 상품의 정보와 다양한 옵션 선택을 제공해야 하는 중요한 UI다.

실습에서는 가방 상세 이미지, 이름, 가격, 설명, 색상 선택, 장바구니 담기 버튼 등을 포함하여 상세 페이지의 핵심 요소들을 구성했다. 특히 주목할 부분은 색상 변경 기능으로, 사용자가 가방의 색상을 선택하면 제품 이미지도 함께 변경되는 흐름을 시각적으로 표현하는 UI를 Adobe XD에서 구현해보았다.

색상 선택은 작은 컬러 원형 버튼을 통해 제공하고, 선택 시 해당 색상의 가방 이미지가 바뀌는 형태로 설정했다. 이처럼 실제 사용자 인터랙션을 고려한 상세페이지 구성은 UX 관점에서 정보 전달과 선택 흐름을 얼마나 직관적으로 설계하느냐가 핵심임을 실감할 수 있었다.

또한 하단에는 ‘장바구니에 담기’와 ‘구매하기’ 버튼을 고정 배치하여 사용자의 주요 액션 유도에 집중했고, 텍스트 위계와 컬러 배치를 통해 정보 간 구분이 잘 드러나도록 했다.

---

오늘 실습한 두 화면은 각각 쇼핑몰 앱의 콘텐츠 흐름과 사용자 선택 경험을 강화하는 역할을 한다. 메인페이지의 다양한 강조 방식과 상세페이지에서의 옵션 선택 인터페이스 구성은 실제 상업 서비스나 이커머스 앱을 디자인할 때 실질적인 레퍼런스로 활용할 수 있을 것이며, Adobe XD에서의 반복 편집과 사용자 흐름 설정 연습도 실무 감각을 키우는 데 도움이 되었다.

 

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