캐러셀(Carousel)

1. 정의

• 2장 이상의 이미지를 슬라이드 형식으로 보여주는 컨텐츠 형식
• 여러 가지 상품의 컨텐츠를 담을 수 있어 카탈로그 형식으로 많이 활용하는 컨텐츠 영역
• 메인 페이지에서 마케팅 정보를 보여주는 방법 중 하나로 사용
• 자동으로 컨텐츠가 움직이는 방법도 존재
  (너무 빠르게 움직일 경우 잘못된 정보를 선택할 수 있기 때문에 시간에 대해서도 많은 고민 필요)

2. 캐러셀 가이드

1) 콘텐츠 선정

  - 흥미롭거나 유용한 컨텐츠를 선정하여 사용

  - 광고처럼 보이지 않고 사이트의 일부로 보여야 함

  - 슬라이드 순서를 중요도 순으로 배치

2) 슬라이드 수 제한

  - 5개 이하의 슬라이드가 적정하나, 회사 정책에 따라 수 지정

3) 진행률 표시(무신사 이미지 내 빨간 영역 참고)

[무신사 홈페이지 발췌]

4) 네비게이션 컨트롤 디자인

  - 네비게이션 컨트롤이 있음을 캐러셀 내부에서 명확하게 표현해야 하며, 캐러셀 화살표가 잘 보여야 함(Apple 이미지 내 좌, 우 빨간 영역 참고)

[Apple 홈페이지 발췌]

5) 모바일 디바이스 환경을 고려한 스와이프 제스처 고려

3. 사이트 예시

[위메프]

  - 캐러셀 화살표 표기

  - 진행률: 숫자 형태로 표기([전체보기] 기능으로 캐러셀 콘텐츠 전체 한번에 확인 가능)

[위메프 홈페이지 발췌]

[옥션]

  - 캐러셀 화살표 표기

  - 진행률: 텍스트 형태로 출력(보여줄 컨텐츠가 많아 진행률 영역 마우스 오버 시, 메뉴 탭(LNB) 형태로 구성)

[옥션 홈페이지 발췌]