베르의 프로그래밍 노트

UI 비법서 (3) 

- 

군무는 칼같은 각이 생명! Layout Group

작성 기준 버전 :: 2019.1 - 2019.4

[이 포스트의 내용을 유튜브 영상으로도 시청하실 수 있습니다]

UI를 구성할 때, 아무 위치에나 배치되는 경우는 거의 없다. 대부분의 UI는 미리 설계된 레이아웃에 따라서 배치된다. 대부분의 UI 혹은 메인 메뉴 같은 UI는 고정된 위치에 배치되고 그것이 추가/삭제되는 등의 변동이 실시간으로 일어나지는 않는다.

하지만 카드 수집형 게임(TCG) 같은 게임에서 자신이 보유한 카드를 보여주는 형식의 카드 인벤토리 UI를 예시로 들자면, 보유하고 있는 카드의 숫자에 따라서 보여주는 카드 UI의 숫자가 달라질 것이다. 카드를 새로 얻으면 가지고 있는 카드 UI들 끝에 새로 얻은 카드 UI가 바로 앞 카드 UI와 일정한 간격을 두고 생성되어야 한다. 그리고 카드를 이름이나 카드의 성능 등 사용자가 원하는 기준에 따라서 정렬하고자 하면 현재 보여주고 있는 카드 UI들을 기준에 맞춰 재정렬한 뒤에 보여주는 줘야한다. 이렇듯이 고정된 UI와 달리 실시간으로 UI를 추가/삭제하고 순서를 변동하는 작업을 필요로 한다.

실시간 카드 추가/제거 및 정렬을 위한 기능을 수동으로 직접 구현 한다면 상당히 많은 작업을 해야하고 시간 역시 많이 소모될 것이다. 이런 UI의 위치를 자동으로 맞춰주는 기능을 구현하는데 소모되는 시간을 줄여주기 위해서 유니티 엔진에서 제공하는 기능이 바로 레이아웃 그룹(Layout Group)이다.

『성능 최적화를 위해서는 사실 해당 기능을 직접 구현하는 것이 좋다. 레이아웃 그룹의 성능 문제는 본 포스트의 제일 하단에 언급되어 있다.』

레이아웃 그룹(Layout Group)

레이아웃 그룹은 UI를 자동으로 정렬하는 컴포넌트이다. 이 컴포넌트의 종류로는 수직 레이아웃 그룹(Vertical Layout Group), 수평 레이아웃 그룹(Horizontal Layout Group), 그리드 레이아웃 그룹(Grid Layout Group)이 있다.

수직 레이아웃 그룹(Vertical Layout Group)

수직 레이아웃 그룹은 주로 리스트 형식으로 UI들을 보여줄 때 사용된다. 

수직 레이아웃 그룹 컴포넌트를 사용하면 위의 이미지와 같이 하이어라키에서 자식 게임오브젝트로 들어온 UI들이 수직으로 자동 정렬된다. 이 때 캔버스에 표시되는 순서는 하이어라키에 표시된 순서와 같다.

하이어라키 창에서 Vertical Layout Group 게임오브젝트 아래에 있는 Image 게임오브젝트를 복사하면 복사/생성된 이미지 UI 게임오브젝트들이 자동으로 정렬되는 것을 확인할 수 있다.

수직 레이아웃 그룹의 프로퍼티는 위의 이미지에서 볼 수 있듯이 패딩(Padding), 스페이싱(Spacing, 간격), 차일드 얼라인먼트(Child Alignment, 자식 정렬), 컨트롤 차일드 사이즈(Control Child Size, 자식 크기 조절), 유즈 차일드 스케일(Use Child Scale, 자식 크기 사용), 차일드 포스 익스팬드(Child Force Expand, 자식 강제 확장)가 있다.

패딩(Padding)

콘텐츠 사이즈 피터를 사용하면 패딩 프로퍼티에 대해서 더 잘 이해할 수 있다. 좌 우 위 아래의 패딩 값을 조절을 하면 Vertical Layout Group 게임 오브젝트의 넓이와 높이가 늘어나며 Vertical Layout Group 게임오브젝트 아래에 있는 자식 게임오브젝트들을 감싸는 공간이 생기는 것을 확인할 수 있다.

스페이싱(Spacing)

스페이싱 프로퍼티는 자식 게임오브젝트 사이의 간격을 의미한다.

차일드 얼라인먼트(Child Alignment)

차일드 얼라인먼트는 수직 레이아웃 그룹 컴포넌트가 부착된 게임오브젝트 내부에서 어느 위치를 중심으로 콘텐츠들을 정렬할 것인가를 의미한다. 위의 이미지에서도 볼 수 있듯이 회색 사각형은 Vertical Layout Group 게임오브젝트의 영역인데, 차일드 얼라인먼트의 값에 따라서 차일드 게임 오브젝트들의 위치가 변하는 것을 확인할 수 있다.

