이 페이지는 Cloud Translation API를 통해 번역되었습니다.

캐러셀 권장사항

성능과 사용성을 위해 캐러셀을 최적화합니다.

Katie Hempenius

캐러셀은 슬라이드쇼와 같은 방식으로 콘텐츠를 표시하는 UX 구성요소입니다. 캐러셀은 '자동재생' 기능을 사용자가 수동으로 탐색할 수 있습니다. 캐러셀이 다른 곳에서 사용할 수 있으며, 이미지를 표시하는 데 가장 자주 사용됩니다. 제품 및 프로모션에 관한 다이어그램을 그려보세요

이 도움말에서는 캐러셀의 성능 및 UX 권장사항을 설명합니다.

성능

캐러셀이 잘 구현된 경우 그 자체로는 최소한의 요소만 갖추거나 전혀 없어야 합니다. 영향을 미치지 않습니다 그러나 캐러셀에는 대용량 미디어 애셋이 포함되는 경우가 많습니다. 대규모 애셋은 표시할 수 있습니다.

LCP (최대 콘텐츠 페인트)

스크롤 없이 볼 수 있는 큰 캐러셀에는 페이지의 LCP 요소가 포함되는 경우가 많습니다. LCP에 상당한 영향을 미칠 수 있습니다. 이러한 시나리오에서는 캐러셀을 최적화하면 LCP가 크게 개선될 수 있습니다. 심화 학습 캐러셀이 포함된 페이지에서 LCP 측정이 작동하는 방식에 대한 설명 캐러셀용 LCP 측정을 참고하세요. 섹션으로 이동합니다.
INP(Interaction to Next Paint)(다음 페인트에 대한 상호작용)

캐러셀은 최소한의 자바스크립트 요구사항이 있으므로 영향을 주지 않습니다. 사이트의 캐러셀에 실행 시간이 긴 스크립트의 경우 캐러셀 도구를 교체하는 것이 좋습니다.
CLS (레이아웃 변경 횟수)

놀랍게도 수많은 캐러셀이 합성되지 않은 버벅거리는 애니메이션을 사용하여 CLS에 기여할 수 있습니다 캐러셀이 자동재생되는 페이지에서는 무한 CLS가 발생할 가능성이 있습니다. 이러한 유형의 CLS는 일반적으로 명확하지 않습니다. 이 문제는 간과하기 쉽습니다. 이를 방지하려면 합성되지 않은 애니메이션은 사용하지 마세요. 를 표시할 수 있습니다 (예: 슬라이드 전환 중).

성능 권장사항

HTML을 사용하여 캐러셀 콘텐츠 로드

캐러셀 콘텐츠는 페이지의 HTML 마크업을 통해 로드되어야 페이지 로드 프로세스 초기에 브라우저에서 검색할 수 있어야 합니다 JavaScript를 사용하여 캐러셀 콘텐츠의 로드를 시작하는 작업은 아마도 피해야 할 성능 실수입니다. 이로 인해 이미지 로드가 지연되고 LCP에 부정적인 영향을 줄 수 있습니다.

권장사항

<div class="slides">
  <img src="https://example.com/cat1.jpg">
  <img src="https://example.com/cat2.jpg">
  <img src="https://example.com/cat3.jpg">
</div>

금지사항

const slides = document.querySelector(".slides");
const newSlide = document.createElement("img");
newSlide.src = "htttp://example.com/cat1.jpg";
slides.appendChild(newSlide);

고급 캐러셀 최적화를 사용하려면 첫 번째 슬라이드를 정적으로 로드하는 것이 좋습니다. 내비게이션 컨트롤과 추가 API를 포함하도록 점차적으로 있습니다. 이 기법은 gcloud 명령어를 사용하여 사용자의 주의를 오래 끌 수 있기 때문에 콘텐츠가 로드되는 데 시간이 더 걸립니다. 포함 사용자가 1초 또는 1초만 머무르는 환경과 같은 환경에서 둘째, 단일 이미지만 로드하는 것도 비슷하게 효과적일 수 있습니다.

레이아웃 변경 피하기

슬라이드 전환과 탐색 컨트롤은 캐러셀의 레이아웃 변경:

슬라이드 전환: 슬라이드 전환 중에 발생하는 레이아웃 변경은 일반적으로 DOM 요소의 레이아웃을 유도하는 속성을 업데이트하여 발생합니다. 이러한 속성의 예로는 left, top, width, marginTop입니다. 레이아웃 변경을 방지하려면 CSS transform 드림 속성을 사용하여 이러한 요소를 전환할 수 있습니다. 이 데모는 transform를 사용하여 기본 캐러셀을 빌드합니다.
탐색 컨트롤: 캐러셀 탐색 이동 또는 추가/삭제 이러한 변경 방법에 따라 레이아웃이 변경될 수 있습니다. 구현됩니다. 이러한 동작을 보이는 캐러셀은 일반적으로 자동으로 생성됩니다

다음은 CLS 측정과 관련하여 자주 혼동하는 사항입니다. 캐러셀:

