게임이 실제로 사용하는 요소 관찰하기
캔버스 컨테이너가 창과 별개로 바뀔 수 있는 경우(분할 패널 안이나 컨트롤이 바뀌는 페이지 등) ResizeObserver를 사용하세요. 콘텐츠 크기를 읽고 실제로 달라진 경우에만 캔버스 내부 해상도를 업데이트한 다음 CSS 좌표와 게임 월드 좌표 사이의 배율을 다시 계산하세요.
레이아웃에 영향을 주는 치수를 조건 없이 같은 관찰 대상 요소에 다시 쓰지 마세요. MDN에 따르면 관찰자 콜백 안에서 크기를 변경하면 루프가 생길 수 있습니다. 작업을 신중하게 예약하고 예상 크기가 바뀌지 않았으면 쓰기를 건너뛰세요. 이미지를 왜곡하는 대신 여백을 두어야 한다면 게임 뷰포트와 고정된 월드 좌표계를 분리하세요.
레이아웃과 입력을 함께 테스트하기
좁은 화면, 넓은 화면, 회전된 화면에서 캔버스 각 가장자리 근처의 대상을 클릭하거나 탭하고 게임이 보이는 표시와 같은 월드 좌표를 인식하는지 확인하세요. 레벨 진행 중에도 크기를 바꿔 카메라나 여백 정책이 적용되어도 위치가 예상치 않게 바뀌지 않는지 점검하세요.
window.innerWidth가 모든 레이아웃 변화를 감지한다고 가정하지 말고 컨테이너를 관찰하세요. 모바일 키보드나 브라우저 컨트롤 때문에 사용 가능한 공간이 달라지면 플레이 영역을 줄일지, 고정할지, 스크롤할지 결정하세요. 컨트롤이 게임에 필요한 공간을 차지할 수 있으므로 컨트롤이 표시된 상태에서 그 선택을 테스트하세요.
브라우저 게임 크기 변경 처리 관련 질문
크기가 바뀔 때마다 게임 월드 크기도 바꿔야 하나요?
아니요. 많은 게임은 월드 좌표를 그대로 유지하고 카메라만 바꾸거나 여백을 둡니다. 월드 자체의 크기를 바꾸면 난이도, 충돌 판정, 레벨 구성에 영향을 줄 수 있습니다.
window 크기 변경 핸들러보다 ResizeObserver가 나은 경우는 언제인가요?
전체 창 크기가 그대로여도 컨테이너나 주변 레이아웃에 따라 대상 요소의 크기가 바뀔 수 있다면 ResizeObserver를 사용하세요.
추가 읽을거리
오래된 정보를 발견하셨나요? 수정 사항 제보