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

캐러셀 권장사항

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

Katie Hempenius

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

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

성능

잘 구현된 캐러셀은 그 자체로 성능에 거의 영향을 미치지 않거나 미미합니다. 하지만 캐러셀에는 대용량 미디어 애셋이 포함되는 경우가 많습니다. 애셋이 크면 캐러셀이나 다른 위치에 표시되는지와 상관없이 성능에 영향을 줄 수 있습니다.

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

스크롤 없이 볼 수 있는 큰 캐러셀에는 페이지의 LCP 요소가 포함되는 경우가 많으므로 LCP에 상당한 영향을 미칠 수 있습니다. 이러한 시나리오에서는 캐러셀을 최적화하면 LCP가 크게 개선될 수 있습니다. 캐러셀이 포함된 페이지에서 LCP 측정이 작동하는 방식에 관한 자세한 내용은 캐러셀의 LCP 측정 섹션을 참고하세요.
FID (최초 입력 반응 시간)

캐러셀은 최소한의 자바스크립트 요구사항이 있으므로 페이지 상호작용에 영향을 미치지 않습니다. 사이트의 캐러셀에 장기 실행 스크립트가 있는 경우 캐러셀 도구를 교체하는 것이 좋습니다.
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 측정과 관련하여 자주 발생하는 몇 가지 혼동되는 사항입니다.

자동재생 캐러셀: 슬라이드 전환은 캐러셀 관련 레이아웃 변경의 가장 일반적인 소스입니다. 자동재생이 아닌 캐러셀에서 이러한 레이아웃 변경은 일반적으로 사용자 상호작용 후 500ms 이내에 발생하므로 누적 레이아웃 변경(CLS)에 포함되지 않습니다. 그러나 자동재생 캐러셀의 경우 이러한 레이아웃 변경은 잠재적으로 CLS에 반영될 수 있을 뿐만 아니라 무기한 반복될 수도 있습니다. 따라서 자동재생 캐러셀이 레이아웃 변경의 소스가 아니라는 것을 확인하는 것이 특히 중요합니다.
스크롤: 일부 캐러셀에서는 사용자가 스크롤을 사용하여 캐러셀 슬라이드를 탐색할 수 있습니다. 요소의 시작 위치가 변경되지만 스크롤 오프셋(scrollLeft 또는 scrollTop)은 같은 크기만큼 (반대 방향으로) 변경되는 경우 같은 프레임에서 발생하는 경우 레이아웃 변경으로 간주되지 않습니다.

레이아웃 변경에 관한 자세한 내용은 레이아웃 변경 디버그를 참고하세요.

캐러셀 콘텐츠 최적화

캐러셀에는 사이트에서 가장 큰 이미지 중 일부가 포함되는 경우가 많으므로 이미지를 완전히 최적화하는 데 시간을 할애할 가치가 있습니다. 올바른 이미지 형식과 압축 수준 선택, 이미지 CDN 사용, srcset를 사용하여 여러 이미지 버전 제공 모두 이미지의 전송 크기를 줄일 수 있는 기법입니다.

실적 측정

이 섹션에서는 캐러셀과 관련된 LCP 측정에 관해 설명합니다. 캐러셀은 LCP 계산 중에 다른 UX 요소와 다르지 않게 처리되지만, 자동재생 캐러셀의 LCP를 계산하는 메커니즘은 흔히 혼동하기 쉬운 문제입니다.

캐러셀용 LCP 측정

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

LCP는 프레임에 페인팅되는 페이지 요소를 고려합니다. 사용자가 페이지와 상호작용 (탭, 스크롤 또는 키 누름)하면 LCP 요소의 새로운 후보는 더 이상 고려되지 않습니다. 따라서 자동재생되는 캐러셀의 모든 슬라이드는 최종 LCP 요소가 될 가능성이 있습니다. 반면 정적 캐러셀에서는 첫 번째 슬라이드만 잠재적인 LCP 후보가 됩니다.
동일한 크기의 이미지 2개가 렌더링되면 첫 번째 이미지가 LCP 요소로 간주됩니다. LCP 요소는 LCP 후보가 현재 LCP 요소보다 큰 경우에만 업데이트됩니다. 따라서 모든 캐러셀 요소의 크기가 동일하면 LCP 요소가 표시되는 첫 번째 이미지여야 합니다.
LCP 후보를 평가할 때 LCP는 '표시 크기 또는 고유 크기 중 더 작은 쪽'을 고려합니다. 따라서 자동재생되는 캐러셀이 이미지를 일관된 크기로 표시하지만 디스플레이 크기보다 더 작은 다양한 기본 크기의 이미지가 포함된 경우 새 슬라이드가 표시될 때 LCP 요소가 변경될 수 있습니다. 이 경우 모든 이미지가 동일한 크기로 표시되면 고유 크기가 가장 큰 이미지가 LCP 요소로 간주됩니다. LCP를 낮게 유지하려면 자동재생되는 캐러셀의 모든 항목이 동일한 고유 크기여야 합니다.

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

