말로 시켰더니,
수업용 웹앱이 나왔습니다

이 단계가 끝나면: 브라우저에서 실습할 계정을 정했습니다.

준비물은 인터넷이 연결된 PC, Chrome 또는 Edge, Canva 로그인 계정입니다. 프로그램 설치나 결제 정보 입력 없이 시작하세요.

1. Canva 열기를 누르고 평소 쓰는 계정으로 로그인합니다.
2. 학교에서 지원받은 교육용 계정이라면 해당 팀에 들어와 있는지 확인합니다.
3. 홈에서 코드(Code) 또는 Canva AI → 코드를 찾습니다. 프레젠테이션 편집 화면의 일반 텍스트 입력칸과는 다릅니다.

이 단계가 끝나면: AI에게 만들 내용을 부탁할 준비가 됐습니다.

1. 홈의 코드를 누릅니다. 화면에 따라 Canva AI에서 코드 만들기를 선택할 수도 있습니다.
2. 만들고 싶은 것을 설명하는 입력칸이 보이는지 확인합니다.
3. 처음에는 새 작업을 열고, 아래 예제 하나만 만들어 봅니다.

이 단계가 끝나면: 처음 만들 기능을 세 가지로 정했습니다.

처음부터 학급 전체 관리 시스템을 만들 필요는 없습니다. 5문항 퀴즈로 시작해 보세요.

• 누가 쓰나요? 중학생
• 언제 쓰나요? 수업 마무리 5분
• 무엇이 필요한가요? 답 고르기, 해설 보기, 다시 풀기

첫 작품은 학생별 성적 수집 없이 혼자 풀어 보는 형태로 만듭니다. 아래 프롬프트는 교과와 주제만 바꾸어 재사용할 수 있습니다.

이 단계가 끝나면: 눌러 볼 수 있는 퀴즈 화면이 생겼습니다.

아래 내용을 복사해 코드 입력창에 붙여넣고 생성을 누르세요. 완성된 화면을 클릭해 첫 문제를 풀어 봅니다.

중학생이 수업 마무리에 풀 수 있는 「세계사 핵심 개념 퀴즈」 웹앱을 만들어 주세요.
객관식 5문항을 한 문제씩 보여 주고, 답을 고르면 정답 여부와 한 문장 해설을 표시해 주세요.
예시 문항은 산업 혁명의 시작 지역, 프랑스 혁명의 시작 연도, 제1차 세계 대전의 발발 연도, 르네상스의 시작 지역, 냉전의 두 중심 국가로 구성해 주세요. 사실관계를 확인할 수 있도록 문항과 정답 목록도 함께 적어 주세요.
마지막에는 5문제 중 맞힌 개수와 다시 풀기 버튼을 보여 주세요.
한국어로 표시하고 휴대폰에서도 버튼과 글자가 잘 보이게 해 주세요. 이름 입력, 로그인, 서버 저장, 외부 AI 호출은 넣지 마세요.

긴 설명을 읽기보다 먼저 한 번 실행해 보세요. 정답과 해설은 교사가 교과서나 수업 자료와 대조한 뒤 사용합니다.

이 단계가 끝나면: 퀴즈를 끝까지 풀고 불편한 점 하나를 고쳤습니다.

1. 일부러 오답을 골라 해설이 맞는지 확인합니다.
2. 5문제를 모두 푼 뒤 점수가 맞는지 확인합니다.
3. 다시 풀기를 누르면 첫 문제와 점수가 초기화되는지 확인합니다.
4. 화면을 좁혀 글자와 버튼이 잘리는지 살펴봅니다.

정답 확인 버튼을 눌러도 다음 문제로 넘어가지 않습니다.
답 선택 → 정답과 해설 표시 → 다음 문제 버튼 순서로 동작하게 고쳐 주세요.
마지막 문제에서는 결과 화면으로 이동하게 해 주세요. 문항 내용과 현재 색상은 유지해 주세요.

문제가 다르다면 첫 문장을 실제 증상으로 바꾸세요. 예: “휴대폰에서 다음 문제 버튼이 잘립니다. 버튼을 한 줄 아래로 옮겨 주세요.”

이 단계가 끝나면: 편집 화면 밖에서도 열리는 웹사이트 주소를 얻었습니다.

