[제로베이스 UI/UX 파트타임 스쿨] 12주차 - (수) 검색페이지

제로베이스 80일차 학습노트이다.
오늘은 쇼핑몰 앱에서 핵심적인 기능 중 하나인 검색 기능과 결과 페이지 구성에 대해 실습을 진행했다. 사용자의 탐색과 접근성을 고려한 화면 설계가 중요했던 수업으로, 검색의 흐름뿐 아니라 연관 검색어, 정렬 탭, 결과 리스트까지 사용자 여정을 따라 구성해볼 수 있었다.

---

오늘의 강의 내용

 

1. 검색 페이지
검색 페이지에서는 사용자가 상품을 찾기 위해 직접 키워드를 입력하는 흐름을 중심으로 구성했다. 실습에서는 ‘T’만 입력해도 자동으로 연관 검색어로 't shirts'가 노출되도록 구성했고, 이를 통해 사용자가 원하는 키워드를 빠르게 찾을 수 있도록 인터랙션을 설계했다.

검색창은 상단에 고정된 형태로 배치하고, 사용자가 입력을 시작하면 연관 검색어와 최근 검색어가 하단에 나타나는 구조로 설계했다. 검색어 입력 상태에서도 결과로 바로 넘어갈 수 있게 하여 검색 흐름의 응답 속도와 직관성을 높였다.

 

2. 검색 결과 페이지
검색 결과 페이지에서는 사용자가 입력한 키워드에 따라 관련 상품 리스트를 보여주는 UI를 구성했다. 실습에서는 ‘t shirts’를 검색한 결과가 표시되었고, 결과 리스트 상단에는 탭바 형태의 정렬 옵션(Top Rated, Price Low, Price High 등)을 구현했다. 이 탭바를 통해 사용자가 원하는 기준으로 빠르게 결과를 정렬할 수 있도록 UX 흐름을 설계했다.

상품 리스트는 이미지, 상품명, 가격이 포함된 카드 모듈을 하나의 단위로 구성하여 반복적으로 배치했다. 이 모듈은 미리 디자인 시스템처럼 설정된 컴포넌트를 활용해 효율적으로 적용했으며, 클릭 시 상품 상세 페이지로 연결될 수 있도록 연결성도 고려했다.

또한 각 카드 간의 여백, 텍스트 크기, 이미지 비율 등도 통일성 있게 유지하여 정보 간의 가독성을 높였고, 사용자 시선 흐름에 따라 제품이 자연스럽게 나열되도록 구성했다.

---

검색 기능은 단순한 입력 기능을 넘어서 사용자 요구에 빠르게 응답하고 직관적으로 결과를 보여주는 인터페이스 설계가 중요하다는 점을 이번 실습을 통해 체감할 수 있었다. 특히 연관검색어의 실시간 제안과 정렬 기능, 반복 가능한 결과 모듈 구성은 실제 쇼핑몰 앱 UI 설계 시 핵심적으로 적용 가능한 구조라 향후 프로젝트에 바로 활용할 수 있을 것 같다.

 

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