📦 잡동사니

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

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

🗂️ 캐러셀(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

undefined