아코디언 블록
긴 이메일을 훑어보기 쉽게 유지하기 위한 펼침/접힘 섹션입니다 — FAQ, 주문 상세 정보, 약관 등을 모든 수신자가 필요하든 아니든 전부 읽게 만들지 않고 전달할 수 있습니다.
작동 방식
메일과 호스팅된 라이브 뷰는 하나의 공유 마크업 트리가 아니라 의도적으로 서로 다른 두 가지 구현을 사용합니다. 실제 브라우저인 라이브 뷰에서는 각 항목이 네이티브 <details>/<summary> 요소입니다. 이는 CSS 트릭보다 더 접근성이 좋습니다: 키보드로 조작할 수 있고, 네이티브 공개(disclosure) 표시가 있으며, 별도 설정 없이 스크린 리더와도 작동합니다 — 그러니 메일 렌더러와 코드를 공유하기 위해 이를 포기할 이유가 없습니다.
발송된 HTML에서는 <details> 지원이 이메일 클라이언트마다 제각각이므로, 각 항목은 대신 캐러셀과 스크래치 블록이 사용하는 것과 동일한 숨겨진 체크박스+라벨 :checked 기법을 사용합니다. 숨겨진 체크박스 하나, 탭 가능한 제목처럼 스타일링된 <label>, 그리고 체크박스가 체크되기 전까지 display:none 상태인 콘텐츠 <div>로 구성됩니다. 체크되는 순간 #item-id:checked ~ .acc-content{display:block} 규칙이 이를 표시합니다. 모든 항목은 독립적으로 토글되며, "한 번에 하나만 열림" 같은 동작은 없습니다.
이 CSS 기법이 지원되지 않는 환경(Outlook의 Word 엔진, 또는 <style> 블록을 제거하는 클라이언트)에서는 폴백이 다른 곳으로 연결되는 링크가 아니라 가장 안전한 기본값입니다: 모든 항목이 이미 펼쳐진 상태로 렌더링됩니다. 클라이언트가 수행할 수 없는 제스처 뒤에 무언가가 숨겨지는 일은 절대 없으므로, 축소된 클라이언트를 쓰는 수신자도 펼치고 접는 기능만 없을 뿐 FAQ 전체나 주문 상세 정보 전체를 처음부터 볼 수 있습니다. 이는 스크래치 블록이 경품 공개에 사용하는 것과 동일한 "안전한 기본값" 패턴을 그대로 따릅니다.
설정 가능한 필드:
- 배경색, 여백(패딩), 테두리(두께/스타일/색상), 모서리 반경 — 모든 항목이 공유하는 아코디언의 바깥 카드에 적용됩니다.
각 아코디언 항목(독립적으로 추가·재정렬할 수 있는 자식 노드)은 다음을 가집니다:
- 제목 — 항상 표시되는 헤더 텍스트로, 탭하면 펼치거나 접습니다.
- 내용 — 그 아래 공개되는 본문 텍스트로, 줄바꿈이 그대로 유지되어 렌더링됩니다.
- 항목별로 독립적인 제목 색상/제목 글꼴 크기와 내용 색상/내용 글꼴 크기 — 경고나 강조하고 싶은 FAQ 항목을 이웃 항목과 다르게 돋보이게 할 수 있습니다.
아코디언은 텍스트나 이미지 블록처럼 순수한 콘텐츠입니다 — 항목을 펼치는 것은 인터랙션 이벤트가 아닙니다. 수신자가 어떤 항목을 열었는지는 전혀 기록되지 않으며, 이 블록은 응답 대시보드, CSV 내보내기, 프로젝트 웹훅에 절대 나타나지 않습니다.
예시
Subject
Your order questions, answered
상품 출시나 온보딩 이메일 하단의 FAQ 섹션은 본문을 짧게 유지하면서도 모두가 묻는 다섯 가지 질문에 답할 수 있게 해줍니다. 세부 내용이 필요 없는 수신자는 펼쳐진 모습을 볼 일이 없고, 필요한 수신자도 클라이언트가 애초에 접을 수 없다면 완전히 펼쳐진 폴백을 그대로 받습니다. 주문 확인 이메일은 배송 상세 정보, 반품 정책, 항목별 가격을 긴 텍스트 벽 대신 접힌 세 섹션으로 정리할 수 있습니다. 뉴스레터 요약은 스토리마다 항목 하나씩을 써서 제목을 타이틀로, 두 문장 요약을 내용으로 넣으면 수신자가 제목만 훑어보고 관심 있는 것만 펼쳐볼 수 있습니다.
정적 폴백의 모습
<div style="border:1px solid #e5e7eb;border-radius:6px;padding:10px 14px;margin-bottom:8px" id="em-acc-1">
<label for="em-acc-1-t" style="display:block;margin:0;font-weight:600;font-size:15px;color:#111827;cursor:pointer">
Do you offer refunds?
</label>
<div class="acc-content" style="margin:8px 0 0;font-size:14px;color:#111827">
Yes — within 30 days of purchase, no questions asked.
</div>
</div>
여기서는 숨겨진 체크박스와 그 :checked 스타일 규칙이 생략되어 있습니다 — 키네틱 전용 티어로 감싸여 있기 때문입니다 — 이를 건너뛰는 클라이언트에서는 .acc-content를 숨기는 규칙이 아예 없으므로, 위와 같이 기본적으로 펼쳐진 상태로 렌더링됩니다.