[Unity] UI 배치하기

개요

게임에 있어서 UI는 직관적인 조작에 영향을 주는 중요한 요소다.

Unity로 게임을 만들 때 UI를 배치하더라도 모니터 해상도와 화면 비율에 따라 배치가 달라질 수 있고,

잘못 배치하면 화면이 잘려 나가거나 화면 밖으로 나가는 문제가 생길 수 있다.

이번 글에서는 내가 실제로 사용하는 UI 배치 방식을 정리해보려고 한다.

(저도 아직 배우는 단계라 해당 방법이 안좋은 방법이거나 문제가 생길 수 있다면 피드백 주시면 감사할 것 같습니다)

초기 설정

우선 Canvas를 만들면 인스펙터에 Canvas Scaler가 있는데
UI Scale Mode를 Scale With Screen Size로 바꾸고
Match를 1로 설정해준다

그러면 화면 크기에 맞춰서 UI 전체를 자동으로 스케일링 해주고 그걸 Height기준으로 스케일 해준다

배치 방법

우선 큰 핵심으로는 이미지를 먼저 배치하여 각 칸의 비율을 미리 정한 다음
그 이미지 안에 버튼이나, 이미지, 스크롤 뷰 등을 넣는 것이다

주요 컴포넌트

• Vertical Layout Group: 자식 오브젝트를 수직으로 일정한 간격으로 배치
• Horizontal Layout Group: 자식 오브젝트를 수평으로 일정한 간격으로 배치
• Layout Element: 각 오브젝트의 비율을 직접 조정할 수 있는 컴포넌트

Vertical / Horizontal Layout Group 사용법

우선 Vertical Layout Group에서 Controll Child Size 항목이 있는데 Child Force Expand와 함께 체크하면

이걸 체크해주면 해당 길이를 부모의 길이에 맞춰서 오브젝트가 일정하게 배치된다

하지만 나는 Controll Child Size는 키지 않고 Width와 Height를 수동으로 입력해서 칸을 맞춘다

연습

우선 인벤토리 창에서 왼쪽(회색)에는 아이템 리스트가 보이는 칸 오른쪽에는 아이템 클릭했을 때 보이는 칸으로 나눴다

그 오른쪽에는 맨 위에 아이템 이름(빨간색), 중간에는 아이템 설명(초록색), 아래는 제거 버튼(흰색)이 배치되도록 했다

왼쪽과 오른쪽은 Horizontal, 오른쪽 3개는 Vertical로 Layout을 맞췄다

이제 인스펙터에 앵커랑 피봇을 설정하는 부분이 있는데 Shift를 누르면 부모의 앵커를 설정하고
Shift + alt를 누르면 자신의 피봇도 같이 설정한다

여기서 stretch/stretch로 설정한 뒤 padding을 줘서 UI를 알맞게 배치한다

이런 방식으로 자식의 자식 오브젝트들도 배치한다면

약간 인벤토리처럼 보이는 베이스 창을 만들 수 있다

---

부족한 점이 많을 수 있습니다.. 피드백은 환영합니다..