한 장의 그림에서 움직임으로
Canvas 2D의 좌표와 다시 그리기 다음으로 프레임을 배웠다. 프레임은 애니메이션을 이루는 한 장의 그림이다. 위치가 조금씩 다른 그림을 시간 간격을 두고 보여 주면 움직임처럼 보인다.
학습 예제는 사각형을 한 장씩 넘기거나 천천히 연속 재생할 수 있게 구성됐다. 매번 지우고 다시 그리더라도 x와 y를 같은 값으로 유지한다면 어떨까? 나는 같은 위치에 그려지므로 움직이지 않고 그대로 보인다고 설명했다. 예제 제공과 내 설명을 기록하며, 직접 조작·실행을 검증한 결과로 확대하지 않는다.
다음 실행을 예약하기
requestAnimationFrame(drawFrame)은 브라우저가 다음 화면을 갱신하기 전에 drawFrame을 한 번 실행하도록 요청한다. 계속 그리려면 다음 실행을 다시 예약해야 한다.
400 × 140 canvas의 2D 컨텍스트 ctx가 준비돼 있다고 가정한 설명용 코드다.
let x = 40;
function drawFrame() {
ctx.clearRect(0, 0, 400, 140);
ctx.fillRect(x, 40, 40, 40);
x += 8;
requestAnimationFrame(drawFrame); // 다음 실행 예약
}
requestAnimationFrame(drawFrame); // 첫 실행 예약
함수 밖에서 첫 실행을 예약한다. 함수가 실행되면 이전 그림을 지우고, 현재 위치에 그린 뒤, 다음 위치와 실행을 준비한다. 반복 구조를 재귀에 빗댈 수 있지만 실제 동작은 브라우저에 다음 실행을 예약하는 방식이다.
이 코드는 예약 흐름을 설명하기 위한 것이다. 초당 호출 횟수는 고정돼 있지 않으며, 프레임마다 8씩 이동하면 호출 빈도에 따라 속도가 달라진다. 일정한 속도를 위한 시간 기반 이동 계산과 화면 경계 처리는 아직 배우거나 구현하지 않았다.
멈추면 사라질 것이라는 오답
함수 내부의 다음 예약만 제거하고 바깥의 첫 예약은 남기면 어떻게 될까? 처음에는 이렇게 답했다.
첫 프레임에서 사각형이 그려지고 이후에 사각형이 사라지게 돼.
놓친 것은 clearRect도 함수가 실행돼야 동작한다는 점이었다. 첫 호출에서 지운 다음 x=40에 사각형을 그린다. 이후 x 변수는 48이 되지만, 변수 변경만으로 이미 그린 그림이 바뀌지는 않는다. 다음 호출이 없으니 지우는 코드도 다시 실행되지 않는다.
설명 후에는 그림이 그대로 남는다고 바로잡았고, 함수가 한 번만 실행돼 clearRect도 다시 호출되지 않는다는 이유까지 내 말로 설명했다.
여기서 기억할 것다음 프레임 예약이 없으면 반복이 멈춘다. 이미 그린 사각형은 처음 위치에 남는다.
이번에 확인한 것은 코드 흐름의 예측과 교정 뒤 재설명이다. 애니메이션을 직접 구현하거나 실행 검증한 것으로 기록하지 않는다. 오답 메모에 다시 확인할 질문을 남겼다.
영어로 다음 프레임 요청 설명하기
첫 시도는 It is that request next frame for animation.이었다. 주어와 필요를 드러내는 We need to request, 관사를 포함한 the next frame, 목적을 나타내는 to keep the animation running으로 다듬었다.
We need to request the next frame to keep the animation running.
참고 문장을 보며 위 문장을 정확히 다시 작성했다. 영어 메모에 첫 문장과 교정 이유를 남겼다. 예문 없는 독립 회상과 장기 숙달은 아직 확인하지 않았다.
이번에 완료한 것은 프레임·예약 흐름 설명과 영어 재작성이다. 다음에 확인할 질문은 “프레임마다 같은 거리만큼 움직이면 기기에 따라 속도가 달라질 수 있는데, 시간을 기준으로 위치를 계산하려면 어떻게 해야 할까?”다.