플래시카드 생성기 무료 HTML 교구 | 용어 암기 도구 자동 제작 + AI 프롬프트 공개
📌 이 글 요약
- 용어+뜻 입력하면 플래시카드 암기 도구가 자동 생성되는 HTML 교구
- 카드 클릭하면 뒤집히며 정답 확인 — "알아요/몰라요" 분류 기능 포함
- 시험 전 학생 스스로 복습 도구로 활용 — 전과목 용어 암기에 최적
🎮 바로 써보기 + 다운로드
시험 전에 학생들이 스스로 복습할 수 있으면 좋겠다고 생각했어요
"선생님 이거 시험에 나와요?" 매번 듣는 질문이죠. 그래서 핵심 용어를 플래시카드로 만들어서 공유합니다. 카드 앞면에 용어, 뒤집으면 뜻. "알아요" 버튼 누르면 빠지고, "몰라요"는 계속 반복.
학생들이 자기 폰에서 셀프로 반복 학습할 수 있어요. 저는 시험 일주일 전에 링크 하나 공유해주면 끝입니다.
📋 과목별 활용 예시
국어 — 문학 용어
앞: "역설" → 뒤: "모순되는 표현 속에 진실을 담는 기법. 예) 소리 없는 아우성"
영어 — 어휘
앞: "ubiquitous" → 뒤: "어디에나 있는 (=everywhere). The smartphone is ubiquitous."
수학 — 공식/정의
앞: "피타고라스 정리" → 뒤: "직각삼각형에서 a²+b²=c² (빗변의 제곱 = 나머지 두 변 제곱의 합)"
사회 — 핵심 개념
앞: "GDP" → 뒤: "국내총생산. 한 나라 안에서 일정 기간 생산된 재화와 서비스의 시장 가치 합계"
과학 — 원리/법칙
앞: "관성의 법칙" → 뒤: "뉴턴 제1법칙. 외부 힘이 없으면 정지한 물체는 계속 정지, 운동하는 물체는 등속 직선 운동"
🔧 제작 프롬프트
// Claude 프롬프트
플래시카드 암기 도구를 HTML 단일 파일로 만들어줘.
과목: 【사회】
내용: 【통합사회 2단원 '행복' 핵심 용어 15개】
기능:
- 카드 앞면: 용어 / 뒷면: 뜻+설명 (클릭 시 flip 애니메이션)
- "알아요 ✓" 버튼: 해당 카드 완료 처리 (다시 안 나옴)
- "몰라요 ✗" 버튼: 나중에 다시 나옴
- 진행도: "15장 중 10장 완료" 표시
- 전체 완료 시 축하 + 소요시간 표시
- 셔플(랜덤 순서) 옵션
- 모바일 최적화 (스와이프 또는 큰 버튼)
- 한국어 UI, Noto Sans KR
데이터:
const cards = [
{front: "GDP", back: "국내총생산. 한 나라 안에서 일정 기간 생산된 재화와 서비스의 시장 가치 합계", img: null},
];
💡 꿀팁: AI로 카드 데이터 자동 생성
카드 내용을 일일이 입력하기 귀찮으면, 프롬프트 하나 더:
→ 나온 JSON을 그대로 cards 배열에 붙여넣기!
🖼️ 이미지 카드 (그림 보고 용어 맞추기)
앞면에 이미지를 넣으면 "그림 보고 용어 맞추기" 활동도 가능:
💡 커스터마이징
- 카드 수: cards 배열에 추가하면 자동 반영
- 뒷면에 이미지: back 대신 backImg 필드 사용
- 난이도 표시: 각 카드에 level(★~★★★) 추가
- 복습 주기: "몰라요" 누른 카드 3장마다 다시 등장하도록 설정
- 다크모드: 프롬프트에 "다크모드 토글 버튼" 추가
대화 참여하기