주요 이메일 클라이언트는 메시지를 렌더링하기 전에 <script> 태그를 예외 없이, 발신자별 옵트아웃도 없이 제거합니다. 그래서 이메일에 실제로 작동하는 캐러셀이나, 펼쳐지는 아코디언, 답을 채점하는 퀴즈가 담겨 있어도 그중 어느 것도 JavaScript가 아닙니다. 숨겨진 체크박스와 CSS 선택자, 그리고 이메일 개발 커뮤니티가 상태 머신(state machine)이라고 부르는 기법이 그 일을 해냅니다.
문제: 이메일 클라이언트는 <script>를 제거한다
웹의 인터랙티비티는 거의 항상 JavaScript를 사용할 수 있다고 전제합니다. 이메일은 그 전제를 아예 세울 수 없습니다 — Gmail, Apple Mail, Outlook을 비롯한 모든 주요 클라이언트는 발신자가 무엇을 포함시켰는지, 메시지가 어떻게 서명되었는지와 무관하게 기본적인 보안 조치로서 도착 즉시 <script> 태그를 제거합니다. 이메일 안에서 앱처럼 동작하는 것이라면 무엇이든 오로지 HTML과 CSS만으로 표현할 수 있어야 합니다. 렌더링될 즈음에는 진짜로 그것만 남아 있기 때문입니다.
기법: 숨겨진 입력과 형제 결합자
그 메커니즘은 실제 HTML 폼 컨트롤에 적용된 CSS :checked 의사 클래스입니다:
- 숨겨진
<input type="radio">또는<input type="checkbox">가 하나의 상태를 추적합니다 — 어떤 캐러셀 슬라이드가 활성인지, 아코디언 패널이 열려 있는지, 어떤 퀴즈 답이 선택되었는지. - 수신자가 클릭할 수 있어야 하는 요소 — "다음" 화살표, 아코디언 헤더, 투표 항목 — 를 감싸는 눈에 보이는
<label for="...">가 클릭 시 스크립트 개입 전혀 없이 입력의 체크 상태를 전환합니다. 이는 브라우저가 원래부터 갖고 있는 네이티브<label>/<input>동작입니다. - CSS 형제 결합자(
:checked ~ .panel,:checked + .content)가 그 입력의 체크 상태에 따라 다른 요소들을 스타일링합니다 — 슬라이드를 보여주거나, 패널을 펼치거나, "B를 선택하셨습니다" 메시지를 드러냅니다.
이런 것들을 상태 하나당 입력 하나, 그로 인해 바뀌는 스타일 변화마다 결합자 규칙 하나씩 충분히 쌓으면, 결과물은 진정으로 상태를 가진 인터페이스처럼 읽힙니다 — 전부 마크업만으로 만들어졌기 때문에, 클라이언트의 <script> 제거 과정은 제거할 스크립트 자체가 없어 이를 전혀 건드리지 못합니다.
실제 지원 현황: 클라이언트별 분석
caniemail.com의 클라이언트 테스트 패널에 따르면:
| 지원 수준 | 클라이언트 | | --- | --- | | 완전 지원 | Gmail(모든 플랫폼, 2020년 3월부터), Apple Mail(macOS 12.4+/iOS 13.3+), Yahoo Mail, ProtonMail | | 부분 지원 | Outlook.com, 새 Outlook, 모바일 Outlook("타입 선택자에서만 지원됨"); Samsung Email(Android 7.0+) | | 미지원 | 클래식 Windows Outlook(2007~2019); Orange 및 SFR 웹메일(입력 요소를 완전히 제거함) |
이는 2026년 이메일 클라이언트 렌더링 현황이 키네틱 CSS 전반에 대해 보고하는 91%대 이상의 실질 도달률과는 확연히 다른 수치입니다 — caniemail의 수치는 실제로 각 클라이언트를 얼마나 많은 수신자가 사용하는지와 무관하게 클라이언트를 동일한 비중으로 세는 반면, 도달률 수치는 실제 추적된 열람 점유율로 가중치를 둡니다. 클래식 Windows Outlook은 이 기법을 전혀 지원하지 못하지만, 그마저도 Apple Mail 하나만으로 이미 압도당하는 시장 점유율 항목 안에서 점점 줄어드는 소수에 불과합니다 — 그래서 클라이언트 수가 아니라 실제 사용량으로 가중치를 두는 것이야말로 디자인 결정을 이끌어야 할 수치입니다.
:checked가 인식되지 않는 곳에서는 어떻게 되는가
:checked를 전혀 지원하지 않는 클라이언트에서는 숨겨진 입력과 부가 마크업이 그저 비활성 상태로 렌더링됩니다 — 오류도, 깨진 레이아웃도 없이, 그저 인터랙션이 없을 뿐입니다. 블록은 기본 마크업 순서가 보여주는 상태로 폴백합니다: 첫 번째 캐러셀 슬라이드, 닫힌 아코디언, 퀴즈 선택지의 평범한 정적 목록. 미지원 클라이언트가 어중간하게 깨진 무언가를 보여주도록 방치하는 대신 그 폴백을 의도적으로 설계하는 것이 바로 폴백 엔진의 실제 역할입니다 — 이 기법이 속한 3단계 모델 전체는 폴백 작동 방식을 참고하세요.