Unity UI 레이아웃과 이미지 활용하기

유니티에서 UI를 제작할 때 레이아웃 그룹(Layout Group)과 이미지(Image) 설정을 활용하면 더욱 효율적으로 인터페이스를 구성할 수 있다. 이번 글에서는 Vertical Layout Group, Horizontal Layout Group, Grid Layout Group을 비롯해 Image Type 설정을 이용한 게이지 아이콘 제작 방법을 소개하고자 한다.

 

1. Layout Group을 활용한 UI 정렬

유니티에서 UI 요소를 정렬하는 대표적인 방법으로 Layout Group이 있다. Layout Group을 적용하면 자식 오브젝트들의 위치와 크기를 자동으로 정렬해 준다.

 

[ 1.1 Vertical Layout Group (세로 정렬) ]
Vertical Layout Group을 사용하면 자식 UI 요소들이 세로 방향으로 자동 정렬됨
- 정렬 기준을 설정할 수 있으며, `Middle Center`, `Upper Left` 등의 옵션을 선택 가능
- Padding(여백) 설정 가능
- Spacing(간격) 조절 가능

 

[ 1.2 Horizontal Layout Group (가로 정렬) ]
Horizontal Layout Group을 사용하면 자식 UI 요소들이 가로 방향으로 자동 정렬됨
- 버튼이나 텍스트 요소들을 한 줄로 나열하는 데 유용
- `Child Force Expand` 옵션을 사용하여 크기 조절 가능

 

[ 1.3 Grid Layout Group (격자 정렬) ]
Grid Layout Group을 사용하면 자식 UI 요소들을 격자(grid) 형태로 자동 배치할 수 있음
- `Cell Size`를 조절하여 각 요소의 크기 조정 가능
- `Constraint` 옵션을 이용해 행 또는 열 개수를 고정 가능
- 인벤토리 UI 제작에 많이 활용됨

 

 

2. Image 컴포넌트 활용: 게이지 아이콘 만들기

유니티에서 UI 요소로 이미지를 사용할 때, Image Type을 설정하면 다양한 방식으로 표현할 수 있다.

 

[ 2.1 Image 컴포넌트 설정 방법 ]
1. Package Manager에서 `2D Sprite` 패키지를 설치
2. 텍스처 폴더에 필요한 이미지를 추가
3. `Canvas` 안에 `Image` 오브젝트를 생성하고, 추가한 이미지를 설정

 

[ 2.2 Image Type: Filled을 활용한 게이지 바 제작 ]
- Image Type을 `Filled`로 설정하면 게이지 바, 체력바, 스태미나 바 등 다양한 게이지 UI를 제작할 수 있음
- `Fill Method` 옵션을 조절하여 가로, 세로, 원형 등 다양한 방식으로 채워지는 효과를 구현 가능
  - `Horizontal` (좌→우 채우기)
  - `Vertical` (아래→위 채우기)
  - `Radial 360` (시계방향으로 원형 게이지 채우기)
- `Fill Amount` 값을 0 ~ 1 사이로 변경하여 실시간 게이지 변화 구현 가능

[ 2.3 Slider vs Image의 Fill Method 비교 ]
2.3.1 Slider의 특징
Slider는 주로 값 조절에 사용되는 UI 요소로, 사용자의 입력을 받을 수 있는 컨트롤러이다.
Slider의 Fill Rect 부분이 Image의 Fill Method(Horizontal - Left)와 유사한 방식으로 작동하여, 막대 게이지 형태로 값의 변화를 시각적으로 표현할 수 있다. 하지만 Slider는 단순히 시각적인 효과를 위한 것이 아니라, 내부적으로 value 속성을 가지고 있어 사용자가 직접 값을 조정할 수 있는 UI로 설계되어 있다.

2.3.2 Image(Filled)의 특징
Image의 Fill Method를 Filled로 설정하면, Fill Amount 값을 변경하여 게이지 UI처럼 사용할 수 있다. Slider와 달리 Image는 사용자 입력이 필요 없는 순수 UI 요소로, 값이 자동으로 변경되는 경우에 적합하다. 예를 들어, 체력바(HP Bar), 마나바(MP Bar), 스태미나바 같은 UI를 만들 때 Image를 활용하면 불필요한 UI 요소 없이 깔끔한 UI를 구성할 수 있다.

 

2.3.3 언제 Slider를 사용하고, 언제 Image를 사용할까?

 

2.3.4 성능 차이
Slider는 하나의 GameObject이지만, 내부적으로 여러 Image 오브젝트를 렌더링하는 반면, Image(Filled)는 하나의 Image만 렌더링 하면 되므로, 같은 Material과 Texture를 가진 UI 요소들을 하나로 묶어(Render Batch) 처리하는 Unity의 UI 시스템에  GPU의 Draw Call이 줄어든다. 

Slider는 Handle(사용자의 입력 - 클릭, 드래그, 터치 등)을 받을 수 있도록 EventSystem과 연결되기에 CPU 연산량이 증가한다. 

마지막으로 Slider는 value 값이 변할 때 마다 갱신이 필요하다. 하지만 Image(Filled)는 그렇지 않다.
즉, 이런 이유로 게임 UI를 제작할 때 불필요한 UI 요소를 줄이고 싶다면 Image(Filled)를 활용하는 것이 좋다.

 

2.3.5 결론
사용자가 직접 조작할 UI(예: 볼륨 조절, 게임 내 컨트롤 등) → Slider
자동으로 변하는 UI(예: 체력바, 경험치 바 등) → Image(Filled)가 더 적합