컨트롤 차일드 사이즈(Control Child Size)

컨트롤 차일드 사이즈 프로퍼티는 단독으로는 큰 의미를 가지지 않는다.

하지만 위의 움직이는 이미지에서 볼 수 있듯이 컨트롤 차일드 사이즈 프로퍼티만 단독으로 사용할 때는 아무런 반응이 없었지만 차일드 포스 익스팬드 프로퍼티와 함께 사용하면 레이아웃 그룹 컴포넌트가 부착된 게임오브젝트의 사이즈만큼 하위 UI들의 크기가 커지는 것을 확인할 수 있다.

혹은 레이아웃 그룹의 하위에 속하는 요소들이 레이아웃 엘리먼트(Layout Element, 레이아웃 요소) 컴포넌트를 가지는 경우에도 의미를 가지고 동작한다.

위의 움직이는 이미지에서 레이아웃 엘리먼트와 레이아웃 그룹의 상호작용을 볼 수 있는데 컨트롤 차일드 사이즈를 넓이 옵션만 활성화 한 뒤, 레이아웃 엘리먼트의 Preferred Width와 Preferred Height를 둘 다 활성화하고 변경했지만, 넓이만 변경되는 것을 확인할 수 있다.

차일드 스케일 사용(Use Child Scale)

차일드 스케일 사용 프로퍼티는 하위의 UI들을 정렬할 때, 차일드 게임 오브젝트의 스케일 값을 사용할 것인가를 정한다.

위의 예시 이미지를 보면 차일드 스케일 사용 프로퍼티를 켜기 전에는 자식 오브젝트의 크기가 바뀌어도 정렬 위치 자체는 그대로인 반면에 차일드 스케일 사용 프로퍼티를 켜면 자식 오브젝트의 크기에 따라서 정렬 위치가 바뀌는 것을 확인할 수 있다.

차일드 강제 확장(Child Force Expand)

차일드 강제 확장 프로퍼티는 컨트롤 차일드 사이즈 프로퍼티 설명에서 봤듯이 자식 오브젝트의 크기를 레이아웃 그룹 컴포넌트가 부착된 게임 오브젝트의 크기에 맞춰서 강제로 늘어나게 만드는 옵션이다.

수평 레이아웃 그룹(Horizontal Layout Group)

수평 레이아웃 그룹은 자기 밑에 속한 자식 UI 오브젝트들을 수평으로 정렬한다. 그리고 수평 레이아웃 그룹 컴포넌트가 가진 프로퍼티는 수직 레이아웃 프로퍼티가 가진 것과 동일하며 그 기능 역시 같다.

그리드 레이아웃 그룹(Grid Layout Group)

그리드 레이아웃 그룹은 하이어라키 뷰에서 자식으로 속한 UI 게임 오브젝트들을 바둑판식으로 정렬한다. 그리드 레이아웃이 가지는 프로퍼티는 패딩(Padding), 셀 크기(Cell Size), 시작 코너(Start Corner), 시작 축(Start Axis), 차일드 얼라인먼트(Child Alignment), 제약(Constraint, 콘스트래인트)가 있다.

우선 패딩과 차일드 얼라인먼트 프로퍼티는 위의 수직/수평 레이아웃 그룹이 가지는 프로퍼티와 같은 기능이다.

셀 크기(Cell Size)

셀 크기 프로퍼티는 그리드 레이아웃 그룹에 속하는 UI들의 크기를 지정해주는데 사용된다.

시작 코너(Start Corner)

시작 코너 프로퍼티는 자식 UI를 정렬될 때 시작 위치를 정하는 기능이다. 왼쪽 위(Upper Left), 오른쪽 위(Upper Right), 왼쪽 아래(Lower Left), 오른쪽 아래(Lower Right)로 설정할 수 있으며 위치를 제대로 잡기 위해서는 차일드 얼라인먼트와 함께 사용하는 것이 좋다.

시작 축(Start Axis)

시작 축은 자식 UI를 정렬할 때, 수직으로 먼저 정렬할 것인지, 수평으로 먼저 정렬할 것인지를 정하는 옵션이다. 기본 설정은 수평이며, 수직으로 변경하면 새로 생겨난 UI는 아래쪽 행으로 추가 되며 레이아웃 그룹 컴포넌트가 부착된 게임 오브젝트의 가장 아래쪽 행까지 채우고 나면 그 다음 옆에 열을 추가하는 방식으로 정렬된다.

제약(Constraint)

