선생님이 페이지를 볼 수 있게 Google 클래스룸에 HTML 파일 제출하기

웹 프로젝트가 내 노트북에서는 잘 돌아가요. 화면 배치도, 버튼도, 게임도요. 그런데 Google 클래스룸 과제에 index.html을 첨부하면 선생님은 내 페이지가 아니라 파일을 받아요. 아니면 내가 교사일 수도 있어요. ChatGPT가 복습 게임을 만들었고, 학생 28명이 크롬북으로 열어야 해요.

이 페이지는 둘 다 다뤄요. 클래스룸이 첨부한 HTML 파일을 어떻게 다루는지, 대신 페이지 링크를 제출하는 방법, 교사가 게임이나 퀴즈를 링크로 올리는 방법이에요. 인용한 Google의 클래스룸 도움말과 다른 한국어 페이지는 2026년 10월 23일에 읽었고, 영어로만 있는 페이지는 2026년 10월 16일에 확인한 내용이에요.

파일 첨부와 링크 제출: 선생님에게 보이는 것

클래스룸은 .html 파일을 다른 첨부파일처럼 받아요. 그래서 파일 그대로 남아요. 클래스룸이나 Drive가 첨부한 HTML 파일을 어떻게 보여 주는지는 Google 도움말에 나와 있지 않아요. Google의 Google Drive에 저장할 수 있는 파일 목록은 미리 볼 수 있는 형식 중 “마크업/코드”에 .HTML을 넣고, “Google Drive 미리보기는 전체 파일의 축소된 버전”이라고 적고 있어요. 그 미리보기가 페이지를 그려 주는지, 스크립트를 실행하는지는 적혀 있지 않아요. 게시한 페이지의 링크는 브라우저에서 페이지 자체를 열어요.

Google의 공지(영어)는 Drive에서 콘텐츠를 보여 주는 기능이 2016년 8월 31일에 끝났다고 알려요. GitHub 문서에 따르면 GitHub Pages는 GitHub Free에서는 퍼블릭 리포지토리에서 쓸 수 있어요. Netlify의 Drop 빠른 시작 문서(영어)는 로그인하지 않고 올리면 내 것으로 만들 때까지 프로젝트 주소가 임시 비밀번호로 보호된다고 적고 있어요. Netlify의 크레딧 기반 요금제에서는 비공개 기본값을 켠 팀이면, 내 것으로 만든 프로젝트가 공개로 바꿀 때까지 비공개로 남아요. 다른 호스팅 서비스와의 비교는 HTML 파일을 링크로 공유하는 방법에서 볼 수 있어요.

페이지를 링크로 제출하는 4단계

Convika는 13세 이상만 쓸 수 있어요. 18세 미만이라면 먼저 부모나 보호자의 동의를 받아야 해요. 13세 미만이거나 계정을 만들고 싶지 않다면, 반에서 페이지를 어떻게 온라인에 올리면 되는지 선생님께 물어보세요. 그다음 받은 주소로 4단계를 하세요.

1. 프로젝트를 파일 하나로 합치기

Convika는 .html이나 .htm 파일 하나를 2 MB까지 받아요. 프로젝트에 style.css, script.js, 이미지 폴더가 있다면 CSS와 JavaScript를 index.html 안에 넣으세요. 이미지는 https:// 주소를 쓰세요. 방법과 ChatGPT나 Copilot에 붙여 넣을 요청 문구는 VS Code에서 HTML 파일을 공유하는 방법(영어)에 있어요.

2. 상자에 파일을 넣고 확인하기

이 페이지 맨 위의 상자에 파일을 넣거나, ‘코드 붙여 넣기’로 바꿔 코드를 붙여 넣으세요. 그다음 ‘미리보기 링크 받기’를 누르세요. ‘미리보기 링크가 생겼어요’가 보이면 열어서 화면 배치를 확인하세요. 미리보기는 3분 동안 열리고, 스크립트와 폼은 꺼져 있어요. 버튼과 게임은 아직 반응하지 않아요. 이 링크는 제출하지 마세요.

3. 페이지를 보관하고 게시하기

