카드를 뒤집으면 우리 마을 옛이야기가 짠! — 초등 3학년 사회 우리 고장 명소 & 옛이야기 캔바 플래시 카드 매칭 웹앱
🏞️ 초등 3학년 사회 '우리가 살아가는 곳', '우리고장의 모습과 옛이야기' 단원 — 지루한 지명 암기 수업은 이제 그만! 캔바(Canva)로 제작한 우리 고장의 대표 유적지, 전설 바위, 보호수 사진 일러스트를 플래시 카드로 배치하고, 같은 장소의 이름 카드와 전설 설명 카드를 짝 맞추는 3D 카드 뒤집기 인터랙티브 웹앱을 단일 파일로 완성합니다.
📖 한 줄 정의
심기 모드(데이터 임베딩): API 데이터를 미리 받아 HTML 파일 안 상수로 박아두는 방식(앱 실행 중 외부 통신 0).
학내망 원칙: 학생 개인정보(실명·의견·성적·상담 기록)의 외부 수집·저장·전송 금지(쿼리에 학생 데이터가 담기는 외부 API 호출 포함) — 일반 공개 쿼리의 외부 호출은 허용하며, 학생 배포본은 심기 폴백(EMBED 상수)을 항상 내장한다.
1. 3대 핵심 분석 비교표
| 무엇이 바뀌었나요? / 영역 | 초보자를 위한 쉬운 설명 | 이렇게 한번 써보세요! |
|---|---|---|
| 눈으로만 보던 사회과부도 | 책 속에 갇혀 있던 우리 고장 명소 사진이 손가락 터치로 회전하며 옛 설화를 들려주는 살아있는 카드로 바뀝니다. | 카드 앞면: 명소 사진 / 뒷면: 그곳에 얽힌 삼국시대 전설 한 줄. |
| 캔바(디자인) + 제미나이(코드) 2단 분업 | 어려운 그래픽 코딩 대신 캔바 템플릿으로 예쁜 카드를 다운받아 단일 HTML 파일에 쏙 심어 넣습니다. | 학생들이 직접 촬영한 동네 보호수 사진을 카드 배경으로 삽입. |
| 스피드 기억력 매칭 대결 | 16장의 카드를 뒤집어 8쌍의 명소-설화 짝을 가장 빨리 찾는 모둠 대항전 타이머가 작동합니다. | 짝을 맞출 때마다 짧은 효과음과 함께 '우리 고장 지킴이' 점수 획득. |
3. 초보자를 위한 바이브 코딩 실전 사용 예시
- 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트'를 복사합니다.
- 역질문 답변 — 제미나이가 묻는 우리 고장 명소 4곳과 대표 전설에 답합니다.
- HTML 파일 실행 — 메모장에 붙여넣고
우리마을카드.html로 저장 후 더블클릭합니다.
제미나이 전용 에러 제로 프롬프트
[🚨 에러 방지 기본 안전장치]
1. 단일 HTML 파일 완결성: 외부 라이브러리나 이미지 호스팅 서버 없이 순수 바닐라 HTML/CSS/JS로 완성한다.
2. 심기 모드(데이터 임베딩): const LOCAL_CARDS = [...] 상수에 우리 고장 명소 4쌍(총 8장) 이상의 이름과 설화 데이터를 내장한다.
3. 3D 플래시 카드 뒤집기: CSS perspective 및 rotateY 속성을 사용하여 부드러운 3D 카드 뒤집기 인터랙션을 구현한다.
4. 매칭 판정 로직: 뒤집은 두 카드의 id가 일치하면 매칭 성공(초록 테두리 고정), 불일치 시 0.8초 후 다시 뒷면으로 뒤집는다.
5. 학생 개인정보 0: 학생 실명 저장을 금지하며, 플레이 경과 시간과 맞춘 개수만 화면에 표시한다.
6. // TODO, /* 생략 */ 등의 미완성 코드는 절대 넣지 말고 끝까지 완성한다.
[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 기획을 구체화하기 위한 다음 3가지 질문을 먼저 나에게 던져줘:
1. 우리 고장의 이름과 다루고 싶은 대표 명소 3~4곳은 어디인가요?
2. 카드 크기 레이아웃은 4×2 격자와 4×4 격자 중 어느 것으로 할까요?
3. 매칭 완료 시 '우리 고장 박사' 인증 팝업을 띄울까요?🎯 에디터 한줄평
"내가 매일 지나치던 동네 골목의 바위 하나에 삼국시대 전설이 숨어 있다는 사실을 카드를 뒤집으며 발견할 때, 고장은 더 이상 지도 위의 잉크 자국이 아니라 살아 숨 쉬는 내 삶의 무대가 됩니다. 캔바의 시각적 디자인과 제미나이의 3D 카드가 만난 이 작은 교구는 3학년 사회 수업의 가장 따뜻한 초대장입니다."
📚 기술·교육 참고 링크
- CSS 3D Transform 플래시 카드 인터랙션 설계 가이드
- 교육과정 연계: 초등 3학년 사회(우리가 살아가는 곳, 우리 고장의 옛이야기), 실과(기초 알고리즘 탐구)
