언리얼 엔진 Rich Text Block Gradient 글꼴 적용 - Font Material과 Widget 애니메이션 정리

UI의 분위기를 바꾸는 가장 쉬운 방법 중 하나는 텍스트 스타일과 등장 연출을 함께 손보는 것이다.
특히 일반 텍스트보다 Gradient가 들어간 글꼴은 시선을 더 잘 끌고, 여기에 위젯 애니메이션까지 더해지면 화면 전체의 완성도가 훨씬 올라간다.

이번에는 Rich Text Block에서 사용할 글꼴에 Gradient 효과를 적용하기 위해 Font Material을 만들고, 추가로 해당 Widget에 등장과 퇴장 애니메이션까지 넣어 연출을 정리한 과정을 기록해보려고 한다.

이번 작업은 크게 두 단계로 나뉜다.

• Font Material을 만들어 Rich Text Block에 Gradient 텍스트 적용
• 완성된 Widget에 애니메이션을 넣어 더 자연스럽게 등장하고 사라지도록 구성

먼저 Material 그래프를 만들고, 그 Material을 Data Table Row에 연결한 뒤, 실제 Rich Text Block 결과를 확인하고, 마지막에는 Widget 애니메이션 타임라인과 최종 연출 결과를 보여주는 구조다.

 

1. Font Material을 만들어 Gradient 텍스트 적용하기

먼저 Rich Text Block에 사용할 글꼴에 Gradient 효과를 주기 위해 Font Material을 만들었다.

방법은 일반적인 Material을 만드는 것과 비슷하지만, UI 텍스트에 적용해야 하므로 아래 두 설정을 먼저 맞춰줘야 한다.

• Material Domain = User Interface
• Blend Mode = Translucent

일반 3D 오브젝트용 Material이 아니라, UI 텍스트에 적용 가능한 Material을 만들어준 것이다.

 

2. Rich Text Block에 사용할 Data Table Row에 Font Material 연결

Gradient Material을 만들었다면, 다음으로는 Rich Text Block에서 이 Material을 실제로 사용할 수 있도록 연결해줘야 한다.

이를 위해 Rich Text Block에 적용 중인 Data Table로 들어가서, 새로운 Row Name을 하나 만든 뒤 그 Row의 Font Material 슬롯에 방금 만든 Material을 할당해주면 된다.

 

3. Rich Text Block에서 태그로 Gradient 스타일 적용

이제 실제 텍스트에서는 방금 만든 Row Name을 태그처럼 사용하면 된다.

예를 들어 Row Name을 gradient로 만들었다면, WBP의 텍스트 입력창에는 아래처럼 작성해주면 된다.

<gradient>원하는 텍스트</>

이렇게 하면 해당 구간 텍스트에만 Gradient 스타일이 적용된다.

이 방식의 장점은 명확하다.

• 같은 Rich Text Block 안에서도 특정 구간만 따로 강조 가능
• 스타일을 바꾸더라도 Data Table 쪽만 수정하면 됨
• 텍스트 연출을 코드가 아니라 데이터와 태그 기반으로 관리 가능

즉, 한 번 구조를 만들어두면 이후에는 텍스트를 작성할 때 태그만 붙여서 재사용할 수 있다.

 

4. Widget에 애니메이션 효과 추가

Gradient 텍스트만 적용해도 시각적으로는 좋아지지만, 이번에는 여기서 한 걸음 더 나아가 완성된 Widget 자체에 애니메이션까지 넣었다.

이번 애니메이션 구성은 아래처럼 정리할 수 있다.

• 양쪽 Sidebar는 Opacity와 위치값을 함께 조절
• 나머지 요소들은 Opacity 중심으로 등장/퇴장 처리
• 텍스트는 배경보다 0.25초 늦게 등장
• 텍스트는 배경보다 0.25초 빨리 사라짐
• 마지막에는 Sidebar가 배경이 사라진 뒤 0.25초 후 닫히며 마무리

즉, 모든 요소를 한 번에 같이 띄우는 것이 아니라, 배경 → 텍스트 → Sidebar 정리 순서로 시간차를 주어 좀 더 자연스럽게 보이도록 만들었다.

 

이번 작업에서는 Rich Text Block에 사용할 글꼴에 Font Material을 적용해 Gradient 효과를 넣고, 추가로 Widget 전체에 애니메이션을 구성해 화면 연출을 더 자연스럽게 다듬어보았다.

정리하면 핵심은 아래와 같다.

• User Interface 도메인의 Material을 만들어 Gradient Font Material 구성
• Rich Text Block용 Data Table Row에 Material 연결
• 태그 문법으로 원하는 텍스트에만 스타일 적용
• Widget 요소별로 시간차를 둔 애니메이션 추가