미리보기 링크 위의 ‘이 페이지 보관하기’(무료, 카드 필요 없음)를 눌러 가입하세요. 페이지가 업로드한 그대로 내 계정으로 옮겨지고, 스크립트가 동작해요. ‘미리보기 열기’를 눌러 시험해 본 뒤 ‘게시하기’를 누르세요. ‘누가 이 페이지를 열 수 있나요?’에서 ‘전체 공개’는 무료이고, ‘일부 공개’에는 Pro나 1년 패스가 필요해요. 어느 쪽이든 선생님은 Convika 계정이나 비밀번호 없이 Google 클래스룸에서 바로 링크를 열 수 있어요. 전체 공개 페이지는 검색 결과와 Convika 갤러리에 나올 수 있고, 일부 공개는 프로젝트를 둘 다에 나오지 않게 해요. ‘다음’을 누르세요. 처음 게시할 때는 요금제가 나오고, ‘Pro 월간’이 선택되어 있어요(카드를 등록하면 1일 무료, 그 뒤 월 $12). 나머지 둘은 ‘Pro 1년 패스’($29, 한 번 결제, 자동 갱신 없음)와 ‘무료’($0, Convika 배너가 붙어요)예요. 전체 공개 페이지라면 ‘무료’를 고르고 ‘무료로 게시하기’를 누르세요. 일부 공개나 비밀번호 페이지는 체험이 시작되거나 1년 패스를 결제하면 게시돼요. 페이지 화면에서 ‘게시 주소’ 아래 주소 옆의 ‘복사’를 누르세요. 이 주소는 ‘Unpublish’를 누를 때까지 그대로이고, 검색 설정은 나중에 ‘Site settings’에서 바꿀 수 있어요.

4. ‘내 과제’에 링크를 추가하고 제출하기

Google의 과제 제출하기 도움말은 이렇게 안내해요.

• 컴퓨터에서. 과제를 클릭한 다음 ‘안내 보기’를 클릭하세요. ‘내 과제’에서 ‘추가 또는 만들기’를 클릭하고 ‘링크’를 선택하세요. 주소를 입력하고 ‘추가’를 클릭한 뒤, ‘제출’을 클릭하고 확인하세요.
• Android 앱에서. ‘내 과제’ 카드에서 ‘펼치기’를 탭하세요. ‘추가’를 탭하고 ‘링크’를 탭한 뒤 주소를 입력하세요. ‘선택’을 탭하고 ‘제출’을 탭한 뒤 확인하세요.
• 아이폰이나 아이패드 앱에서. ‘내 과제’ 카드에서 ‘펼치기’를 탭하세요. ‘과제물 추가’를 탭하고 ‘링크 삽입’을 탭한 뒤 주소를 입력하세요. ‘추가’를 탭하고 ‘제출’을 탭한 뒤 확인하세요.

제출하기 전에 휴대폰이나 브라우저의 비공개 창에서 링크를 열어 보세요. 선생님이 보게 될 페이지를 그대로 볼 수 있어요.

Canvas와 다른 수업 사이트

Canvas에는 링크로 제출하는 방식이 있어요. Instructure의 URL을 과제로 제출하는 방법(영어) 안내에 따르면, 웹사이트 URL 탭을 누르고 같은 이름의 입력란에 주소를 붙여 넣은 뒤 과제 제출 버튼을 누르면 돼요. 이 탭은 선생님이 그 과제에 웹사이트 URL 제출을 허용했을 때만 보여요. Canvas는 살아 있는 링크를 보관하지 않아요. Canvas의 교사용 안내(영어)는 제출물이 제출한 순간의 페이지 모습을 찍은 스냅숏이고, 지금 열리는 주소로 가는 링크가 아니라고 설명해요. 선생님이 페이지를 눌러 보거나 게임을 해 봐야 한다면, 주소를 어떻게 받고 싶은지 물어보세요.

AI로 만든 게임이나 퀴즈를 반에 올리기

교사가 페이지를 올리는 방법도 학생이 제출하는 방법과 같아요. 링크로 올려요. 먼저 위의 2단계와 3단계를 따라 게시한 뒤 ‘게시 주소’에서 주소를 복사하세요. Google의 클래스룸 도움말은 올릴 곳을 2가지 안내해요.