1. 코드 창 오른쪽 위 게시(Publish) 또는 웹사이트 게시를 선택합니다.
2. 사이트 주소와 제목을 확인합니다. 무료 Canva 주소를 선택하고, 유료 도메인 구매는 건너뜁니다.
3. 설정을 확인한 뒤 게시를 누릅니다.
4. 완료 화면의 라이브 주소를 복사합니다. 디자인 편집 링크를 복사하지 않도록 주의하세요.

Canva 공식 게시 안내

이 단계가 끝나면: 실제 수업에 나눠 줄 주소와 QR을 확인했습니다.

1. 시크릿 창이나 다른 기기에서 게시한 주소를 엽니다.
2. 편집 권한 요청 없이 퀴즈가 열리고 마지막까지 풀리는지 확인합니다.
3. 아래 QR 도구에 주소를 붙여넣고 QR을 띄웁니다.
4. 휴대폰 카메라로 QR을 찍어 같은 퀴즈가 열리는지 확인합니다.

활동 안내에 “퀴즈 풀기 → 해설 확인 → 틀린 개념 다시 보기”를 함께 적으면 수업에 바로 활용하기 좋습니다.

이 단계가 끝나면: Gemini를 열고 실습할 계정을 확인했습니다.

1. Gemini 열기를 눌러 허용된 Google 계정으로 로그인합니다.
2. 유료 업그레이드 없이 현재 무료로 이용 가능한 모델과 사용량 안에서 진행합니다.
3. 학교 계정은 관리자 설정에 따라 Canvas나 공개 공유 기능이 제한될 수 있으니 메뉴가 보이는지 먼저 확인하세요.

교사용 실습입니다. 학생에게 동일한 계정 접근이나 공유 권한이 있다고 가정하지 마세요. 오늘은 설치, API 키, 결제 정보가 필요 없습니다.

이 단계가 끝나면: 채팅 옆에서 앱 화면을 볼 준비가 됐습니다.

1. 새 채팅의 입력창 주변에서 Canvas를 선택합니다. 화면에 따라 ‘도구’ 또는 더보기 안에 있을 수 있습니다.
2. 다음 단계의 요청을 입력하면 채팅 옆에 제작 공간이 열립니다.
3. 문서만 나오면 “문서가 아니라 버튼을 눌러 실행하는 웹앱으로 만들어 주세요”라고 요청합니다.

이 단계가 끝나면: 배포하기 쉬운 작은 웹앱을 정했습니다.

첫 작품은 Canva 코스와 같은 5문항 퀴즈입니다. 나중에 독립 웹사이트로 배포할 수 있도록 HTML 파일 하나로 만들어 달라고 요청합니다.

• HTML: 브라우저가 읽는 웹페이지 파일입니다.
• 미리보기: 아직 다른 사람에게 공개하지 않고 눌러 보는 화면입니다.
• 배포: 다른 기기에서도 주소로 접속하도록 인터넷에 올리는 일입니다.

이 단계가 끝나면: 퀴즈가 실행되고 단일 HTML 코드도 준비됐습니다.

아래 프롬프트를 Canvas 채팅에 보내고, 오른쪽 미리보기에서 실행해 보세요.

중학생이 수업 마무리에 풀 수 있는 「세계사 핵심 개념 퀴즈」 웹앱을 만들어 주세요.
객관식 5문항을 한 문제씩 보여 주고, 답을 고르면 정답 여부와 한 문장 해설을 표시해 주세요.
예시 문항은 산업 혁명의 시작 지역, 프랑스 혁명의 시작 연도, 제1차 세계 대전의 발발 연도, 르네상스의 시작 지역, 냉전의 두 중심 국가로 구성해 주세요. 사실관계를 확인할 수 있도록 문항과 정답 목록도 함께 적어 주세요.
마지막에는 5문제 중 맞힌 개수와 다시 풀기 버튼을 보여 주세요.
한국어로 표시하고 휴대폰에서도 버튼과 글자가 잘 보이게 해 주세요. 이름 입력, 로그인, 서버 저장, 외부 AI 호출은 넣지 마세요.

