스핀 투 윈 블록
게임화된 프로모션 룰렛입니다: 제목, 스핀 제스처, 그리고 하나의 설정된 보상으로 구성됩니다. "이 프로모션을 게임화해줘"라는 요청에 대한 스튜디오의 가벼운 답입니다 — 상품 풀도, 확률도, 서버 측 추첨도 없이, 이미 갖고 있는 링크를 감싼 만족스러운 공개 연출일 뿐입니다.
작동 방식
스핀 투 윈은 아코디언과 동일한 :checked 체크박스+라벨 CSS 트릭 위에 만들어진 블록 중 하나입니다. 숨겨진 체크박스와 짝을 이룬 <label>이 탭 대상 역할을 하고, :checked에 맞춰진 CSS 규칙이 자바스크립트 없이 무엇이 보이는지를 바꿉니다. 키네틱 CSS가 지원되는 환경에서는 룰렛 그래픽(🎡)을 탭하면 숨겨진 체크박스가 체크되며, 이는 0.9초짜리 회전 애니메이션(720도까지 회전하는 @keyframes)을 트리거함과 동시에 상품 패널을 공개합니다: 설정된 상품 URL을 가리키는 버튼 스타일 링크로, 공개되는 순간을 위해 앞에 "🎉"가 붙습니다.
이 키네틱 레이어 아래에서, 발송된 HTML은 항상 두 번째 컨트롤도 함께 렌더링합니다: 같은 라벨과 목적지를 가진 일반 버튼 스타일 링크입니다. 투표나 평점의 폴백 칩과 달리, 이 버튼은 키네틱 티어 뒤에 CSS로 숨겨져 있지 않습니다 — 항상 보입니다. :checked를 지원하는 클라이언트는 룰렛과 이 버튼을 동시에 보여주며, Outlook을 비롯해 이 규칙을 지원하지 않는 클라이언트는 그냥 버튼만 단독으로 보여줍니다. 수신자는 상품을 받기 위해 "돌려야" 할 필요가 전혀 없습니다 — 둘 중 어느 쪽을 탭해도 작동합니다.
이 블록에는 어디에도 무작위성이 없습니다. 룰렛을 돌리는 모든 수신자 — 또는 일반 폴백 버튼을 보는 클라이언트의 모든 수신자 — 는 정확히 동일한 설정된 링크로 이동합니다. "당첨"은 설계상 보장되어 있습니다: 룰렛은 상품을 선택하는 메커니즘이 아니라, 이미 모두에게 주기로 결정한 단일 보상을 위한 연출 장치입니다. 수신자마다 다른 제안을 보여주고 싶다면, 이는 서로 다른 오디언스 세그먼트를 위해 별도 버전의 이메일을 만들거나(또는 상품 링크 자체에 병합 태그를 사용하거나) 하는 문제이지, 이 블록의 기능이 아닙니다.
스핀 투 윈은 탭되어도 MailInApp에 아무것도 다시 전송하지 않습니다 — 투표, 제출, 공개 이벤트 중 어느 것도 어디에도 기록되지 않습니다. 즉 응답 대시보드, CSV 내보내기, 클릭 히트맵(일반 button/image/social/제네릭 element 링크만 추적하며, 스핀 투 윈의 버튼은 그 메커니즘을 거치지 않습니다) 어디에도 나타나지 않습니다. 실제로 룰렛에 얼마나 많은 사람이 참여했는지 알아야 한다면, 상품 링크를 직접 관리하는 랜딩 페이지에 걸어두고 그곳에서 측정하세요. 또는 룰렛 애니메이션이 필요 없다면 대신 button 블록의 클릭 히트맵을 사용하세요.
설정 가능한 필드:
- 제목 — 룰렛 위의 헤드라인이며, 자체 색상과 글꼴 크기를 가집니다.
- 버튼 라벨 — 항상 보이는 폴백 버튼과 공개된 상품 버튼 양쪽에 표시되는 텍스트입니다(기본값 "운을 시험해보세요").
- 상품 링크 — 버튼/공개가 가리키는 곳입니다. 비워 두면 발송된 HTML은 끊긴 링크 대신 블록 자체의 호스팅된 라이브 뷰 URL로 폴백합니다. 라이브 뷰 자체는 이 값이 설정되어 있을 때만 버튼을 렌더링합니다(라이브 뷰에는 자체적으로 더 폴백할 목적지가 없습니다).
- 카드의 배경색, 여백(패딩), 테두리, 모서리 반경.
- 버튼 텍스트 색상과 버튼 배경색 — 기본값은 각각 프로젝트의
$accent와$brand테마 토큰이므로, 별도 설정 없이도 브랜드에 맞춰집니다.
룰렛 그래픽 자체(원뿔형 그라데이션 원과 🎡 이모지)는 설정할 수 없습니다 — 주변 문구, 링크, 카드 스타일만 설정 가능합니다.
예시
Subject
You've got a spin waiting
플래시 세일을 진행하는 소매업체는 프로모션 발송에 스핀 투 윈 블록을 넣고 상품 링크를 할인 코드 랜딩 페이지나 미리 채워진 장바구니로 바로 연결할 수 있습니다. 평범한 프로모션 이메일의 클릭률을 가벼운 게임화로 끌어올리는 더 넓은 패턴은 참여 & 로열티를 참고하세요. 로열티 프로그램의 "회원이 되어 주셔서 감사합니다" 발송은 평범한 버튼 대신 원탭 "보상 받기" 순간으로 이를 활용할 수 있습니다 — 스핀 애니메이션이 단순한 링크보다 더 이벤트답게 느껴지기 때문입니다. 실제 무작위성이 없으므로, 수신자마다 받는 내용을 실제로 다르게 하지 않으면서도 게임화된 메커니즘의 재미를 체감하게 하고 싶은 곳이라면 어디든 잘 어울립니다 — 예를 들어 모두가 사용하길 바라는 사이트 전체 단일 할인 코드가 있는 경우입니다.
정적 폴백의 모습
<div id="em-spin-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">
Spin to win!
</p>
<a href="https://acme.example.com/spin-reward"
style="display:inline-block;padding:10px 20px;background-color:#4f46e5;
color:#ffffff;border-radius:6px;text-decoration:none;
font-size:14px;font-weight:600">
Try your luck
</a>
<!-- kinetic wheel + reveal markup omitted — hidden from Outlook,
CSS-hidden everywhere else once this fallback link is visible -->
</div>
항상 존재하는 이 버튼은 설정된 상품 링크(설정되지 않았다면 라이브 뷰 URL)로 바로 향하는 일반 <a href>입니다 — 아무것도 기록되지 않으므로 /act 확인 단계가 없습니다.