[연수 후기] 챗 지피티, 구글 사이트 도구로 나만의 게임 만들기
by ESC 쌤
안녕하세요, ESC 쌤입니다.
<교사성장학교> 교사 성장 자율 연수 프로젝트
오늘은 '웅쓰에듀' 선생님이 진행하신 "챗 지피티와 구글 사이트 도구로 나만의 게임 만들기" 연수에 참여하였습니다.
Google Sites와 ChatGPT를 활용해 방탈출 게임과 퀴즈 게임을 제작해 보는 흥미진진한 경험이었는데요. 2시간짜리 연수였으나 시간 가는 줄 모르고 배워보았던 연수에서 배운 내용을 정리해보려고 합니다.

방탈출 게임(Room-Escape Game) & 스토리텔링

연수의 중심 목표는 방탈출 게임을 제작하는 것이었습니다. 학교 수업에서 활용되는 방탈출 게임 제작 과정에서 중요한 것은 스토리텔링으로, 학생들이 자연스럽게 문제 상황에 몰입할 수 있도록 문제 상황과 전개 방식이 자연스럽게 연결되도록 구성하는 것이 좋다는 의견을 주셨습니다. 역사 교사이신 웅쓰에듀 선생님이라면 수업 시간에 스토리 텔링을 자유롭게 만들어나가실 수 있을 것 같은데요, 저도 스토리텔링을 중시하기 때문에 어떻게 수업에 적용해볼까 고민이 됩니다. 과학 교과에서 활용하기에는 역시 PBL이겠죠? 문제 상황을 잘 고려해야 동기유발이 될 수 있으니까요.
구글 사이트(Google Site) - http://sites.google.com
게임의 기반이 되는 홈페이지는 Google Sites를 이용해 제작했습니다. 여러 페이지를 생성하고 링크를 통해 연결하며, 기본적인 방탈출 게임의 흐름을 구성했습니다. Google Sites는 알고만 있었지 제대로 사용해본 것은 처음인데, 꽤 직관적인 인터페이스를 가지고 있어 조금만 관심 가지고 눌러보면 초보자도 쉽게 활용할 수 있었습니다. 과거 html 코드를 하나하나 외워가며 만들던 홈페이지는 이제 안녕이네요.
html

'방탈출.com'에서 제공하는 오픈 소스를 활용해 주관식 문제 해결 로직을 삽입해 보았는데요, 제가 뭘 잘못 눌렀는지 정답을 입력하고 '정답은?'이라고 직접 지어 넣은 노란 박스를 클릭했는데 아무 반응이 없었습니다. 연수 중 강사님께 문의해보니 친절하게 오류를 해결해주셨습니다. 적어도 소스 코드에서 뭐가 문제인지 잊지 않을 것 같습니다. 시행착오를 겪으며 배우는 실행학습이었죠. 이를 통해 html 코드를 잘 활용하면 방탈출 게임 뿐 아니라 그 외 무궁무진한 주제의 활용이 가능하겠다는 생각이 들었습니다.

ChatGPT with 프롬프트
ChatGPT는 게임 내의 퀴즈와 문제를 생성하는 데 활용되었습니다. 개인적으로 ChatGPT를 세특에 활용하기 전부터 간단한 코딩을 할 때, 엑셀의 함수를 만들 때 매우 유용하다고 여겼었는데, 실제로 주제를 잡고 코드를 짜는 걸 해보면서 예전보다 프롬프트를 잘 이해하고 학습해서 원하는대로 만들어주는 걸 느꼈습니다.
강사님께서 역사적인 인물을 맞추는 퀴즈를 만들어보는 문항을 예시로 만드시는 걸 보고, 저는 생명과학2의 '생명과학의 역사' 단원에서 다루는 내용을 기반으로 퀴즈를 만들었습니다.

원래 의도는 랜덤으로 여러 과학자들이 문항으로 나오는 것인데, 역시 데이터베이스(DB) 없이 작성하는 것이다보니 실시간으로 문항이 바뀌도록 하는 것은 어렵더라고요. 강사님께 문의하니까 별도로 홈페이지에 문항과 답에 대한 DB를 만들어두고 거기에 있는 정보를 출력하는 방식으로 만들면 가능할 것 같다는 의견을 주셨습니다. 확실히 교육과정 외의 협소한 사례가 나오면 곤란하니 명답이라 여겨졌습니다.
본 과제는 문제 풀이하는 데 걸린 시간이 측정되는 타이머 기능과 힌트 기능을 넣는 것이었고, 힌트로 정답에 대한 한글 초성이 나오게 하려고 하였지만 ChatGPT가 초성을 이해하지 못해서 좀 헤맸습니다. 시간 관계상 넘어가려다가 초성의 개념을 학습시켜 코드를 정상적으로 출력하게 하였더니 인식하더라고요.
문제는 제가 낸 과학자 맞추기 문제를 제가 못풀었습니다. 예를 들어, 'DNA 이중 나선 구조 발견에 중요한 기여를 한 과학자'라고 하였을 때 힌트로 'ㄹㅈㄹㄷ ㅍㄹㅋㄹ'이 나오니까 로잘랜드 프랭클린? 로잘랜드 플랭클린? 로자랜드 프랭클린? 한참 못푸는 헤프닝이... ㅋㅋ 그래서 Skp 버튼을 만들어 넘길 수 있도록 하고 맞춘 총 문항 수를 카운트하는 기능을 구현해서 추가해보았습니다.
코드펜(Codepen) - https://codepen.io/
코드펜은 일종의 코드 실험실인데요, 만든 html 코드는 코드펜을 이용해서 정상 작동되는지 테스트했습니다.
다만, 구글 사이트를 이용해서 직접적으로 html 삽입을 통해 정상 작동되는지 테스트를 바로 해도 될 것 같습니다.

