[Unreal Engine] UMG에서 긴 텍스트가 영역을 벗어나지 않게 만들기(Scale Box + Text)

음... 4글자일 땐 분명 맞았는데, 단어가 길어지니 다 삐져나온다...

UMG로 UI를 만들다 보면 예상보다 긴 텍스트가 들어와 테두리 밖으로 튀어나오는 경우가 있다. 특히 번역을 적용하면 언어마다 문자열 길이가 달라지기 때문에 이런 문제가 더 자주 발생한다.

아쉽게도 UMG의 Text 위젯에는 CSS의 max-width처럼 최대 너비를 직접 지정하는 옵션이 없다. 이럴 때는 Scale Box와 텍스트 줄 바꿈 옵션을 함께 활용할 수 있다.

1. Text 위젯을 Scale Box로 감싼다.
2. Scale Box의 Stretch를 Scale To Fit으로 설정한다.
3. Stretch Direction을 Down Only로 설정한다.
4. Text 위젯의 Wrap Text At에 줄바꿈 기준 너비를 입력한다.

 

오늘 수정해볼 UI 텍스트.

우선 이렇게 Scale Box로 Text 위젯을 감싸준다.

이렇게 단독으로 있는 텍스트를

Scale Box로 감싸준다.

 텍스트의 부모에 Scale Box가 들어가는 게 포인트.

Scale Box는 콘텐츠 크기에 맞게 크기가 변경되도록 해준다. 그러려면 Scale Box에서 Stretch 값과 Alignment 부분을 고쳐줘야 한다.

Stretching -> Stretch를 Scale to Fit으로 바꿔준다.

Stretch에서 Scale to Fit으로 바꿔주면 콘텐츠를 균일하게 늘려준다. 글자가 포함된 경우 폰트 때문에라도 균일하게 늘려야 하니, 보통은 이게 제일 적절한 거 같다.

필요하다면 Horizontal, Vertical Alignment를 Fill로 설정해주자.

그리고 필요하다면 Alignment도 Fill로 설정해서 영역에 맞게 글자를 최대한 늘려준다.

그런데 이렇게만 하면 글자가 원치 않게 커지기도 한다. 원래 사이즈보다 더 늘리고 싶지 않은 경우도 있기 마련이다(그리고 대부분은 늘리고 싶지 않은 경우에 해당한다).

이렇게 꽉 채울 생각은 없었다..(Stretch Direction = Both)

그 경우에 Stretch Direction을 Down Only로 설정한다.

Down Only는 콘텐츠가 주어진 영역보다 클 때만 축소하고, 여유 공간이 있다고 해서 원래 크기보다 확대하지 않도록 제한한다. 여기에 Wrap Text At을 적용하면 긴 문장은 지정한 너비를 기준으로 줄 바꿈 되고, 줄 바꿈 이후에도 영역을 넘는 경우 Scale Box가 전체 텍스트를 축소한다.

이 방식을 사용하면 테두리 안쪽에 패딩이 들어가거나 번역으로 텍스트가 길어지는 상황에서도 비교적 안정적으로 대응할 수 있다.

딱 예쁘게 줄어들었다.

꽤나 깔끔하게 맞춰졌다.

다만 지나치게 긴 텍스트는 글자가 너무 작아질 수 있으므로, 최소 가독성을 보장해야 하는 UI라면 문구 길이를 제한하거나 Scroll Box를 사용하는 방법도 함께 고려하는 것이 좋다.

참고: UMG: Scale Box and Wrap Text – Epic Developer Community Forums