| Line 57: | Line 57: | ||
}} | }} | ||
| − | 여러 개의 콘텐츠가 일렬로 나열되어 있으면서 한쪽 끝(첫번째 콘텐츠)가 다른쪽 끝(마지막)과 맞닿아있는 원형 | + | Carousel은 여러 개의 콘텐츠가 일렬로 나열되어 있으면서 한쪽 끝(첫번째 콘텐츠)가 다른쪽 끝(마지막)과 맞닿아있는 원형 구조로 되어진 리스트 pattern이다. |
리스트가 움직이는 양방향 중 어느 쪽이든 상관없이 swipe하여 목록을 넘겨볼 수 있으며, 끊임없이 회전이 가능하다. 항목이 회전목마처럼 돌아가듯 보여져 Carousel이라고 부른다. | 리스트가 움직이는 양방향 중 어느 쪽이든 상관없이 swipe하여 목록을 넘겨볼 수 있으며, 끊임없이 회전이 가능하다. 항목이 회전목마처럼 돌아가듯 보여져 Carousel이라고 부른다. | ||
| − | Carousel 패턴의 리스트는 주로 썸네일 이미지로 이루어져 있으며, 중심에 위치한 콘텐츠 항목이 더 큰 사이즈로 강조되어 보이는 경우가 많다. | + | Carousel 패턴의 리스트는 주로 썸네일 이미지로 이루어져 있으며, 중심에 위치한 콘텐츠 항목이 더 큰 사이즈로 강조되어 보이는 경우가 많다. |
| + | |||
=== What Problem Does This Solve? === | === What Problem Does This Solve? === | ||
| − | + | 사용자가 콘텐츠를 선택하는 과정에서 대표 이미지를 목록에서 함께 보여주어야 하는 경우에 주로 사용한다. 한 번에 모든 항목을 수용하기에 화면 공간이 부족할 수 있기 때문에, 공간을 효율적으로 사용하면서 어려움 없이 직관적으로 넘겨볼 수 있도록 한다. | |
* 목록을 넘기는 과정에서 더 동적이고 매력적으로 보이게 한다. | * 목록을 넘기는 과정에서 더 동적이고 매력적으로 보이게 한다. | ||
| − | === Example : | + | * 리스트 중심에 있는 콘텐츠가 강조되어 보이더라도, 리스트에 끝이 존재하여 첫번째와 마지막 콘텐츠가 구분될 경우는 Rail로, Carousel에는 해당하지 않는다. |
| − | + | ||
| + | === Example : iOS_App store === | ||
| + | {{#Widget:Vimeo|id=93933788|width=533|height=395}} | ||
| + | |||
---- | ---- | ||
| + | |||
== Horizontal == | == Horizontal == | ||
| − | + | <div id="sun-col"> | |
| − | + | === Touch Kiosk === | |
| − | === | + | |
* 아래 영상의 15초 ~ 18초에 해당한다. | * 아래 영상의 15초 ~ 18초에 해당한다. | ||
{{#Widget:Vimeo|id=36790650|width=665|height=374|start=14s}} | {{#Widget:Vimeo|id=36790650|width=665|height=374|start=14s}} | ||
| Line 81: | Line 85: | ||
{{#Widget:Vimeo|id=23893504|width=665|height=374}} | {{#Widget:Vimeo|id=23893504|width=665|height=374}} | ||
| − | === | + | === iOS_ Swallet === |
{{#Widget:Vimeo|id=96494209|width=300|height=533}} | {{#Widget:Vimeo|id=96494209|width=300|height=533}} | ||
| − | === | + | ===iOS_iCarousel === |
{{#Widget:Vimeo|id=96500504|width=665|height=374}} | {{#Widget:Vimeo|id=96500504|width=665|height=374}} | ||
| − | + | </div> | |
---- | ---- | ||
== Ferris wheel == | == Ferris wheel == | ||
| − | + | <div id="sun-col"> | |
| − | + | === iOS_showcase === | |
| − | === | + | |
<videoflash type="vimeo">93552806|300|500</videoflash> | <videoflash type="vimeo">93552806|300|500</videoflash> | ||
| − | === | + | === iOS_Photo wheel=== |
<videoflash type="vimeo">96499833|300|500</videoflash> | <videoflash type="vimeo">96499833|300|500</videoflash> | ||
| − | === | + | === iOS_Endless Numbers === |
<videoflash type="vimeo">93045993|533|395</videoflash> | <videoflash type="vimeo">93045993|533|395</videoflash> | ||
| − | === | + | === iOS_Pacca's carousel === |
<videoflash type="vimeo">96497566|533|300</videoflash> | <videoflash type="vimeo">96497566|533|300</videoflash> | ||
| Line 106: | Line 109: | ||
* 아래 영상의 12초 ~ 15초에 해당한다. | * 아래 영상의 12초 ~ 15초에 해당한다. | ||
<videoflash type="vimeo">84570507|533|300</videoflash> | <videoflash type="vimeo">84570507|533|300</videoflash> | ||
| − | + | </div> | |
| − | + | ||
[[Category:Move in same level]] | [[Category:Move in same level]] | ||
Carousel은 여러 개의 콘텐츠가 일렬로 나열되어 있으면서 한쪽 끝(첫번째 콘텐츠)가 다른쪽 끝(마지막)과 맞닿아있는 원형 구조로 되어진 리스트 pattern이다.
리스트가 움직이는 양방향 중 어느 쪽이든 상관없이 swipe하여 목록을 넘겨볼 수 있으며, 끊임없이 회전이 가능하다. 항목이 회전목마처럼 돌아가듯 보여져 Carousel이라고 부른다.
Carousel 패턴의 리스트는 주로 썸네일 이미지로 이루어져 있으며, 중심에 위치한 콘텐츠 항목이 더 큰 사이즈로 강조되어 보이는 경우가 많다.
사용자가 콘텐츠를 선택하는 과정에서 대표 이미지를 목록에서 함께 보여주어야 하는 경우에 주로 사용한다. 한 번에 모든 항목을 수용하기에 화면 공간이 부족할 수 있기 때문에, 공간을 효율적으로 사용하면서 어려움 없이 직관적으로 넘겨볼 수 있도록 한다.