본문 바로가기 메인메뉴 바로가기
이 누리집은 대한민국 공식 전자정부 누리집입니다.

캐러셀

캐러셀은 하나의 콘텐츠 영역 내에 여러 개의 서로 다른 콘텐츠를 표시할 수 있는 컴포넌트이다. 캐러셀에 포함된 콘텐츠는 가로로 배치되어 있으며, 사용자가 좌/우로 콘텐츠를 회전시켜 콘텐츠를 탐색하도록 하거나 자동으로 회전하도록 설정할 수 있다.

컴포넌트명

캐러셀 (Carousel)

캐러셀 구조 예시

  1. 1.항목 탐색 식별자

    캐러셀의 전체 항목 수와 활성화된 항목의 순서 정보를 표시함

  2. 2.분수

    전체 항목 수와 탐색 중인 항목 순서를 숫자로 표시함

  3. 3.도형

    식별자를 시각적으로 강조하여 표현한 유형으로 일반적으로 원 아이콘이 사용됨. 화면 너비가 충분하거나 전체 슬라이드 수가 5개 이내인 경우에 사용하기 적합하며, 각 슬라이드로 이동할 수 있는 수단으로 활용됨

  4. 4.정지/재생 버튼

    자동 회전 캐러셀에서 움직임을 정지하거나 재생하는 데 사용하는 버튼

  5. 5.탐색 버튼

    항목 목록의 이전/다음 요소를 탐색하는 데 사용되는 버튼
유형

Carousel_atomic

Type버튼의 성격에 맞게 사용한다.

  • Arrow-left

  • Arrow-right

  • Play

  • Pause

  • More

코드 보기

State사용자의 상호작용에 따라 변경된다.

  • Default

  • Hover

  • Disabled

코드 보기

Size콘텐츠 내에서 적합한 계층을 가진 크기로 사용한다.

  • Small

  • Large

코드 보기

가이드

  • 캐러셀 항목의 콘텐츠의 윤곽이 명확하게 드러나도록 표현한다. 배경색, 테두리, 그림자 등을 활용하여 캐러셀 각 항목이 변별되도록 표현해야 한다. 항목의 경계가 명확하게 변별되지 않으면 링크나 버튼으로 작동하는 캐러셀 항목은 상호작용 가능한 영역을 인지하기 어려우며, 다중 항목의 캐러셀에서 항목 간 구분이 어려워진다.
  • 전체 슬라이드 수와 사용자의 탐색 위치를 표시한다. 사용자가 탐색 가능한 정보의 양을 가늠하고 탐색 중인 슬라이드 위치를 확인하여 필요에 따라 다시 정보를 탐색할 수 있도록 정보를 제공해야 한다.
  • 드래그 앤 드롭/스와이프로 슬라이드를 전환할 수 있도록 한다. 헤더와 패널이 하나의별도의 탐색 버튼이 존재하는 상황에서도 사용자가 원하는 방식으로 캐러셀을 탐색할 수 있도록 드래그 앤 드롭 또는 스와이프 동작을 통해 슬라이딩 애니메이션이 작동할 수 있도록 한다. 콘텐츠 섹션으로 인지될 수 있게 표현되어야 하며, 필요한 경우 여백, 색상, 그림자, 선을 사용할 수 있다.