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

캐러셀 권장사항

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

Katie Hempenius

캐러셀은 슬라이드쇼와 같은 방식으로 콘텐츠를 표시하는 UX 구성요소입니다. 캐러셀은 '자동재생'되거나 사용자가 수동으로 탐색할 수 있습니다. 캐러셀은 다른 곳에서도 사용할 수 있지만, 홈페이지에 이미지, 제품, 프로모션을 표시하는 데 가장 자주 사용됩니다.

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

성능

올바르게 구현된 캐러셀은 그 자체로 성능에 미치는 영향이 거의 없거나 전혀 없어야 합니다. 하지만 캐러셀에는 대용량 미디어 애셋이 포함되는 경우가 많습니다. 대용량 확장 소재는 캐러셀에 표시되는지 여부와 관계없이 실적에 영향을 미칠 수 있습니다.

LCP (최대 콘텐츠 렌더링 시간)

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

캐러셀에는 최소한의 JavaScript 요구사항이 있으므로 페이지 응답성에 영향을 미치지 않습니다. 사이트의 캐러셀에 장기 실행 스크립트가 있는 경우 캐러셀 도구를 교체하는 것이 좋습니다.
CLS (누적 레이아웃 변경)

놀라울 정도로 많은 캐러셀이 CLS에 기여할 수 있는 불안정한 합성되지 않은 애니메이션을 사용합니다. 자동재생 캐러셀이 있는 페이지에서는 이로 인해 무한 CLS가 발생할 수 있습니다. 이러한 유형의 CLS는 일반적으로 사람의 육안으로 명확하지 않기 때문에 문제를 간과하기 쉽습니다. 이 문제를 방지하려면 캐러셀에서 합성 작업을 거치지 않은 애니메이션을 사용하지 마세요 (예: 슬라이드 전환 중).

성능 권장사항

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

캐러셀 콘텐츠는 페이지 로드 프로세스 초기에 브라우저에서 검색할 수 있도록 페이지의 HTML 마크업을 통해 로드되어야 합니다. 자바스크립트를 사용하여 캐러셀 콘텐츠 로드를 시작하는 것은 캐러셀을 사용할 때 피해야 할 가장 큰 성능 실수일 것입니다. 이렇게 하면 이미지 로드가 지연되고 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);

고급 캐러셀 최적화의 경우 첫 번째 슬라이드를 정적으로 로드한 다음 탐색 컨트롤과 추가 콘텐츠를 포함하도록 점진적으로 개선하는 것이 좋습니다. 이 기법은 사용자의 주의가 오래 지속되는 환경에 가장 적합합니다. 이렇게 하면 콘텐츠를 로드하는 데 추가 시간이 확보됩니다. 사용자가 1~2초만 머무르는 홈페이지와 같은 환경에서는 이미지를 하나만 로드하는 것이 비슷하게 효과적일 수 있습니다.

레이아웃 변경 방지

슬라이드 전환과 탐색 컨트롤은 캐러셀에서 레이아웃이 전환되는 가장 일반적인 두 가지 요소입니다.

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

다음은 캐러셀의 CLS 측정과 관련하여 혼동이 자주 발생하는 몇 가지 사항입니다.

자동재생 캐러셀: 슬라이드 전환은 캐러셀 관련 레이아웃 변경의 가장 일반적인 원인입니다. 자동재생이 아닌 캐러셀에서는 일반적으로 사용자 상호작용 후 500밀리초 이내에 이러한 레이아웃 변경이 발생하므로 레이아웃 변경 횟수(CLS)에 포함되지 않습니다. 하지만 자동재생 캐러셀의 경우 이러한 레이아웃 전환이 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 점수에 중립적이거나 긍정적인 영향을 미칩니다.

이 변경사항은 많은 사이트에서 이전에 표시된 이미지를 DOM 트리에서 삭제하여 캐러셀 전환을 구현한다는 관찰에 따른 조치입니다. Chrome 88 이전에는 새 슬라이드가 표시될 때마다 이전 요소가 삭제되면 LCP 업데이트가 트리거되었습니다. 이 변경사항은 자동재생 캐러셀에만 영향을 미칩니다. 정의상 잠재적으로 가장 큰 콘텐츠 페인트는 사용자가 페이지와 처음 상호작용하기 전에만 발생할 수 있습니다.

Chrome 121의 기준점 변경사항

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

기타 고려사항

이 섹션에서는 캐러셀을 구현할 때 유의해야 하는 UX 및 제품 권장사항을 설명합니다. 캐러셀은 비즈니스 목표를 발전시키고 탐색하고 읽기 쉬운 방식으로 콘텐츠를 제공해야 합니다.

탐색 권장사항

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

