[제로베이스 UI/UX 파트타임 스쿨] 12주차 - (월) 회원가입, 메인페이지

제로베이스 78일차 학습노트이다.
오늘은 쇼핑몰 앱 서비스에서 중요한 두 화면인 회원가입 페이지와 메인 페이지를 Adobe XD를 활용해 직접 설계하고 구성해보는 실습을 진행했다. 사용자 경험의 흐름상 핵심적인 접점이 되는 두 페이지인 만큼, 정보의 우선순위와 시각적 구조, 버튼의 동선 등에 대해 많이 고민하며 구성하게 되었다.

---

오늘의 강의 내용

 

1. 회원가입 페이지 (Sign-Up Page)
회원가입 화면은 사용자가 서비스를 이용하기 위한 첫 번째 관문이다. 이번 실습에서는 사용자에게 부담을 주지 않도록 간단한 입력 필드 구성, 명확한 버튼 배치, 필수 항목 강조, 그리고 약관 동의 체크박스 등을 포함해 설계했다.

전체적인 레이아웃은 심플하고 일관된 컬러 시스템을 유지하며, 필드 간 여백을 충분히 확보해 시각적 피로도를 줄이는 데 중점을 두었다. 특히 입력 필드에는 라벨, 힌트 텍스트, 포커스 상태 등을 명확히 구분하여 접근성과 사용성을 높였으며, 오류 메시지나 유효성 검사에 대한 안내도 간단히 포함시켰다.

하단에는 '가입하기' 버튼을 배치하고, 버튼은 브랜드 컬러를 적용해 강조 효과를 주었다. 실습을 통해 실제 사용자 흐름을 고려한 인터페이스가 얼마나 중요한지 다시금 확인할 수 있었다.

 

2. 메인 페이지 (Main Page)
메인 페이지는 앱을 실행하고 로그인이 완료된 후 사용자에게 가장 먼저 노출되는 핵심 화면이다. 이번 실습에서는 쇼핑몰의 특성에 맞춰 카테고리 메뉴, 상품 리스트, 배너, 검색 아이콘, 하단 내비게이션 바 등을 포함해 실제 서비스에 가까운 형태로 구성했다.

화면 상단에는 브랜드명을 강조하면서도 검색 기능과 장바구니 버튼을 아이콘으로 배치해 주요 기능에 빠르게 접근할 수 있도록 했고, 그 아래에는 메인 배너와 이벤트 영역, 추천 상품 리스트 등을 시각적으로 분리된 블록 형태로 구성했다.

상품 리스트는 그리드 형식으로 정렬하여 가독성을 높이고, 상품 이미지와 이름, 가격 정보를 명확히 보여주는 데 집중했다. 하단에는 하단 내비게이션 바를 고정하여 홈, 카테고리, 찜, 마이페이지 등 주요 이동 동선을 제공했다.

실습을 통해 메인 페이지는 단순한 콘텐츠 나열이 아니라, 사용자의 행동을 유도하고 서비스의 중심 기능을 자연스럽게 연결하는 전략적 UI 설계가 필요하다는 점을 배울 수 있었다.

---

회원가입과 메인 페이지는 앱 서비스에서 가장 중요한 진입점과 허브 역할을 하기 때문에, 오늘 실습한 내용을 기반으로 앞으로 실제 쇼핑몰 프로젝트나 앱 UI 설계 시 사용자 흐름과 정보 구조를 체계적으로 설계하는 데 직접적으로 활용할 수 있을 것 같다. 특히 Adobe XD에서 반복적으로 활용 가능한 컴포넌트 구성과 그리드 배치를 통해 효율적인 작업 방식도 함께 체득할 수 있었다.

 

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