플래시카드 덱 블록
어휘나 암기 훈련을 위한 뒤집기 카드입니다: 플래시카드 덱을 추가한 다음, 각각 앞면(질문)과 뒷면(답) 텍스트를 가진 플래시카드 자식 요소를 그 안에 넣으세요. 양면 모두에 선택적으로 이미지를 넣을 수 있습니다. 이는 채점하거나 수집할 것이 없는, 질문이 아니라 학습 보조 도구입니다.
작동 방식
덱 안의 각 카드는 아코디언과 스크래치 오프 블록이 사용하는 것과 동일한 숨겨진 체크박스 + :checked CSS 메커니즘을 이용해 독립적으로 뒤집힙니다 — 자바스크립트도, 네이티브 HTML 공개(disclosure) 요소에 대한 의존도 없습니다. 카드를 탭하면 해당 카드 고유의 숨겨진 체크박스가 체크되고, 이는 범위가 한정된 CSS 규칙을 통해 그 카드의 앞면을 숨기고 뒷면을 보여줍니다. 덱 안의 다른 모든 카드는 각자 독립적인 체크박스에 연결되어 있으므로, 하나를 뒤집어도 나머지에는 영향이 없습니다.
스튜디오의 다른 대부분의 키네틱 블록과 달리, 플래시카드 덱의 메일과 라이브 뷰 렌더링은 서로 다른 코드 경로로 갈라지지 않고 실제로 완전히 통일되어 있습니다. :checked 체크박스-라벨 뒤집기는 실제 브라우저에서 업그레이드할 만한 "더 나은" 네이티브 대안이 없습니다 — 예를 들어 실제 폼으로 대체되는 투표의 링크 기반 폴백과는 다릅니다. 그래서 라이브 뷰는 메일과 완전히 동일한 마크업을 렌더링합니다.
해당 CSS 규칙이 지원되지 않는 곳(Outlook, 또는 키네틱 티어를 지원하지 않는 모든 클라이언트)에서는 뒤집히는 대신 앞면과 뒷면이 그냥 정적으로 위아래로 쌓여 렌더링됩니다. 각각은 일반 "Q:" / "A:" 접두사로 표시되므로, 아무런 인터랙션 없이도 어느 쪽이 짝인지 여전히 알아볼 수 있습니다. 클라이언트가 수행할 수 없는 제스처 뒤에 무언가가 숨겨지는 일은 절대 없습니다 — 폴백은 모든 카드의 앞면과 뒷면 전체 내용을 한꺼번에 보여줍니다.
플래시카드 덱은 아무것도 기록하지 않습니다. 카드를 뒤집는다고 해서 투표, 제출, 공개 이벤트가 발생하지 않으며, 블록은 응답 대시보드, CSV 내보내기, 클릭 히트맵, 그 밖의 어떤 집계에도 등록할 capability를 선언하지 않습니다. 이는 순수한 학습 콘텐츠이며, 인터랙티브하다는 점만 다를 뿐 일반 이미지나 텍스트 블록과 같은 범주입니다.
플래시카드 덱 자체에서 설정 가능한 필드는 카드 스타일링 — 배경색, 패딩, 테두리, 모서리 반경 — 으로 제한됩니다. 콘텐츠와 관련된 모든 것은 개별 카드에 있기 때문입니다.
각 플래시카드 자식 요소는 다음을 가집니다:
- **앞면(질문)**과 뒷면(답) 텍스트, 각각 고유한 색상과 글꼴 크기를 가집니다.
- 앞면 이미지와 뒷면 이미지 — 선택 사항이며, 해당 면의 텍스트 위에 렌더링됩니다. URL을 직접 입력하는 대신 미디어 라이브러리에서 선택합니다.
투표 선택지나 퀴즈 문항을 관리하듯, 트리에서 카드를 자유롭게 추가·삭제·재정렬할 수 있습니다.
예시
Subject
Study these before Friday's quiz
언어 학습 뉴스레터는 매주 주제별 어휘 카드 세트를 보낼 수 있습니다: 앞면은 목표 언어, 뒷면은 번역과 사용법 메모입니다. 이메일을 통해 학습 콘텐츠를 전달하는 더 넓은 패턴은 교육을 참고하세요. 자격증 준비 시퀀스는 주제 영역별로 한 개의 덱을 두어 연습 퀴즈 사이의 간격 반복(spaced repetition) 형식 복습 자료로 사용할 수 있습니다(같은 발송 안에서 그 뒤에 퀴즈 블록을 배치해 훈련 직후 기억을 테스트하세요). 기술 제품의 온보딩 이메일은 아무도 열어보지 않을 용어집 페이지보다 가벼운 대안으로, 빠른 용어 정의에 플래시카드를 사용할 수 있습니다(앞면: 용어, 뒷면: 제품 내에서의 의미).
정적 폴백의 모습
<div style="border:1px solid #e5e7eb;border-radius:8px;padding:14px;
margin-bottom:8px;text-align:center">
<div class="fc-front">
<p style="margin:0;font-weight:600;font-size:16px;color:#111827">
Q: What is the powerhouse of the cell?
</p>
</div>
<div class="fc-back">
<p style="margin:0;font-size:16px;color:#111827">
A: The mitochondria
</p>
</div>
</div>
두 면 모두 조건 없이 렌더링됩니다. 키네틱 티어 스타일시트(여기서는 생략됨)만이 한 번에 한 면을 숨기고 탭으로 전환하며, 그것이 없으면 앞면과 뒷면은 그냥 쌓여 각각 "Q:" / "A:"로 표시됩니다.