[쿼리도슈팅 개발일지 #2] 해상도마다 깨지는 모바일 게임 UI, 레터박스 + Unity Canvas로 잡은 과정

1. 들어가며

안녕하세요, 쿼리도슈팅 PO 겸 개발을 맡고 있는 정회륜입니다!

오늘은 제가 쿼리도슈팅에서 UI 개발을 진행하면서 어려웠던 점을 공유하고,

제가 어떤식으로 해결했는지 작성할 예정이니 UI 개발에 고민이 있으신 분들은 한번씩 읽어보시면 좋을 것 같습니다.

 

안녕하세요, 쿼리도슈팅 PO(Product Owner, 제품 총괄) 겸 개발자 정회륜이에요.

이번 글에서는 모바일 타깃으로 게임을 만들면서 부딪힌 첫 번째 큰 벽, "해상도마다 UI가 깨지는 문제" 를 어떻게 풀어 갔는지 공유할게요.

 

시행착오 끝에 레터박스(지원 화면비 밖의 영역을 검은색 여백으로 채워 게임 화면 비율을 유지하는 방식) + Canvas 설정 조합으로 타협한 과정을 담았어요. 같은 고민을 하고 계신 분이라면 의사결정 흐름 자체에 참고가 될 거예요.

 

실제 구현 코드와 자세한 동작 원리는 별도의 Skill 글로 분리해 작성 중이에요(추후 발행 예정).

이 글에서는 "왜 이 방식을 골랐는지"에 집중할게요.

 

2. 배경

쿼리도슈팅은 모바일 폼팩터를 타깃으로 만들고 있는 게임이에요.

많은 기종을 지원하다 보니 해상도에 따른 UI 배치를 늘 고민했어야 했는데요.

 

문제는 제가 모바일 게임 개발 경험이 적어서, 이것저것 찾아보며 시작해야 했다는 점이었어요.

 

요즘은 AI가 발달해 딸깍으로 알 수 있지만, AI를 사용하지 않고 개발했던 시절 구글링으로 수집한 내용이라는 점 참고해 주세요.

 

3. 문제 정의

일단 초기 UI를 만들 때는 박치기 공룡마냥, 일단 부딪쳐 보자는 마음으로 개발을 진행했어요.

기획서에 나와 있는 UI 배치를 보고 "눈으로 이쯤 되겠구나" 하며 감으로 배치했어요.

 

Anchor(UI 요소가 부모 영역 내에서 어느 위치에 고정될지를 정하는 기준점) 설정만 대충한 UI,

어느 정도 UI 개발 경험이 있는 분이라면 결과를 아시겠죠?

 

해상도가 달라지면 크기도 커졌다 작아지고, UI 사이 거리도 이상하고 — 문제가 하나가 아니었어요.

 

[스크린샷:원래 우주선 형태였던 UI가 양옆으로 늘어나 고양이가 된 상태. 일명 '스타워즈 함선(이었던 것)']

 

4. 해결 과정

제 머리에서 피가 날 때쯤 실제로 사용하는 UI 기술에 대해 검색하기 시작했어요.

 

가장 흔히 쓰는 방법은 특정 해상도를 정해 두고, 그 범위 안에 사용할 UI 배치를 각각 만들어 대응하는 방식이었어요.

가장 확실하고 시각적으로 깔끔하지만, 그만큼 리소스 소모도 큰 작업이라고 생각해요.

 

제가 타협한 쿼리도슈팅의 해상도 대응은 레터박스 방식 + Unity 내장 Canvas 설정의 조합이었어요.

처음부터 해상도를 고정해 남은 부분을 잘라내기보다는, 허용 가능한 화면비 범위 안에서는 UI가 자유롭게 줄고 늘어나도록 두고, 그 범위를 벗어나면 레터박스가 생성되도록 만들었어요.

 

이렇게 하면 대부분의 모바일 기종에서는 화면을 꽉 채워서 보여줄 수 있고,

너무 좁거나 너무 넓은 화면비를 가진 기종에서만 검은 여백이 생겨요.

 

구현 디테일은 Skill 글에 정리해 둘 예정이니, 코드가 궁금하시면 함께 봐주시면 좋을 것 같아요.

 

5. 결과

Unity 해상도 설정에 원하는 기종의 해상도를 등록하고 테스트해 본 결과, 게임 진행이 불가능할 정도로 UI가 깨지는 일은 사라졌어요. UI 요소가 화면 밖으로 튀어나가거나 서로 겹치는 케이스도 거의 없어졌고요.

 

[스크린샷: 4:3 비율의 쿼리도 슈팅 화면]

 

6. 막힌 부분 또는 변경된 점

레터박스 방식은 빠르게 적용할 수 있다는 장점이 있지만, 검은 여백이 보이면 게임의 완성도가 다소 낮아 보이는 단점이 있어요.

특히 4:3 화면비처럼 여백이 크게 차지하는 환경에서는 몰입감이 살짝 떨어진다는 느낌을 받았어요.

 

또 핸드폰은 새로운 기종이 나올 때마다 디자인도 달라지고 해상도도 달라지다 보니,

이 점을 참고해서 Safe Area(스마트폰 노치·카메라 홀 등 디스플레이 결함 영역을 피해 UI를 배치하는 영역)를 넉넉하게 잡아야겠다고 생각하게 된 시간이었어요.

 

7. 이후 계획

다음 주에는 현재 적용된 레터박스 + Canvas 조합을 더 다양한 기종에서 테스트해 볼 예정이에요.

특히 신규 출시된 기종들의 해상도에서도 의도대로 동작하는지를 우선 확인할 거예요.

 

장기적으로는 시간적 여유가 생기면, 주요 해상도별로 UI 배치와 크기를 따로 만들어서 레터박스 없이 완벽 대응하는 방식도 시도해 보고 싶어요. 지금의 타협안에서 한 단계 더 나아가는 게 목표예요.

 

8. 참고자료

• 반응형 화면 자료 정리 — https://j2su0218.tistory.com/m/1703