# 크기 변경을 제어된 레이아웃 전환으로 다루기

> 플레이어가 창 크기를 조정하거나 화면 방향을 바꿀 때 게임 좌표, 캔버스 크기, 레이아웃을 동기화하세요.

- URL: https://oneshotgems.ai/ko/topics/game-resize-handling
- 카테고리: 게임 개발자용
- 유형: 가이드
- 업데이트일: 2026년 10월 5일

창 크기 변경, 기기 회전, 브라우저 컨트롤 표시, 페이지 레이아웃 변화에 따라 브라우저 게임의 표시 크기가 달라질 수 있습니다. 캔버스 크기만 바뀌고 내부 렌더링 버퍼와 입력 좌표 매핑이 갱신되지 않으면 화면이 늘어나고 클릭 위치가 어긋날 수 있습니다. 크기를 레이아웃과 렌더링의 입력값으로 보고, 이에 의존하는 시스템을 함께 업데이트하세요. 크기 변경 때문에 게임 진행 상황이 초기화되거나 사소한 측정값 변화마다 비용이 큰 작업이 반복되어서는 안 됩니다.

## 게임이 실제로 사용하는 요소 관찰하기

캔버스 컨테이너가 창과 별개로 바뀔 수 있는 경우(분할 패널 안이나 컨트롤이 바뀌는 페이지 등) ResizeObserver를 사용하세요. 콘텐츠 크기를 읽고 실제로 달라진 경우에만 캔버스 내부 해상도를 업데이트한 다음 CSS 좌표와 게임 월드 좌표 사이의 배율을 다시 계산하세요.

레이아웃에 영향을 주는 치수를 조건 없이 같은 관찰 대상 요소에 다시 쓰지 마세요. MDN에 따르면 관찰자 콜백 안에서 크기를 변경하면 루프가 생길 수 있습니다. 작업을 신중하게 예약하고 예상 크기가 바뀌지 않았으면 쓰기를 건너뛰세요. 이미지를 왜곡하는 대신 여백을 두어야 한다면 게임 뷰포트와 고정된 월드 좌표계를 분리하세요.

## 레이아웃과 입력을 함께 테스트하기

좁은 화면, 넓은 화면, 회전된 화면에서 캔버스 각 가장자리 근처의 대상을 클릭하거나 탭하고 게임이 보이는 표시와 같은 월드 좌표를 인식하는지 확인하세요. 레벨 진행 중에도 크기를 바꿔 카메라나 여백 정책이 적용되어도 위치가 예상치 않게 바뀌지 않는지 점검하세요.

window.innerWidth가 모든 레이아웃 변화를 감지한다고 가정하지 말고 컨테이너를 관찰하세요. 모바일 키보드나 브라우저 컨트롤 때문에 사용 가능한 공간이 달라지면 플레이 영역을 줄일지, 고정할지, 스크롤할지 결정하세요. 컨트롤이 게임에 필요한 공간을 차지할 수 있으므로 컨트롤이 표시된 상태에서 그 선택을 테스트하세요.

## 자주 묻는 질문

**크기가 바뀔 때마다 게임 월드 크기도 바꿔야 하나요?** 아니요. 많은 게임은 월드 좌표를 그대로 유지하고 카메라만 바꾸거나 여백을 둡니다. 월드 자체의 크기를 바꾸면 난이도, 충돌 판정, 레벨 구성에 영향을 줄 수 있습니다.

**window 크기 변경 핸들러보다 ResizeObserver가 나은 경우는 언제인가요?** 전체 창 크기가 그대로여도 컨테이너나 주변 레이아웃에 따라 대상 요소의 크기가 바뀔 수 있다면 ResizeObserver를 사용하세요.

## 궁금한 것을 더 찾아보세요

- [선명한 게임 그래픽을 위한 Canvas 해상도 설정](https://oneshotgems.ai/ko/topics/canvas-pixel-density): 게임이 여러 화면에서 선명하게 보여야 하는 경우 캔버스 백업 해상도, 장치 픽셀 비율, 메모리 사용 및 그리기 비용의 균형을 맞춥니다.
- [캔버스 렌더링 병목 현상 찾기](https://oneshotgems.ai/ko/topics/canvas-game-performance): 반복 가능한 장면으로 2D 캔버스 게임을 프로파일링하고 프레임이 소비되는 위치를 측정한 후에만 비용이 많이 드는 그리기 작업을 줄일 수 있습니다.

## 추가 읽을거리

- [MDN: ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)

---
대표 페이지: https://oneshotgems.ai/ko/topics/game-resize-handling