폴백 작동 방식
폴백 엔진은 MailInApp의 핵심입니다. 이메일 클라이언트마다 거의 모든 것에 대한 의견이 다르기 때문에 존재합니다: 어떤 클라이언트는 최신 CSS를 렌더링하고, 어떤 클라이언트는 <style> 태그를 완전히 제거하며, 클래식 Outlook은 Microsoft Word의 엔진으로 이메일을 렌더링합니다. 최소공통분모에 맞춰 디자인하는 대신, 한 번만 디자인하면 — 엔진이 모든 블록을 세 가지 티어로 컴파일합니다.
세 가지 티어
티어 1 — 키네틱
완전한 CSS 인터랙티비티: 슬라이드되는 캐러셀, 펼쳐지는 아코디언, 애니메이션으로 공개되는 리빌까지. 키네틱 마크업은 CSS 상태 머신을 기반으로 만들어집니다 — 숨겨진 체크박스와 라디오 입력의 :checked 상태가 무엇이 보일지를 제어합니다 — 이것이 이메일 클라이언트가 실제로 지원하는 인터랙티비티이기 때문입니다. JavaScript는 절대 사용되지 않습니다. 모든 이메일 클라이언트가 이를 제거하기 때문입니다.
키네틱 렌더링은 Gmail(웹 및 모바일 앱), Apple Mail, Yahoo Mail, Samsung Mail에 도달합니다 — 소비자 받은편지함의 대다수를 차지합니다.
티어 2 — 정적
일부 클라이언트는 <style> 블록을 완전히 제거합니다(그리고 Gmail은 잘린 메시지에서 이를 삭제합니다). 이런 클라이언트에서는 모든 블록이 깔끔하게 쌓인 콘텐츠로 축소되며, 투표하거나, 갤러리를 열거나, 폼을 제출하기 위한 콜투액션 링크가 호스팅된 라이브 뷰를 가리킵니다. 일반 링크는 이메일 클라이언트의 100%에서 작동하므로, 이 티어는 보편적입니다.
티어 3 — Outlook
Windows용 클래식 Outlook은 Word로 렌더링되며, 키네틱 CSS도 대부분의 최신 레이아웃도 지원하지 않습니다. 엔진은 각 블록의 전용 표 기반 버전을 Outlook 조건부 주석 안에 내보냅니다 — Word 엔진만 보는 마크업입니다. 클래식 Outlook을 사용하는 수신자는 깨진 이메일이 아니라 깔끔하고 의도된 이메일을 받습니다.
하나의 이메일, 모든 받은편지함
세 가지 티어 모두 동일한 HTML 파일 안에 담겨 발송됩니다. 수신자가 어떤 티어를 보게 되는지는 취약한 클라이언트 감지가 아니라 각 클라이언트 자체의 렌더링 규칙에 따라 결정됩니다:
- 키네틱 CSS를 지원하는 클라이언트는 티어 1을 렌더링하고 정적 버전을 숨깁니다.
- 스타일을 제거하는 클라이언트는 자연스럽게 티어 2를 렌더링합니다.
- Word 엔진은 조건부 주석을 통해 티어 3만을 봅니다.
인터랙션도 같은 철학을 따릅니다
데이터를 수집하는 블록(투표, 평점, 폼)은 기본적으로 링크 기반 인터랙션을 사용합니다 — 각 선택지는 응답을 기록하는 일반 링크입니다 — 링크가 어디서나 작동하는 유일한 기본 요소이기 때문입니다. 이메일 내 폼 제출은 이를 지원하는 클라이언트에서 점진적 향상으로 그 위에 계층화됩니다. 자세한 내용은 인터랙션 및 분석에서 확인하세요.
엔진이 하지 않는 것
엔진이 하는 일의 일부는 거절하는 것입니다. 클라이언트 지원이 부실하거나 일관되지 않은 기법 — JavaScript, 임베디드 동영상, <details> 요소, CSS 변수 — 은 데모가 아무리 매력적으로 보이더라도 절대 사용되지 않습니다. 어떤 기법이 우아하게 성능이 저하될 수 없다면, 그 기법은 출시되지 않습니다. 전체 지원 현황은 이메일 클라이언트 지원에서 확인할 수 있습니다.
AMP for Email은 그 목록에서 그냥 한 번 언급되는 데 그치지 않고 별도의 명시적인 설명을 받을 자격이 있습니다: 이는 누락된 기능이 아니라 의도적인 트레이드오프이기 때문입니다. 자세한 내용은 왜 AMP for Email이 아닌가?를 참고하세요.