그리드 레이아웃의 제약 프로퍼티는 기본적으로 플랙시블, 즉 유연성있는 상태로 설정되어 있는데 이것은 위의 이미지와 같이 2x2, 3x3, 4x4 형태로 정사각형의 정렬된다. 그리고 해당 NxN의 레이아웃이 수용할 수 있는 UI의 갯수를 넘어가면 N+1xN+1 행렬로 자동으로 확장된다.

이렇게 자동으로 행렬 모두가 확장되는 방식은 일반적인 UI에서는 쉽게 사용되지 않는다. 대부분의 경우에는 행이나 열 중 하나는 갯수를 고정시켜두고 추가하는 방식을 사용한다.

제약 프로퍼티를 Fixed Column Count로 선택하면 첫 번째 이미지처럼 열의 갯수를 고정시킨 채로 행을 추가해 나갈 수 있고, Fixed Row Count로 설정하면 두 번째 이미지처럼 행의 갯수를 고정시킨 채로 열을 추가해 나갈 수 있다.

정리

레이아웃 그룹은 이렇게 동적으로 추가/제거되는 UI를 정렬하기에 좋은 컴포넌트이다. 하지만 동적이지 않은 UI더라도 일정한 간격을 두고 배치되는 UI라면 번거롭게 위치를 일일이 계산해서 배치하는 것보다 빠르게 작업할 수 있게 도와준다.

또한, 레이아웃 그룹 컴포넌트는 콘텐츠 사이즈 피터와 스크롤 뷰와 함께 사용하면 좋다.

추가로...

조금 늦게 알게된 사실이지만 최적화를 위해서는 레이아웃 그룹의 사용을 자제해야 된다는 유니티 최적화 팁이 있다. 해당 내용은 레이아웃 그룹 내에서 하나 이상의 자식 요소가 변경되면 레이아웃 시스템이 변경된 것으로 인식해서 레이아웃 그룹 내의 각 UI 요소 1개마다 최소 1회의 GetComponents 호출을 수행한다고 한다. 단순 GetComponents 호출이 아닌 연속적인 GetComponents 호출이 성능에 얼마나 악영향을 끼치는지는 대부분의 개발자들 역시 인지하고 있을 것이다.

[유니티 어필리에이트 프로그램]

아래의 링크를 통해 에셋을 구매하시거나 유니티를 구독하시면 수익의 일부가 베르에게 수수료로 지급되어 채널의 운영에 도움이 됩니다.

[투네이션]

[Patreon]

[디스코드 채널]

UI 비법서 (1)

당신의 레이아웃에 딱맞는 Content Size Fitter

작성 기준 버전 :: 2018.3 -2019.4

[이 포스트의 내용은 유튜브 영상으로도 시청하실 수 있습니다]

UI를 제작할 때, 보기 좋은 레이아웃을 만들어 내는 일은 매우 어렵다. 어렵사리 보기 좋은 레이아웃을 만들어 냈다고 해도 UI에 들어가는 내용의 크기가 바뀔 수 있는 상황이라면 정해진 텍스트나 이미지 등의 콘텐츠가 정해진 레이아웃을 벗어나는 경우가 쉽게 발생한다.

이러한 유동적인 상황에 대처하는 UI를 만드는 것은 이전까지는 스크립트에서 일일이 처리해야하는 번거로움이 있었다. 그런 번거로움을 해소하기 위한 기능으로 유니티는 콘텐츠 사이즈 피터(Content Size Fitter)라는 컴포넌트를 지원한다. 이 컴포넌트를 이용해서 콘텐츠의 크기에 따라 자유롭게 변화하는 UI를 제작하는 방법에 대해서 알아보도록 하자.

콘텐츠 사이즈 피터(Content Size Fitter)

콘텐츠 사이즈 피터는 단어 그대로 컴포넌트가 붙어있는 오브젝트의 크기를 내용물, 콘텐츠의 크기에 맞게 만들어주는 역할을 한다.

콘텐츠 사이즈 피터 컴포넌트를 게임 오브젝트에 추가하는 방법은 위의 이미지처럼 씬에서 Add Component 버튼을 누르고 "Content"를 검색해서 나오는 Content Size Fitter 컴포넌트를 선택하는 것이다.

콘텐츠 사이즈 피터를 사용하지 않으면 위의 이미지처럼 내용이 UI의 사이즈보다 커지면 옵션에 따라 뒷 부분이 잘리거나 영역을 넘어가서 표시되는 바람에 다른 UI를 침범하는 문제가 발생한다.

콘텐츠 사이즈 피터를 사용하면 전과 다르게 UI의 사이즈가 텍스트의 내용에 따라 자동으로 변하는 것을 확인할 수 있다.

