[UI 디자인] 사용자에게 정보 전달: 캐러셀, 페이지네이션

콘텐츠가 많을 때 모든 정보를 한 화면에 보여줄 수는 없습니다.
이때 자주 사용되는 UI 패턴이 바로
**캐러셀(Carousel)**과 **페이지네이션(Pagination)**입니다.

 

1. 캐러셀 컴포넌트란?

캐러셀은
여러 개의 콘텐츠를 한 영역에서 좌우로 넘겨가며 보여주는 UI 컴포넌트입니다.

 

1️⃣ 특징

• 카드, 배너, 이미지 목록에 자주 사용
• 좌·우 화살표 또는 스와이프 제스처 지원
• 공간을 효율적으로 사용 가능

2️⃣ 활용

• 추천 콘텐츠
• 신규 도서 / 상품 목록
• 이벤트 배너

핵심: “많은 콘텐츠를 한 영역에 담고 싶을 때”

캐러셀 컴포넌트 예시

 

2. 페이지네이션이 필요한 이유

캐러셀만 사용하면 사용자는

“지금 몇 번째 콘텐츠를 보고 있는지”
헷갈릴 수 있습니다.

이때 필요한 것이 페이지네이션입니다.

 

3. 페이지네이션(Pagination)이란?

페이지네이션은
전체 콘텐츠 중 현재 위치를 시각적으로 알려주는 요소입니다.

 

1️⃣ 대표적인 형태

• ● ○ ○ ○ (도트 형태)
• 숫자 페이지
• 슬라이드 인디케이터

2️⃣ 역할

• 현재 위치 인지
• 남은 콘텐츠 개수 예측
• 탐색에 대한 심리적 안정감 제공

페이지네이션 예시

 

 

4. 캐러셀 + 페이지네이션의 조합

캐러셀과 페이지네이션은 세트로 쓰일 때 가장 효과적입니다.

• 캐러셀 → 콘텐츠 탐색
• 페이지네이션 → 위치 안내

 사용자는
“어디쯤 와 있는지”를 알고 안심하며 넘길 수 있습니다.

 

 

정리하면

 

캐러셀은 콘텐츠를 보여주는 방식이고,
페이지네이션은 그 안에서 길을 잃지 않게 해주는 안내판이다.

 

 

• 콘텐츠가 많다 → 캐러셀
• 위치 인지가 필요하다 → 페이지네이션
• 둘을 함께 사용하면 → 사용성 상승