자동재생 캐러셀: 슬라이드 전환은 레이아웃 변경이 있을 수 있습니다. 자동재생이 아닌 캐러셀에서는 레이아웃이 다음과 같이 바뀝니다. 일반적으로 사용자 상호작용 후 500ms 이내에 발생하므로 누적 레이아웃 이동 방향 (CLS) 하지만 이런 레이아웃 변경 횟수도 계산할 수 있습니다. 무한 반복할 수도 있습니다 따라서 특히 자동재생 캐러셀이 레이아웃의 소스가 아닌지 확인하는 것이 중요합니다. 있습니다
스크롤: 일부 캐러셀에서는 사용자가 스크롤을 사용하여 탐색할 수 있습니다. 합니다. 요소의 시작 위치가 변경되지만 스크롤 오프셋이 변경되는 경우 (즉, scrollLeft 드림 또는 scrollTop) 같은 양만큼 (하지만 반대 방향으로) 바뀌는 것은 아닙니다. 동일한 프레임에서 발생하는 경우 레이아웃 변경으로 간주됩니다.

레이아웃 이동에 관한 자세한 내용은 디버그 레이아웃 교대 근무

캐러셀 콘텐츠 최적화

캐러셀에는 사이트에서 가장 큰 이미지 중 일부가 포함되는 경우가 많으므로 시간이 얼마나 소요되는지 살펴보겠습니다. 적합한 솔루션 선택 이미지 형식 및 압축 수준, 이미지 CDN 사용 srcset를 사용하여 여러 이미지 게재 버전은 이미지의 전송 크기를 줄일 수 있는 모든 기술을 사용합니다.

실적 측정

이 섹션에서는 캐러셀과 관련된 LCP 측정에 대해 설명합니다. 하지만 캐러셀은 LCP 중에 다른 UX 요소와 다르게 처리되지 않음 자동 재생 캐러셀의 LCP 계산 방식은 혼동하기 쉬운 부분입니다.

캐러셀의 LCP 측정

다음은 LCP 계산 방식이 캐러셀에서 어떻게 작동하는지 이해하기 위한 핵심 사항입니다.

LCP는 페이지 요소가 프레임에 그려질 때 페이지 요소를 고려합니다. 새 후보자 LCP 요소의 경우 사용자가 상호작용 (탭, 스크롤하거나 키를 누를 때)에 영향을 미칠 수 있습니다. 따라서 자동재생의 모든 슬라이드는 캐러셀은 최종 LCP 요소가 될 가능성이 있는 반면, 정적인 캐러셀의 첫 번째 슬라이드만 잠재적 LCP 후보가 됩니다.
동일한 크기의 이미지 두 개가 렌더링되면 첫 번째 이미지가 고려됩니다. LCP 요소입니다. LCP 요소는 LCP 후보가 현재 LCP 요소보다 큽니다. 따라서 모든 캐러셀 요소가 크기가 동일한 경우 LCP 요소가 가장 먼저 표시되는 이미지여야 합니다.
LCP 후보를 평가할 때 LCP는 '가시적 크기 또는 고유한 크기 중 더 작은 크기'를 참조하세요. 따라서 자동재생 시 캐러셀은 이미지를 일정한 크기로 표시하지만 다양한 내장 크기 디스플레이 크기보다 작은 경우 LCP 요소가 새 것으로 변경될 수 있음 슬라이드가 표시됩니다. 이 경우 모든 이미지가 동일한 고유 크기가 가장 큰 이미지가 LCP로 간주됩니다. 요소가 포함됩니다. LCP를 낮게 유지하려면 자동재생의 모든 항목이 동일한 기본 크기입니다.

Chrome 88에서 캐러셀의 LCP 계산 변경사항

Chrome 기준 88, 나중에 DOM에서 제거되는 이미지는 가장 큰 크기로 간주됩니다. 사용하지 마세요. Chrome 88 이전에는 이러한 이미지가 고려해 보시기 바랍니다 자동재생 캐러셀을 사용하는 사이트의 경우 이 정의가 LCP 점수에 중립적이거나 긍정적인 영향을 줍니다.

이번 변경은 관찰 많은 사이트에서 이전에 사용하던 표시된 이미지를 가져옵니다. Chrome 88이 출시되기 전에는 슬라이드가 제시되었을 때 이전 요소를 삭제하면 LCP가 트리거되어 업데이트. 이 변경사항은 정의에 따른 자동재생 캐러셀에만 영향을 미치며, 최대 콘텐츠 페인트는 사용자가 있습니다.

Chrome 121의 기준점 변경사항

Chrome 121에서는 캐러셀과 같은 가로 스크롤 이미지의 동작을 변경했습니다. 이제 세로 스크롤과 동일한 임계값을 사용합니다. 즉, 캐러셀 사용 사례의 경우 이미지가 표시 영역에 표시되기 전에 로드됩니다. 즉, 사용자가 이미지 로드를 알아차릴 가능성은 낮지만 다운로드 수는 증가합니다. 수평 지연 로드 데모를 사용하여 Chrome의 동작과 Safari 및 Firefox의 동작을 비교해 보세요.

기타 고려사항