• 자료로 올리기. Google의 수업 과제 페이지에 자료 추가하기 도움말에 따르면, 수업을 클릭하고 ‘수업 과제’를 클릭한 뒤 상단에서 ‘만들기’ > ‘자료’를 선택하세요. 제목과 설명을 입력하고 ‘추가’ > ‘링크’를 고른 뒤 주소를 붙여 넣고 ‘게시’를 클릭하세요. 그 도움말이 설명하듯 수업 자료는 평가할 수 없어서, 연습용 게임에 맞아요.
• 과제로 올리기. Google의 과제 만들기 도움말을 따르세요. 상단에서 ‘만들기’ > ‘과제’를 클릭하세요. ‘첨부’ 아래에서 ‘링크’를 클릭하고 주소를 붙여 넣은 뒤 ‘할당’을 클릭하면 게시돼요.

클래스룸 앱에서는 첨부 옵션에서 ‘링크’를 탭하고 주소를 입력하세요. 프로젝터로 띄우려면 ‘게시 주소’ 아래 주소 옆의 ‘QR 코드 보기’를 누르고, ‘PNG 다운로드’를 눌러 코드를 슬라이드에 넣으세요. 학생들이 태블릿 카메라로 스캔한다면 HTML 파일을 QR 코드로 만드는 방법을 참고하세요.

학생들은 Convika 계정 없이 크롬북, 아이패드, 휴대폰의 브라우저에서 링크를 열어요. 학교의 웹 필터가 아직 모르는 사이트를 막을 수 있으니, 수업 전에 학생 기기 하나로 링크를 열어 보세요. 페이지에 있는 게임이나 퀴즈는 학생마다 자기 점수를 보여 줄 뿐, 교사에게는 아무것도 보내지 않아요. 점수를 기록하려면 Google 설문지 퀴즈를 쓰세요. AI에서 게임을 꺼내는 방법과 채팅에 붙여 넣을 요청 문구는 AI로 만든 퀴즈나 복습 게임을 링크로 만드는 방법(영어)에 있어요. Claude for Teachers로 만들었다면, 공유 링크가 학생들에게 왜 열리지 않는지 학생에게 Claude 아티팩트를 공유하는 방법(영어)에서 설명해요.

홍콩에서 가르치고 있나요? Anthropic의 지원 지역(영어)에도, OpenAI의 ChatGPT 지원 국가(영어) 목록에도 홍콩은 없어요. Our Hong Kong Foundation이 2026년 1월에 낸 보고서(영어)는 홍콩의 교직원과 학생 1,200명을 조사한 결과, 가장 자주 쓰는 도구가 POE와 Deepseek라고 밝혔어요. 둘 중 어느 쪽이든 HTML 파일 하나로 만든 퀴즈는 같은 방법으로 게시하고 올릴 수 있어요.

동료 교사가 다시 쓰게 하기. 사본 만들기는 켜기 전까지 꺼져 있어요. ‘Site settings’의 ‘Copies of this page’에서, 다른 사람이 자기 사본을 만들 수 있게 하는 항목에 체크하세요. 그러면 게시한 페이지 맨 아래에 한 줄이 생기고, 페이지를 연 사람은 누구나 무료로 자기 사본을 만들어 고칠 수 있어요. 다른 교사가 내 게임을 자기 수업에 맞게 바꿀 수 있어요. 사본에는 이름을 포함한 페이지의 글이 그대로 들어가니, 학생 이름은 넣지 마세요. 사본 만들기를 끄려면 ‘Site settings’의 ‘Copies of this page’를 쓰세요.

다시 올리지 않고 고치기. 1교시가 끝난 뒤 틀린 답을 발견했다면 페이지 화면을 여세요. ‘New version from a file’에 고친 파일을 놓거나 ‘코드 붙여 넣기’로 바꾼 뒤 ‘Upload as a new version’을 누르세요. 카드에 ‘Preview v2 is ready’가 나오면 ‘미리보기 열기’를 눌러 확인하세요. 같은 링크에 v2를 게시하는 버튼을 누르고, 창에서 ‘게시하기’를 누르세요. 클래스룸의 링크와 슬라이드의 코드가 고친 페이지를 열어요. 고칠 때는 ‘HTML 파일 업로드하기’를 쓰지 마세요. 새 주소로 새 페이지를 만들어요.

