언리얼 엔진에서 더 디비전 스타일 UI 재현 해보기 - 3D 위젯

 

서론

더 디비전의 UI하면 가장 먼저 떠오르는 요소 세 가지를 뽑자면 다음과 같을 것 이다.

1. 주황 계열 강조색
2. 3D 공간감을 활용한 UI 설계 및 디자인 (Spatial UI)
3. 블러 처리된 반투명 한 UI 백그라운드

오늘은 이 중에서도 언리얼에서 블러 처리된 반투명한 백그라운드를 가진 UI를 제작하기 위한 몇 가지 시도와 최종적으로 그럴 듯 하게 나온 결과물과 그 방법에 대해 간단하게 정리하고자 한다.

 

배경 블러 위젯과 위젯 컴포넌트

 가장 먼저 떠올려 볼 수 있는 것은 User Widget 중에서도 배경 블러 위젯을 사용하여 블러 효과를 가진 배경위에 다른 위젯을 배치한 다음. 이렇게 만들어진 최종 위젯 블루프린트를 위젯 컴포넌트에 설정하여 최종적으로 3D 공간 상에서 원하는 효과를 얻고자 하였다.

 하지만 이 방식은 실현 불가능 하였다. 제공되는 배경 블러 위젯은 오직 2D 기반의 UI, 즉 Viewport에 추가되어 사용되는 경우(HUD)에만 제대로 작동하기 때문이다.

 

배경 블러와 컨텐츠를 분리 하기

 기본적으로 제공되는 위젯은 3D 위젯으로 사용 할 수 없으니, 컨텐츠를 표시할 3D 위젯과 배경 블러를 나타낼 물체를 표현 할 장면 컴포넌트로 나눠서 이들을 하나의 액터로 써 제공하고자 하였다.

 3D 위젯은 이미 앞서 액터에 위젯 컴포넌트를 추가하여 만들어 낼 수 있음을 확인하였다. 사실 배경 블러를 만들어낼 물체를 만들어 내는 것도 굉장히 간단하다. 그저 평면 메쉬와 메쉬가 차지하는 화면 영역에 해당하는 Scene Texture를 읽어서 블러를 적용한 결과를 최종 렌더링 결과물로 사용하면 된다.

 머테리얼을 새로 생성하고, 블렌드 모드를 Translucent로 설정하고 언리얼에서 제공해주는 SpiralBlur-ScreenTexture 노드를 사용하면 간단하게 블러 효과를 줄 머테리얼을 만들어 낼 수 있다. 블렌드 모드가 Translucent 이기 때문에, 모든 불투명 물체들이 그려진 이후의 Scene Texture를 대상으로 블러 효과를 계산한다.

 

색 번짐 문제의 발생 원인과 해결 방법

이렇게 만들어낸 결과물을 보면 벌써 꽤 그럴 듯 해보인다! 하지만 자세히 보면 문제점이 있는데. 바로 블러 평면위에 위젯 컨텐츠들의 색들이 번져있는 것 처럼 보이기 때문이다.

 이는 3D 위젯을 렌더링 할 때 쓰이는 머테리얼이 불투명(Opaque) 블렌드 모드를 통해 렌더링 되기 때문이다. 즉 위젯 컴포넌트의 내용이 먼저 렌더 타겟에 기록되고, 그 다음 블러 배경의 렌더링이 시작되며 이 과정에서 SpiralBlur를 통해 읽어오는 원본 Scene Texture에는 이미 위젯 컨텐츠가 포함되어 있기 때문에 마치 내용물이 번져있는 것 처럼 보이는 것 이다.

 추가로 블렌드 모드가 Opaque인 만큼, 위젯에 있던 반투명 위젯들은 렌더링되지 않게 된다. 

 다행히, 이 문제들도 위젯 컴포넌트에서 블렌드 모드를 'Transparent'로 지정하면 해결이 된다.

 드디어! 우리가 원하는 느낌의 Spatial UI를 만들어 낼 수 있었다. 사진으로만 보면 모든게 완벽해 보인다. 사진으로 만 본다면.. 안타깝게도 게임은 정지 화면이 아닌 다이나믹하고 인터랙티브한 어플리케이션이다. 그런데 지금 상태에서는 카메라를 움직여보면 아티팩트가 바로 눈에 뛰게 된다.

  자세히 보면 3D 위젯들의 컨텐츠들이 캐릭터를 움직일 때 마다 자글거리는 것을 알 수 있다. 그 이유는 바로 Widget Component의 Transparent 블렌드 모드를 사용할 때 선택되는 기본 머테리얼이, 이 머테리얼을 사용해서 렌더링 되는 오브젝트들에 대해서 TAA(또는 그 파생 안티 앨리어싱 알고리즘)에 필요한 모션 벡터를 기록하지 않기 때문이다.

 

스테레오 레이어를 통한 해결 시도

 가장 첫 번째로 시도해봤던 방법은 VR에서의 양안 UI 렌더링을 위해 사용되는 스테레오 레이어(Stereo Layer)를 활용하는 것 이였다. 스테레오 레이어를 사용하면 월드 공간상의 특정 위치에 UI 요소를 고정시킬 수 있으며, 위젯의 렌더링 결과물로 나오는 렌더 타겟을 '포스트 프로세싱'과 '안티 앨리어싱'의 영향을 받지 않은채로 화면에 렌더링 되도록 할 수 있었기 때문이다. 다만.. VR 환경이 아닌 일반적인 데스크탑 환경에서는 사용 할 수가 없다.

 

커스텀 머테리얼을 사용한 해결 시도

 다행히도 머테리얼 프로퍼티 중 반투명 머테리얼로 렌더링 되는 물체들의 모션 벡터를 기록하도록 하는 플래그가 있었다. 

결과적으로 (엔진 콘텐츠에 속한)원본 머테리얼을 복제하여 해당 플래그를 활성화 한 다음, 위젯 컴포넌트에 설정 해주었고 최종 결과물은 아래와 같다.

 아직 작은 물체들은 앨리어싱 문제들이 눈에 띄긴하지만, 직전 상태에 비하면 아주 양호하고 결과적으로 그럴 듯 하게 만들어졌다고 생각한다.

 

한계점 및 개선 아이디어

 이런 방식의 구현에는 명확한 한계점이 존재한다. 바로 큰 틀안에 포함된 하나하나의 위젯들에 부분적인 블러 배경을 적용하기 어렵단 점 이다. 즉 아래 사진과 같은 UI를 개발하기에는 무리가 있다는 의미이다.

 결국 이런 스타일의 UI를 만들어내기 위해선, 기본 위젯들과 그 위젯 중 하나인 백그라운드 블러 위젯을 조합하고 전체적인 레이아웃 구성을 만들어야만 할 것 이다. 그래서 다음으로 시도해보고자 하는 방식은 리테이너 박스를 사용하여 UI에 일종의 포스트 프로세싱을 적용하는 방법을 생각하고 있다.

 이 방식을 성공적으로 부여하면 이 글에서 만든 3D 위젯보다 HUD UI에서 사용하기 좋으며 더 유연하게 사용 할 수 있을 것 이라 생각한다.