투표 블록
원탭 설문 질문입니다: 각 선택지는 실제 이메일 내 컨트롤인 동시에 일반 링크이기도 합니다. Gmail 웹부터 가장 단순한 텍스트 전용 클라이언트까지 어디서나 투표가 작동하며, 대부분의 경우 수신자가 받은편지함을 벗어날 필요도 없습니다.
작동 방식
모든 투표 선택지는 빌드 시점에 하나만 선택되는 것이 아니라 항상 두 가지 표현을 동시에 렌더링합니다. 클라이언트가 이메일 내 폼 전송을 지원하는 곳(Gmail 웹/Android, Yahoo 등)에서는 각 선택지가 MailInApp의 공개 인터랙션 엔드포인트로 직접 전송하는 실제 <form method="post">이므로, 탭하는 것만으로 받은편지함을 벗어나지 않고 투표할 수 있습니다. 이 폼은 키네틱 전용 티어로 감싸여 있으며, 두 번째 표현을 숨기는 CSS 규칙과 짝을 이룹니다: /v/[token]/act로 연결되는 일반 <a href> 링크로, 호스팅된 페이지에서 같은 투표를 확인하고 기록합니다.
이 CSS 규칙이 지원되지 않는 환경(Outlook, 또는 이메일 내 폼을 전송할 수 없는 모든 클라이언트)에서는 숨겨져 있던 그 링크가 대신 표시되어 같은 역할을 합니다. 일반 링크는 모든 이메일 클라이언트가 렌더링하고 따라갈 수 있는 유일한 보편적 요소입니다. 두 경로 모두 같은 기록 엔드포인트를 거쳐 동일한 이벤트를 만들어내므로, 결과가 수신자가 사용한 클라이언트에 따라 갈라지는 일은 없습니다.
투표는 라이브 페이지에서 확인된 시점(또는 이메일 내 제출 즉시)에 기록되며, 단순한 링크 접속만으로는 기록되지 않습니다. 이는 기업용 스캐너와 받은편지함 보안 도구가 이메일이 도착하는 즉시 그 안의 모든 링크를 미리 가져와 보기 때문에 중요합니다. 단순 GET 요청만으로 집계된다면, 사람이 실제로 열어보기도 전에 투표 결과가 봇으로 채워질 것입니다. 링크 경로에서도 확인은 폼 전송을 통해 이루어지므로, /v/[token]/act가 리다이렉트-후-기록이 아니라 확인 후 기록하는 2단계 방식인 이유가 바로 여기에 있습니다.
수신자 본인의 투표는 중복 제거됩니다. 자신의 링크를 다시 클릭하는 것(성급한 더블 탭, 재시도된 페이지 로드)은 두 번째 행이 아니라 아무 일도 일으키지 않는 무동작이며, 이는 캠페인·블록·수신자를 조합해 만든 결정론적 Firestore 문서 ID로 강제됩니다. 익명 투표(수신자 토큰이 없는 경우 — 예를 들어 서드파티 ESP에 붙여넣은 HTML 내보내기 파일에서 온 투표)는 사람 단위로 키를 잡을 수 없으므로 개인별로 중복 제거되지 않습니다. 대신 IP·캠페인·분 단위로 속도 제한이 적용됩니다 — 캠페인 ID는 이메일 소스 자체에 그대로 노출되어 있고, 그 외에는 스크립트가 임의의 투표를 전송하는 것을 막을 방법이 없기 때문입니다.
설정 가능한 필드:
- 질문 — 투표의 안내 문구이며, 자체 색상과 글꼴 크기를 가집니다.
- 카드의 배경색, 여백(패딩), 테두리, 모서리 반경.
- 선택지 텍스트 색상과 선택지 배경색 — 모든 선택지 칩에 일괄 적용되는 스타일 오버라이드입니다.
각 투표 선택지는 단일 라벨 필드를 가진 자식 노드입니다 — 트리에서 자유롭게 선택지를 추가·삭제·재정렬할 수 있습니다.
프로젝트에 마감일이나 응답 상한이 설정되어 있고(설문 라이프사이클 참고) 이미 도달한 경우, 라이브 뷰는 인터랙티브한 칩을 비활성화된 회색 등가물로 바꾸고 "이 설문은 새 응답을 받지 않습니다"라는 안내를 표시합니다. 발송된 HTML 자체는 이 상태를 절대 보여주지 않습니다 — 발송 시점에 정적으로 고정되며, 이 확인은 페이지가 열릴 때만 이루어지고 이메일이 발송될 때는 이루어지지 않습니다.
예시
Subject
Quick one: what should we build next?
제품 뉴스레터에 넣은 단일 질문 투표("다음에 어떤 기능을 만들까요?")는 전체 폼을 만드는 수고 없이 관심도를 직접 확인할 수 있게 해줍니다. 받은편지함에서 곧바로 구조화된 피드백을 수집하는 더 넓은 패턴은 설문 & NPS 피드백을 참고하세요. 행사 후기 이메일은 "다음에도 참석하시겠어요?"를 예/아니오/아마도 선택지로 물어 바로 다음 행사 기획에 반영할 수 있습니다. 의견이 갈리는 팀은 투표를 가벼운 내부 투표 도구로 사용할 수 있습니다("로고 A 또는 로고 B?"를 이해관계자에게 보내면), 결과가 들어오는 즉시 결과 페이지에서 실시간으로 확인됩니다.
정적 폴백의 모습
<div id="em-poll-1" style="margin:12px 0;background-color:transparent">
<p style="margin:0 0 10px;font-weight:600;font-size:16px;color:#111827">Which do you prefer?</p>
<div>
<span class="kn-fallback">
<a href="https://mailinapp.com/v/eyJhbGci.../act?blockId=poll-1&blockType=poll&action=vote&option=Option+A"
style="display:inline-block;margin:0 6px 6px 0;padding:8px 14px;border:1px solid #d1d5db;border-radius:6px;background-color:#ffffff;color:#111827;font-size:14px;text-decoration:none">
Option A
</a>
</span>
</div>
</div>
이는 티어 2 링크 경로입니다: /v/[token]/act로 연결되는 일반 <a>로, 이메일 내 폼이 렌더링하는 것과 같은 모양의 칩처럼 스타일링되어 있으며, 키네틱 폼이 CSS로 숨겨졌을 때만 표시됩니다.