Difference between revisions of "Carousel"

Revision as of 21:56, 23 May 2014

여러 개의 콘텐츠가 일렬로 나열되어 있으면서 한쪽 끝(첫번째 콘텐츠)가 다른쪽 끝(마지막)과 맞닿아있는 원형 구조의 리스트이다.

리스트가 움직이는 양방향 중 어느 쪽이든 상관없이 swipe하여 목록을 넘겨볼 수 있으며, 끊임없이 회전이 가능하다. 항목이 회전목마처럼 돌아가듯 보여져 Carousel이라고 부른다.

Carousel 패턴의 리스트는 주로 썸네일 이미지로 이루어져 있으며, 중심에 위치한 콘텐츠 항목이 더 큰 사이즈로 강조되어 보이는 경우가 많다. (리스트 중심에 있는 콘텐츠가 강조되어 보이더라도, 리스트 자체가 반복 회전이 불가능한 경우는 carousel이 아닌 rail 패턴에 속한다.)

What Problem Does This Solve?

• 사용자가 콘텐츠를 선택하는 과정에서, 대표 이미지를 목록에서 함께 보여주어야 하는 경우에 주로 사용한다. 한 번에 모든 항목을 수용하기에 화면 공간이 부족할 수 있기 때문에, 공간을 효율적으로 사용하면서 직관적으로 넘겨볼 수 있도록 한다.

• 목록을 넘기는 과정에서 더 동적이고 매력적으로 보이게 하는 효과가 있다.

Horizontal

항목이 회전목마처럼 가로로 돌아가며 보여진다.

565번 사례

• 화면을 드래그하여 캐로셀 형태로 그림을 돌려본다.

389번 사례

• 대형 터치스크린에서 화면을 drag 하여 가로로 나열된 항목을 둘러본다.
• 단, 아래 영상의 15초 ~ 18초에 해당한다.

Vertical

항목이 회전목마처럼 세로로 돌아가며 보여진다.

Ferris wheel

항목이 대관람차처럼 돌아가며 보여진다.

415번 사례

• 메뉴를 swipe 하면 관람차가 돌듯이 메뉴를 회전시켜 둘러 볼 수 있다.

347번 사례

• 1부터 25까지의 목록이 큰 원 모양으로 배열되어 한바퀴 돌면 다시 반복되며, 좌우로 swipe하여 가로에 비슷하게 목록을 움직인다.