스크래치 블록

긁어서 확인하는 경품 카드입니다. 아코디언 및 스핀 투 윈 블록과 동일한 :checked CSS 기법으로 만들어졌습니다. 숨겨진 체크박스, 긁는 표면처럼 스타일링된 탭 가능한 라벨, 그리고 체크되는 순간 무엇이 보이는지 바꾸는 CSS 규칙 — 자바스크립트는 어디에도 없습니다.

작동 방식

키네틱 CSS가 지원되는 환경에서는 블록이 긁는 표면을 렌더링합니다 — 대각선 회색 줄무늬 배경과 "여기를 긁어보세요" 문구로 스타일링된 <label>이 경품 위에 겹쳐집니다. 탭하면 연결된 숨겨진 체크박스가 체크되고, 이는 긁는 표면을 숨기고 그 아래 경품을 받은편지함 안에서 바로 공개하는 CSS 규칙을 트리거합니다. 드래그 제스처나 부분적으로 긁는 애니메이션은 없습니다. 이는 단 한 번의 탭으로 공개되는 방식이며, 스핀 투 윈의 룰렛이나 아코디언의 펼침/접힘과 동일한 인터랙션입니다.

이 블록을 특별히 짚고 넘어갈 만한 이유는 폴백에 있습니다: 스핀 투 윈이나 퀴즈처럼 항상 보이는 별도의 컨트롤을 두는 대신, 스크래치는 스타일링 자체에 "안전한 기본값"을 둡니다. 긁는 표면 자체의 인라인 스타일은 display:none입니다 — (키네틱을 지원하는 클라이언트로 범위가 한정된) <style> 규칙이 명시적으로 display:block을 강제할 때만 실제로 표시됩니다. 그 스타일시트를 지원하지 않는 Outlook 등의 클라이언트에서는 표면이 아예 나타나지 않고, 그런 숨김 스타일이 없는 경품 요소가 기본적으로 표시됩니다. 따라서 어디에도 "긁지 못한" 막다른 길은 없습니다: 클라이언트는 긁는 제스처를 보여주고(탭하면 경품이 나타납니다) 하거나, 제스처를 아예 건너뛰고 경품을 곧바로 보여주거나 둘 중 하나입니다. 누구도 긁을 수 없는 카드만 바라보며 갇히는 일은 없습니다.

스핀 투 윈과 마찬가지로, 스크래치는 표면이 긁혀도 MailInApp에 아무것도 다시 전송하지 않습니다 — 공개 이벤트, 투표, 제출 중 어느 것도 기록되지 않습니다. 응답 대시보드, CSV 내보내기, 클릭 히트맵에도 나타나지 않습니다. 블록에 선택적 상품 링크가 설정되어 있다면, 공개된 경품을 탭하면 다른 <a href>와 마찬가지로 그 링크를 그대로 따라갑니다. button/image/social 블록의 링크와 달리 MailInApp의 클릭 추적 리다이렉트를 거치지 않으므로, 스크래치 경품 클릭은 클릭 히트맵에도 나타나지 않습니다.

설정 가능한 필드:

• 제목 — 카드 위의 헤드라인이며, 자체 색상과 글꼴 크기를 가집니다.
• 경품 텍스트 — 긁는 표면 아래에서 공개되는 내용입니다(기본값 "🎉 다음 주문 20% 할인!").
• 상품 링크(선택) — 설정되어 있으면 공개된 경품이 그 URL로 연결되는 실제 버튼 스타일 링크로 렌더링됩니다. 비워 두면 링크할 곳이 없으므로 대신 굵은 일반 텍스트로 렌더링됩니다.
• 카드의 배경색, 여백(패딩), 테두리, 모서리 반경.
• 경품 텍스트 색상과 경품 배경색 — 대부분의 색상 오버라이드와 달리 의도적으로 내장 기본값이 없습니다. 이 블록은 시각적으로 다른 두 가지 경품 변형(링크가 설정된 경우 색상 배경 위의 흰색 버튼, 설정되지 않은 경우 배경 없는 어두운 텍스트)을 렌더링하며, 하나의 하드코딩된 기본값은 둘 중 하나를 보이지 않게 만들 것이기 때문입니다. 필드를 비워 두면 각 변형은 자기 자신에게 맞는 합리적인 기본값으로만 폴백합니다.

예시

리텐션 이메일은 확정된 단일 할인을 공개하는 데 있어 스핀 투 윈보다 더 가벼운 대안으로 스크래치를 사용할 수 있습니다 — 이런 가벼운 게임화에 대해서는 참여 & 로열티를 참고하세요. 생일이나 기념일 발송은 경품 텍스트로 개인화된 쿠폰 코드를 공개할 수 있습니다(경품 텍스트 자체가 그저 설정 가능한 문구이므로, 병합 태그와 조합하면 수신자별로 코드를 개인화할 수 있습니다). "당첨자를 발표합니다" 캠페인 마무리 이메일은 특정 수신자가 경품에 당첨되었는지 여부를 공개하는 데 사용할 수 있으며, 상품 링크는 수령 페이지를 가리키게 하면 됩니다.

정적 폴백의 모습

<div id="em-scratch-1" style="margin:12px 0;text-align:center;background-color:transparent">
  <p style="margin:0 0 10px;font-weight:700;font-size:18px;color:#111827">
    Scratch to reveal your prize!
  </p>
  <!-- scratch surface (checkbox + label, display:none by default) omitted:
       only shown where a kinetic-tier <style> rule forces it visible -->
  <div class="sc-prize" style="margin-top:10px">
    <a href="https://acme.example.com/claim"
       style="display:inline-block;padding:10px 20px;background-color:#4f46e5;
              color:#ffffff;border-radius:6px;text-decoration:none;
              font-size:14px;font-weight:600">
      🎉 20% off your next order!
    </a>
  </div>
</div>

경품 <div>는 자체적으로 숨기는 스타일을 전혀 가지고 있지 않으므로, 키네틱 티어 스타일시트가 능동적으로 숨기지 않는 한 무조건 표시됩니다 — 공개 제스처는 이미 표시되어 있는 경품 위에 순전히 덧붙여지는 요소일 뿐입니다.

관련 페이지

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