추가된 콘텐츠 사이즈 피터는 인스펙터 뷰에서 위의 이미지와 같은 모습으로 보이며, Horizental Fit과 Vertical Fit라는 두 가지 프로퍼티를 설정할 수 있다.

선택 가능한 옵션으로는 Unconstrained, Min Size, Preferred Size 이렇게 세 가지가 있다. Unconstrained는 UI의 크기를 콘텐츠에 맞추지 않는 옵션으로 UI의 크기를 직접 맞추거나 고정된 크기를 사용해야 하는 경우 사용하면 되는 옵션이다. Min Size는 레이아웃 요소의 최소 크기를 기준으로 UI의 크기를 맞추는 옵션인데, 이 옵션의 경우에는 단독으로 사용되는 경우는 거의 없고 Layout group 계열의 컴포넌트와 함께 주로 사용된다. 마지막으로 Preferred Size 옵션은 기본적인 콘텐츠의 크기에 따라 UI의 크기를 맞추는 옵션으로 위의 예시 이미지처럼 텍스트나 이미지에 단독으로 콘텐츠 사이즈 피터를 사용하는 경우에 주로 사용된다.

콘텐츠 사이즈 피터와 피봇

콘텐츠 사이즈 피터로 인해 Rect Transform의 크기가 변경될 때는 UI의 피벗을 중심으로 조정되기 때문에, 피벗을 사용해서 UI의 크기가 조정되는 방향을 조절할 수 있다. 위의 이미지 중에서 콘텐트 사이즈 피터를 붙인 gif를 보면 피벗이 UI의 중심에 있어서 피벗을 중심으로 양 쪽 방향을 향해서 UI가 커지는 것을 볼 수 있다.

위의 이미지를 보면 X Pivot을 0으로 변경해서 UI의 피봇을 가장 좌측으로 옮긴 결과, UI의 트랜스폼이 왼쪽에서 오른쪽으로 확장되는 것을 볼 수 있다.

콘텐츠 사이즈 피터와 스크롤 뷰(Content Size Fitter & Scroll View)

콘텐츠 사이즈 피터를 가장 잘 응용할 수 있는 부분은 바로 스크롤 뷰이다. 이전에 스크롤 뷰에 대해서 설명했던 글에서는 스크롤 뷰에 들어가는 내용에 따라서 Content 오브젝트의 크기를 맞춰주는 방법을 스크립트로 설명했지만 콘텐츠 사이즈 피터를 사용하면 스크립트를 작성하지 않고도 훨씬 편하게 Content 오브젝트의 크기를 맞출 수 있다.

이제 콘텐츠 사이즈 피터를 사용해서 스크롤 뷰의 Content의 크기를 조절하는 방법을 알아보자.

우선 (200, 200) 사이즈의 스크롤 뷰를 생성한다.

그리고 스크롤 뷰의 Content 오브젝트 아래에 (150, 50) 사이즈의 이미지를 하나 만들어주자.

콘텐츠 사이즈 피터가 없는 상태에서 플레이 버튼을 눌러서 실행해보면 스크롤 뷰의 크기는 이미지의 크기나 갯수에 상관없이 동작하는 것을 확인할 수 있다.

다음에는 이 스크롤 뷰에 콘텐츠 사이즈 피터를 적용해보자.

우선 아이템들이 들어갈 Content 오브젝트를 선택하고 여기에 오브젝트들을 자동으로 정렬해주는 Vertical Layout Group 컴포넌트를 추가한다.

원하는 정렬 방법에 따라 Grid Layout Group이나 Horizontal Layout Group을 사용해도 된다. 각 프로퍼티의 값은 보기 좋아보이는 값을 찾아서 입력하도록 하자. 이 예시에서는 위 아래의 패딩을 10씩 주고 각 아이템 간의 간격을 5로 설정했다. 그리고 아이템의 정렬은 상단 중앙으로 설정했다.

그 다음에 내용물에 따라 오브젝트의 크기를 조정해주는 콘텐츠 사이즈 피터 컴포넌트를 추가한 뒤에 사용한 Layout Group에 맞게 Fit 옵션을 Min Size로 변경한다.

스크롤 뷰에 콘텐츠 사이즈 피터와 레이아웃 그룹을 적용하고 플레이를 해보면 아이템이 추가/제거됨에 따라서 자연스럽게 내부 Content의 크기가 늘어나서 스크롤이 가능하게 되는 것을 확인할 수 있다.

[유니티 어필리에이트 프로그램]

아래의 링크를 통해 에셋을 구매하시거나 유니티를 구독하시면 수익의 일부가 베르에게 수수료로 지급되어 채널의 운영에 도움이 됩니다.

[투네이션]

[Patreon]

[디스코드 채널]