CSS나 이미지가 다른 파일에 있는 페이지

클래스룸은 내가 고른 파일 하나만 첨부해요. 같은 폴더의 style.css, script.js, 이미지를 불러오는 페이지는 다른 곳에서 열면 그것들을 잃어요. Convika도 페이지 하나에 HTML 문서 하나를 호스팅해요. CSS와 JavaScript를 HTML 파일 안에 넣고, 이미지는 모두 https:// 주소를 가리키게 하세요. 페이지를 만든 AI에게 이렇게 부탁해도 돼요. “CSS와 JavaScript를 모두 안에 넣은 HTML 파일 하나로 바꾸고, 이미지는 https:// 주소를 써 주세요.” https:// 링크로 불러오는 라이브러리(차트 라이브러리 같은 것)는 게시한 페이지에서 동작해요. 무료 요금제에서는 다른 사이트의 API를 부르는 페이지(순위표, Google 스프레드시트)는 동작하지 않아요. Convika 페이지에서 스크립트의 fetch·XHR 요청은 페이지 자신의 주소에만 닿기 때문이에요. Pro, MAX, 1년 패스에서는 Convika가 지원하는 분석 도구(Google 주소도 포함돼요)와, 페이지 설정에서 내 광고 네트워크용으로 등록한 호스트(최대 20개)에도 닿아서, 그 목록에 있는 호스트라면 이런 호출도 동작해요.

자주 묻는 질문

Google 클래스룸에 HTML 파일을 제출하려면 어떻게 하나요?

파일을 게시해서 주소를 만들고, ‘내 과제’에서 ‘추가 또는 만들기’ > ‘링크’를 선택해 주소를 입력한 뒤 ‘제출’을 클릭하세요. Convika 무료 요금제는 13세 이상이면 카드 없이 게시할 수 있고, 18세 미만은 부모나 보호자의 동의가 있어야 해요. 13세 미만이라면 페이지를 온라인에 올리는 방법을 선생님께 물어보세요.

선생님에게 내 페이지 대신 코드가 보이는 이유는 무엇인가요?

파일을 제출했기 때문이에요. .html 파일을 어떻게 보여 줄지는 클래스룸이나 Drive에 달려 있어요. Google의 Drive 도움말은 미리 볼 수 있는 코드 파일에 .HTML을 넣고 있지만, 미리보기가 페이지를 그려 주는지는 말하지 않아요. 게시한 페이지의 링크를 제출하세요. 그 링크는 페이지 자체를 열어요.

Canvas에 HTML 파일을 제출하려면 어떻게 하나요?

선생님이 웹사이트 URL 제출을 허용했다면, 파일을 게시하고 과제를 연 뒤 웹사이트 URL 탭을 누르고, 주소를 붙여 넣고 과제 제출 버튼을 누르세요. Canvas는 제출한 순간의 페이지 모습을 스냅숏으로 저장해요. 선생님이 페이지를 써 봐야 한다면 주소를 어떻게 받고 싶은지 물어보세요.

Google 클래스룸에 파일 대신 링크를 제출할 수 있나요?

네, 파일 대신 링크를 제출할 수 있어요. Google 도움말에 따르면 ‘내 과제’의 ‘추가 또는 만들기’에 Google Drive, ‘파일’과 함께 ‘링크’가 있어요. 주소를 입력하고 ‘추가’를 클릭한 뒤 ‘제출’을 클릭하세요.

Google 클래스룸에 반 학생용 게임을 올리려면 어떻게 하나요?

게임의 HTML 파일을 게시하고, ‘수업 과제’ 페이지로 가서 ‘만들기’ > ‘자료’를 선택한 뒤 ‘추가’ > ‘링크’를 클릭하고, 주소를 붙여 넣고 ‘게시’를 클릭하세요. 학생들은 계정 없이 브라우저에서 열어요. 학교의 웹 필터가 막을 수 있으니, 먼저 학생 기기 1대로 링크를 열어 보세요.