돌아가는 이미지 캐러셀(Carousel)

Night scene of a brightly lit carousel with horses, surrounded by trees, cars, and a lighthouse in the background.

 

캐러셀이란?

캐러셀의 사전적 정의는 회전목마. UIUX 용어로 사용될 땐 회전목마처럼 반복해서 돌아가는 형태의 이미지를 뜻한다. 캐러셀은 주로 커머스에서 메인 배너 영역에서 쉽게 볼 수 있다. 다른 단어로는 이미지 로테이터 혹은 슬라이더라고도 불린다.

 

캐러셀은 언제 사용할까?

다양한 랜딩페이지 배너나 이미지를 표현하고자 할 때, 한정된 영역 안에서 유저로 하여금 추가 콘텐츠가 있음을 알려줄 수도 있고, 자동으로 로테이션을 돌려 중요도 순으로 프로모션을 홍보할 수도 있다. 그래서인지 모바일, 태블릿 사이즈에서 더욱 자주 볼 수 있다.

 

캐러셀 예시

Mockup of a mobile phone displaying a Facebook carousel ad with multiple placeholder images.

상기 이미지와 같이 슬라이더 형태로 드래그해서 넘기는 경우에는 다음 이미지가 걸쳐 보이도록 표현해야 한다. 그래야 유저로 하여금 행동을 유도할 수 있다. 이미지가 걸쳐있지 않고 영역을 모두 채운다면 유저가 고정된 단일 이미지로 착각할 수 있다.

 

Placeholder image for a carousel with the text 'First slide.

혹은 상기 이미지처럼 arrow 아이콘과 이미지 하단에 이미지 개수를 표현해도 마찬가지로 다음 이미지가 있음을 유추할 수 있게 한다.