캐러셀(Carousel)

정의

캐러셀(carousel)CSS 3D 트랜스폼과 자바스크립트로 제작된 일련의 콘텐트를 통해 순환하는 슬라이드쇼를 말한다. 캐러셀은 이미지, 텍스트, 혹은 커스텀 마크업으로 작동된다. 이전/다음과 같은 콘트롤과 인디케이터를 지원하기도 한다. 1)

캐러셀은 슬라이더(slider), 이미지 로테이터(image rotater) 등으로 불리기도 하나 2) 이들은 다음의 이유로 캐러셀의 하위 개념이라고 보는 것이 타당할 것이다. 첫째, 캐러셀의 구성요소에는 슬라이드가 포함되어 있고, 둘째, 이미지 뿐만 아니라 텍스트로 구성된 슬라이드도 있으므로,

구성

  • slides : 순환하는 콘텐트 3)
  • controls : 이전/다음 탐색이 가능한 내비게이션 4)
  • indicators : 슬라이드 지시자 5)
  • captions : 슬라이드를 설명하는 텍스트 6)

문제점

  • 사용성 문제

Erik Runyon의 연구에 의하면 방문자의 1%만이 캐러셀을 클릭하고, 그중 84%는 첫번째 슬라이드만을 클릭한다. 화살표 내비게이션 어포던스는 슬라이드가 남아있다는 것을 알려줄 뿐 클릭했을 때 얻을 수 있는 정보에 대해서는 설명하지 않는다. 때로는 화살표 내비게이션은 잘 보이지 않을 때가 많다.

  • 접근성 문제

캐러셀 콤포넌트는 일반적으로 접근성 규약(accessibility standards)을 준수하지 않는 점을 유의해야 한다.

적용시 고려 사항

  • 콘텐트 우선(Content First)
    • 흥미롭고 유용한 콘텐트에만 적용한다.
    • 중요한 슬라이드를 앞에 배치한다.
    • 콘텐트는 캐러셀에서만 보여주지 말고, 다른 영역에서도 접근 가능해야 한다.
    • 슬라이드 수는 제한한다. 5개 이하가 적당하다.
    • 광고처럼 보여서는 안된다.

  • 진행률(progress Indicator)

얼마나 많은 슬라이드가 있고, 사용자가 어느 위치에 있는지 알려주어야 한다. 사용자가 통제감을 느낄 수 있도록 한다.

  • 모바일 가독성(legibility)

콘텐트는 모바일 보기를 가장 우선순위에 두어야 한다. 텍스트는 모든 사이즈의 스크린에서 잘 읽을 수 있어야 한다. 데스크탑의 아트웍을 모바일에서 재사용하는 경우 가독성을 확인하여야 한다.

  • 콘트롤, 인디케이터(control, indicator)

내비게이션과 인디케이터는 캐러셀 내부에 포함되어야 하고, 화면 상단(above the fold)의 바깥쪽, 즉 화면 하단(below the fold)에 위치해서는 안된다. 색상과 모양은 배경에 대비해 충분히 식별이 가능해야 하고, 크기는 클릭하기에 충분히 커야 한다.

  • 스와이프(swipe gesture)

전통적인 캐러셀의 내비게이션 콘트롤 외에도 모바일 디바이스를 위해 스와이프 제스쳐를 지원해야 한다.

  • 레이블링(labeling)

각 슬라이드에 레이블을 붙인다. 레이블은 유익하고(informative), 의미있으며(meaningful), 설명적(descriptive)이어야 한다. 사용자가 원하는 것을 기술하도록 한다. 7)

 
맨 위로
캐러셀_carousel.txt · 마지막으로 수정됨: 2018/07/01 22:40 저자 baobab