파트 1. VFX 기술 심층 요약

1. 영상 주제 및 학습 목표
- 주제는 Unreal Engine에서 UI 테두리의 무에서 유로 등장하는 흐르는 효과 구현으로, Photoshop(DS)에서 그라데이션 기반 테두리 텍스처를 생성한 후 Material 에디터에서 Mask와 수학 노드를 활용해 부드럽고 선명한 애니메이션을 만드는 과정이다. 구현 목적은 UI 요소의 동적 등장 효과를 통해 사용자 경험을 향상시키며, Scalar Parameter와 Timeline을 연동하여 실시간 제어 가능한 VFX를 실무 수준으로 제작하는 데 있다. 학습 목표는 텍스처 기반 Masking과 Material 내 수학 연산(Subtract, Floor 등)의 인과관계를 이해하여 딱딱하지 않고 그라데이션 테두리를 자유롭게 커스터마이징하는 역량을 습득하는 것이다.

2. 전체 제작 프로세스 상세 단계
- 단계 1: Photoshop에서 원형 모양 레이어 생성 후 크기 0.9로 스케일링하고 모서리 둥글기 적용, 반전(Invert)으로 테두리 형태화 후 크기 0.95~0.98로 미세 조정하여 내부 그라데이션 강조, 512x512 해상도로 UY 포맷 PNG 내보내기. 이는 Material Mask 채널로 활용될 R 채널 그라데이션을 최적화하기 위함이다.
- 단계 2: Unreal Engine UI 위젯에 텍스처 임포트 후 새로운 Material(M_WBP) 생성, User Interface > Translucent 블렌드 모드로 설정하고 Base Color에 텍스처 연결, Alpha 채널로 R 채널 추출하여 투명도 제어 기반 마련.
- 단계 3: Material 에디터에서 Time 노드를 Vector2로 분기 후 Mask(R 채널) 적용, Subtract 노드로 Nerf(0~1) 값을 빼서 그라데이션 압축, Floor 노드로 계단식 경계 생성, Saturate와 Ease Curve(-1~1)로 부드러운 전환과 선명한 Border 효과 강화, 최종 Multiply로 Alpha 곱셈하여 무->유 애니메이션 구현.
- 단계 4: Scalar Parameter 'alpha'(기본 0) 추가로 외부 제어 가능하게 하여 Widget의 Event Construct나 Blueprint Timeline과 연동.
- 단계 5: 사용자 컨트롤 위젯(WHP-UI) 생성 후 Canvas > Size Box(200x200) 구성, 이미지 컴포넌트에 Material 인스턴스 적용, 테스트 Blueprint(BPTest)에서 Timeline(길이 1, 키포인트 0->1, Smooth)으로 alpha 동적 업데이트, Event BeginPlay에서 Widget 생성 및 Viewport 추가로 실시간 재생 확인.
- 단계 6: 유->무 변형 시 Subtract 반전(1 - alpha)으로 간단 구현, 추가 Shader로 선명도 보강.

-------------------------

파트 2. 시간대별 주요 흐름 요약

- [00:00] 영상 시작과 UI 흐르는 효과(무->유 등장) 제작 방법 소개.
- [00:04] Photoshop(DS) 열고 UI 테두리 제작 시작.
- [00:15] 새로운 모양 생성 후 크기 0.9로 조정하여 테두리 기반 형성.
- [00:23] 모서리 둥글기 적용으로 UI 친화적 라운딩 처리.
- [00:43] 반전(Invert) 적용으로 내부 채우기에서 테두리 형태로 전환.
- [01:01] 크기 0.95~0.98로 세밀 조정하며 최적 테두리 두께 확보.
- [01:25] 512x512 UY 포맷으로 텍스처 내보내기 준비.
- [01:58] Unreal Engine UI로 텍스처 임포트.
- [02:15] Material(M_WBP) 생성, User Interface Translucent 설정으로 UI 블렌딩 최적화.
- [02:49] Base Color에 텍스처 연결, Alpha에 R 채널로 투명도 제어 구조화.
- [03:00] Time을 Vector2로 분기, Mask(R 채널)로 그라데이션 추출.
- [03:37] Subtract Nerf(0~1)로 그라데이션 압축하여 무->유 전환 기반 마련.
- [04:09] Debug Time 0~1 테스트로 딱딱한 애니메이션 확인.
- [04:26] Floor 노드 추가로 선명한 Border 경계 생성.
- [05:03] Saturate와 Ease Curve(-1~1)로 부드럽고 선명한 테두리 최적화.
- [05:58] 사용자 컨트롤 위젯(WHP-UI) 생성, Canvas와 Size Box(200x200)로 UI 구성.
- [07:25] Material 인스턴스 적용 후 그라데이션 부드러움 강조.
- [08:07] Scalar Parameter 'alpha'(기본 0)로 세밀 제어 파라미터화.
- [09:39] 테스트 Blueprint(BPTest)에 Timeline(Alpha, 길이 1, 키포인트 0->1, Smooth) 추가.
- [11:23] Event BeginPlay에서 Create Widget > Add to Viewport로 동적 실행.
- [13:11] 유->무 변형 시 Subtract 반전(1 - alpha)으로 간단 구현.
- [14:04] 전체 과정 마무리와 다음 편 예고.