독립 배포할 수 있도록 CSS와 JavaScript를 모두 포함한 index.html 파일 하나로 작성해 주세요. React, npm, 설치, API 키, 외부 라이브러리 없이 브라우저에서 바로 실행되게 해 주세요. Canvas에서 미리보기도 보여 주세요.

이 단계가 끝나면: 동작을 점검하고 내 PC에서도 실행했습니다.

1. 정답, 오답, 마지막 결과, 다시 풀기를 차례로 눌러 봅니다.
2. 코드 또는 콘솔에서 오류를 확인할 수 있습니다. 어려우면 오류 문구를 그대로 복사해 채팅에 보내세요.
3. 수정 후 코드 화면에서 전체 HTML을 복사합니다. 앞뒤의 코드 블록 표시(백틱 3개)는 제외하세요.
4. Windows 메모장에서 ‘다른 이름으로 저장’ → 파일 이름 index.html, 파일 형식 ‘모든 파일’, 인코딩 ‘UTF-8’로 저장합니다. Mac은 텍스트 편집기에서 ‘일반 텍스트로 만들기’ 후 저장합니다.
5. 파일을 두 번 눌러 브라우저로 엽니다. index.html.txt가 되지 않았는지 확인하세요.

정답 확인 버튼을 눌러도 다음 문제로 넘어가지 않습니다.
답 선택 → 정답과 해설 표시 → 다음 문제 버튼 순서로 동작하게 고쳐 주세요.
마지막 문제에서는 결과 화면으로 이동하게 해 주세요. 문항 내용과 현재 색상은 유지해 주세요.

이 단계가 끝나면: 공유 링크와 웹사이트 주소의 차이를 알고 배포했습니다.

A. 가장 빠르게: Canvas 링크 공유

1. Canvas 오른쪽 위 공유 및 내보내기 → 공유를 누릅니다.
2. 앱 정보와 공유 대상을 확인하고 링크를 복사합니다. 학교 계정은 조직의 공유 정책이 적용됩니다.
3. 다른 기기에서 링크를 열어 봅니다. 로그인이나 권한 요청 여부는 대상 계정으로 직접 확인하세요.

B. 독립 웹사이트: 무료 GitHub Pages

1. GitHub 무료 계정을 준비합니다. 오른쪽 위 + → New repository를 선택합니다.
2. 저장소 이름을 my-class-quiz로 적고 Public, Add README를 선택한 뒤 만듭니다. 저장소는 웹앱 파일을 보관하는 폴더라고 생각하세요.
3. Add file → Upload files에서 index.html을 올리고 Commit changes로 저장합니다. 파일이 없다면 ‘Create new file’에 index.html을 입력하고 HTML 전체를 붙여넣어도 됩니다.
4. Settings → Pages로 갑니다. Source에서 Deploy from a branch, Branch에서 main, 폴더는 /(root)를 고른 뒤 Save를 누릅니다.
5. 배포가 끝나면 Pages 화면의 Visit site를 누릅니다. 주소는 https://내아이디.github.io/my-class-quiz/ 형태입니다. 반영까지 최대 10분 정도 걸릴 수 있습니다.

기본 정적 페이지는 무료 공개 저장소로 배포할 수 있습니다. 올린 코드도 공개되므로 실명 명단이나 비밀 키는 넣지 마세요.

GitHub Pages 공식 안내

이 단계가 끝나면: 주소와 QR을 공유하고 다음 수정 방법도 익혔습니다.

1. GitHub Pages 주소를 시크릿 창과 휴대폰에서 열어 봅니다. 내 PC의 file:// 주소를 공유하면 다른 사람은 열 수 없습니다.
2. 퀴즈를 끝까지 풀어 정답과 해설, 결과를 확인합니다.
3. 아래 QR 도구로 주소를 바꾸고 휴대폰 카메라로 찍어 봅니다.
4. 수정할 때는 원래 Gemini 대화에서 고친 전체 HTML을 받아 같은 저장소의 index.html을 교체하고 Commit changes로 저장합니다. 배포가 끝나면 같은 주소를 다시 확인하세요.

Canvas 링크를 공유한 경우에도 원본 수정이 기존 링크에 반영됐다고 가정하지 말고, 공유 화면과 대상 계정에서 확인하세요. 필요하면 새 공유 링크를 만듭니다.