생성형 AI를 활용한 디지털 윤리 교육 게임 제작기 [ ChatGPT vs Google AI Studio ]

💠 소개

시도하고자 했던 것과 그 이유
초등학교 4~6학년을 대상으로 하는 디지털 윤리 수업에서, 다소 지루해질 수 있는 개인정보 보호 교육을 학생들이 더 흥미롭게 참여할 수 있도록 카드 분류 게임으로 바꿔보고자 했습니다.


💠 진행 방법

🛠️ 사용한 도구와 활용 과정

  1. ChatGPT 단계

    • HTML & CSS로 카드 분류 게임 제작.

    • PRD를 작성 후 디자인과 오류를 반복 수정.

    • 결과: 배포는 쉬웠지만 디자인과 인터랙션 부족.

    👉 사용한 프롬프트 (예시)

    개인정보 보호 예방 교육을 위해 학생들에게 안전한 정보 vs 공개 위험 정보 분류 활동을 할 수 있게 게임을 만들고 싶어.
    예를 들어 안전한 정보는 "내 취미는 독서야" vs "나는 OO초등학교 이민정이야."
    와 같이 10개 정도의 예시를 만들어줘.
    초등학생들 교육활동이니깐 공신력 있고 정확하고 명확한 자료를 검토 후에 근거있는 것으로만 만들어줘.
    

    👉 코드 일부 (ChatGPT가 생성해준 HTML 예시)

    <div class="card">
      <p>내 취미는 독서야</p>
    </div>
    <div class="card">
      <p>나는 OO초등학교 이민정이야</p>
    </div>
    

    👉 화면 예시

    한국어 한국어 한국인 한국인 한국인

    👉 실행 화면

    한국 웹 사이트의 스크린 샷

  1. Google AI Studio 단계

    • ChatGPT에서 만든 같은 게임 PRD로 시도했으나 오류 발생.

    • 오프라인 모임에서 배운 팁을 활용해 새 창을 열고 프롬프트를 단순화 → 오류 해결.

    • AI 추천 스타일과 효과를 넣어 인터랙션이 강화된 앱 완성.

    👉 Google AI Studio 프롬프트

    개인정보 보호 예방 교육을 위해 학생들에게 안전한 정보 vs 공개 위험 정보 분류 활동을 할 수 있게 게임을 만들고 싶어.
    예를 들어 안전한 정보는 "내 취미는 독서야" vs "나는 OO초등학교 이민정이야." 와 같이 16개 정도의 예시를 만들어줘.
    초등학생들 교육활동이니깐 공신력 있고 정확하고 명확한 자료를 검토 후에 근거있는 것으로만 만들어줘.
    정답을 확인 후에는 왜 그런지 이유를 설명해 주고 개인정보를 보호하기 위한 가이드를 넣어줘.
    

    👉 화면 예시

    한국어 텍스트가 포함 된 웹 사이트 스크린 샷

    👉 실행 화면

    한국어 텍스트가있는 웹 사이트의 스크린 샷


💠 결과와 배운 점

  • 결과: 학생들이 직접 분류 활동을 하면서, 정답 확인 시 왜 위험한지/안전한지 설명과 가이드까지 확인할 수 있는 완성도 높은 게임 완성.

  • 배운 점:

    • ChatGPT → 구조화된 개발(코드 기반)에 강점.

    • Google AI Studio → 빠른 앱화와 시각적 효과에 강점.

    • 단점: Google AI Studio는 로그인해야 접근 가능. 구글 계정이 없는 초등학생은 접근할 수 없음.

  • 꿀팁:

    • 오류가 반복되면 새 창 열고 단순 프롬프트로 재시도.

    • 프롬프트에 예시 데이터 + 결과에 반드시 들어가야 할 기능(정답 확인, 이유 설명, 가이드)을 명확히 작성할 것.

  • 앞으로의 계획:

    • 게임을 GitHub Pages 또는 Google Cloud에 게시해서, 학생들이 로그인 없이 접속할 수 있도록 개선 예정.


도움 받은 글

  • GPTers 에듀테크 오프라인 모임 – 테크권님 강의: "오류 발생 시 새 창을 열어 다시 시도" 팁.

  • Google AI Studio 공식 문서 예제.

3
2개의 답글

뉴스레터 무료 구독

👉 이 게시글도 읽어보세요