[UE5] UMG 위젯 Visibility 종류와 차이점

 

위젯에는 Visibility 설정을 하는 곳이 있다.

 

위젯 하나를 클릭해서 디테일 패널을 내리다보면 Behavior 라는 카테고리 아래에 Visibility가 있을 것이다.

 

 

이름 그대로 이 위젯을 어떤 방식으로 보여주는 것인지 설정하는 곳이다.

 

 

크게는 보이는 것, 보이지 않는 것 으로 나눌 수 있지만 각 타입마다 기능이 다르다. 이걸 그냥 설명만 봤을 때는 그렇구나 하고 넘어갔는데 설정에 따라서 간혹 버그가 일어나는 경우도 있었다.  그래서 사용법과 그 예시를 조금씩 같이 적어놓으려고 한다.

 

참고로 코드에서는 SetVisibility라는 함수를 통해 타입을 설정할 수 있다. ESlateVisibility라는 enum타입으로 정의한다.

 

 

 

 

 

Visibility 기능과 차이점

언리얼 코드에서 SlateWrapperTypes.h로 들어가면 가장 먼저 ESlateVisibility라는 enum class를 볼 수 있다. 주석으로 상세하게 역할들에 대해 적어두었는데 하나씩 살펴보자.

 

 

1. Visible

뜻 그대로 볼 수있다는 뜻이다. 위젯이 Visible로 세팅되면 hit-testable 이라는 기능이 되는데 이는 마우스 커서와 상호작용을 할 수 있는 역할을 부여받는다. 클릭을 하거나 위에 올려놓거나 하는 등의 응답을 받을 수 있도록 한다. 

 

버튼, 스크롤박스 등 클릭에 영향을 받는 위젯의 경우 Visible 체크가 필수이다.

 

2. Collapsed

위젯을 눈에서 보이지 않게 꺼두는 역할을 한다. Collapsed 상태의 위젯은 기존에 본인이 차지하고 있던 레이아웃으로 부터도 위치를 감추기 때문에 Horizontal Box등에 들어있던 자식 위젯이 Collapsed 상태가 되면 남은 위젯들의 레이아웃도 변화한다. 예를들면 아래의 그림과 같다.

 

 

위의 그림은 예시일 뿐이다. 아쉽게도 UMG에서 Collapsed 상태로 지정한다고 해서 곧바로 오른쪽 그림과같이 변화 하지는 않는다. 이는 실제 게임을 플레이하고 viewport에 적용되었을 때 일어나는 일을 내가 임으로 그렇게 보이도록 세팅한 것이다. 하이어라키 위젯에 잠금표시와 눈 표시가 있는데 눈 표시를 끄면 Collpased 처럼 위젯이 종적을 감춘다. 느낌만 볼 수 있도록 세팅해두었다.

 

0번 텍스트블록을 Collapsed상태로 바꾸면 1번과 2번이 0번이 없는 것 처럼 레이아웃이 변화한다. 0번 텍스트블록은 존재하지 않는 것 처럼 말이다.  오브젝트는 존재하지만 드로우 되지 않고 있음을 알고 넘어가자.

 

 

3. Hidden

Collpased와 마찬가지로 눈에 보이지 않도록 하는 역할이다. Collpased 와 다른 점은 Hidden으로 세팅하면 눈에만 보이지 않을 뿐 레이아웃은 유지하고 있다. 그래서 만약 0번 텍스트 블록을 Hidden으로 설정하게되면 0번에 아무것도 보이지 않지만, 1번 텍스트블록과 2번 텍스트블록은 0번의 자리 이후에 세팅되는 것을 확인할 수 있다.

 

 

위 사진과 같은 형태로 남아있을 것이다. 굳이 레이아웃을 계산하고 그 위치를 남겨둘 필요가 없다면 보이지 않아도 되는 UI를 설정할 때 Collpased 상태로 세팅하는 것이 더 좋다고 한다.

 

 

4.Not Hit -Testable (Self& AllChildren)

코드에서는 HitTestInvisible 로 세팅할 수 있다. 이 타입의 경우 눈에는 보이지만 Visible과 다르게 클릭과 같은 마우스 커서와의 상호작용에 대한 응답을 하지 않는다. 괄호에 있는 Self & AllChildren 이 뜻하는 바는, 이 타입으로 세팅할 경우 자식을 갖는 위젯이라면 자식까지도 모두 응답을 받지 않도록 막겠다는 뜻이된다. 자식 위젯에 아무리 Visible 세팅이 되어있어도 부모 위젯이 먼저 막아버리기 때문에 자식 위젯의 visiblilty는 무시된다.

 

실제 자식위젯에 세팅이 어떻게 되어있든 상호작용이 필요없다면 이 세팅도 고려해보는 것이 좋다.

 

5. Not Hit - Testable (Self Only)

코드에서는 SelfHitTestInvisible로 세팅할 수 있다.

4번과 비슷하다. 눈에는 보이지만 응답을 하지 않는다. 4번과 다른점이 있다면 오로지 위젯 자기 자신만 세팅을 따른다. 자식 위젯에 Visible 세팅이 되어 있다면 그 위젯에는 응답이 갈 수 있다. 예를들어 버튼이 Horizontal Box에 들어있다고 해보자. 이때 Horizontal Box는 클릭이나 커서의 Hovered, pressed 같은 응답을 매번 전달할 필요가 없다면 Horizontal Box는 SelfHitTestInvisible( Not Hit -Testable ) 로, 자식 위젯인 Button은 Visible로 해두고 마우스 클릭을 받았을 때 버튼만 Reply를 보내면 되도록 세팅하는 것이다.

 

 

각 UI 상황에 맞춰 알맞은 Visibility 세팅을 하는 것은 중요하다. 이는 UI의 성능에도 영향을 준다. 참고로 위젯의 디폴트 세팅은 Visible로 되어있을 것이다. 귀찮지만 알맞게 변화를 해주자.