← 공개 강의 원고 목록공개 강의 원고 · 2026-06-13

06.13 대구 영재연수 3차시: Gems 구축과 캔버스

나만의 튜터 봇 설계 및 바이브 코딩

이 원고는 강경욱 선생님이 연수에서 쓴 자료입니다. 수업·연수에 참고하실 때 출처(강쌤의교실)를 남겨 주세요.

📘 3차시: 나만의 시스템을 아이들 책상 위로 (Gems와 캔버스)

1. 지식과 튜터의 결합: Gemini Gems의 탄생

1차시에서 우리는 PARTS라는 훌륭한 ’영혼(프롬프트)’을 만드는 법을 배웠고, 2차시에서는 NotebookLM이라는 ’완벽한 지식 창고’를 만들었습니다. 하지만 학생들에게 NotebookLM을 던져주면 잘 쓰지 않습니다. 인터페이스가 낯설고, 무엇을 질문해야 할지 모르기 때문입니다.

그래서 우리는 구글 제미나이의 Gems(젬스) 기능을 사용합니다. Gems는 한 번 세팅해 두면 영구적으로 사용할 수 있는 나만의 커스텀 챗봇입니다.

🤖 1.1 나만의 튜터 봇 설계하기 (UI 따라하기)

  1. 제미나이 접속: gemini.google.com 에 접속합니다. (Workspace 계정이 아닌 일반 개인 계정 권장, Advanced 버전 필요)
  2. 새 Gem 만들기: 좌측 사이드바에서 [Gems 관리] -> **[새 Gem 만들기]**를 클릭합니다.
  3. 기본 정보 입력:
    • 이름: 아이들이 흥미를 가질 만한 이름을 지어주세요. (예: 까칠한 소크라테스 쌤, 우주 탐험 가이드, 논리 폭격기)
    • 안내 (Instructions): 여기가 핵심입니다. 1차시에서 짰던 가장 완벽한 PARTS 프롬프트를 통째로 복사해서 이곳에 붙여넣습니다.

📚 1.2 [심화] 구글 드라이브(지식) 연동하기

단순히 역할만 부여하는 것이 아니라, 특정 자료 안에서만 대답하게 만들 수 있습니다.

  1. 안내(Instructions) 입력창 맨 아래에서 키보드 @ 기호를 누릅니다.
  2. 드롭다운 메뉴에서 **[Google Workspace] -> [Google Drive]**를 선택합니다.
  3. 미리 드라이브에 올려둔 영재 수업 활동지, 교재, 논문 파일 등을 검색하여 첨부합니다.
  4. 안내(Instructions) 내용에 한 줄을 추가합니다: “학생이 질문하면, 반드시 첨부된 파일의 내용을 먼저 검색하고 그 안에서만 대답해. 파일에 없는 내용이면 모른다고 해.”

2. 구글 클래스룸 배포의 마법

Gems를 다 만들었다면 우측 상단의 [저장] 버튼을 누릅니다. 이제 이 봇을 학생들에게 배포해야 합니다. 과거처럼 특정 사이트에 가입시키고 앱을 깔게 할 필요가 없습니다.

  1. 생성된 내 Gem 대화창 우측 상단의 공유(Share) 아이콘을 클릭합니다.
  2. **[링크 만들기]**를 클릭하고 URL을 복사합니다.
  3. 선생님의 **구글 클래스룸(Google Classroom)**에 접속하여 해당 영재반 클래스로 들어갑니다.
  4. **[수업] -> [만들기] -> [자료]**를 클릭합니다.
  5. 제목을 [필독] 오늘의 AI 튜터 접속 링크로 적고, 방금 복사한 링크를 첨부합니다.
  6. 배포 완료! 학생들은 이 링크를 누르기만 하면 즉시 선생님이 세팅한 완벽한 튜터봇과 1:1 대화를 시작할 수 있습니다.

[교사 모니터링 팁] 학생들이 AI와 제대로 된 질문을 주고받는지 평가(수행평가)하려면, 수업 마지막에 학생들에게 이렇게 지시하세요.

“제미나이 대화창 하단에 있는 [공유 및 내보내기] 버튼을 누르고 [Google Docs로 내보내기]를 클릭해. 그러면 너희가 AI와 나눈 대화가 문서로 저장되니까, 그걸 클래스룸 과제로 제출하도록 해.”


3. 코딩의 시대는 끝났다: Vibe Coding (바이브 코딩)의 서막

