# 게임 모델은 유지하면서 표시 방식 조정하기

> 시뮬레이션 상태를 화면 크기에 연결하지 않고 게임 표면을 해당 컨테이너에 적용하고 변경되는 뷰포트에서 레이아웃을 테스트합니다.

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

휴대폰을 회전하거나 브라우저 막대가 나타나거나 패널이 열리면 브라우저 게임이 표시된 페이지 크기가 달라질 수 있습니다. 게임 시뮬레이션 좌표와 화면에 표시되는 캔버스 크기를 분리하세요. 그러면 뷰포트가 바뀔 때마다 객체 위치, 물리 상태, 히트 테스트가 의도치 않게 달라지지 않으면서 레이아웃이 적응합니다.

## 용기를 측정하고 눈금을 선택하십시오

창이 플레이 가능한 영역이라고 가정하기보다는 게임 컨테이너의 크기를 사용하세요. ResizeObserver는 뷰포트 크기 조정이 아닌 주변 레이아웃으로 인한 변경을 포함하여 해당 요소가 변경되는 시기를 보고할 수 있습니다. 게임이 좁은 종횡비로 레터박스, 자르기 또는 리플로우할지 결정하고 원을 타원으로 늘리는 대신 선택 사항을 표시합니다.

고정된 가상 운동장의 경우 너비와 높이에 맞는 하나의 배율 인수를 계산한 다음 나머지 공간을 중앙에 배치합니다. 적중 테스트 전에 동일한 변환의 역을 통해 포인터 좌표를 변환합니다. 리플로우 게임의 경우 레이아웃 앵커와 충돌 모양을 함께 업데이트하여 컨트롤이 이전 크기의 위치를 ​​계속 사용하지 않도록 합니다.

## 시뮬레이션 루프 밖에서 계속 크기 조정

게임 세계를 안정적인 단위로 저장하고 캔버스 지원 해상도, CSS 크기 및 장치 픽셀 비율을 렌더링 문제로 처리합니다. 크기가 변경되면 그리기 표면을 업데이트하고 다시 그립니다. 게임 규칙에서 요구하지 않는 한 레벨을 재설정하거나 객체 상태를 다시 계산하지 마십시오. 이렇게 분리하면 도구 모음 크기 조정이 다시 시작하는 것처럼 보이지 않습니다.

게임이 활성화된 동안 좁고 넓은 뷰포트, 데스크탑 크기 조정 및 방향 변경을 테스트합니다. 텍스트 줄바꿈을 확인하고 대상 위치를 터치하고 변환을 조정하세요. MDN의 ResizeObserver 가이드에서는 요소 크기 관찰에 대해 설명하고 콜백 내에서 관찰된 크기를 변경하면 루프가 생성될 수 있음을 경고합니다.

## 자주 묻는 질문

**캔버스 크기가 변경되면 게임 세계의 크기도 조정해야 합니까?** 일반적으로 시뮬레이션 좌표를 안정적으로 유지하고 프리젠테이션이나 레이아웃을 조정합니다. 디자인이 의도적으로 플레이 필드를 변경하는 경우 규칙, 개체 및 입력 매핑을 함께 업데이트하세요.

**창 크기 조정 대신 ResizeObserver를 사용하는 이유는 무엇입니까?** 창 크기를 조정하지 않고도 주변 레이아웃으로 인해 게임 컨테이너의 크기가 변경될 수 있습니다. ResizeObserver는 요소 크기 변경을 직접 보고합니다.

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

- [브라우저 게임의 화면 방향 변경 처리](https://oneshotgems.ai/ko/topics/game-orientation-changes): 방향을 게임 다시 시작으로 처리하지 않고 레이아웃과 입력 매핑을 다시 계산하여 장치가 회전할 때 플레이를 읽을 수 있도록 유지합니다.
- [브라우저 게임을 위한 크기 터치 대상](https://oneshotgems.ai/ko/topics/game-touch-targets): 대화형 경계에서 시각적 아트워크를 분리하고 터치 장치에서 크기, 간격 및 겹침을 확인하여 게임 컨트롤을 더 쉽게 맞출 수 있습니다.
- [캔버스 포인터 위치를 게임 좌표로 변환](https://oneshotgems.ai/ko/topics/hit-testing-canvas-coordinates): 포인터 위치를 캔버스 게임의 월드 좌표로 변환하여 눈에 보이는 대상과 클릭 가능한 히트 영역이 크기 조정 후에도 정렬된 상태를 유지하도록 합니다.

## 추가 읽을거리

- [MDN: ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)
- [MDN: 종횡비](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/aspect-ratio)

---
대표 페이지: https://oneshotgems.ai/ko/topics/responsive-game-layouts