구글의 캐러셀이 다르게 생긴 이유
캐러셀의 사용방법과 좋은 사례
캐러셀의 구성
캐러셀(Carousel)은 회전목마를 뜻하는 단어로, 이미지나 콘텐츠를 슬라이드 형식으로 순차적으로 보여주는 UI 컴포넌트입니다. 사용자는 좌우 화살표나 자동 재생을 통해 여러 항목을 빠르게 탐색할 수 있습니다.
❶ Container (컨테이너)
❷ Carousel item (캐러셀 아이템)
❸ Indicator (인디케이터)
❹ Pause·Play button (정지·재생 버튼)
캐러셀은 이미지나 비디오와 같은 시각적 항목과 레이블 텍스트를 포함합니다. 인디케이터를 통해 캐러셀의 전체 항목 수와 활성화된 항목 순서를 표시합니다. 정지·재생 버튼은 자동 회전 캐러셀에서 움직임을 재생하거나 정지하는 데 사용됩니다.
다른 비주얼의 Google Material 캐러셀
PC 및 모바일에서 주로 봐오던 캐러셀과 다르게, Google Material 3의 캐러셀은 조금 다른 모습을 하고 있습니다. 본 글에서는 기존의 캐러셀과는 다른 Material 3 캐러셀의 사용방법과 좋은 사례를 알아보도록 하겠습니다.
캐러셀의 구성(Material 3)
캐러셀은 Material 2에는 포함되지 않은 컴포넌트로, Material 3에서 처음 소개되었습니다. 본 캐러셀은 대형, 중형, 소형 3가지 크기의 아이템으로 표현되며, 스크롤 시 모양이 변하며 포커스 됩니다.
❶ Container (컨테이너)
❷ Large carousel item (대형 아이템)
❸ Medium carousel item (중형 아이템)
❹ Small carousel item (소형 아이템)
본 캐러셀에 대한 사용방법을 보며 왜 이러한 형태로 표현되는지, 어떠한 장단점이 있는지 알아보겠습니다.
캐러셀의 유형
Material 3의 캐러셀은 4가지 유형의 레이아웃으로 구분됩니다. 캐러셀은 그냥 스크롤되거나, 항목이 스냅 되도록 할 수 있습니다.
❶ Multi-browse (멀티 브라우징형)
❷ Uncontained (확장형)
❸ Hero (히어로형)
❹ Full-screen (전체화면형)
❶ 멀티 브라우징형
멀티 브라우징 레이아웃은 캐러셀 아이템의 크기가 다양하게 표현되기 때문에, 사진이나 이벤트 피드와 같이 여러 항목을 한 번에 탐색하는 데 가장 좋습니다. 캐러셀에 텍스트가 많이 필요하거나 복잡한 이미지가 있는 경우 본 레이아웃을 지양합니다.
❷ 확장형
확장형은 기존 우리가 알고 있는 캐러셀과 가장 비슷합니다. 기존 캐러셀의 경우 각 아이템이 하나의 크기만을 가지며, 화면 가장자리를 지나 스크롤링됩니다. 항목의 크기가 변하지 않으므로 텍스트가 가려지거나 잘리지 않고, 각 항목의 위아래에 더 많은 텍스트나 UI를 표시하기 용이합니다.
❸ 히어로형
히어로형은 영화나 미디어 썸네일과 같이 더 많은 집중이 필요한 콘텐츠를 강조하는 데 가장 효과적입니다. 집중할 큰 이미지를 강조하는 동시에, 이다음에 어떤 항목이 나올지 엿볼 수 있습니다. 스냅 스크롤을 사용하면 사용자가 한 번에 하나씩 항목을 쉽게 전환할 수 있습니다.
중앙정렬된 히어로형
히어로형 캐러셀을 중앙정렬하면 왼쪽에 미리 보기 아이템이 추가되고 큰 아이템이 중앙에 정렬됩니다.
❹ 전체화면형
전체화면형은 유튜브 쇼츠와 같이 시각적으로 풍부한 몰입형 콘텐츠에 가장 적합합니다. 이미지 위에 텍스트 및 UI 요소를 포함할 수 있습니다. 본 레이아웃은 너비보다 높이가 더 높고, 수직으로 스크롤되는 콘텐츠에 적합합니다. 또한 본 레이아웃에서는 스냅 스크롤만을 사용하므로 기본 스크롤을 사용하면 안 됩니다.
캐러셀의 사용방법
캐러셀의 사용방법에 대해 이어서 알아보도록 하겠습니다.
텍스트(선택 사항)
캐러셀의 아이템은 주로 시각적인 요소입니다. 텍스트는 선택사항이며 간단해야 합니다. 캐러셀 아이템에 많은 텍스트가 필요한 경우, 더 많은 정보를 표시할 수 있는 확장형 캐러셀 레이아웃을 사용하거나 카드(Card)를 나열하여 사용하는 것을 권장합니다.
캐러셀 내의 콘텐츠는 컨테이너와 창 크기에 따라 동적으로 조정될 수 있습니다. 텍스트는 항상 모든 크기에서 이해될 수 있어야 하며, 작은 캐러셀 아이템에는 간단한 레이블로 축약하는 것을 고려해야 합니다.
캐러셀 컨테이너의 크기가 커질수록 한 번에 볼 수 있는 캐러셀 아이템의 수도 늘어납니다. 작은 창 크기에서 캐러셀은 한 번에 최대 3개의 아이템을 표시할 수 있습니다. 그럼에도 전체화면의 캐러셀에는 한 번에 하나의 항목만 표시합니다.
왜 Material 3의 캐러셀은 다를까요?
본 캐러셀이 이러한 형태와 인터랙션을 지니고 있을까요? 가이드에 제공되는 내용을 통해 다음과 같이 유추해 볼 수 있습니다.
주요 콘텐츠를 강조하여 더 직관적인 경험 제공
기존 캐러셀은 모든 아이템이 동일한 크기라서 현재 보고 있는 콘텐츠를 강조하는 시각적 단서가 부족했으나, Material 3에서는 선택된 아이템의 크기가 커지면서 더욱 주목할 수 있도록 되었습니다.
부드러운 애니메이션
기존 캐러셀은 단순히 좌우 이동만을 제공하였으나, Material 3에서는 이미지의 패럴랙스 스크롤링과 아이템의 크기 변화를 포함한 애니메이션을 제공합니다.
시각적 다양성을 통한 차별화
기존 캐러셀은 단순한 아이템 형태를 지니지만, Material 3는 아이템 크기를 변화시켜 개성 있는 비주얼을 제공하며 모바일, 태블릿 같은 다양한 환경에서도 유연한 디자인 구현이 가능합니다.
이러한 비주얼과 사용성은 특정 콘텐츠 하나를 비주얼적으로 강력하게 강조하는 상황에는 효과적이지 않을까 생각이 듭니다. 그럼에도 불구하고 개인적으로는 기존 캐러셀의 멘탈모델이 남아있어, 사용자에게는 거부감이 느껴질 수 있다고 생각합니다.
새로운 사용성을 대하는 방법
이전 글에서 언급한 새로운 형태의 토글과 같이, 새로운 사용성과 비주얼의 컴포넌트를 사용해야 한다면 디자이너는 어떤 점들을 고려해야 할까요?
사용자의 기존 경험 대비 혼란을 주는가?
Material 3의 캐러셀처럼 크기가 변하는 인터랙션은 기존의 단순한 슬라이드형 캐러셀과 다르므로 학습이 필요합니다.
기존 사용패턴을 분석하고, 새 방식이 패턴을 깨는지 확인
만약 깨진다면, 사용자가 쉽게 학습할 수 있는 보조 요소(힌트, 애니메이션, 안내 문구 등) 제공
사용자가 직관적으로 인터랙션을 이해할 수 있는가?
새로운 컴포넌트의 사용법을 별도의 설명 없이 추측할 수 있는 어포던스가 충분한지 고려해야 합니다.
사용자들의 첫 사용 시 반응을 관찰
새로운 인터랙션이 더 나은 경험을 제공하는가?
기존 방식 대비 새로운 방식이 더 편리한지, 사용자의 행동을 개선할 수 있는지 확인해야 합니다.
사용자의 목표 달성 속도를 높이거나 피로도를 줄일 수 있는지 A/B 테스트 진행
기능이 새롭다고 해서 더 좋은 것은 아니다는 원칙을 고려
인지 부하를 줄이는 설계
너무 많은 정보를 한꺼번에 제공하거나, 사용자의 주의력을 과도하게 요구하지 않는지 확인
캐러셀의 좋은 사례
캐러셀의 좋은 사례를 다양한 특징별로 선별해 보았으니, 참고하여 활용하면 좋겠습니다.
Apple Store텍스트 영역을 이미지 영역과 분리하였으며, 콘텐츠 성격에 따라 아이템의 크기를 다르게 하였습니다.
Luma텍스트를 아이템 하단으로 위치시키고, 아이템에는 감각적인 일러스트레이션만을 사용하여 시원시원한 느낌이 인상적입니다.
Apple Store본 사례의 경우 세로로 긴 아이템을 히어로형 레이아웃으로 과감하게 표현하였습니다. 블랙 배경과 함께 제품의 비주얼을 더욱 인상적으로 강조하고 있습니다.
Netflix이미지를 설명하는 텍스트가 이미지의 형태로 포함되어 있어, 이미지 단독으로 구성된 확장형 레이아웃입니다. 경우에 따라 하단에는 New Season이라는 칩이 중앙에 정렬됩니다.
SoundCloud3개의 항목이 포함된 리스트를 가로로 스크롤링할 수 있는 캐러셀로 구성하였습니다. 긴 텍스트를 포함하는 항목을 쉽게 탐색할 수 있게 하는 케이스입니다.
마치며
캐러셀은 한정된 공간에 많은 콘텐츠를 표시할 수 있으며, 사용자의 흥미를 유발하거나 탐색을 유도할 수 있다는 장점을 가지고 있습니다. 반면 첫 콘텐츠 외에는 사용자가 쉽게 지나칠 수 있으며, 탐색 속도가 느려지거나 자동 재생 시 경험이 방해될 수 있다는 단점 또한 존재합니다.
그렇기에 첫 번째 카드를 가장 중요한 요소로 구성하는 것이 좋으며, 너무 작거나 조작하기 어려운 요소는 피하여 사용해야 합니다. 사용자가 하나씩 내용을 집중해서 볼 필요가 있거나, 많은 정보가 들어가는 경우 카드 컴포넌트를 사용하는 것이 적합할 수 있습니다.
캐러셀에 대한 구체적인 지침은 아래 가이드에서 확인하실 수 있습니다. 기존의 캐러셀과 함께 비교해보세요!