-------------------------

파트 3. AI 기술 첨언 및 피드백

- 기술적 보완 제안: Material Performance를 위해 LOD(Texture LOD Group: UI) 설정 추가하고, Dynamic Material Instance를 사용해 런타임 재질 인스턴스화로 메모리 최적화. Timeline 대신 Curve Asset으로 복잡 곡선(Ease In/Out Cubic) 적용 시 더 자연스러운 모션 블러 효과 부여. 모바일 지원 시 MSAA 대신 Custom Depth Stencil 활용으로 Border 선명도 유지하면서 오버드로우 감소.
- 학습 포인트 피드백: Mask 채널(R 채널 그라데이션)과 수학 노드(Subtract + Floor)의 조합이 VFX의 핵심으로, 그라데이션 압축이 딱딱함을 유발하므로 Ease Curve 필수 습득. Scalar Parameter 연동이 실무 Blueprint 통합의 기반이니, 이를 통해 Parameter Collection으로 다중 UI 동시 제어 연습 집중.

-------------------------

파트 4. 핵심 기술 용어 및 파라미터 사전

- 주요 기술 용어 해설

1. Mask 노드 - 텍스처의 특정 채널(R,G,B,A)을 선택적으로 추출하는 노드로, 영상에서 R 채널의 그라데이션을 Alpha로 활용해 테두리 영역만 불투명하게 하여 내부를 투명하게 만드는 역할을 한다. 이는 Vector2 분기 후 채널 분리가 그라데이션 기반 애니메이션의 인과적 출발점이다.

2. Subtract 노드 - 두 값을 빼는 수학 연산자로, Nerf(0~1)를 Time에서 빼서 그라데이션을 압축/이동시켜 무->유 전환을 유발한다. Floor와 결합 시 경계가 선명해지며, 반전(1 - 값)으로 유->무 구현 가능.

3. Floor 노드 - 입력 값을 하향 정수로 반올림하는 노드로, 그라데이션의 연속 값을 계단식으로 변환해 딱딱한 Border를 생성한다. Saturate와 Ease Curve가 후속 보간으로 부드러움을 더하는 인과관계를 형성.

4. Scalar Parameter - Material 내 재질 속성을 동적으로 제어하는 파라미터로, 'alpha' 이름으로 Timeline과 연동되어 외부 Blueprint에서 실시간 애니메이션 값을 주입한다. 기본값 0으로 초기 투명 상태 유지.

5. Timeline 노드 - Blueprint 내 키프레임 기반 애니메이션 도구로, Alpha 곡선(0->1, Smooth)을 Update 핀으로 Scalar Parameter에 연결해 Material 변화를 구동한다.

- 파라미터 수치 설정 이유

1. 크기 0.9 (Photoshop 모양 스케일) - 원형을 약간 축소하여 테두리 폭을 여유롭게 확보하고, 후속 0.95~0.98 조정 시 내부 그라데이션이 R 채널 Mask에 최적화되어 Material에서 균일한 Border 두께를 유지하기 위함. 과도한 1.0은 그라데이션 블리딩으로 애니메이션 왜곡 유발.

2. Nerf 0~1 (Subtract 입력) - Time(0~1)을 빼서 그라데이션 시작점을 지연/압축, 0일 때 완전 투명(무), 1일 때 완전 불투명(유)으로 전환 속도 제어. Floor 전 압축 없이는 부드러운 전환이 아닌 퍼짐 현상 발생.

3. Ease Curve -1~1 - 선형 Time을 비선형으로 보간하여 현실적 가속/감속 모션 적용, Floor의 딱딱함을 완화하고 시각적 선명도(Border)를 극대화. -1(느린 시작) ~1(빠른 끝)으로 UI 등장의 자연스러운 '팝업' 느낌 강조.

4. Timeline 길이 1, 키포인트 0->1 (Smooth) - 1초 재생으로 표준 UI 애니 속도 맞춤, Smooth(1키)로 베지어 곡선 자동화하여 수동 키프레임 없이 프로페셔널 전환 구현. Update 핀 연결로 프레임당 실시간 Material 갱신.

 

 

 

 



 

 

 

 

에반 언리얼5 이펙트 그룹과정[26년초 시작] : https://cafe.naver.com/unrealfx/20727

KUPAFX Stylized 유니티 이펙트 취업과정 : https://cafe.naver.com/unrealfx/21249

트리키 언리얼+후디니 활용 게임 VFX 연출과정 : https://cafe.naver.com/unrealfx/25629

 

max님의 쌩기초 메쉬활용 이펙트과정 1달특강 : https://cafe.naver.com/unrealfx/24469

eVan텍스쳐 단품과정 : https://cafe.naver.com/unrealfx/24468

rak 유니티 UI연출이펙트 : https://gamefx.co.kr/bbs/page.php?hid=Rak_intro