[Unity][UI] Content Size Fitter

※ 해당 포스팅은 개인의 공부 정리용 글입니다. 틀린 내용이 있다면 추후 수정될 수 있습니다.

※ 해당 포스팅은 Unity 2021.3.15f1 버전을 기준으로 작성되었습니다.

※ 해당 포스팅은 하기 출처들의 내용을 참고하였습니다.

- https://docs.unity3d.com/kr/2021.3/Manual/script-ContentSizeFitter.html

- https://wergia.tistory.com/170

 

 

 

 

이번 포스팅에서는 유니티에서 UI 크기를 자동으로 조절하는데 유용한 Content Size Fitter에 대해 알아보겠습니다.

서론

 UI 작업을 하다보면 생각보다 크기 조정에 많은 시간을 소모하게 됩니다. 특히 새로운 UI 추가로 인해 기존 UI의 크기들을 일일히 조절하려면 불편하기 이를 데 없습니다. 이러한 부담을 줄이기 위해 유니티에서는 Content Size Fitter는 UI 크기 자동 조절 수단을 제공하고 있습니다. Content Size Fitter 컴포넌트는 Inspector 창에서 검색하여 추가할 수 있습니다.

 

사진 1. Content Size Fitter 추가

 

Content Size Fitter의 속성

Content Size Fitter는 Horizontal Fit, Vertical Fit 두가지 속성을 가지고 있으며, 각각 Unconstrained, Min Size, Preffered Size의 3가지 옵션 중에서 선택할 수 있습니다. 디폴트는 Unconstrained로, 해당 축의 크기를 제한하지 않는 옵션입니다. 

 

사진 2. Unconstrained 옵션

 

Min Size 옵션은 이름 그대로 해당 UI의 크기를 최소로 맞춰줍니다. 해당 옵션을 선택하면 Rect Transform에서 크기를 조정할 수 없게 됩니다(Horizontal의 경우 Width, Vertical의 경우 Height). 단독으로 사용할 경우에는 0으로 고정되어 버리고, 보통 Layout Group과 함께 사용합니다. 사진 3은 Grid Layout Group을 포함한 오브젝트에 Content Size Fitter를 추가하고 Horizontal Fit, Vertical Fit을 모두 Min Size로 설정한 모습입니다. 이처럼 Min Size로 설정하면 하위 오브젝트들을 모두 포함하는 최소 크기로 조절되며, 하위 오브젝트를 추가해도 자동으로 크기를 맞춰줍니다.

 

사진 3. Min Size 옵션

Preffered Size 옵션은 해당 UI의 크기를 기본 크기에 맞춰줍니다. Min Size가 레이아웃 그룹과 함께 사용하는 옵션이라면, 해당 옵션은 단독으로 사용하는데 적합한 옵션입니다. 텍스트같이 내용에 따라 크기가 달라져야 하는 UI에 주로 사용합니다. 사진 4는 TMPro에 Content Size Fitter 추가 후 Horizontal Fit을 Preffered Size로 설정한 것으로, 텍스트 길이에 따라 자동으로 Width값이 조절된 모습을 볼 수 있습니다.

 

사진 4. Preffered Size  옵션, Pivot(0.5, 0.5)

 텍스트에 Preffered Size 옵션을 사용하는 경우 Rect Transform에서 피벗값을 조절하여 기준을 정할 수 있습니다. 피벗의 x값이 0.5일 경우 사진 4처럼 양쪽으로 늘어나고, 피벗의 x값을 0으로 설정할 경우 사진 5처럼 텍스트 길이가 오른쪽으로만 늘어나게 만들 수 있습니다.

 

사진 5. Preffered Size 옵션, Pivot(0, 0.5)

 

결론

 Content Size Fitter를 잘 활용하면 UI의 내용 수정, 혹은 하위 요소 추가 후 크기 조절을 자동화할 수 있습니다. 특히 적합한 활용처가 스크롤 뷰의 View Port에 추가하여 사용하는 것인데, 이는 스크롤 뷰를 별도의 포스팅에서 다룰 예정이라 그쪽에서 함께 다루도록 하겠습니다.