디지털 윤리 수업을 위한 개인정보 보호 퀴즈 게임 제작 후 배포하기

소개

유징이님의 사례 "생성형 AI를 활용한 디지털 윤리 교육 게임 제작기" 를 보고 따라서 실습을 해보았습니다. 디지털 윤리 교육에서 이론 수업만으로는 집중 유지가 어렵기 때문에 개인정보 보호 개념을 게임 형태의 퀴즈로 만들어 활용해보고자 했습니다.

도구 활용
- Gemini + Google AI Studio: 게임 코드 자동 생성
- GitHub Pages, Vercel: 배포 환경
1. Gemini 활용
- Prompt 입력: 개인정보 보호 관련 퀴즈 게임 제작 지시
- 결과물: HTML + CSS 기반의 간단한 브라우저 퀴즈 게임 코드 생성
- 특징: 가볍고, 빠르게 실행 가능 → GitHub Pages로 손쉽게 배포 가능
📎 배포 URL: https://hd-sh-sh.github.io/data-defender-kids3/
- GitHub 저장소 업로드 → GitHub Pages 활성화 → 즉시 배포 성공
  2. Google AI Studio 활용
  - 결과물: 구조화된 React 컴포넌트 기반 코드
  📎 배포 URL: https://data-defender-kids5.vercel.app/
- Vercel 플랫폼 활용 → 클릭 몇 번으로 자동 빌드 및 배포 성공 ✅

성과
- HTML/CSS 기반 퀴즈 게임은 즉시 배포 완료 → 수업 적용 가능
- React/Vite 기반 프로젝트는 Vercel을 통한 효율적인 배포 프로세스 학습
배운 점
- 단순 예제라도 직접 실습을 통해 경험을 쌓는 것이 중요
- GitHub Pages는 정적 사이트에 적합하지만, React/Vite 프로젝트는 별도의 빌드 환경을 요구
- Vercel은 복잡한 설정 없이도 React 기반 프로젝트를 안정적으로 배포
확장 가능성
- 디지털 윤리뿐 아니라 역사, 과학, 언어 교육 등 다양한 교과목에서 활용 가능한 학습용 게임 아이디어