캐러셀 및 슬라이더 시스템

캐러셀 및 슬라이더 시스템은(는) 무엇을 하나요?

목적

캐러셀 및 슬라이더 시스템은 사용자가 관련 콘텐츠(카드, 이미지, 사용후기) 컬렉션을 수직 공간을 과도하게 차지하지 않으면서 탐색할 수 있는 수평 스크롤 컨테이너를 설계하기 위한 방법론을 제공합니다. 캐러셀은 종종 낮은 참여도로 비판받지만, 체계적인 접근 방식은 어포던스, 지각된 성능, 사용자 제어에 초점을 맞춰 수평 탐색이 직관적이고 접근 가능하며 높은 영향력을 갖도록 보장합니다.

사용 사례

• 제품 탐색: 전자상거래에서 "관련 상품" 또는 "새로 도착한 상품" 탐색
• 소셜 증거: 고객 사용후기 또는 사례 연구 순서 표시
• 미디어 갤러리: 제한된 뷰포트 내에서 고밀도 사진 또는 비디오 컬렉션
• 온보딩/기능 투어: 일련의 가치 제안을 선형 순서로 사용자 안내
• 대시보드 위젯: 페이지 리듬을 유지하기 위해 여러 데이터 요약을 가로 행으로 관리

사용하지 말아야 할 경우

• 중요 순차 단계: 사용자가 작업을 완료하기 위해 반드시 모든 항목을 봐야 하는 경우, 누락을 방지하기 위해 수직 스택 또는 그리드를 사용하십시오.
• 소량 콘텐츠: 항목이 2-3개만 있는 경우 표준 그리드가 더 효율적이며 상호 작용이 덜 필요합니다.
• 다양한 콘텐츠 유형: 단일 캐러셀에 다른 카드 유형(예: 기사 옆에 제품)을 혼합하지 마십시오. 일관성은 스캔 가능성의 핵심입니다.
• 저가치 마케팅 슬라이더: 사용자가 일반적으로 무시하는 관련 없는 프로모션을 위한 대형 "히어로 캐러셀"(배너 블라인드니스)은 피하십시오.

입력

1. 콘텐츠 아키타입: 무엇이 스크롤됩니까? (예: card-ui-system 카드, 이미지 또는 텍스트 블록)
2. 카탈로그 크기: 전체 컬렉션에 몇 개의 항목이 있습니까?
3. 컨테이너 컨텍스트: 전체 너비 섹션입니까 아니면 그리드 열 안에 포함되어 있습니까?
4. 상호 작용 요구 사항: 자동 재생, 무한 루핑 또는 수동 전용 스크롤이 필요합니까?
5. 브랜드 토큰: 컨트롤 및 표시기를 위한 간격, 타이포그래피 및 색상 시스템

출력

1. 캐러셀 구조 명세: 컨테이너, 트랙, 내비게이션(화살표) 및 페이지네이션(불릿)에 대한 시각적 정의
2. 공개 전략: 수평으로 숨겨진 콘텐츠를 알리기 위해 정의된 "부분 항목 공개" 규칙
3. 반응형 매핑: 모바일, 태블릿 및 데스크톱에서 뷰당 항목 수에 대한 규칙
4. 접근성 청사진: ARIA 레이블, 포커스 관리 및 모션 제어 명세

워크플로

1. 탐색 의도 결정

사용자가 항목과 어떻게 상호 작용해야 하는지 식별하십시오:

• 선형: 사용자가 항목을 하나씩 이동합니다 (예: 온보딩).
• 탐색적: 사용자가 항목을 건너뛰거나 훑어볼 수 있습니다 (예: 제품 그리드).
• 주변적: 콘텐츠가 자동으로 이동합니다 (예: 로고 마키).

2. "공개 패턴" 설정

사용자에게 오른쪽에 더 많은 콘텐츠가 있음을 알리십시오:

• 부분 공개: "다음" 항목이 부분적으로 보이도록 합니다(보통 컨테이너 가장자리에서 10-20% 넘침). 이것이 스크롤 가능성에 대한 가장 강력한 시각적 신호입니다.
• 페이드 효과: 컨테이너 가장자리에 미묘한 그라데이션 페이드를 적용합니다.

3. 내비게이션 어포던스 선택

이동을 위한 명확한 컨트롤을 제공하십시오:

• 화살표(방향): 트랙의 수직 중앙에 배치합니다(컨테이너 내부 또는 외부). 고밀도 탐색에 가장 적합합니다.
• 페이지네이션(불릿/도트): 트랙 아래에 배치합니다. 진행 상황을 표시하기 위해 짧은 시퀀스(3-7개 항목)에 가장 적합합니다.
• 스크롤바: 하단의 시각적 진행 표시줄. 매우 큰 컬렉션에 가장 적합합니다.

4. 반응형 열 로직 정의

한 번에 표시할 항목 수를 매핑하십시오:

