Unreal Motion Graphics, UMG 로 UI 요소 실험 및 제작을 하다 보면, 지금 하고 있는 방법이 가장 효율적인 방법인지 궁금할 수가 있습니다. 프로젝트의 범위에 따라 크게 달라질 수는 있지만, 여기서는 UI 구성시 고려해야 할 것들 몇 가지를 개괄적으로 다뤄보도록 하겠습니다.
예를 들어 자주 바뀌는 변수가 몇 들어있는 단순한 UI 화면을 만드는 경우, 프로퍼티 바인딩 을 통해 그러한 변화를 구동시키는 것이 좋을 것입니다. 하지만 특정 시간에 변화하는 프로퍼티가 여럿 있는 좀 더 복잡한 UI 화면의 경우, 이벤트 기반 로직을 사용해서 변화를 구동시키는 것이, 매 프레임마다 변했는지 검사하는 것보다 나을 것입니다.
참고로 UMG 로 콘텐츠를 제작할 때는 옳고 그름이라는 것이 없으니 주어진 상황에 가장 잘 맞는 대로 하셔도 될 것입니다. 이를 전제로, 여기서는 콘텐츠 제작시 고려한 뒤 구현할지 말지를 결정할 수 있는 것들에 대해 다뤄보도록 하겠습니다.
목표 해상도 & 스케일
UMG 로 콘텐츠를 제작할 때는, 목표 해상도를 정하고 모든 위젯을 그 해상도에 맞춰 제작합니다. 예를 들어 목표가 1080x1920 인 경우, UMG 안에서 이 해상도를 사용하여 각각의 위젯 블루프린트를 제작합니다. 작업 화면 크기는 ScreenSize 드롭다운 메뉴에서 설정할 수 있습니다.
다른 화면 크기에서 어때 보일지 미리보는 것은 괜찮습니다만, 다른 화면 크기로 작업을 했다가 스케일을 조절하면 어떤 것은 나타나고 어떤 것은 나타나지 않는 문제가 생길 수 있으니 피하시기 바랍니다. 스케일 관련해서 말씀드리자면, UMG 안에서 콘텐츠를 제작할 때마다, 가급적 DPI Scale 1.0 으로 제작하시기 바랍니다.
현재 화면 크기와 스케일은 그래프 하단의 디자이너 탭에서 확인할 수 있습니다.
이렇게 하면 제작하는 모든 것이 같은 스케일로 나타나도록 해 줄 뿐만 아니라, 모든 위젯 블루프린트에 통합된 스케일이 적용되어 있으면 상위/하위 화면 크기로 스케일을 조절해도 원만하게 돌아갈 것입니다. 다른 화면 크기 작업시와 마찬가지로, 어떤 위젯 블루프린트는 이런 스케일로 만들고 어떤 것은 저런 스케일로 만든 뒤 화면 크기를 달리 하면 원하는 결과가 나오지 않을 것입니다.
UMG 용 아트 제작
목표 해상도 & 스케일 설정은 중요한 작업으로, 그 이후에야 UMG 용 아트 애셋 제작을 시작할 수 있습니다. 염두에 둔 특정 해상도나 스케일 없이 애셋을 제작하는 경우, 텍스처가 필요한 것보다 크거나 작을 수 있습니다. 그러한 경우가 발생하면 애셋이 UI 에 맞도록 만들어 줘야 하는데, 그 과정에서 텍스처가 늘어나거나 왜곡되어 원하지 않는 결과가 날 수 있습니다.
텍스처의 경우, 임포트된 텍스처의 패딩 적용량을 최소화시키도록 노력해 보세요.
이 텍스처 주변에는 패딩이 꽤나 있어서, 창 프레임의 실제 크기를 구하기가 어렵습니다.
UI 화면에서 위 텍스처 사용시, 다른 화면 크기로 스케일을 조정하려 하는 경우, 스케일은 창 프레임이 아닌 텍스처 크기를 기반으로 합니다. 오브젝트 주변에 패딩을 댈 필요가 있다면, UMG 안에서 패딩 옵션을 통해 넣어주는 것이 좋은데, 그래야 스케일 조정을 할 때 올바른 스케일로 나타납니다.
이 이미지 관련 또다른 문제점은 아트 제작 방식에도 있습니다. 이 텍스처는 아트 단 한 조각이 아닌 여러 조각으로 나뉘어 있을 수도 있습니다 (나무 프레임은 구석에서도 별도이고 배경에서도 별도입니다).
구석과 나무 패널은 별도의 텍스처라 자체 결함때문에 텍스처 타일링이 힘듭니다.
이상적으로 구석과 나무 패널은 이미지를 늘일 필요 없이 필요한 만큼 크고/작게 배경 이미지를 만들 수 있는 타일링이 가능하도록 별도의 텍스처가 있는 것이 좋을 것입니다. UMG 안에는 텍스처를 다른 세팅으로 그릴 수 있는 Draw As 옵션이 있는데, 여기서 타일링을 지원하는 Border 모드를 사용하면 좋을 것입니다.
모바일 디바이스용 텍스처 제작 관련 추가 정보는 모바일 렌더링 기능 문서를 참고하세요.
팁과 정보
여기서는 UMG 에 사용할 애셋이나 UMG 작업 관련 팁과 정보를 몇 가지 살펴보겠습니다.
포맷 팁
Vertical / Horizontal Box 같은 패널 작업을 할 때, 슬롯 크기를 채우기 하느냐 자동 으로 하느냐 그것이 문제인 경우가 생깁니다.
위에서, 화면 상단을 가로지르는 일련의 버튼들은 자동 으로 설정되어 레이아웃에 필요한 공간만 사용합니다.
슬롯 크기에 자동 을 선택하면, 위젯을 제대로 표시하기에 필요한 만큼의 지정된 공간이 필요하다는 것입니다. 자동은 위젯의 각 자손 중 자동으로 설정된 것을 살펴 각각의 크기를 얼마로 할지도 결정합니다. 스케일 박스 안에서 스케일을 조절할 필요가 있는 위젯이 다수 있는 경우 유용하며, 자동으로 설정한 경우라면 스케일 박스는 자손 각각을 살펴 모두가 맞도록 각각의 스케일 조절 양을 결정합니다.
반면 채우기 는 이름에서 암시하듯 가급적 많은 공간을 차지하려 합니다. 아래 그림에서 버튼 상단과 하단 줄 모두 자동으로 설정하고, 메인 메뉴 버튼이 들어있는 가운데 Vertical Box 는 채우기 로 설정했습니다. 이렇게 한 이유는, 화면 크기가 어떻게 됐든 상단과 하단의 버튼 줄을 Vertical Box 의 상단과 하단으로 밀어주기 위함입니다.
렌더 트랜스폼 사용
Render Transform (렌더 트랜스폼)을 사용하여 특정 위젯의 트랜슬레이션, 스케일 등의 세팅에 영향을 끼칠 때는 주의하세요.
위에서 렌더 트랜스폼 아래 스케일 을 조절하고 애니메이션으로 구동시켜 진동 이펙트를 만들었습니다.
렌더 트랜스폼은 (위젯 애니메이션 같은) 임시 트랜스폼을 만드는 데 좋지만, 영구 트랜스폼에도 좋은 것은 아닙니다. 예를 들어 위젯 크기의 스케일을 올릴 필요가 있는 경우, 단순히 렌더 트랜스폼을 통해 스케일을 조절하기 보다는 스케일 박스 로 위젯을 둘러싸 주는 것이 좋습니다. 스케일 박스는 레이아웃 스케일을 조절하는 반면, 렌더 트랜스폼은 (레이아웃의 일부로 계산되지 않아) 다른 해상도로 스케일을 조절할 경우 크기가 제대로 조절되지 않아 위젯 스케일이 부적절해 질 수 있습니다.
우클릭 컨텍스트 메뉴
위젯 블루프린트의 디자이너 탭에서 계층구조 내 위젯에 우클릭 을 한 뒤 다른 위젯으로 둘러싸거나 대체시킬 수 있습니다.
부모 설정을 변경할 필요 없이 위젯을 쉽고 빠르게 바꿀 수 있습니다.
디테일 패널의 프로퍼티에 우클릭 하여 복사/붙여넣기도 가능합니다.
버튼의 스타일같은 것을 복사/붙여넣기할 때 엄청 유용합니다.
앵커와 위젯 Ctrl 드래그
캔버스 패널 작업시, 앵커를 드래그할 때 (또는 프리셋 앵커에서 선택할 때) Ctrl 키를 누르고 앵커를 끌면 위젯도 원하는 위치로 동시에 이동됩니다.
앵커/위젯을 Ctrl 드래그하면 앵커 위치는 자동으로 위젯의 좌상단이 됩니다.
디자이너 미리보기 배경
위젯 블루프린트의 디자이너 탭에서 그래프의 배경으로 사용할 프리뷰 이미지를 설정할 수 있습니다.
미리보기 배경을 사용하면 위젯 스케일 변경시 올바른 크기로 되는지 확인하는 데 도움이 됩니다.
그 방법은, 계층구조 에서 루트 를 선택한 뒤, 디테일 아래 사용하고자 하는 텍스처를 할당합니다.
유저 위젯 / 콘텐츠 재사용
위젯 블루프린트를 약간의 콘텐츠로 만들면 유저 위젯 으로 간주됩니다. 이러한 유저 위젯은 디자이너 탭의 팔레트 창에서 User Created (사용자 생성) 섹션 아래 나타나며, 다른 위젯처럼 그래프에 끌어 놓을 수 있습니다.
위에서 확인 화면 유저 위젯이 다양한 메뉴 화면에 추가되었습니다.
이를 화면과 콘텐츠 구성에 활용할 수 있습니다. 프로젝트 전반적으로 꽤나 자주 사용되는 함수성이 있는 경우, 별도의 위젯으로 만들어 다른 위젯에 떨구면 필요할 때마다 각 지역에 만들지 않아도 됩니다.
최적화
UI 스크린 제작시 고려할 수 있는 최적화 작업은 다음과 같습니다:
- 가급적 아트 작업은 머티리얼 대신 텍스처 를 사용하세요.
- 가급적 바인딩 또는 틱 이벤트 대신 이벤트를 통한 UI 업데이트 구동 방식을 사용하세요.
- 그리 자주 변경되지 않는 위젯의 경우 인밸리데이션 박스 으로 위젯을 캐시에 담을 수 있습니다.
- 위젯 관련 정보/통계를 구하려면 위젯 리플렉터 (Ctrl+Shift+W) 를 활용하세요.