모바일과 PC, 같은 게임을 다르게 만드는 화면 크기의 함정

웹 미니게임을 만들면서 가장 자주 마주친 착시 중 하나는, 같은 화면 배치 코드가 기기마다 완전히 다른 인상을 준다는 것이었습니다. 세로로 긴 모바일 화면에서는 게임판이 화면을 꽉 채워 보이는데, 가로로 넓은 PC 브라우저 창에서는 같은 판이 화면 한가운데 작게 떠 있는 것처럼 보이는 경우가 많았습니다.

짧은 변에 맞추는 함정

흔히 쓰는 방식은 게임판의 한 변을 화면의 너비와 높이 중 더 짧은 쪽에 맞춰서 정사각형을 유지하는 것입니다. 이렇게 하면 세로로 긴 모바일 화면에서는 너비가 기준이 되어 판이 크게 그려지지만, 가로로 넓은 PC 화면에서는 높이가 기준이 되면서 상대적으로 작은 판이 그려지고 좌우로 넓은 여백만 남습니다. 코드는 똑같은데 체감 크기가 이렇게 극단적으로 갈리는 겁니다.

해결책은 상한을 두는 것

이 문제의 해법은 의외로 단순했습니다. 게임이 놓이는 영역 자체에 최대 폭 제한을 걸어서, PC처럼 화면이 넓어도 그 영역이 무한정 넓어지지 않고 적당한 크기에서 멈추게 만드는 겁니다. 그리고 그 안에서 짧은 변에 맞춰 정사각형을 유지하도록 하니, PC에서도 판이 화면 가운데 여백 없이 적당한 크기로 꽉 차 보이게 됐습니다.

친구 대전에서는 더 심각한 문제였다

이 문제는 단순한 미관을 넘어서, 알까기나 오목처럼 실시간으로 두 사람이 대결하는 게임에서는 훨씬 심각한 결과를 낳았습니다. 폰과 PC가 서로 다른 화면 크기로 접속하면, 돌의 위치나 발사 속도 같은 물리 계산이 절대 픽셀 단위로 이루어질 경우 양쪽의 시뮬레이션이 완전히 어긋나버립니다. 이 문제는 결국 물리 좌표 전체를 화면 크기와 무관한 0에서 1 사이의 논리 좌표로 다시 설계하고 나서야 근본적으로 해결됐습니다. 화면에 그릴 때만 각자의 화면 크기를 곱해서 변환하니, 폰과 PC가 서로 다른 크기로 접속해도 게임 물리 자체는 완전히 동일하게 재생됩니다.

디버깅이 유독 어려웠던 이유

이 버그를 처음 발견했을 때 가장 곤란했던 점은, 혼자 테스트할 때는 좀처럼 재현되지 않는다는 것이었습니다. 같은 크기의 창 두 개를 나란히 띄워두고 테스트하면 우연히도 맞아떨어져서 문제가 없는 것처럼 보였거든요. 실제로는 폰과 PC처럼 화면 크기가 크게 다른 조합으로 테스트해야만 어긋남이 드러났습니다. 이후로는 대전 기능을 수정할 때마다 반드시 서로 다른 화면 크기 조합으로 검증하는 걸 원칙으로 삼게 됐는데, 이건 코드를 아무리 꼼꼼히 읽어도 알 수 없고 직접 다른 환경에서 부딪혀봐야만 드러나는 종류의 버그였습니다.