[Unreal] UI 레이어 관리

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

 

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

 

 

 

1. UI 드로우콜 체크하기

 UI 드로우콜은 게임 실행 상태에서 ~키를 눌러 콘솔창을 연 뒤 'Stat Slate' 명령어를 입력하여 체크할 수 있습니다. 아래쪽에서 Num Batches와 Num Layers라는 항목을 찾을 수 있습니다. 

(사실 좀 예전에 쓰인 다른 블로그의 어떤 포스팅에서는 Slate RT:Draw Call이라는 항목이 보이는데, 같은 명령어를 입력해도 해당 값이 보이질 않아 다른 방법으로 접근했습니다

해당 포스팅: https://blog.nullbus.net/94)

 

참고로 뷰포트에서 바로 실행하면 에디터 자체의 UI가 포함되므로, 가급적 새 창에서 실행하는 것이 좋습니다. 

사진 1. 빈 맵 실행 시

 

 Blank 맵에 아무것도 추가하지 않은 상태이지만, 기본으로 생성되는 HUD 등으로 인한 것인지 7이란 수치가 나옵니다. 여기서 테스트용 UI를 추가한 후 체크해보겠습니다. 간단하게 캔버스 판넬을 추가하고, 하위에 15개의 이미지를 추가했습니다.

사진 2. 테스트용 UI(이미지 15개)

사진 3. UI 추가 후 드로우 콜

 

배치 수 및 레이어 수가 22로 기본값(7)에서 15 증가한 것을 확인할 수 있습니다. 캔버스 하위에 추가한 위젯 개수만큼 레이어 수가 증가했는데, 이는 캔버스 판넬이 하위 위젯마다 레이어를 증가시키는 판넬이기 때문입니다. 이에 관한 자세한 내용은 밑에서 다루겠습니다.

 

 

2. 판넬들의 레이어 관리

UI에 여러개의 위젯을 추가하려면 판넬을 이용해야 하는데, 판넬들 중에는 하위 위젯들의 레이어를 증가시키는 판넬과 하나의 레이어로 통일시키는 위젯이 있습니다. 레이어를 통일시키는 판넬에는 대표적으로 Horizontal Box, Vertival Box, Grid Panel 등이 있습니다.

 

사진 4. Horizontal Box, Verticla Box 사용

사진 5. Horizontal, Vertical 사용 시 드로우 콜

 

 

 사진 4는 위에서 사용한 UI에서 10개의 이미지는 Hozirontal Box로, 5개의 이미지는 Vertical Box로 묶은 모습입니다. 이렇게 레이어를 통일시키는 판넬로 묶으면 해당 위젯 및 하위 위젯들이 모두 하나의 레이어로 취급됩니다. 위의 경우 캔버스 판넬 밑에 Horizontal Box, Verticla Box 2개의 레이어만 존재하므로 기본 값(7)에서 2 증가하여 9밖에 나오지 않는 것을 볼 수 있습니다.

 

 참고로 Grid Panel의 경우, 하위 위젯들의 레이어를 직접 설정할 수 있습니다. 디폴트 값인 0으로 두면 모두 하나의 레이어로 통일되고, 별도의 값을 준 위젯의 수만큼 레이어가 증가하게 됩니다.

사진 6. Grid Panel 하위 위젯에 추가되는 Layer 옵션

 

 Canvas Panel, Overlay, Border의 경우 하위 위젯들의 레이어를 증가시킵니다. Canvas와 Overlay의 경우 하위 위젯 하나까지는 같은 레이어로 취급하고, 이 후 추가되는 위젯마다 별도의 레이어로 취급합니다. 따라서 사진 2의 경우 캔버스 판넬과 최초 이미지 1개까지는 동일 레이어고, 이후 14개의 이미지마다 레이어가 증가하여 총 15개의 레이어가 추가된 모습입니다. 다만 위에서 볼 수 있듯이, 레이어를 증가시키는 판넬의 하위에 있어도 Horizontal Box같은 레이어를 통일시키는 판넬로 묶으면 하나의 레이어로 취급하므로 이를 적절하게 활용하여 드로우 콜을 줄일 수 있습니다.

 

 

3. 캔버스 판넬 관련 옵션

 다른 판넬들은 그렇다 치더라도, 캔버스 판넬이 레이어를 증가시킨다는 점은 다소 불편할 수 밖에 없습니다. 정확한 화면 크기를 잡아주므로 하위 위젯들의 위치를 미리 예측해서 배치할 수 있기 때문에, 화면 전체를 채우는 UI라면 캔버스 판넬을 사용하는 것이 편리하기 때문입니다.

 

https://www.youtube.com/watch?v=C5tCKDKJI0w

 

 좀 옛날 영상이긴 합니다만, 판넬의 종류와 캔버스 판넬이 레이어를 증가시키는 문제를 어떻게 해결하셨는지에 대해 소개하고 있습니다. 영상에 나온 개발팀 분들께서는 레이어를 증가시키지 않는 캔버스 판넬을 직접 구현해서 사용하셨는데, 추후에 언리얼 쪽에서 이와 비슷한 기능을 옵션으로 제공해주었다고 합니다.

 

사진 5. bExplicitCanvasChildZOrder 옵션

 

 Project Settings -> Engine-> Slate Settings에 가면 Explicit Canvas Child ZOrder 라는 옵션을 확인할 수 있습니다. 해당 옵션을 체크하면 캔버스 판넬 하위의 위젯들의 레이어는 ZOrder에 따라 구분됩니다. 한마디로 모두 같은 ZOrder로 설정하면 하나의 레이어로 통일됩니다. 

 

사진 8. 테스트용 UI(이미지 15개)

사진 9. bExplicitCanvasChildZOrder 적용 후

 

 사진 8과 같이 최초 테스트와 동일하게 캔버스 하위에 이미지 15개를 넣고 실행해보아도, ZOrder가 동일하니 모두 하나의 레이어로 취급하여 배치 및 레이어 수가 단 1만 증가한 것을 확인할 수 있습니다.

 

 지금까지는 화면을 채우는 UI 제작 시 항상 Canvas Panel을 사용하였는데, 해당 옵션을 체크하여 하위 위젯들의 레이어가 분리되지 않도록 하고자 합니다. 또한 Horizontal / Vertical Box나 Grid Panel은 주로 디자인을 위해서 사용했었는데, 레이어를 통일시키는 효과도 있다고 하니 상황에 맞다면 적극적으로 사용해야겠습니다.