오후에 있을 진짜 개발(Antigravity)에 들어가기 전, 몸풀기를 해보겠습니다. 코딩을 한 줄도 몰라도 느낌(Vibe)과 말로 프로그래밍을 하는 시대가 왔습니다. 바로 제미나이의 캔버스(Canvas) 기능입니다.

🪄 3.1 캔버스(Canvas)란 무엇인가?

예전에는 “계산기 코드 짜줘”라고 하면 제미나이가 검은색 코드 블록만 뱉어냈습니다. 비개발자 선생님들은 그 코드를 어디에 붙여넣어야 할지 몰라 포기했죠. 하지만 캔버스를 사용하면, 제미나이가 우측에 새로운 도화지(패널)를 열고 코드를 짜는 과정을 실시간으로 보여주며, 심지어 우측 상단의 [실행] 버튼을 누르면 그 코드가 웹페이지처럼 바로 렌더링 되어 작동합니다.

🎮 3.2 [실습] 1분 만에 미니 게임 만들기 프롬프트 3선

아래 프롬프트를 제미나이에 그대로 타이핑해 보세요.

[게임 1. 영재반 발표자 룰렛]

“HTML, CSS, JS를 한 파일에 넣어서 ‘수학 영재반 발표자 뽑기 룰렛’ 웹앱을 만들어줘. 화면 가운데 큼직한 룰렛이 있고 ‘돌리기’ 버튼을 누르면 회전하다가 서서히 멈춰. 룰렛 칸에는 ‘김철수’, ‘이영희’, ‘박지성’, ‘손흥민’ 등 학생 이름 8개를 넣어줘. 디자인은 초등학생이 좋아할 만한 화려하고 귀여운 파스텔톤 우주 테마로 해줘.”

[게임 2. OX 퀴즈 서바이벌]

“단일 파일 HTML로 OX 퀴즈 웹 게임을 만들어줘. 문제는 ‘블랙홀은 빛도 빨아들인다(O)’, ‘원주율은 유한소수이다(X)’ 등 수학/과학 영재 기초 상식 5문제를 하드코딩해 줘. 학생이 O나 X 버튼을 누르면 정답 여부에 따라 폭죽이 터지거나 화면이 흔들리는 애니메이션을 넣어줘. 디자인은 사이버펑크 스타일로 힙하게 만들어.”

[게임 3. 단어 암기용 플래시 카드]

“영재반 영어 원서 단어 암기를 위한 플래시카드 앱을 만들어줘. 화면에 영어 단어가 크게 뜨고, 카드를 클릭하면 뒤집히면서 한국어 뜻이 나와. ‘다음’ 버튼을 누르면 새로운 단어가 나오고. 단어는 우주 관련 고급 어휘 10개를 임의로 넣어줘. 디자인은 심플하고 눈이 편안한 그린 톤으로 해줘.”

🗣️ 3.3 자연어로 코드 수정하기 (진정한 바이브 코딩)

게임을 만들었는데 마음에 들지 않나요? 코드를 직접 건드리지 마세요. 캔버스가 열린 상태에서 왼쪽 채팅창에 ‘말로’ 수정 사항을 지시합니다.

  • “디자인이 너무 촌스러워. 배경을 검은색 다크 모드로 바꾸고, 룰렛 칸 색깔을 무지개색으로 화려하게 바꿔줘.”
  • “룰렛이 멈출 때 빰빠라밤~ 하는 느낌이 나도록 폭죽(Confetti) 이펙트가 화면 가득 터지게 해줘.”
  • “버튼이 너무 작아. 모바일에서도 잘 누를 수 있게 버튼 크기를 2배로 키워.”

지시를 내리면 제미나이가 우측의 코드를 알아서 지우고 새로 쓰며 앱을 업데이트합니다.


[3차시 마무리] 선생님들, 말 몇 마디로 1분 만에 앱을 만들었습니다. 이 미니 게임들을 매 수업 도입부 동기유발용으로 사용한다고 상상해 보세요. 아이들의 눈빛이 달라질 것입니다. 캔버스는 훌륭하지만 내 컴퓨터에 저장할 수 없고 복잡한 기능(웹 검색 등)을 붙이지 못하는 한계가 있습니다. 그래서 오후 4차시부터는 구글의 최강 무기인 Antigravity 2.0을 이용해 컴퓨터에 영구적으로 살아 숨 쉬는 ’독립형 에이전트 프로그램’을 직접 개발해 보겠습니다.