문제 상황
2D 가로형 모바일 RPG 게임의 로그인 화면을 구상하던 중, 배경과 로고를 적절히 배치하는 것에 문제가 생겼다. 스마트폰 화면 비율이 기기마다 달라지는데, 아무리 RectTransform의 앵커를 조절해봐도 Unity Simulator 상의모든 기기에서 내가 원하는 위치에 로고가 오도록 할 수 없었다.
해결 과정
선 Aspect Ratio Fitter 컴포넌트를 활용해 보았다. 로고 이미지 위에 부모 오브젝트를 하나 추가하고, 부모 오브젝트의 가로 앵커를 "Stretch"로 설정한 후, 이미지 오브젝트에 Aspect Ratio Fitter를 붙였다. 이때 Fit in Parent 속성을 사용하여 로고가 부모 오브젝트의 가로 크기에 맞춰지도록 보정했다.
이 설정을 적용하니 이전보다 화면에 맞춰 로고가 적절히 표시되었지만, 너무 가운데에 표시되어 로고가 특정 배경 포인트를 가리는 문제가 발생했다. (테스트에서는 이미지 대신 단색으로 배경을 설정하여 테스트했다.)
이 문제를 해결하기 위해 UIManager에서 기기의 화면 비율을 계산하고, 이 비율에 따라 RectTransform 값을 조정하도록 했다. 또한 갤럭시 폴드에서 화면을 접는 경우처럼 화면 비율이 바뀔 수 있는 상황을 고려해, OnApplicationPause 메서드를 활용하여 화면 비율 변화가 감지될 때마다 로고 위치를 다시 계산하도록 설정했다. 이로써 다양한 기기에서 로고 크기와 위치를 원하는 대로 조정할 수 있게 되었다.
이후 코드로 RectTransform 값을 적용할 때, 처음에는 position과 sizeDelta 조합을 사용했으나, 예상과 달리 로고가 화면 아래쪽에 배치되었다. 이 문제를 해결하기 위해 Hierarchy 구조의 문제라 생각하고 localPosition과 localScale을 사용해 보았지만, 이 경우 로고가 예상치 않게 길쭉하게 변형되었다. 최종적으로 anchoredPosition과 sizeDelta를 조합하여 설정하니, Hierarchy에서 설정한 값과 동일하게 로고가 화면에 표시되었고, 비율도 정확하게 유지되었다.
최종 기술적 의사 결정
최종적으로, anchoredPosition을 통해 로고의 위치를 조정하고, sizeDelta를 이용해 로고의 높이를 설정하니, 다양한 화면 비율에서도 로고가 의도한 위치에 정확히 배치되었다. 이 방식은 Aspect Ratio Fitter와 함께 사용하여 화면 비율에 맞게 로고의 크기를 조정하고, OnApplicationPause 메서드를 활용해 화면 비율이 변할 때마다 로고 위치와 크기를 재설정하도록 하여, 갤럭시 폴드와 같은 폴더블 기기에서도 호환성을 확보했다.
이로써 다양한 기기 환경에서도 로고 이미지가 일관된 비율과 위치를 유지하도록 최적화할 수 있었다.