Chrome 88부터 나중에 DOM에서 삭제되는 이미지는 콘텐츠가 포함된 최대 페인트로 간주됩니다. Chrome 88 이전에는 이러한 이미지가 고려 대상에서 제외되었습니다. 자동재생 캐러셀을 사용하는 사이트의 경우 이러한 정의 변경은 LCP 점수에 중립적이거나 긍정적인 영향을 미칩니다.

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

기타 고려사항

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

탐색 권장사항

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

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

내비게이션 진행률 표시

캐러셀 탐색 컨트롤은 총 슬라이드 수와 사용자의 진행 상황에 관한 컨텍스트를 제공해야 합니다. 이 정보를 통해 사용자는 쉽게 특정 슬라이드로 이동하고 이미 본 콘텐츠를 파악할 수 있습니다. 상황에 따라 다음 슬라이드의 발췌 내용이든 썸네일 목록이든 향후 콘텐츠의 미리보기를 제공하는 것도 도움이 되고 참여도를 높일 수 있습니다.

모바일 동작 지원

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

대체 탐색 경로 제공

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

가독성 권장사항

자동재생 사용 안함

자동재생을 사용하면 거의 역설적인 두 가지 문제가 발생합니다. 화면 애니메이션은 사용자의 주의를 산만하게 하고 더 중요한 콘텐츠에 눈을 돌리는 경향이 있습니다. 동시에 사용자가 애니메이션을 광고와 연결하는 경우가 많기 때문에 자동재생되는 캐러셀을 무시하게 됩니다.

따라서 자동재생이 좋은 경우는 거의 없습니다. 콘텐츠가 중요한 경우 자동재생을 사용하지 않으면 노출이 극대화됩니다. 캐러셀 콘텐츠가 중요하지 않은 경우 자동재생을 사용하면 더 중요한 콘텐츠의 효과가 떨어집니다. 또한 자동재생 캐러셀은 읽기 어려울 수 있으며 귀찮을 수도 있습니다. 사용자의 읽기 속도가 다르기 때문에 사용자마다 캐러셀이 '적절한' 시간에 일관되게 전환되는 경우는 거의 없습니다.

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

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

캐러셀 텍스트 콘텐츠는 HTML 마크업을 사용하여 별도로 표시되지 않고 상응하는 이미지 파일에 '베이킹'되는 경우가 많습니다. 이 접근 방식은 접근성, 현지화, 압축률에 좋지 않습니다. 애셋 생성에 대한 일률적인 접근 방식도 권장합니다. 그러나 같은 이미지와 텍스트 형식을 데스크톱과 모바일에서 동일하게 읽을 수 있는 경우는 거의 없습니다.

간결하게 작성합니다.

사용자의 관심을 끄는 데는 1초도 걸리지 않습니다. 간결하고 요점만 간결한 카피는 메시지가 전달될 가능성을 높입니다.

제품 권장사항

캐러셀은 추가 세로 공간을 사용하여 추가 콘텐츠를 표시할 수 없는 상황에서 잘 작동합니다. 제품 페이지의 캐러셀이 이러한 사용 사례의 좋은 예가 되는 경우가 많습니다.

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

캐러셀은 특히 프로모션이 포함되어 있거나 자동으로 진행되는 경우 사용자가 광고로 쉽게 착각할 수 있습니다. 사용자는 광고를 무시하는 경향이 있으며, 이러한 현상을 배너 무시라고 합니다.
캐러셀은 여러 부서를 배치하고 비즈니스 우선순위에 관한 결정을 내리지 않는 데 자주 사용됩니다. 따라서 캐러셀은 비효과적인 콘텐츠의 덤핑장으로 쉽게 전환될 수 있습니다.

가정한 내용 테스트하기

캐러셀, 특히 홈페이지의 비즈니스 영향을 평가하고 테스트해야 합니다. 캐러셀 클릭률은 캐러셀과 콘텐츠가 효과적인지 여부를 판단하는 데 도움이 됩니다.