캐러셀 블록

완전히 CSS로만 동작하는 스와이프 가능한 이미지 갤러리입니다 — 자바스크립트가 전혀 없으므로, 기본이 되는 :checked 기법을 지원하는 모든 클라이언트에서 작동하고, 그 외의 모든 곳에서는 선명한 이미지 한 장으로 폴백됩니다.

작동 방식

키네틱 티어는 라디오 버튼 상태 머신입니다: 각 슬라이드는 하나의 그룹 이름을 공유하는 숨겨진 라디오 입력, 점으로 표시되는 라벨, 그리고 :checked ~ 형제 선택자로 표시 여부가 제어되는 프레임을 갖습니다. 점을 탭하면(지원되는 환경에서는 스와이프해도) 해당 라디오가 체크되고 일치하는 프레임이 표시되는 동안 나머지는 display:none 상태를 유지합니다. 첫 번째 슬라이드의 라디오가 처음부터 체크되어 있으므로 블록은 항상 첫 번째 슬라이드로 열립니다. 이는 아코디언과 스크래치 블록이 기반으로 삼는 것과 동일한 메커니즘이며, 다만 독립적인 토글이 아니라 상호 배타적인 프레임의 나열에 적용된다는 점만 다릅니다.

이 CSS 기법이 지원되지 않는 환경(Outlook의 Word 렌더링 엔진, 그리고 <style> 블록을 제거하거나 형제 선택자를 무시하는 모든 클라이언트)에서는 블록이 정적 카드로 폴백됩니다. 이 카드는 첫 번째 슬라이드의 이미지와 캡션만 보여주며, 여기에 호스팅된 라이브 뷰로 연결되는 "모든 N개 슬라이드 보기" 링크가 함께 표시됩니다. 라이브 뷰는 실제 웹페이지이므로, 그곳에서는 모든 슬라이드를 한 번의 탭으로 볼 수 있어 아무것도 사라지지 않습니다 — 실제 브라우저는 항상 이를 지원하므로 정확히 같은 :checked 마크업을 그대로 재사용합니다. 슬라이드가 하나뿐인 캐러셀은 상태 머신 전체를 건너뛰고 단일 정적 이미지로 렌더링됩니다 — 넘겨볼 갤러리 자체가 없기 때문입니다.

블록 자체의 인스펙터 패널에 있는 설정 가능한 필드:

• 배경색 — 이메일 테마와 무관한, 카드 자체의 배경입니다.
• 여백(패딩) — 블록의 내부 간격입니다.
• 테두리 — 카드 전체를 둘러싼 두께, 스타일, 색상입니다.
• 카드의 모서리 반경입니다.
• 캡션 색상과 캡션 글꼴 크기 — 모든 슬라이드의 캡션 텍스트에 일괄 적용됩니다.

각 슬라이드(캐러셀의 자식 요소로, 다른 트리 항목과 마찬가지로 추가·재정렬할 수 있습니다)는 자체적으로 세 가지 필드를 가집니다: 미디어 라이브러리에서 선택하는 이미지, 캡션, 그리고 선택적인 링크 URL입니다. 설정되어 있으면 슬라이드 이미지를 탭했을 때 그 링크가 열리며, 이는 슬라이드 사이를 이동하는 데 쓰이는 점 내비게이션과는 별개로 동작합니다.

슬라이드는 인터랙션 이벤트가 아닙니다 — 수신자가 캐러셀을 넘겨봐도 아무것도 제출되지 않으므로, 캐러셀 탐색에 관한 어떤 것도 응답 대시보드, CSV 내보내기, 프로젝트 웹훅에 나타나지 않습니다. 슬라이드 자체의 링크가 설정되어 있다면 이는 일반적인 링크 요소이며, 버튼이나 링크가 걸린 이미지와 마찬가지로 수신자의 추적 리다이렉트를 거치는 "click" 액션을 발생시키고, 프로젝트의 클릭 히트맵에 집계됩니다.

예시

상품 출시 이메일은 캐러셀을 이용해 새 상품을 세 가지 또는 네 가지 각도에서 보여줄 수 있으며, 각 슬라이드를 해당 옵션의 상세 페이지로 연결할 수 있습니다 — 히어로 이미지 하나만으로는 상품을 충분히 보여주지 못하는 모든 곳에서 유용합니다. 프로모션 발송에서 곧바로 클릭을 유도하는 더 넓은 패턴은 이커머스 & 상품 출시를 참고하세요. "이달의 새 소식" 다이제스트는 기능이나 아티클마다 슬라이드를 하나씩 담아 각각 캡션을 달고 전체 글로 링크할 수 있으므로, 전체 정리가 긴 세로 나열 대신 훑어보기 쉬운 블록 하나에 담깁니다. 행사 후기 이메일은 지난 세션의 사진들을 순간을 설명하는 캡션과 함께 넘겨볼 수 있습니다. 모든 것을 보고 싶은 수신자는 그냥 넘겨보면 되고, 클라이언트가 애니메이션을 지원하지 않는 수신자도 커버 사진과 나머지로 연결되는 링크는 그대로 받습니다.

정적 폴백의 모습

<div style="margin:12px 0;background-color:transparent">
  <div class="carousel-fallback">
    <div class="lv-frame lv-frame-0">
      <a href="https://example.com/product-a">
        <img src="https://cdn.example.com/slide1.jpg" alt="Slide 1" style="width:100%;max-width:100%">
      </a>
      <p style="margin:8px 0 0;font-size:14px;color:#374151">Slide 1</p>
    </div>
    <p style="margin:8px 0 0;font-size:13px">
      <a href="https://mailinapp.com/v/eyJhbGci..." style="color:#4f46e5">See all 4 slides &rarr;</a>
    </p>
  </div>
</div>

이것이 Outlook 계열 클라이언트가 렌더링하는 모습입니다: 첫 번째 슬라이드, 그 캡션, 그리고 나머지 갤러리를 볼 수 있는 호스팅된 라이브 뷰로의 링크입니다. 키네틱 티어를 지원하는 클라이언트에서는 동일한 마크업이 그대로 존재하지만 CSS로 숨겨져 있으며, 대신 라디오/점 상태 머신이 작동합니다.

관련 페이지

• 블록 리퍼런스 개요
• 폴백 작동 방식
• 인터랙션 & 분석