이 섹션에서는 반드시 지켜야 할 UX 및 제품 권장사항을 설명합니다. 고려해야 합니다. 캐러셀은 비즈니스 목표 달성에 도움이 됩니다 탐색하고 읽기 쉬운 방식으로 콘텐츠를 제공할 수 있어야 합니다.

탐색 권장사항

눈에 잘 띄는 탐색 컨트롤 제공

캐러셀 탐색 컨트롤은 클릭하기 쉽고 눈에 잘 띄어야 합니다. 이것은 대부분의 캐러셀에는 제대로 실행되지 않는 탐색 컨트롤이 있어서 작고 미묘합니다. 단, 단일 색상이나 스타일은 탐색 컨트롤이 모든 상황에서 작동하는 경우는 거의 없습니다. 예를 들어 화살표 어두운 배경에서 선명하게 보이는 부분은 잘 보이지 않을 수 있습니다. 빛을 반사합니다.

탐색 진행률 표시

캐러셀 내비게이션 컨트롤은 슬라이드 및 슬라이드를 통해 사용자의 진행 상황을 확인할 수 있습니다. 이 정보를 통해 사용자가 특정 슬라이드로 이동하여 이미 조회되었습니다. 일부 상황에서는 게재 예정 광고의 미리보기를 다음 슬라이드의 발췌문이든 미리보기 이미지 목록이든 상관없습니다. 참여도를 높일 수 있습니다

모바일 동작 지원

모바일에서는 기존의 스와이프 동작 외에 스와이프 동작이 지원되어야 함 탐색 컨트롤 (예: 화면 버튼)

대체 탐색 경로 제공

대부분의 사용자가 모든 캐러셀 콘텐츠에 참여할 가능성은 낮으므로 다른 탐색 메뉴에서 액세스할 수 있어야 하는 캐러셀 슬라이드 콘텐츠 학습합니다.

가독성 권장사항

자동재생 사용 안함

자동재생을 사용하면 두 가지 모순적인 문제가 생깁니다. 바로 '화면상'이라는 점입니다. 애니메이션은 사용자의 주의를 산만하게 하고 더 중요한 대상에게서 눈을 멀게 하는 경향이 있습니다. content; 사용자가 애니메이션을 광고와 연관 짓는 경우가 많기 때문에 는 자동재생되는 캐러셀을 무시합니다.

따라서 자동재생이 좋은 선택인 경우는 거의 없습니다. 콘텐츠가 중요하다면 자동재생을 사용하면 노출이 극대화됩니다. 캐러셀 콘텐츠가 중요하지 않은 경우 자동재생을 사용하면 더 중요한 콘텐츠의 주목을 잃을 수 있습니다. 또한 자동재생 캐러셀은 읽기 어려울 수 있을 뿐만 아니라 성가실 수도 있습니다. 읽은 항목 따라서 캐러셀이 1초부터 한 번씩 '오른쪽' 시간을 절약할 수 있습니다.

슬라이드 탐색은 탐색 컨트롤을 통해 사용자가 조작하도록 하는 것이 가장 좋습니다. 만약 자동재생을 사용해야 하며 마우스를 가져가면 자동재생이 사용 중지되어야 합니다. 또한 슬라이드 콘텐츠를 고려하여 슬라이드 전환 속도를 조절합니다. 슬라이드에 포함되어 있는 것일수록 화면에 더 오래 표시되어야 합니다.

텍스트와 이미지를 별도로 유지

캐러셀 텍스트 콘텐츠는 대체로 해당 이미지 파일에 HTML 마크업을 사용하여 별도로 표시할 수 없습니다. 이 접근 방식은 접근성, 현지화 및 압축률 등입니다. 또한 모든 상황에 적용할 수 있는 일률적인 접근 방식 그러나 동일한 이미지와 텍스트는 형식은 데스크톱과 모바일 형식에서 동일하게 읽을 수 있는 경우가 드뭅니다.

간결하게 만듭니다.

사용자의 관심을 끄는 데 1초도 걸리지 않습니다. 짧게, 요점을 정확히 설명하는 문구를 사용하면 메시지가 전달될 가능성이 높아집니다.

제품 권장사항

캐러셀은 추가 세로 공간을 사용하여 추가 콘텐츠를 표시하는 것은 옵션이 아닙니다. 제품 페이지의 캐러셀은 이 사용 사례의 좋은 예입니다.

그러나 캐러셀이 항상 효과적으로 사용되는 것은 아닙니다.

특히 프로모션이 포함되거나 자동으로 진행되는 캐러셀은 다음과 같이 착오하기 쉽습니다. 광고를 게재할 수 있습니다. 사용자는 광고를 무시하는 경향이 있음 배너 광고라고 함 맹인.
캐러셀은 여러 부서를 배치하고 복잡하게 밀려나지 않도록 하는 데 결정을 내리는 데 도움이 됩니다 따라서 캐러셀을 쉽게 전환하고 비효과적인 콘텐츠를 폐차하는 게 아니니까요.

가정한 내용 테스트하기

캐러셀, 특히 홈페이지의 캐러셀이 비즈니스에 미치는 영향은 가장 적합한 대안입니다 캐러셀 클릭률은 그 콘텐츠가 효과적입니다.