비주얼스튜디오(Visual Studio) - https://code.visualstudio.com/
비주얼스튜디오는 코드를 파일화(html)할 때 사용하기 좋았습니다. 사용하려면 데스크탑 PC나 노트북에 설치해야합니다.
정상 작동하는 html을 입력해서 파일화를 시키는데, 주의할 점은 다음 단계의 '웹 호스팅'을 위해 파일명을 'index.html'으로 작성해야 합니다. 그리고 저장은 '게임명' 폴더 안에 집어넣어야하는 것이죠.

예를 들어, '생명과학 역사 게임'라는 게임을 만들고자 게임명의 폴더 내에 'index.html'을 넣으면 됩니다.
Netlify - https://www.netlify.com/
Netlify는 html 파일 웹 호스팅 툴입니다. 무료로 제공되는 배포 도구로, 앞선 단계에서 만든 html은 오프라인으로만 사용될 수 있기 때문에 이를 온라인에서 활용할 수 있도록 호스팅해주는 역할을 해줍니다. 'index.html'이 저장된 '생명과학 역사 게임' 폴더를 통째로 업로드하면 결과물이 출력됩니다.

이렇게 만든 결과물을 공유해봅니다. 정말 짧은 시간 동안 만든 것이라 별 거 아니지만, 충분히 ChatGPT를 학습시켜 코드를 잘 출력한다면 정말 좋은 결과물을 만들 수 있을 것 같습니다. 이번 연수를 통해 습득한 기술은 다양한 방식으로 응용할 수 있음을 느꼈습니다. 과학 행사나 수업에서 학생 참여형 활동을 기획하거나, 교육용 콘텐츠를 제작하는 데 큰 가능성을 보았습니다. 특히, 각종 도구와 기술을 자유롭게 결합해 창의적인 결과물을 만들어 낼 수 있다는 점이 인상 깊었습니다.
https://gleeful-cendol-53f655.netlify.app/
스피드 과학자 퀴즈
스피드 과학자 퀴즈 "게임 시작" 버튼을 눌러 시작하세요! 게임 시작 타이머: 0초
gleeful-cendol-53f655.netlify.app
미리캔버스(Miricanvas)
번외로 미리캔버스를 이용한 방탈출 게임 아이디어도 강의해주셨습니다. 슬라이드 간 전환 버튼을 이용해 방탈출 하는 게임도 만들어보는 것인데요. 같은 그림의 슬라이드를 복제한 후, 문제 슬라이드와 해답 슬라이드로 활용합니다. 문제 슬라이드에 숨겨진 버튼(도형 투명화)을 만들고 이것을 누르면 해답 슬라이드로 넘어가는 것이죠. 약간 옛날에 유행했던 플래시(flash) 게임을 미리 캔버스를 이용해 만들 수 있다는 걸 알게되었습니다.
공유 할 때, 좌우 슬라이드가 아니라 ‘퀴즈, 심리테스트’로 하면 완성이죠. 강사님은 편지봉투 이미지 넣고 이미지를 클릭하면 편지지가 뜨게 해서 그 편지지에 스토리를 적은 후 게임에 넘어가는 식으로 만들어 스토리에 몰입할 수 있는 장치를 꾸민다고 하신 게 인상 깊습니다. 확실히 구성을 잘 짜면 몰입감이 좋아지겠네요. 고민해보아야겠습니다.
이번 연수를 통해 습득한 기술은 다양한 방식으로 응용할 수 있음을 느꼈습니다. 과학 행사나 수업에서 학생 참여형 활동을 기획하거나, 교육용 콘텐츠를 제작하는 데 큰 가능성을 보았습니다. 강사님의 아낌없는 노하우와 꼼꼼한 지도 덕분에 많은 인사이트를 얻었고, 과학 행사나 수업 활동에 VR 게임, 방탈출 게임 등을 적용해 볼 수 있겠다는 자신감을 얻게 되었습니다. 습득한 기술과 아이디어를 적극적으로 활용하여, 학생들에게 새로운 학습 경험을 제공하고자 합니다.
여러분도 ChatGPT와 Google Sites를 활용한 창의적인 도전에 도전해 보시길 바랍니다.
블로그의 정보
ESC 쌤의 과학탐험실
ESC 쌤