2026년 9월 6일 일요일

[바이브 코딩] 어휘 플래시 카드 - 3D 뒤집기와 로컬 TTS로 완성하는 스피드 퀴즈 배틀



초등 단원별 핵심 어휘 플래시 카드 & 스피드 퀴즈 배틀 웹앱 — 영어·국어·사회 어휘력 정복

🗂️ 3~6학년 영어 파닉스, 국어 속담·사자성어, 사회 역사 인물 단원. 학생들이 단어와 뜻을 입력하면 CSS 3D 카드 뒤집기와 브라우저 내장 음성(TTS)으로 발음을 들려주는 플래시 카드 웹앱입니다. 단일 HTML 파일 더블클릭 하나로 모둠별 단어 골든벨 대결까지 펼쳐집니다.

수동적인 어휘 암기를 능동적인 퀴즈 게임으로 바꾸며, 영어 단어부터 역사 인물 카드까지 교과를 넘나드는 단원 정리 도구입니다. 외부 CDN과 외부 API 없이 브라우저 기본 기능만으로 완결됩니다.

📖 한 줄 정의

심기 모드(데이터 임베딩): API 데이터를 미리 받아 HTML 파일 안 상수로 박아두는 방식(앱 실행 중 외부 통신 0).

학내망 원칙: 학교 배포 웹앱은 개인정보 수집·저장·전송 없음(외부 CDN·API 호출 0, 단일 파일) — 학생은 학내망에서 교사 PC 서버에 접속.

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역 초보자를 위한 쉬운 설명 이렇게 한번 써보세요!
3D 카드 뒤집기 외부 3D 라이브러리 없이 순수 CSS의 원근감(perspective)과 회전(rotateY)만으로 카드가 앞뒤로 뒤집힙니다. 앞면에는 단어, 뒷면에는 뜻과 예문이 자리합니다. 카드를 클릭하거나 스페이스바를 누르면 부드럽게 180도 회전.
로컬 전용 TTS 웹 음성 합성(SpeechSynthesis)을 쓰되, localService 속성이 참(true)인 장치 내장 음성만 선택합니다. 학생이 입력한 단어가 외부 클라우드 서버로 날아가지 않는 안전 설계입니다. 영어 단어는 영어 로컬 음성, 국어 속담은 한국어 로컬 음성으로 읽기.
스피드 퀴즈 배틀 플래시 카드로 단어를 익힌 뒤 '스피드 퀴즈 모드'로 전환하면 30초 카운트다운 타이머와 함께 4지선다 문제가 출제됩니다. 모둠별 크롬북에서 각자 단어 세트를 만들어 상대 모둠과 맞바꿔 풀기.
단어 세트 심기 교과서 단원 어휘 20개를 코드 상단 DEFAULT_WORDS 상수로 박아두면, 인터넷 없는 환경에서도 즉시 구동됩니다. 교과별 단어 팩을 심기 모드(데이터 임베딩)로 준비해 두기.

2. 핵심 아키텍처 해설

① 단어 데이터: DEFAULT_WORDS 상수

const DEFAULT_WORDS = [
  { word: "photosynthesis", ko: "광합성", lang: "en" },
  { word: "천 리 길도 한 걸음부터", ko: "시작이 반이다", lang: "ko" },
  { word: "이순신", ko: "한산도대첩의 영웅", lang: "ko" }
];

단어 세트는 이 상수 하나로 관리됩니다. 학생이 입력 모드에서 직접 추가한 세트는 '상수 내보내기' 버튼으로 텍스트를 복사해 이 위치에 붙여넣으면 다음 수업에도 살아 있습니다.

② 순수 CSS 3D 카드 뒤집기

.card3d { perspective: 600px; }
.inner { transform-style: preserve-3d; transition: transform .5s; }
.inner.flipped { transform: rotateY(180deg); }
.face { position: absolute; backface-visibility: hidden; }
.back { transform: rotateY(180deg); }

perspective(원근)는 카드가 눈앞에 서 있는 느낌을, backface-visibility: hidden은 뒤집었을 때 뒷면이 비치는 것을 막아줍니다. rotateY(180deg)가 뒤집기의 심장입니다.

③ 로컬 전용 발음 재생 (TTS)

let localVoice = null;

function pickVoice(lang) {
  return speechSynthesis.getVoices()
    .filter(function (v) { return v.localService; })
    .find(function (v) { return v.lang.indexOf(lang) === 0; });
}