캐러셀 탐색 컨트롤은 클릭하기 쉽고 눈에 잘 띄어야 합니다. 이는 잘 이루어지지 않는 경우가 많습니다. 대부분의 캐러셀에는 작고 미묘한 탐색 컨트롤이 있습니다. 단일 색상 또는 스타일의 탐색 컨트롤이 모든 상황에서 작동하는 경우는 거의 없습니다. 예를 들어 어두운 배경에서는 명확하게 보이는 화살표가 밝은 배경에서는 잘 보이지 않을 수 있습니다.

탐색 진행률 표시

캐러셀 탐색 컨트롤은 총 슬라이드 수와 사용자가 진행한 슬라이드 진행률에 관한 컨텍스트를 제공해야 합니다. 이 정보를 통해 사용자는 특정 슬라이드로 쉽게 이동하고 이미 조회된 콘텐츠를 파악할 수 있습니다. 경우에 따라 다음 슬라이드의 발췌 부분이나 썸네일 목록 등 예정된 콘텐츠의 미리보기를 제공하면 유용하고 참여도를 높일 수 있습니다.

모바일 동작 지원

휴대기기에서는 기존의 탐색 컨트롤 (예: 화면 버튼) 외에도 스와이프 동작이 지원되어야 합니다.

대체 탐색 경로 제공

대부분의 사용자가 모든 캐러셀 콘텐츠에 참여하지는 않으므로 캐러셀 슬라이드가 연결되는 콘텐츠는 다른 탐색 경로에서 액세스할 수 있어야 합니다.

가독성 권장사항

자동재생 사용 안함

자동재생을 사용하면 거의 모순적인 두 가지 문제가 발생합니다. 화면 애니메이션은 사용자의 주의를 분산시키고 더 중요한 콘텐츠에서 눈을 멀어지게 하는 경향이 있습니다. 동시에 사용자는 애니메이션을 광고와 연결시키는 경우가 많으므로 자동재생되는 캐러셀을 무시하게 됩니다.

따라서 자동재생이 좋은 선택인 경우는 드뭅니다. 콘텐츠가 중요한 경우 자동재생을 사용하지 않으면 노출이 극대화됩니다. 캐러셀 콘텐츠가 중요하지 않은 경우 자동재생을 사용하면 더 중요한 콘텐츠가 가려집니다. 또한 자동 재생 캐러셀은 읽기 어렵고 성가실 수 있습니다. 사용자마다 읽는 속도가 다르므로 캐러셀이 여러 사용자에게 '적절한' 시점에 일관되게 전환되는 경우는 드뭅니다.

슬라이드 탐색은 탐색 컨트롤을 통해 사용자가 직접 제어하는 것이 좋습니다. 자동재생을 사용해야 하는 경우 사용자 마우스 오버 시 자동재생이 사용 중지되어야 합니다. 또한 슬라이드 전환 속도에서는 슬라이드 콘텐츠를 고려해야 합니다. 슬라이드에 포함된 텍스트가 많을수록 화면에 더 오래 표시되어야 합니다.

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

캐러셀 텍스트 콘텐츠는 HTML 마크업을 사용하여 별도로 표시되는 대신 해당 이미지 파일에 '번들로 묶여' 있는 경우가 많습니다. 이 접근 방식은 접근성, 현지화, 압축률에 좋지 않습니다. 또한 애셋 생성에 일률적인 접근 방식을 권장합니다. 하지만 동일한 이미지 및 텍스트 형식이 데스크톱 형식과 모바일 형식에서 동일하게 읽기 쉬운 경우는 거의 없습니다.

간결하게 작성하기

사용자의 관심을 끄는 데는 몇 초밖에 걸리지 않습니다. 간결하고 핵심을 꿰뚫는 광고 문구를 사용하면 메시지가 전달될 가능성이 높아집니다.

제품 권장사항

캐러셀은 추가 콘텐츠를 표시하기 위해 추가 세로 공간을 사용할 수 없는 경우에 적합합니다. 제품 페이지의 캐러셀은 종종 이 사용 사례의 좋은 예입니다.

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

특히 프로모션이 포함되어 있거나 자동으로 전환되는 캐러셀은 사용자가 광고로 혼동하기 쉽습니다. 사용자는 광고를 무시하는 경향이 있습니다. 이를 배너 맹시라고 합니다.
캐러셀은 여러 부서를 달래고 비즈니스 우선순위에 관한 결정을 피하는 데 자주 사용됩니다. 따라서 캐러셀이 비효율적인 콘텐츠의 창고로 쉽게 변할 수 있습니다.

가정 테스트

특히 홈페이지에 있는 캐러셀의 비즈니스 효과를 평가하고 테스트해야 합니다. 캐러셀 클릭률을 사용하면 캐러셀과 콘텐츠가 효과적인지 판단할 수 있습니다.