WEEK 02 · 2026
도형이
스스로 움직인다
Canvas와 게임 루프 — 모든 게임의 진짜 비밀. 오늘 끝나면 — 1초에 60번 다시 그려지는 첫 캔버스가 화면에서 움직입니다.
Duration90 minutes
ToolClaude Code · Canvas
Output움직이는 첫 캔버스
Phase기본 게임 로직 (2/3)
02 / Learning Goals⏱ 5분
오늘의 학습 목표
1
60fps의 비밀
게임이 부드럽게 움직이는 진짜 이유. 1초에 60번 다시 그리는 마법.
2
Canvas는 도화지
HTML의 <canvas> 태그가 뭐고, JavaScript로 도형을 어떻게 그리는지.
3
requestAnimationFrame
"매 프레임마다 다시 그려달라" — 게임 루프의 진짜 이름. 외울 필요 X.
4
좌표계 이해
x는 오른쪽, y는 아래쪽. 수학 시간 그래프랑 반대! 화면 좌상단이 (0,0).
03 / Concept⏱ 10분
애니메이션은 착시다
영화관에서 영화가 움직이는 것 같지만, 사실은 1초에 24장의 사진을 빠르게 넘기는 거예요. 게임은 더 빨라서 1초에 60장을 그립니다. 이걸 60fps라고 해요.
🎨
지우기
화면을
깨끗하게
깨끗하게
+
📐
위치 바꾸기
x = x + 1
한 칸 옮기기
한 칸 옮기기
+
🔄
다시 그리기
새 위치에
도형 그리기
도형 그리기
이 3단계를 1초에 60번 반복하면 — 도형이 움직이는 것처럼 보입니다. 이게 모든 게임의 비밀.
04 / Prompt Engineering⏱ 12분
Canvas 프롬프트의 핵심 단어
❌ 막연한 요청
"도형 움직이게 해줘"
왜 안 좋나? 어떤 도형? 어떻게 움직여? 어디서? AI가 직선·곡선·원형 중 마음대로 고름.
결과: 매번 다른 게 나옴.
✓ 구체적 요청
"800×600 캔버스 만들고
가로 50, 세로 50 빨간 사각형이
왼쪽에서 오른쪽으로
1프레임에 2픽셀씩 움직여줘.
오른쪽 끝 닿으면 멈추게."
가로 50, 세로 50 빨간 사각형이
왼쪽에서 오른쪽으로
1프레임에 2픽셀씩 움직여줘.
오른쪽 끝 닿으면 멈추게."
왜 좋나? 캔버스 크기·도형 크기·방향·속도·경계 처리 모두 명확.
결과: 한 번에 원하는 거.
💡 오늘의 핵심 키워드: "캔버스 크기 · 도형 크기 · 방향 · 속도 · 경계" 다섯 개. 외워.
05 / Live Build · Step 1⏱ 6분
Step 1 — 캔버스 도화지 만들기
먼저 빈 도화지를 만든다. HTML에 <canvas> 태그를 추가하고 크기를 정하면 끝. 그 위에 도형을 그릴 거예요.
1
Claude에게 보낼 요청
// 첫 캔버스 — 흰 배경에 검은 테두리
"game.html 파일 만들어줘.
가운데에 800×600 픽셀 캔버스 하나 놓고
캔버스 테두리는 검정 1px, 배경은 흰색,
바깥 페이지 배경은 진한 네이비(#1a1a2e)로.
캔버스가 화면 정중앙에 오도록."
✓
예상 결과 — AI가 만들어줄 코드
<canvas id="game" width="800" height="600"></canvas>
<script>
const canvas = document.getElementById('game');
const ctx = canvas.getContext('2d');
// ctx가 우리의 붓!
</script>
🎙
멘토 멘트
"ctx라는 게 우리의 '붓'이에요. 빈 도화지(canvas)에 ctx로 동그라미·네모·선을 그리게 돼요. 이름이 어려워도 신경 X. 그냥 '붓 변수' 정도로 기억하세요."
05 / Live Build · Step 2⏱ 6분
Step 2 — 첫 도형 그리기
도화지가 생겼으니 그 위에 그림을 그린다. 오늘은 빨간 사각형 하나만. 위치는 (x, y), 크기는 (가로, 세로).
2
Claude에게 보낼 요청
"방금 만든 game.html에
캔버스 왼쪽 위에서 50, 50 위치에
50×50 픽셀 빨간 사각형을 그려줘.
가만히 있어도 돼. 일단 그리기만."
✓
예상 결과 — 핵심 코드 한 줄
// 도형 그리는 마법의 두 줄
ctx.fillStyle = 'red'; // 빨간색 잉크 묻혀
ctx.fillRect(50, 50, 50, 50); // x, y, 가로, 세로
🎙
좌표계 핵심 강조
"수학 시간엔 y가 위로 올라가죠? 캔버스는 거꾸로예요. y가 클수록 아래로 내려가요. (0,0)이 왼쪽 위 구석. 처음엔 헷갈리지만 5분 만에 익숙해져요."
✋
학생 액션
x값·y값을 바꿔서 사각형을 캔버스 중앙·오른쪽 아래·왼쪽 끝으로 이동시켜보기. 좌표계가 어떻게 작동하는지 직접 확인.
05 / Live Build · Step 3⏱ 7분
Step 3 — 게임 루프 시작
이제 진짜 마법 — 1초에 60번 자동으로 호출되는 함수. requestAnimationFrame이라는 긴 이름이지만 작동은 단순해요.
3
Claude에게 보낼 요청
"이제 update 함수를 만들어줘.
update 함수는 1초에 60번 자동 실행되고
매번 캔버스를 지우고 사각형을 다시 그려야 해.
requestAnimationFrame으로 반복 호출되게.
일단 같은 자리에 다시 그리기만 (안 움직여도 OK)."
✓
예상 결과 — 게임 루프 패턴
function update() {
ctx.clearRect(0, 0, 800, 600); // 1. 지우기
ctx.fillStyle = 'red';
ctx.fillRect(50, 50, 50, 50); // 2. 다시 그리기
requestAnimationFrame(update); // 3. 다음 프레임 예약
}
update(); // 시작!
🎙
긴 이름의 정체
"requestAnimationFrame — '다음 그림 그릴 차례 되면 다시 불러줘' 라는 뜻. 브라우저가 알아서 1초 60번 호출해줘요. 외울 필요 없이, 게임 루프 만들 때 항상 마지막에 적는다고 기억."
05 / Live Build · Step 4⏱ 7분
Step 4 — 움직임 만들기
이제 진짜 움직이게 한다. 매 프레임마다 x를 1픽셀씩 늘려주면 — 사각형이 오른쪽으로 흘러간다.
4
Claude에게 보낼 요청
"사각형 위치를 변수로 만들어줘.
x = 50, y = 50 으로 시작.
매 프레임마다 x를 2씩 늘려서
사각형이 오른쪽으로 흘러가게.
속도 너무 빠르거나 느리면 숫자 조정 가능."
✓
예상 결과 — 변수 + 누적
let x = 50; // 시작 위치
let y = 50;
let speed = 2; // 1프레임에 2픽셀
function update() {
ctx.clearRect(0, 0, 800, 600);
x += speed; // 위치 갱신!
ctx.fillStyle = 'red';
ctx.fillRect(x, y, 50, 50);
requestAnimationFrame(update);
}
update();
🎙
핵심 깨달음
"x = x + 2 라는 게 수학에선 말 안 되죠? '같다고 했는데 왜 늘어나?' 프로그래밍에선 '=' 가 '대입'이에요. '왼쪽한테 오른쪽 값 줘' 라는 뜻. 사각형 움직이는 진짜 비밀이 이 한 줄."
🏃
학생 액션
speed 값을 0.5 / 5 / 10 으로 바꿔보고 어떻게 다른지 비교. 이게 게임에서 캐릭터 속도 조절 원리.
05 / Live Build · Step 5⏱ 8분
Step 5 — 경계 닿으면 색 변화
마지막 단계 — 사각형이 오른쪽 끝에 닿으면 색이 바뀐다. 조건문(if)의 첫 등장. 게임의 핵심 기술.
5
Claude에게 보낼 요청
"사각형이 캔버스 오른쪽 끝(x >= 750)에 닿으면
색깔이 빨강에서 파랑으로 바뀌고,
거기서 움직임은 멈추게 해줘.
색깔 변수도 만들어서 관리해."
✓
예상 결과 — 조건문의 첫 등장
let color = 'red';
let stopped = false;
function update() {
ctx.clearRect(0, 0, 800, 600);
if (!stopped) x += speed;
if (x >= 750) { // 오른쪽 끝 닿으면
color = 'blue'; // 색 바꾸기
stopped = true; // 움직임 멈추기
}
ctx.fillStyle = color;
ctx.fillRect(x, y, 50, 50);
requestAnimationFrame(update);
}
🎙
오늘의 마무리
"오늘 완성! 도형이 자동으로 움직이고 끝에 닿으면 색이 바뀜. 게임의 진짜 시작이에요. 다음 주엔 키보드로 직접 움직이고 충돌을 감지하게 됩니다."
🎨
학생 액션
색 변화 한 번이 아니라 무지개색으로 순환해보기. 또는 끝에 닿으면 멈추지 말고 방향을 바꿔서 왼쪽으로 다시 가게 (튕기는 효과).
10 / Checkpoint⏱ 5분
여기까지 됐나? 확인하기
✅잘 됐다면
- 800×600 캔버스가 화면 가운데 보임
- 빨간 사각형이 왼쪽에서 오른쪽으로 자동 이동
- 움직임이 끊김 없이 부드러움 (60fps 작동중)
- 오른쪽 끝 닿으면 색이 파랑으로 변함
- 속도 변수(speed)만 바꿔도 움직임이 변함
⚠️자주 막히는 부분
- 아무것도 안 보임 → 콘솔(F12) 열어 에러 확인
- 도형이 안 움직임 → update() 호출 빠뜨림
- 지나간 자리에 잔상 → clearRect 빠짐
- 너무 빨라요 → speed 값 1 또는 0.5로 줄이기
- 색이 안 변함 → if 조건의 x 값 확인
11 / Challenge⏱ 10분
더 해보고 싶다면 도전
↔️
탁구공처럼 튕기게 해보기. 오른쪽 끝 닿으면 왼쪽으로, 왼쪽 끝 닿으면 오른쪽으로 무한 반복.
난이도 ★
⚽
2D 방향 움직임. x뿐 아니라 y도 같이 움직여서 대각선으로. 네 모서리 닿으면 모두 튕기게 (DVD 화면보호기처럼).
난이도 ★★
🌟
여러 도형 한꺼번에. 사각형 5개가 각자 다른 속도·색으로 움직이게. 배열(array)을 써야 함 — AI한테 추천 받기.
난이도 ★★★
12 / Student Gallery⏱ 7분
작년 친구들 작품
🔴
움직이는 사각형
↔️
튕기는 공
🌈
무지개 순환
🔵
DVD 화면
⭐
별 떨어지기
🎯
표적 이동
📌 첫 학기 종료 후 학생 결과물 사진을 여기에 채울 예정입니다.
13 / Next Week⏱ 5분
다음 시간 예고
WEEK 03 · COMING UP
입력·충돌·게임 상태 —
화살표 키로 조종한다
드디어 키보드로 직접 캐릭터를 움직입니다. 벽에 부딪치면 멈추는 충돌 감지, 그리고 시작/플레이/끝 화면이 바뀌는 게임 상태 머신. 이번 주까지가 Phase 1 기본 게임 로직 완성!
PREPARE · 준비물
- 이번 주 만든 움직이는 캔버스 파일 가져오기
- 키보드 화살표 키가 잘 작동하는지 노트북 확인
- 좋아하는 게임에서 어떻게 캐릭터가 멈추는지 관찰