캐러셀(Carousel)

📦 잡동사니

하나의 키워드를 잡고 좀 편하게 정리하고 싶어 만든 잡동사니

잡동사니는 조선 후기 학자 안정복이 편찬한 잡동산이(雜同散異)에서 유래된 말이다.
잡동산이는 잡기(雜記)의 형태를 빌려온 책으로 구체적인 체계가 잡혀있지 않은 형식이다.
항목이 다소 난잡하고 내용의 구분이 혼동되어있다고 한다. 🤣

🗂️ 캐러셀(Carousel)

• 슬라이드쇼와 같은 방식으로 컨텐츠를 표시하는 UX 구성 요소
• 일반적으로 일정 시간에 따른 자동 재생 혹은 사용자가 수동으로 탐색하는 방식을 사용한다.
• 다양하게 활용할 수 있지만, 보통 홈페이지에서 이미지, 제품 및 프로모션을 표시할 때 사용된다.

성능

캐러셀의 동작 방식만 생각해보면 페이지 렌더링에 많은 영향을 줄 것 같았는데, 생각보다 잘 구현된 캐러셀은 그 자체로는 성능에 미치는 영향이 매우 적거나 없다고 한다. (다만 캐러셀에 포함된 큰 미디어 자산이 영향을 줄 수 있다.)

LCP(Largest Contentful Paint; 최대 콘텐트풀 페인트)

• 페이지가 처음으로 로드된 시점을 기준으로 뷰포트 내에 있는 가장 큰 이미지 또는 텍스트 블록의 렌더링 혹은 그 때까지의 시간을 의미한다.
• 캐러셀이 페이지 로드 시의 화면에 위치할 때, 캐러셀에 들어가는 미디어 자산의 크기가 가장 크다면 LCP에 영향을 줄 수 있다.
• 캐러셀에 들어가는 자원을 최적화하면 LCP를 크게 개선할 수 있다.

FID(First Input Delay: 최초 입력 지연)

• 웬만하면 캐러셀에는 최소한의 JavaScript 요구 사항만이 들어가기 때문에 큰 영향을 주지 않는다.
• 만약 영향을 준다면, 당장 캐러셀 동작을 구현한 JS 코드를 뜯어고쳐야 한다!

CLS(Cumulative Layout Shift: 누적 레이아웃 이동)

• 페이지의 전체 수명 동안 발생하는 모든 예기치 않은 레이아웃 이동의 누적을 말한다.
  • 대략적으로 페이지 뷰포트의 50%를 차지하는 이미지가 위에서 아래로 뷰포트 높이의 10%를 움직이는 페이지가 있다고 가정하자.
  • 그러면 0.5 * 0.1 = 0.05로 레이아웃 이동 점수는 0.05가 된다.
• 보통 CLS 점수는 0.1 이하여야 우수한 사용자 경험을 제공한다고 한다.(넘 빡센 느낌..?!)
• 생각보다 많은 웹 페이지에서 CLS의 원인이 되는 낮음 품질의 애니메이션을 사용한다.
  • 여기서 낮은 품질의 애니메이션이란 캐러셀의 움직임을 composite 단계에서 처리하는 것이 아닌 layout 과정 즉, 리플로우로 처리하는 것을 말한다.(비합성 과정)

추가

• 캐러셀 컨텐츠는 가능하면 HTML 마크업을 통해서 로드되게 하는 게 좋다고 한다.

JS를 사용하여 캐러셀 컨텐츠를 로드하는 것은 이미지 로딩을 지연시키고 LCP에 부정적인 영향을 줄 수 있다고 한다. 또한 HTML을 사용하여 캐러셀 컨텐츠를 구현해야 검색 엔진 최적화(SEO)를 가져올 수 있다.

참고

• 캐러셀 권장사항
• LCP
• CLS