Carousel
Carousel (캐러셀)
캐러셀은 현재 페이지를 벗어나지 않고 추천 기사, 상품, 서비스 같은 콘텐츠를 순환하며 볼 수 있게 해 주는 동적 컴포넌트예요. 페이지 안, 앱 안, 드로어, 모달에서 사람·카드·날짜·이미지 같은 항목을 보여주는 데 쓸 수 있어요.
출처: 문서
본문
캐러셀은 현재 페이지를 떠나지 않고 추천 기사, 상품, 서비스 같은 콘텐츠를 순환하게 해 주는 동적 컴포넌트예요. 페이지, 앱 안, 드로어(drawer), 모달에서 사람, 카드, 날짜, 이미지 같은 항목을 표시하는 데 사용할 수 있어요. 모달과 달리 캐러셀 내비게이션은 페이지의 나머지 부분과 독립적이라서, 자기 완결적인 경험을 제공해요.
Behavior (동작)
캐러셀에는 주목할 만한 동작이 몇 가지 있어요. 클릭 가능한 동작(clickable actions)과 자동 재생(auto-play)이 그것이에요.
클릭 가능한 동작
콘텐츠 영역 안에 클릭 가능한 동작이 있다면, 사용자는 그것과 상호작용할 수 있다는 것을 직접 선택할 수 있어요.
자동 재생(Auto-play)
캐러셀이 자동 재생 중이라면, 사용자에게는 항상 자동 재생을 일시 정지할 수 있는 옵션이 있어야 해요.
내비게이션(Navigation)
캐러셀은 두 가지 구분되는 내비게이션 옵션을 지원해요. Steps(단계)와 Image preview(이미지 미리보기)가 그것이에요.
Layout (레이아웃)
캐러셀은 이미지, 애플리케이션, 그 외 콘텐츠 등 다양한 요소를 보여줄 수 있는 다재다능한 컴포넌트예요. 설계자는 사용자에게 독특한 조합으로 맥락에 맞는 자료에 접근하게 하는 컬렉션을 구성할 수 있는 유연성을 얻죠.
카드 레이아웃(Card layout)
상품, 팀원, 후기처럼 개별 항목을 보여줄 때는 카드 스타일 캐러셀을 사용하세요. 각 카드는 이미지, 텍스트, 버튼을 섞어 담을 수 있어요.
웹 배너 레이아웃(Web banner layout)
웹 배너는 프로모션, 공지, 추천 콘텐츠를 강조하는 데 이상적이에요. 이런 배너는 보통 화면 전체 너비를 차지하고 이미지나 메시지를 순환해요.
이미지 갤러리 레이아웃(Image gallery layout)
이미지나 영상 컬렉션을 표시할 때는 이미지 갤러리 레이아웃을 사용하세요. 이런 캐러셀은 사용자가 시각 콘텐츠를 매끄럽게 탐색할 수 있게 해요.
Accessibility (접근성)
캐러셀은 WCAG 400% 줌 기준을 수용하도록 리플로(reflow)되어야 해요. 즉 창 너비가 600픽셀 이하가 되면 캐러셀이 전체 화면으로 스냅돼요. 콘텐츠는 반응형이어야 하고 600~320 화면 너비에 맞게 '줄어들어야' 해요. 이미지나 영상 콘텐츠는 종횡비(aspect ratio)를 유지하면서 창 너비에 맞춰 유연하게 늘어나요.