• 데스크톱: 뷰당 3–5개 항목
• 태블릿: 뷰당 2–3개 항목
• 모바일: 뷰당 1.2개 항목(전체 항목 1개 + 부분 공개 0.2개)

5. 컨트롤 및 접근성 구현

• 키보드 지원: 사용자는 ArrowLeft 및 ArrowRight를 사용하여 항목 간에 이동할 수 있어야 합니다. Tab은 모든 슬라이드가 아닌 다음 포커스 가능한 컨트롤로 이동해야 합니다.
• 모션 제어: 자동 재생을 사용하는 경우 표시되는 "일시 중지" 버튼을 제공하고 호버, 포커스 및 prefers-reduced-motion: reduce가 설정된 경우(호버/포커스에만 의존하지 마십시오) 애니메이션을 중지하십시오.
• ARIA 역할: ARIA APG 캐러셀 패턴을 따르십시오 — 컨테이너에 role="region"과 aria-label, aria-roledescription="carousel", 슬라이드 트랙에 aria-live="polite"(또는 자동 재생 중에는 "off")를 사용하여 스크린 리더가 압도당하지 않고 변경 사항을 알릴 수 있도록 하십시오.
• 포커스 가시성: 화살표, 점 및 슬라이드 콘텐츠의 포커스 표시기가 인접 슬라이드나 고정된 공개 가장자리에 의해 가려지지 않도록 하십시오(WCAG 2.2 SC 2.4.11).

의사 결정 규칙

• "부분 공개" 규칙: 모바일에서 화살표에 의존하지 않고 수평 스크롤을 나타내기 위해 항상 다음 항목의 일부를 표시하십시오.
• 화살표 vs. 불릿: 항목이 5개를 초과하는 경우 화살표를 사용하십시오. 총 개수가 적고(3-7) 진행 상황을 표시하는 것이 가치 있는 경우에만 불릿을 사용하십시오.
• 루핑 로직: 주변 탐색(로고 등)에만 "무한 루프"를 사용하십시오. 기능적 콘텐츠(예: 제품)의 경우 오른쪽 화살표가 비활성화되는 "트랙 끝" 상태를 사용하십시오.
• 스냅 스크롤: 항목이 스와이프 또는 클릭 후 컨테이너 가장자리에 완벽하게 정렬되도록 항상 scroll-snap-type: x mandatory를 사용하십시오.

제약 조건

• 접근성: prefers-reduced-motion을 지원해야 합니다. 모든 대화형 컨트롤(화살표/점)은 WCAG 2.2 SC 2.5.8(최소 터치 영역 24x24px, 기본 화살표의 경우 44x44px 선호)을 충족해야 합니다.
• 반응성: 항목은 유연해야 합니다. 캐러셀 컨테이너는 절대 수평 페이지 오버플로를 유발해서는 안 됩니다. 오버플로는 컴포넌트 내에 포함되어야 합니다. 항목 너비/간격에 clamp()를 사용하여 고정된 중단점에서 점프하는 대신 뷰당 항목 수가 부드럽게 조정되도록 하십시오.
• 지각된 성능: 아직 로드되지 않았거나 화면 밖에 있는 항목에는 skeleton-state-system을 사용하십시오.

일반적인 실패 패턴

• "보이지 않는" 캐러셀: 부분 공개도 없고 화살표도 없어 컴포넌트가 정적이고 깨진 그리드처럼 보입니다.
• "자동 재생 함정": 사용자가 읽을 수 없을 정도로 빠르게 콘텐츠를 회전시키거나 중지할 방법을 제공하지 않습니다.
• 깨진 스냅: 뷰포트 사이의 중간에 멈춰 콘텐츠를 잘라내는 항목입니다.
• 상호 작용 상태 누락: 호버/포커스 상태가 없거나 트랙 끝에 도달했을 때 비활성화된 것처럼 보이지 않는 화살표입니다.
• 모바일 오버플로: 전체 페이지의 너비를 확장하여 사용자가 수평 스크롤할 때 "길을 잃게" 만드는 캐러셀입니다.

검증 기준

• "부분 공개" 또는 숨겨진 콘텐츠의 명확한 시각적 표시기가 있습니다.
• 내비게이션 컨트롤(화살표/불릿)이 WCAG 2.2 SC 2.5.8(최소 터치 영역 24x24px)을 충족합니다.
• 키보드 탐색(화살표 키) 및 포커스 관리가 구현되었으며 포커스 표시기가 가려지지 않습니다(WCAG 2.2 SC 2.4.11).
• scroll-snap이 항목이 그리드에 정렬되도록 하는 데 사용됩니다.
• 자동 재생(사용하는 경우)은 사용자가 일시 중지할 수 있으며 prefers-reduced-motion에서 자동으로 중지됩니다.
• 모든 주요 중단점에 대한 반응형 항목 개수가 정의되어 있습니다.
• ARIA 랜드마크 및 레이블이 스크린 리더에 올바르게 적용되었습니다.