프로젝트에 커스텀 UI 머티리얼을 만드는 방법은 2가지가 있습니다.
머티리얼 컬렉션(Material Collection): 머티리얼 내 모든 UI 기능이 사전 구축된 머티리얼의 집합입니다.
커스텀 부모 머티리얼(Custom Parent Material): 머티리얼 함수를 사용해 처음부터 제작된 머티리얼입니다.
머티리얼 컬렉션
머티리얼은 높은 수준의 커스터마이징이 가능한 일련의 미터 머티리얼 및 텍스처입니다. 머티리얼 컬렉션은 콘텐츠 브라우저(Content Browser)의 포트나이트 > UI > 머티리얼(Materials)에서 찾을 수 있습니다. 머티리얼은 두 가지 유형으로 나뉩니다.
미터 머티리얼(Meter Materials): 대개 프로그레스 바에 사용됩니다.
텍스처(Textures): 대개 아이콘 및 플레이어 초상화에 사용됩니다.
material_collection_device에는 텍스처와 머티리얼을 표시하기 위해 Verse와 머티리얼 컬렉션을 사용하는 예시와, 머티리얼 인스턴스의 파라미터를 사용해 게임 내 피해 이벤트 발생 시 동적으로 UI 머티리얼을 변경하는 방법 예시가 나와 있습니다.
커스텀 부모 머티리얼
UMG 이미지 위젯에 커스텀 부모 머티리얼을 생성하려면 메인 머티리얼 노드(Main Material Node)의 머티리얼 도메인(Material Domain)을 유저 인터페이스(User Interface)로 설정해야 합니다. 이 부모 머티리얼은 머티리얼 함수를 활용해 머티리얼을 더 동적으로 만들어 줍니다.
부모 머티리얼을 효율적으로 재사용하고 머티리얼 파라미터를 커스터마이징할 수 있는 사용자 친화적 인터페이스를 제공하기 위해, 머티리얼은 머티리얼 인스턴스로 변환됩니다. 그런 다음 머티리얼 파라미터는 바인딩된 UMG 위젯 프로퍼티를 통해 UI에서 업데이트됩니다.
변환 후 부모 머티리얼에 적용되는 변경사항은 모든 머티리얼 인스턴스에 전파됩니다.
콘텐츠 브라우저(Content Browser)에서 UI > Devices > HUD Controller > MaterialInstances 폴더를 엽니다. 섬네일을 더블클릭하여 MI_HCD01_ShieldBar로 명명된 보호막 바 머티리얼을 찾아서 엽니다. 그러면 머티리얼 인스턴스 에디터에서 머티리얼 인스턴스가 열립니다.
이전 섹션인 장치 파라미터 설정하기에서, 플레이어가 보호막 피해를 받거나 보호막을 복구할 때 머티리얼 인스턴스의 진행률(Progress) 프로퍼티를 사용하여 HUD의 보호막 바를 업데이트한 방법을 설명했습니다. 이는 HUD 컨트롤러의 플레이어 정보를 사용하여 플레이어 정보에 따라 바를 어느 쪽으로 움직일지 머티리얼 인스턴스에 전달함으로써 보호막의 변화를 반영한 것이었습니다.
머티리얼
머티리얼 인스턴스가 장치의 기능을 수신할 수 있는 이유는 부모 머티리얼에 파라미터가 구성되어 있기 때문입니다. 유저 인터페이스 머티리얼은 머티리얼 함수를 사용하여 머티리얼 내에 시간에 따른 효과나 패턴을 생성하고, 머티리얼 인스턴스를 통해 HUD에서 플레이어 정보를 업데이트하는 데 이를 활용합니다.
이 템플릿은 UI Material Lab 프로젝트와 동일한 머티리얼 함수를 사용합니다. 다양한 머티리얼 함수의 종류와 사용 방법을 자세히 이해하려면 UI Material Lab 프로젝트의 머티리얼 함수 세부 정보 페이지를 확인하세요.
아래 표에는 프로젝트를 위해 생성된 다양한 머티리얼과 그 사용 방법이 대략적으로 설명되어 있습니다.
| 프로젝트 머티리얼 목록 | 사용 |
|---|---|
M_DropShadow | 셰이프 아래 표시되는 드롭 섀도를 생성합니다. 사각형, 원, 육각형 또는 커스텀 셰이프(텍스처 사용)가 허용됩니다. 커스텀 셰이프의 경우 섀도를 부드럽게 할 수 없습니다. |
M_IconWithbackground | 배경과 윤곽선이 있는 아이콘을 생성합니다. |
M_Meter | 스킬 판정 상호작용 장치에 간단한 바 미터를 생성합니다. |
M_Notches | 균등한 간격의 장식 눈금을 생성합니다. M_Meter와 함께 사용하여 스킬 판정 상호작용 장치에 눈금이 있는 바 미터를 생성합니다. |
M_ProgressBar_Basic | 모서리가 둥글거나 뾰족하며, 그레이디언트로 채워지고 윤곽선이 있는 프로그레스 바를 생성합니다. |
M_ProgressBar_Orb | 진행률에 따라 채워지는 구체 형태의 프로그레스 바를 생성합니다. 구체 중앙에는 아이콘 텍스처가 배치됩니다. |
M_Texture_Complex | 커스텀 텍스처를 스케일링하거나 워핑할 수 있습니다. 예를 들어, 반짝이는 이펙트나 수중 이펙트를 구현하는 데 사용할 수 있습니다. |
M_Texture_SImple | 단순한 텍스처에 컬러를 지정할 수 있습니다. 단순 흑백 텍스처나 채널 패킹 텍스처(RGB 채널 사용)와 함께 사용할 수 있습니다. |
M_Wave | 위로 거품이 떠오르는 물결을 생성합니다. |
파라미터 그룹
템플릿의 다양한 머티리얼 인스턴스를 열면 파라미터 그룹 목록에 나와 있는 다양한 파라미터를 볼 수 있습니다. 이는 머티리얼 함수에서 편집 가능한 파라미터로, 장치에 바인딩하고 HUD에서 업데이트할 수 있습니다.
파라미터 그룹은 체크 표시된 경우에만 머티리얼 인스턴스 에디터에서 편집할 수 있습니다.
머티리얼 인스턴스 에디터에서 파라미터를 편집하려면 콘텐츠 브라우저에서 UI > Devices > SkilledInteraction > MaterialInstances 폴더를 연 다음 MI_SID03_Water 머티리얼 인스턴스를 찾아서 엽니다.
리퀴드 컬러 1(Liquid Color 1) 및 리퀴드 컬러 2(Liquid Color 2)의 파라미터를 더블클릭하여 물 색상을 변경하는 것부터 시작합니다. 이렇게 하면 색상환이 열립니다. 물 색상을 다른 색상으로 변경합니다. 아래 예시에서는 물 색상을 파란색에서 녹색으로 변경했습니다.
거품을 자세히 보면, 머티리얼 인스턴스 에디터 창을 선택해 둔 경우, 머티리얼에서 거품이 위로 떠오르는 모습이 보일 것입니다. 크기 파라미터인 BubblesStartSize 및 BubblesMiddleSize를 활성화하여 거품 크기를 변경한 다음 파라미터를 편집할 수 있습니다. 파라미터 크기가 너무 크면 거품이 벽 뒤로 사라지는 것처럼 보입니다.
이러한 파라미터는 뷰 바인딩에서 설정할 수 있으며 장치 기능에서 플레이어 정보를 업데이트하는 데 사용할 수 있습니다.
자신의 프로젝트에서 사용하려면 머티리얼 인스턴스와 텍스처 에셋을 마이그레이션하세요.
텍스처
텍스처는 UI에 머티리얼 자체만으로는 불가능한 디테일을 더하고 다듬기 위해 사용됩니다. UI 디자인에 텍스처를 사용하기로 결정한 경우 텍스처가 메모리 집약적이라는 점을 인지하고 있어야 합니다.
아래 스킬 판정 상호작용 텍스처와 텍스처 및 머티리얼이 결합된 샘플을 보면, UI의 얼마나 많은 부분이 텍스처로 만들어졌는지 알 수 있습니다. 텍스처 샘플에서 백플레이트(Backplate) 위젯을 끄면 UI에서 표시된 상태로 남는 것은 메시지, 체력 바, 처치 카운터뿐입니다.
백플레이트에서 스타일라이즈드 박스의 룩을 만들 때 선호되는 방법은 텍스처를 사용하는 것입니다. 디자인과 셰이프가 복잡해 UMG로 재현하기 어렵기 때문입니다. UI 머티리얼은 기본 프리미티브 셰이프를 생성하고, 머티리얼 셰이프 주변에 스트로크를 생성하고, 머티리얼 셰이프 및 스트로크에 그레이디언트를 추가하는 데만 사용할 수 있습니다.
머티리얼 및 텍스처로 만든 UI 샘플을 보면 블렌딩 텍스처와 머티리얼이 UI의 다듬어진 룩을 어떻게 만들어 주는지 알 수 있습니다. 이 UI는 백플레이트 디자인과 크리처 이미지를 구성하는 세 개의 텍스처로 만들어졌습니다.
크리처 그림은 이미지 위젯 위에 레이어링됩니다. 이미지 위젯은 머티리얼 인스턴스를 사용하지 않으며, 대신 브러시 옵션이 크리처 이미지 아래의 레이어에 흰색 사각형을 생성합니다. 사각형의 크기와 치수는 디테일(Details) 패널에서 이미지 크기(Image Size) 옵션을 사용하여 제어합니다.
계층구조(Hierarchy) 패널에서 목록에서 앞에 있는 위젯일수록 백그라운드 레이어에 배치되며, 이후에 추가되는 위젯들은 목록의 앞선 위젯 위에 차례대로 쌓이게 됩니다.
머티리얼 인스턴스는 디자인의 크리처 사진에 적용된 드롭 섀도로 사용됩니다.
SDF 텍스처
부호화된 디스턴스 필드(Signed Distance Field, SDF)는 위치를 입력으로 사용하고 해당 위치로부터 거리를 출력하는 함수입니다. 예를 들어, 아래 이미지에서 방사상의 중심은 1이며, 완전히 흰색임을 의미합니다. 가장자리로 이동할수록 0에 가까워지며 완전한 검은색이 됩니다. 이 개념을 활용하여, SDF는 0~1 내에서 값 범위를 지정해 이펙트를 적용할 수 있는 방법을 제공합니다.
따라서 다음 작업을 수행할 수 있습니다.
0.5~1.0 사이의 값을 가져와 단색을 적용합니다.
0.49~0.0 사이의 값을 가져와 글로우를 모방한 페이드 컬러를 적용합니다.
노멀 텍스처는 1(흰색) 또는 0(검은색)이므로 이러한 작업을 수행하지 않지만, SDF는 0~1 사이의 모든 해당 데이터를 제공합니다.
이러한 개념을 사진 촬영에도 똑같이 적용할 수 있습니다. 사진이 .png 파일로 저장되어 있으며 적용된 이펙트가 있지만 이미지에 컬러 및 라이팅 디테일이 전체 범위로 포함되어 있지 않은 경우, 이미지를 더 밝거나 어둡게 편집하면 이미지의 디테일이 손실되거나 날아갈 수 있기 때문에 커스터마이징의 여지가 적습니다.
동일한 해당 이미지를 DSLR 카메라로 촬영했다면 raw 파일에 모든 컬러 및 라이팅 정보가 포함되어 있으므로, 보다 세밀한 수준까지 커스터마이징 작업을 할 수 있습니다. 예를 들어 어두운 영역의 디테일 손실 없이 해당 부분을 밝게 만들 수 있으며, 그 반대도 마찬가지입니다.
UI > Texture > SDF 폴더를 보면 자신만의 독특한 UI를 만들기 위한 SDF 텍스처의 전체 프리뷰를 확인할 수 있습니다.
Icons 폴더에는 SDF 아이콘이 풍부하게 포함되어 있습니다.
머티리얼의 SDF 텍스처
대부분의 UI 머티리얼은 2D 머티리얼의 외부와 중앙을 정의하기 위해 바이너리 값 0과 1을 사용하는 평면 2D 머티리얼입니다. SDF 텍스처가 Texture Sample 노드에서 사용되고 SDF 머티리얼 함수와 페어링된 경우, UI 머티리얼의 일부 값을 조작하여 UI를 미세조정할 수 있습니다.
SDF 텍스처 및 머티리얼 노드를 사용하여 UI 머티리얼에서 여러 값을 변경하면, 다음과 같은 다양한 이펙트가 생성됩니다.
섀도
블러
글로우
반짝임
외곽선
애니메이션
스케일 조절
일반적인 에셋은 스케일을 확대하거나 축소하면 퀄리티가 저하되는 반면, SDF 텍스처는 퀄리티 저하 없이 손쉽게 스케일을 확대할 수 있으므로, UI 머티리얼을 더 동적이면서도 독특하게 만들어 줍니다. SDF 텍스처는 향상된 최적화를 통해 텍스처 1개만 사용하여 모든 이펙트를 손쉽게 작업하므로 머티리얼 그래프를 더 깔끔하게 생성할 수 있습니다.
반면, 일반적인 흑백 텍스처는 머티리얼 그래프에서 쉽게 조작할 수 없으므로 여러 개의 텍스처를 사용하게 됩니다. 위 이미지에서 텍스처에 글로우를 추가하는 가장 간단한 방법은 비슷한 결과를 얻기 위해 장황한 머티리얼 그래프를 생성하는 대신, 방사상 그레이디언트 위에 텍스처를 레이어링하는 것입니다.
Smooth Step 머티리얼 노드
스텝 타입 머티리얼 노드는 일반적으로 머티리얼에서 급격한 변화를 만들어 내는데, 예를 들어 0에서 0.25로 바로 변경되는 식입니다. 반면 Smooth Step 노드는 SDF 함수를 사용하여 UI 머티리얼에서 부드러운 전환을 구현합니다. SDF 텍스처를 사용하는 템플릿의 UI 머티리얼은 Smooth Step 머티리얼 노드를 사용하여 머티리얼 중앙에서 외부 가장자리로 부드러운 전환을 구현합니다.
정리
다음은 UI 에셋에 머티리얼 및 텍스처를 사용할 때 기억해야 할 몇 가지 핵심 요점입니다.
머티리얼 함수를 사용하면 사전 정의된 머티리얼 노드로 작업 시간을 줄일 수 있는데, 이러한 노드는 게임 내 이벤트에 반응하는 체력 및 보호막 바 머티리얼과 백플레이트 UI 머티리얼의 함수를 참조합니다.
SDF 머티리얼 및 텍스처는 더 동적인 느낌의 UI를 만듭니다.
이미지 위젯의 레이어링 방식을 이해하면 기본적인 UI에 비해 시각적으로 보다 흥미로운 차별화된 UI를 만들 수 있습니다.
텍스처는 머티리얼만으로 구현할 수 없는 시각적으로 복잡한 디자인 요소에 사용해야 합니다.