function speak(text, lang) {
  const u = new SpeechSynthesisUtterance(text);
  const v = pickVoice(lang);
  if (v) u.voice = v;
  speechSynthesis.speak(u);
}

getVoices()가 돌려주는 음성 목록에서 localService === true인 음성만 골라 쓰면, 학내망 원칙(외부 전송 0)을 지키면서도 학생 단어를 안전하게 읽어줍니다.

④ 골든벨 배틀 로직

const scores = [0, 0, 0, 0];   // 모둠 점수 — 세션 메모리

function drawCard() {
  const i = Math.floor(Math.random() * DEFAULT_WORDS.length);
  showCard(DEFAULT_WORDS[i]);
  sound("card");   // 뒤집기 효과음
}

function correct(groupIndex) {
  scores[groupIndex] += 10;
  sound("bell");   // 골든벨 효과음
}

⑤ 배틀 모드와 상수 내보내기

'스피드 퀴즈' 버튼을 누르면 30초 카운트다운과 4지선다 문제 화면으로 전환됩니다. 상수 내보내기 버튼은 현재 단어 세트를 DEFAULT_WORDS = [...] 형태의 텍스트로 복사해 주므로, 학생 입력이 곧 심기 갱신이 됩니다.

3. 따라하기 3단계

  1. 제미나이 전용 에러 제로 프롬프트를 복사해 Gemini에 붙여넣습니다.
  2. AI가 던지는 역질문 3가지(교과·단원, 게임 방식, 테마)에 답하면 단일 HTML 코드가 완성됩니다.
  3. 코드를 flashcards.html로 저장 후 더블클릭 — 단어 입력 → 카드 학습 → 스피드 퀴즈 배틀 순서로 진행합니다.

제미나이 전용 에러 제로 프롬프트

[🚨 에러 방지 기본 안전장치]
1. 결과물은 외부 라이브러리·폰트·이미지 없이 단일 HTML 파일로 완성한다 — 더블클릭으로 바로 실행되어야 한다(서버·설치·회원가입·외부 클라우드 금지).
2. 파일 상단 EMBED_WORDS 상수에 단어 세트를 심어두면(심기 모드 — 데이터 임베딩) 외부 통신 없이 즉시 실행된다. 상수가 비어 있으면 화면 입력(세션)으로 시작한다.
3. 3D 카드 뒤집기는 CSS perspective와 rotateY로 직접 구현한다 — 태블릿·전자칠판 터치에서도 동작해야 한다.
4. 발음은 브라우저 내장 speechSynthesis로 합성하되 localService(로컬 음성)만 사용한다 — 온라인 클라우드 음성은 절대 금지(외부 전송 방지).
5. 사운드는 Web Audio API로 직접 합성한다: 카드 뒤집기 '사각', 정답 '골든벨 랭', 오답 '삑'.
6. 이름·성별·학번 입력 칸은 만들지 않는다 — 표기는 모둠 번호·닉네임만, 모둠 점수는 세션 메모리(종료 시 소멸).
7. '상수 내보내기' 버튼으로 현재 단어 세트를 심기용 상수 텍스트로 복사한다(다음 수업용 갱신 루틴).
8. // TODO, /* 생략 */ 금지 — 끝까지 완성한다.

[❓ 역질문 유도]
코드를 바로 만들지 말고, 아래 3가지를 먼저 질문한 뒤 내 답변으로 설계를 확정한다.
Q1. 어떤 교과·단원 단어 세트로 시작할까? (영어 파닉스 단어 / 국어 속담·사자성어 / 사회 역사 인물 / 혼합)
Q2. 배틀 방식은? (랜덤 뒤집기 지명 / 모둠별 턴제 / 스피드 챔피언 30초)
Q3. 카드 테마는? (파스텔 팔레트 / 교과서 종이 질감)

🎯 에디터 한줄평

'단어장 받아쓰기'가 '카드 뒤집기 무대'로 바뀌는 순간, 어휘는 시험 대상에서 아이들의 자산이 됩니다. 앞면과 뒷면이 뜻하는 것은 '아는 것'과 '쓰는 것'의 거리 — 3D 뒤집기 하나가 그 거리를 재미로 좁힙니다. 발음 듣기 버튼은 파닉스 수업의 마지막 조각이고, '우리 모둠 세트를 우리가 심는' 갱신 루틴은 자기주도 학습의 기술적 형태입니다. 로컬 음성만 쓰는 설계까지 — 처음부터 끝까지 한 학급에 맞춰 진심으로 세운 앱입니다.

📚 기술·교육 참고 링크

By 시간: