초보 가이드북

막혔을 때 여기부터 보세요. 거의 모든 문제가 아래 중 하나입니다.

캔버스 쓰는 법 고치는 법 내 파일로 가져오기 안 될 때 올리기와 주소 AI를 쓸 때의 책임

캔버스 쓰는 법

이 수업은 제미나이의 캔버스에서 진행합니다. 캔버스를 켜 두면 만든 화면이 오른쪽에 바로 떠서, 말하고 → 보고 → 고치는 일이 한자리에서 됩니다. 설치할 프로그램은 없습니다.

1제미나이 열기

gemini.google.com에 영재원 계정으로 로그인합니다.

2캔버스 켜기

입력창 아래의 캔버스 버튼을 누릅니다. 이걸 켜야 화면이 보입니다.

3프롬프트 넣기

워크벤치에서 복사해 그대로 붙여넣습니다.

4보면서 고치기

오른쪽 화면을 직접 눌러 보고, 고칠 부분만 말합니다.

대화를 닫지 마세요.

같은 결과물을 다음 차시에 이어서 고칩니다. 그 대화를 다시 열면 만들던 것이 그대로 있습니다.
새 대화에서 시작하면 처음부터 다시 만들어야 합니다.
대화 제목을 내 게임, 내 할 일 도구처럼 바꿔 두면 찾기 쉽습니다.

고치는 법 — 짧게 말하기

캔버스에서는 전체 코드를 다시 달라고 할 필요가 없습니다. 고칠 부분만 말하면 그 자리에서 바뀝니다. 이 수업에서 가장 많이 하게 될 일이고, 사실 이게 바이브코딩의 전부입니다.

"제목을 더 크게 해 줘."

"버튼을 눌러도 아무 일도 안 일어나. 왜 그런지 찾아서 고쳐 줘."

"폭탄이 너무 자주 나와. 조금 줄여 줘."

"휴대폰에서 가로로 밀려. 세로로 접히게 고쳐 줘."

"지금 코드가 무슨 일을 하는지 한 줄씩 설명해 줘."

한 번에 하나씩

여러 가지를 한꺼번에 바꿔 달라고 하면 어디서 망가졌는지 찾기 어렵습니다. 하나 고치고 눌러 보고, 또 하나 고치고 눌러 보세요. 캔버스는 이 반복이 빠르니까 이렇게 하는 게 결국 더 빠릅니다.

잘 되던 것이 망가졌다면

캔버스에는 이전 버전을 보는 기능이 있습니다. 그걸로 되돌리거나, "방금 바꾼 것을 되돌려 줘"라고 말하면 됩니다. 중요한 단계마다 코드를 받아서 mygame_1.html, mygame_2.html처럼 번호를 붙여 두면 더 안전합니다.

내 파일로 가져오기 — 3차시부터

캔버스는 보고 고치기 좋은 곳이지만 임시 공간입니다. 기록을 남기고 인터넷에 올리려면 내 컴퓨터의 파일이어야 합니다.

1코드 받기

캔버스 오른쪽 위 메뉴에서 내려받습니다.

2이름 바꾸기

영문 + .html — 예: mygame.html

3내 폴더에

바탕화면에 폴더를 하나 만들어 모아 둡니다.

4더블클릭

브라우저가 열리면 성공입니다.

내려받기가 안 되면 복사해서 저장하세요.

캔버스의 코드 탭에서 전체를 복사합니다.
메모장을 열고 붙여넣습니다.
저장할 때 파일 형식을 모든 파일(*.*)로, 이름은 mygame.html, 인코딩은 UTF-8로 합니다.
파일 형식을 안 바꾸면 mygame.html.txt가 되어 메모장으로 열립니다.

안 될 때

캔버스가 안 보입니다 가장 흔함

증상: 코드만 길게 나오고 화면이 안 뜹니다.
이유: 캔버스를 안 켠 상태입니다.
해결: 입력창 아래의 캔버스 버튼을 누르고 다시 요청하세요. 이미 만든 것이 있다면 "지금 만든 걸 캔버스로 보여 줘"라고 하면 됩니다.

화면이 하얗게만 나옵니다

증상: 캔버스는 열렸는데 아무것도 없습니다.
이유: 코드 어딘가에 오류가 있어서 멈춘 것입니다.
해결: AI에게 "화면이 하얗게만 나와. 왜 그런지 찾아서 고쳐 줘"라고 하세요. 캔버스는 지금 코드를 그대로 보고 있어서 바로 찾아냅니다.

버튼을 눌러도 아무 일이 없습니다

증상: 화면은 제대로 나오는데 클릭이 먹히지 않습니다.
이유: 화면을 그리는 부분만 만들어지고 동작 부분이 빠졌거나, 둘이 서로 다른 이름을 보고 있습니다.
해결: 어떤 버튼인지 말하고 고쳐 달라고 하세요. "시작 버튼을 눌러도 게임이 시작되지 않아. 고쳐 줘."

고쳐 달라고 했는데 엉뚱한 게 바뀝니다

증상: 글자 크기를 바꿔 달랬는데 색까지 바뀌었습니다.
이유: 말이 짧아서 AI가 범위를 넓게 잡았습니다.
해결: 어디를 바꿀지 콕 집어 말하세요. "맨 위 제목만 더 크게 해 줘. 나머지는 그대로."

최고 점수가 저장되지 않습니다 3차시

증상: 새로고침하면 기록이 0으로 돌아갑니다.
이유: 저장하는 함수를 만들기만 하고 게임이 끝날 때 부르지 않았습니다.
해결: "게임이 끝날 때 saveScore를 부르도록 연결해 줘"라고 하세요. 캔버스 미리보기에서는 저장이 안 될 수도 있으니, 코드를 받아 내 파일로 연 뒤 확인하세요.

받은 파일을 열었더니 메모장이 뜹니다 3차시

증상: 더블클릭하면 브라우저가 아니라 메모장이 열립니다.
이유: 파일 이름이 실제로는 이름.html.txt입니다.
해결: 파일 이름을 이름.html로 바꾸세요. 메모장에서 저장했다면 파일 형식을 모든 파일로 바꾸고 다시 저장합니다.

집에서 열었더니 내용이 비어 있습니다 4차시 이후

증상: 학교에서 적은 내용이 집 컴퓨터에는 없습니다.
이유: 고장이 아닙니다. localStorage는 컴퓨터마다 따로 있는 수첩입니다.
해결: 이걸 해결하는 것이 5차시입니다. 로그인을 붙이면 어느 기기에서나 같은 내용이 열립니다.

캔버스에서 로그인 버튼이 안 먹힙니다 5차시

증상: 로그인 버튼을 눌러도 창이 안 뜨거나 바로 닫힙니다.
이유: 캔버스는 안전을 위해 좁은 공간에서 돌아가서 로그인 창이 막힐 수 있습니다. 코드가 틀린 게 아닙니다.
해결: 코드를 받아 내 저장소에 올린 뒤 내 주소에서 확인하세요. 로그인은 그곳에서만 제대로 됩니다.

내 주소에서도 로그인이 안 됩니다 5차시

증상: 오류 글자가 뜹니다.
이유·해결: auth/unauthorized-domain — 이 주소가 등록되지 않았습니다. 선생님께 주소를 알리세요.
auth/popup-blocked — 브라우저가 팝업을 막았습니다. 주소창 오른쪽의 팝업 허용을 누르세요.
permission-denied — 보안 규칙이 막은 것입니다. 저장 위치가 users/내uid/ 안인지 확인하세요.

한글이 깨져서 보입니다

증상: 글자가 ???나 알 수 없는 기호로 나옵니다.
이유: 메모장으로 저장할 때 인코딩이 UTF-8이 아니었습니다.
해결: 다시 저장하면서 인코딩을 UTF-8로 고릅니다. 그래도 깨지면 "코드 맨 위에 charset UTF-8 메타 태그를 넣어 줘"라고 요청하세요.

올리기와 주소

만든 파일은 내가 직접 내 저장소에 올립니다. 1차시에 만든 계정과 저장소를 그대로 씁니다.

차시	올릴 파일	열리는 주소
1차시	`index.html`	`내아이디.github.io/my-web/`
2~3차시	`game.html`	`…/my-web/game.html`
4~5차시	`todo.html`	`…/my-web/todo.html`

같은 이름으로 다시 올리면 덮어쓰기가 됩니다. 고친 파일은 이름을 바꾸지 말고 그대로 올리세요. 차시가 바뀌어도 파일은 하나씩만 있으면 됩니다.

올리는 네 단계

1	캔버스에서 코드 받기
2	이름을 영문 + `.html`로 (첫 페이지만 `index.html`)
3	내 저장소 → Add file → Upload files → 끌어다 놓기
4	아래 Commit changes → 1~2분 뒤 주소로 열림

올리기 전에 한 번만 확인하세요.

파일 이름이 영문인가 — 한글이나 띄어쓰기가 있으면 주소가 깨집니다.
코드 안에 실명·연락처·학교 이름이 없는가 — 올리면 코드까지 누구나 볼 수 있습니다.
내 컴퓨터에서 더블클릭해서 잘 돌아가는가.
올린 뒤 내 주소를 직접 눌러 열리는지 확인했는가.

주소가 404로 나올 때

올린 직후다: 1~2분 기다렸다가 새로고침하세요. 고장이 아니라 아직 올라가는 중입니다.
몇 분이 지나도 404다: Settings → Pages에서 Branch가 main으로 저장되어 있는지 확인하세요. 1차시에 빠뜨린 경우가 많습니다.
주소 끝에 파일 이름이 빠졌다: index.html 말고 다른 이름으로 올렸다면 주소 뒤에 그 파일 이름을 붙여야 열립니다.
파일 이름 철자가 다르다: 대소문자까지 똑같아야 합니다. Game.html과 game.html은 다른 주소입니다.

AI를 쓸 때의 책임

지킬 것	왜
개인정보를 입력하지 않기	이름·연락처·주소·학교 이름은 AI에게 적지 않습니다. 대화 내용이 어디까지 남는지 우리는 알 수 없습니다.
틀릴 수 있다고 생각하기	AI는 모르는 것도 아는 것처럼 말합니다. 없는 기능이나 틀린 설명을 그럴듯하게 주기도 합니다. 캔버스에서 직접 눌러 확인하세요.
남의 것을 그대로 쓰지 않기	인터넷에서 찾은 그림·음악·글은 만든 사람이 있습니다. 내 작품에 넣기 전에 써도 되는 것인지 확인하세요.
결과에 대한 책임은 올린 사람에게	"AI가 만들었다"는 이유가 되지 않습니다. 내 이름으로 올리는 순간 내 작품입니다.
남을 해치는 것은 만들지 않기	특정한 사람을 놀리거나 무섭게 하는 내용은 만들지 않습니다. 전시관은 반 전체가 봅니다.

왜 복잡한 도구를 안 쓰나요

이 수업에서 만드는 것은 전부 HTML 파일 하나로 끝납니다. 인터넷에서 받아오는 추가 파일도 없습니다.

이유는 간단합니다. 추가 파일을 받아오는 방식은 학교 인터넷이 막거나 느릴 때 오류 메시지도 없이 흰 화면이 됩니다. 그러면 코드를 아무리 들여다봐도 원인을 찾을 수 없습니다. 파일 하나로 끝나면 인터넷이 끊겨도, 집에 가져가도 똑같이 열립니다.

딱 한 군데 예외가 5차시의 로그인입니다. 그건 인터넷 없이는 불가능한 기능이라서, 대신 연결이 안 될 때 자동으로 연습 모드로 바뀌도록 만들어 두었습니다.