스타트업 앱 개발진이 알아야 할 제품 리스트 UI 설계
제품/서비스 리스트 레이아웃 UI 종류
2열/3열 그리드형 UI
(카드형 UI)
장점
제품 비교가 용이: 같은 줄에 여러 제품을 나란히 배치하면 사용자가 제품 특징, 이미지, 가격을 쉽게 비교 가능하다.
스크롤 최소화: 한번에 더 많은 제품을 보여주므로 리스트가 길어질 때 스크롤 필요성이 줄어든다.
공간 효율성: 화면 공간을 더 효율적으로 활용할 수 있다. = 비어있는 여백 공간이 생기지 않는다
이미지 중심: 이미지 중심 상품이나 쇼핑몰에 적합. 그리드 형태가 미적으로 보기 좋고, 상품의 시각적 매력을 강조할 수 있다.
단점
정보 양 제한: 이미지와 정보가 작아져 제품에 대한 정보가 제한적일 수 있다.
터치 영역 제한: 각 제품 카드의 크기가 작아져 터치 영역이 불편해질 수 있다.
복잡성 증가: 많은 정보가 한 번에 표시돼 사용자가 집중하기 어려워질 수 있다.
가독성 저하: 작은 글씨와 이미지로 인해 제품 정보 이해가 떨어진다.
1열 UI
한 개씩 화면을 꽉 채워 보여주는 풀 와이드 UI
장점
가독성/집중력 강화: 제품 정보와 이미지가 상대적으로 크기 때문에 사용자가 상세 내용(타이틀, 가격, 설명 등)을 좀 더 잘 읽을 수 있다.
터치 편의성 향상: 카드 영역이 넓어져 터치하기가 용이하다.
시각적 임팩트: 풀 와이드 이미지는 브랜드 또는 제품의 특장점을 임팩트 있게 전달이 가능하다. 이미지, 세부 정보, CTA(구매/상세 페이지 이동 등) 모두 크게 표시할 수 있다.
단점
스크롤 증가: 제품당 화면을 많이 차지하므로 적은 수만 한 번에 보게 되어 스크롤이 많아진다.
비효율적 공간 사용: 제품 수가 많을 경우 빈 공간이 많아질 수 있다.
제품 비교 불편: 별점끼리, 배송 혜택끼리 등 특정 요소비교가 2열~ UI에 비해 상대적으로 조금 더 불편할 수 있다.
어떤 UI를 선택할까?
이미지 위주의 탐색 / 또는 탐색 초기일 경우
2열 그리드(또는 3열 컴팩트), 상단에 정렬·필터 고정.
'탐색 초기' 뜻? : 사용자가 아직 정확히 어떤 제품을 살지 결정하지 않은 상태에서 ‘후보를 넓게 훑어보는 단계
(예) 쿠팡 앱
텍스트가 핵심 / 또는 사양 비교가 핵심인 경우
1열 리스트(풀폭), 리뷰 수/혜택/배송정보를 1차 노출.
(예) gmail 받은 이메일 리스트
위 두 가지 니즈가 혼재하는 경우
뷰 토글 (그리드↔리스트) + 밀도 토글(컴팩트/여유).
남은 문제
= 고민해볼 이슈. UXUI 개선할 수 있는 부분
1. 이미지, 텍스트 사이즈는 어느정도가 적당한가?
2. 각 카드 영역에 어떤 내용들이 들어가는 것이 좋은가?
3. 어떤 순서로?
4. 각 카드는 어떻게 구분 지어줄까? 사이사이에 선을 넣어줄까 / 회색 패딩을 넣어줄까 등.
5. 페이지 로딩에 무한 스크롤 / 더보기 버튼 / 페이지네이션 중 어떤 것을 사용할까?
5. 페이지 로딩 방법
■ SNS같은 무한 탐색 & 발견이 주목적인 서비스일 때 :
무한 스크롤
(예) 인스타그램
■ 로딩 오래 걸리는 경우:
더 보기 버튼
(예) 쿠팡 등 쇼핑몰의 상세페이지
■ 과업성 높은 작업을 주로 수행하는 서비스일 경우:
페이지네이션
* 과업성 높음: 사용자가 앱이나 웹에서 분명한 목표를 가지고, 그걸 빠르고 정확하게 달성하려는 정도가 높다는 뜻.
(예) 사용자가 찾으려고 하는 대상이 확실한 경우. freepik, 망고보드, 캔바 등
기타
참고 용어
메이슨리 (Masonry. 유동형 타일): 카드 높이가 다양한 피드형 콘텐츠에 적합(이미지 우선). Material 그리드 가이드의 변형으로 적용.
