모션 디자인을 사용한 첫 번째 그래픽

이 튜토리얼에서는 일련의 단계별 지침을 통해 언리얼 엔진의 모션 디자인(Motion Design) 툴을 사용하여 실시간으로 제어할 수 있는 애니메이팅된 2D 그래픽을 생성하고 이 그래픽이 화면에 들어가거나 나오게 하고, 화면에서 트랜스폼되게 하는 방법을 살펴봅니다. 이 워크플로를 바탕으로 모션 디자인을 사용하여 2D와 3D 모두에서 더 복잡한 고급 애니메이션을 생성할 수 있습니다.

시작하기

이 튜토리얼에서는 사용자가 모션 디자인 퀵스타트의 콘텐츠를 숙지하고 있다고 가정합니다. 아직 읽어보지 않았다면, 먼저 읽어보시기 바랍니다. 필수 플러그인을 활성화하고 새 레벨 생성 및 모션 디자인 UI에 대한 섹션을 검토했다면, 다음 단계를 계속 진행하세요.

이 튜토리얼을 진행하는 방법은 두 가지이며, 두 방법 모두 유효합니다.

1. 기존 레벨에서 모션 디자인을 사용합니다.

2. 모션 디자인 템플릿을 사용하여 새 레벨을 생성합니다.

기존 레벨에서 모션 디자인 사용하기

이 튜토리얼을 진행하는 첫 번째 방법은 툴바의 모션 디자인(Motion Design) 버튼을 클릭하여 기존 레벨에서 모션 디자인 인터페이스(Motion Design interface) 를 여는 것입니다.

툴바의 모션 디자인 버튼입니다.

또한, 모드(Modes) 드롭다운에서 모션 디자인 모드(Motion Design Mode) 로 전환하여 전체 인터페이스를 변경하지 않고도 모션 디자인 툴을 사용할 수 있습니다. 이 모드는 키보드의 SHIFT+9를 사용하여 열 수도 있습니다.

모드 메뉴의 모션 디자인입니다.

모션 디자인 씬에서 디폴트 엘리먼트로 빈 레벨 채우기

위의 첫 번째 방법을 선택했다면, 빈 레벨에서 시작하기 위해 화면의 상단 가운데에 있는 버튼을 클릭하여 모션 디자인(Motion Design) 모드를 활성화해야 합니다. 기본적으로 언리얼 엔진에서 비어 있는 새 레벨을 생성하면 라이트도 포스트 프로세스 볼륨도 카메라도 없습니다.

모션 디자인 버튼입니다.

1. 디폴트 생성(Create Defaults) 을 클릭하여 빈 레벨에 추가할 권장 디폴트 액터를 선택합니다. 그러면 몇 가지 옵션이 있는 디폴트 씬 액터 환경설정(Configure Default Scene Actors) 창이 열립니다.

   

   디폴트 생성 버튼입니다.

2. 씬에서 추가하거나 대체하려는 모션 디자인 디폴트 씬 액터(Motion Design Default Scene Actors) 를 선택하고 스폰(Spawn) 을 클릭합니다. 이 튜토리얼에서는 디폴트 옵션을 사용합니다.

   

   디폴트 씬 액터 환경설정 창입니다.

그러면 뷰포트(Viewport)와 모션 디자인 아웃라이너(Motion Design Outliner)가 모두 선택한 옵션으로 업데이트됩니다.

새 모션 디자인 레벨 생성하기

이 튜토리얼을 진행하는 두 번째 방법은 모션 디자인 템플릿을 사용하여 새 레벨을 생성하는 것입니다.

파일(File) > 새 레벨(New Level)을 선택하여 새 레벨을 생성합니다. 프롬프트 창에서 생성하려는 레벨 종류를 선택합니다. 모션 디자인(Motion Design) 템플릿은 2D 디자인에 사용되며, 3D 모션 그래픽(3DMotion Graphics) 은 3D 디자인에 사용됩니다. 이 튜토리얼에서는 2D 디자인을 다룹니다.

• 이 튜토리얼의 진행 단계를 따라가려면 모션 디자인(Motion Design) 템플릿을 선택하고 생성(Create) 을 클릭합니다.

  

  모션 디자인 템플릿을 선택합니다.

디폴트 씬 액터 스폰하기

모션 디자인 템플릿으로 새 레벨을 생성한 다음에는 디폴트 씬 액터를 환경설정하고 스폰해야 합니다.

1. 디폴트 생성(Create Defaults) 버튼을 클릭하여 디폴트 씬 액터 환경설정(Configure Default Scene Actors) 창을 엽니다.

2. 이 튜토리얼에서는 디폴트 옵션을 사용해야 하므로 스폰(Spawn) 을 클릭하여 디폴트 씬 액터를 생성합니다.

   

   디폴트 씬 액터 환경설정 창입니다.

모션 디자인을 사용하여 애니메이팅된 2D 그래픽 생성하기

배울 내용

튜토리얼의 이 섹션에는 애니메이팅된 2D 그래픽 생성에 사용할 모션 디자인 인터페이스 기능과 툴 사용에 관한 지침이 포함되어 있습니다. 포함된 내용은 다음과 같습니다.

• 2D 프리미티브 그리기 및 커스터마이징하기
• 머티리얼 디자이너(Material Designer) 를 사용하여 지오메트리 커스터마이징하기
• Null 액터를 사용하여 콘텐츠 위치 지정하기
• 텍스트 추가하기
• 특정 백그라운드 크기에 맞춰 텍스트 제한하기
• 리모트 컨트롤(Remote Control)로 텍스트 제어하기
• 시퀀서 애니메이션에서 재생하다가 시퀀서 마크 시스템을 사용하여 중지한 다음 해당 마크에서 계속해서 오프 애니메이션 재생하기

초기 템플릿 편집

새 레벨을 생성하고 나면 UE 유저 인터페이스의 모습이 다음 이미지와 비슷할 것입니다.

모션 디자인 템플릿 초기 상태입니다.

이 튜토리얼에서는 새로운 항목을 생성할 것이기 때문에, 먼저 템플릿과 함께 자동으로 스폰되는 그래픽 엘리먼트를 삭제합니다.

1. 모션 디자인 아웃라이너(Motion Design Outliner) 에서 시작용 콘텐츠(Starter Content) 그룹을 클릭합니다.

2. 키보드의 Delete 를 누르고 대화창에서 선택한 오브젝트의 자손 오브젝트 삭제를 확인합니다.

이제 다음 이미지와 비슷한 빈 뷰포트가 보일 것입니다.

시작용 콘텐츠 그룹을 삭제한 후 모션 디자인 템플릿입니다.

뷰포트가 검은색 화면으로 표시될 것입니다. 뷰포트 오른쪽 하단의 뷰(View) 옵션을 사용하여 검은색 화면을 체커보드 패턴으로 전환할 수 있습니다.

캔버스 크기를 설정해야 합니다.

1. 그러려면 뷰포트 왼쪽 상단의 카메라(Camera) 버튼을 클릭합니다.

2. 눈금자 오버라이드(Ruler Override) 를 선택합니다.

3. 해상도(Resolution) 세팅을 사용하여 프로젝트의 요구 사항에 따라 캔버스의 크기를 정의합니다.

   

   눈금자 오버라이드를 사용하여 캔버스 크기를 설정합니다.

셰이프 생성 및 그룹화

모션 디자인 툴박스를 사용하여 셰이프를 생성할 수 있습니다. 이 패널이 열리지 않은 경우, 모드(Mode) 드롭다운을 클릭하고 모션 디자인(Motion Design) 을 선택하면 열립니다.

모드 드롭다운에서 모션 디자인을 선택합니다.

몇 가지 셰이프 옵션 중에서 선택할 수 있습니다. 이 튜토리얼에서는 직사각형(Rectangle) 으로 시작합니다.

• 직사각형(Rectangle) 을 더블클릭하여 캔버스 중앙에 직사각형 하나를 스폰합니다.

  

  직사각형 버튼을 더블클릭하여 캔버스에 직사각형을 추가합니다.

  

  새로 생성한 직사각형은 이 이미지와 비슷한 모습일 것입니다.

인터페이스 오른쪽 하단의 디테일(Details) 패널에서 경사나 베벨 같은 새 직사각형의 프로퍼티와 셰이프를 커스터마이징할 수 있습니다. 또한 새로 생성한 셰이프의 핸들을 클릭하고 드래그하여 크기를 변경할 수도 있습니다.

다음으로 셰이프를 앵커로 고정합니다.

1. 디테일(Details) 패널에서 셰이프(Shape) 카테고리를 선택합니다.

2. 가로 정렬(Horizontal Alignment) 을 왼쪽(Left), 세로 정렬(Vertical Alignment) 을 중앙(Center) 으로 변경합니다.

   

   가로 및 세로 정렬을 변경합니다.

이제 그룹(Group) 으로서 동시에 이동할 다른 액터가 생겼습니다.

• 그룹을 생성하려면 직사각형을 선택하고 키보드의 CTRL+G를 누르거나, 모션 디자인 아웃라이너에 있는 그룹(Group) 버튼을 클릭합니다.

  

  그룹 버튼입니다.

  그러면 직사각형 액터의 null 액터 부모가 생성됩니다.

  

  직사각형 액터의 null 액터 부모입니다.

디테일 패널에서 null 액터의 위치를 변경하여 실험할 수 있습니다. null 액터의 위치를 변경해도 직사각형 액터의 위치는 변하지 않습니다.

1. 모션 디자인 아웃라이너 에서 직사각형을 우클릭하여 이름을 BG_Main 으로 변경합니다.

2. 직사각형을 캔버스의 가장자리와 같은 높이가 되도록 화면 왼쪽으로 이동합니다.

   1. 직사각형 지오메트리를 사용해도 되고 null 액터 부모를 사용하여 직사각형의 위치를 지정해도 됩니다.

   2. 그러려면 해당 null 액터 를 선택하고 이름을 L3_BG 로 변경합니다.

   3. 부모를 사용하여 디테일(Details) 패널에서 그룹 의 위치(Location) 를 이동합니다.

   

   null 액터 이름을 변경합니다.

이제 캔버스가 아래 이미지와 비슷한 모습일 것입니다.

그룹을 이동하여 직사각형을 이동합니다.

휠 버튼을 길게 눌러 캔버스를 패닝할 수 있습니다. 셰이딩된 영역은 오프스크린 영역을 나타냅니다. 이 튜토리얼에서는 그래픽이 오프스크린으로 슬라이딩하도록 구성할 것이므로 캔버스의 바운더리를 염두에 두어야 합니다.

다음으로, 직사각형 크기를 조정합니다.

1. BG_Main 액터를 클릭하고 셰이프(Shape) 버튼을 클릭합니다.

2. 모션 디자인 아웃라이너에서 크기 타입(Size Type) 이 픽셀(Pixels) 로 설정되어 있는지 확인합니다. 크기 타입은 셰이프(Shapes) 에 있는 첫 번째 세팅입니다.

3. 픽셀 크기를 XY 에서 자유(Free) 로 변경하여 픽셀 크기(Pixel Size) 프로퍼티의 링크를 해제합니다.

4. 픽셀 크기(Pixel Size) 프로퍼티를 1842 x 132로 설정합니다.

   언리얼 유닛이나 픽셀을 사용하여 셰이프 크기를 조정할 수 있습니다. 이 튜토리얼에서는 픽셀을 사용한다고 가정하지만, 여기에 설명된 모든 기능은 둘 다 사용할 수 있습니다.

   

   링크 해제된 픽셀 크기 프로퍼티를 설정합니다.

로어 서드 그래픽을 생성하고 있으므로 전체 그룹의 위치를 일반적으로 놓는 위치로 이동합니다.

• BG_Main의 부모인 null 액터 를 선택하고 Y 위치를 -160으로 설정합니다.

  

  null 액터의 위치를 설정합니다.

모두 배치되면 뷰포트는 다음 이미지와 비슷한 모습일 것입니다.

초기 위치 지정 결과입니다.

머티리얼 디자이너를 사용하여 그래픽 커스터마이징하기

다음으로, 단순한 회색 상자보다 흥미로운 모습으로 만들기 위해 머티리얼 디자이너 를 사용하여 로어 서드 그래픽을 커스터마이징합니다.

그래픽을 커스터마이징하는 방법은 다음과 같습니다.

1. 셰이프를 선택하고 디테일(Details) 패널에서 머티리얼(Material) 버튼을 클릭합니다.

2. 머티리얼 타입(Material Type) 을 머티리얼 디자이너(Material Designer) 로 설정합니다.

3. 머티리얼 디자이너로 편집(Edit with Material Designer) 버튼을 클릭합니다.

툴 파라미터(Tool Parameters) 섹션에 머티리얼 디자이너(Material Designer) 탭이 표시될 것입니다. 이제 뷰포트가 다음 이미지와 비슷한 모습일 것입니다.

머티리얼 디자이너를 사용하도록 설정합니다.

머티리얼 디자이너는 모션 디자인의 레이어 기반 머티리얼 생성 툴입니다. 그래픽 편집 또는 사진 편집 소프트웨어 같은 다른 레이어 기반 툴과 비슷하게, 각 레이어에는 채우기, 마스크 채널 및 독립적인 오파시티 값은 물론 전체 블렌드 모드 툴세트도 있습니다.

아래는 머티리얼 디자이너 인터페이스의 개요입니다.

머티리얼 디자이너 인터페이스입니다.

인터페이스 키

1. 표면 머티리얼 또는 포스트 프로세스 머티리얼 간에 전환합니다.

2. 머티리얼 타입을 선택합니다. 사용할 수 있는 옵션은 다음과 같습니다.

   • 불투명(Opaque)
   • 마스크드(Masked)
   • 반투명(Translucent)
   • 애디티브(Additive)
   • 변조(Modulate)

3. 전체 레이어 스택의 오파시티를 조정합니다.

4. 채우기 또는 마스크 레이어 스택 조정 간에 전환합니다.

5. 레이어 오파시티를 조정하고 레이어의 블렌드 모드를 변경합니다.

6. 채우기 및 마스크에 대한 개별 레이어를 제어합니다.

   • 사슬 아이콘은 채우기 및 알파 텍스처의 UV를 연결할지 여부를 결정합니다.
   • 레이어 섬네일의 왼쪽에 있는 하얀색 점을 클릭하여 양쪽 부분을 활성화하거나 비활성화할 수 있습니다.

7. 뷰포트 유틸리티 툴바에는 다음과 같은 툴이 포함되어 있습니다.

   • 레이어에 다양한 머티리얼 이펙트를 적용하는 데 사용할 수 있는 레이어 FX(Layer FX)
   • 레이어 추가(Add a layer)
   • 레이어 복제(Duplicate a layer)
   • 레이어 삭제(Delete Layers)

8. 텍스처 트랜스폼 및 텍스처를 범위제한하는 기능과 같은 레이어 세팅입니다.

위의 머티리얼 디자이너 인터페이스 이미지에서는 레이어 채우기(체커보드 아이콘)가 선택되어 있고 아래 이미지에서는 레이어 타입을 설정하는 몇 가지 옵션이 표시되어 있습니다. 포함된 내용은 다음과 같습니다.

• 텍스처(Texture)
• 단색(Solid Color)
• 컬러 아틀라스(Color Atlas)
• 텍스처 에지 컬러(Texture Edge Color)
• 그레이디언트(Gradient)
• 머티리얼 함수(Material Function)

레이어 타입 옵션입니다.

1. 지금은 단색을 사용해야 하므로 단색(Solid Color) 을 선택합니다.

2. 다음으로, 컬러(Color) 위젯을 클릭하고 팝업 메뉴에서 컬러를 설정합니다.

   

   색 선택 툴을 사용하여 컬러를 설정합니다.

3. 다음 RGB 값을 사용하여 컬러를 녹색으로 설정합니다.

   • R: 0.0
   • G: 0.441406
   • B: 0.030081

패턴 추가하기

다음으로, 뷰포트 유틸리티 툴바에 있는 새 레이어 추가(Add New Layer) 버튼으로 새 레이어를 생성하여 패턴을 추가합니다.

뷰포트 유틸리티 툴바의 새 레이어 추가 버튼입니다.

기본적으로, 텍스처가 생성됩니다. 드롭다운을 클릭하면 몇 가지 옵션이 표시됩니다.

• 표준 선형 그레이디언트 텍스처를 선택합니다. 아래의 예시에서 텍스처 이름은 2입니다.

  

  표준 선형 그레이디언트 텍스처를 선택합니다.

다음으로, 이 튜토리얼에서 사용할 패턴 타입을 얻기 위해 UV를 회전하고 스케일을 조절해야 합니다.

1. 마스크를 끄고 스케일 링크를 해제하여 이 레이어에 대한 레이어 마스크를 비활성화합니다.

   

   마스크를 끄고 스케일 링크를 해제합니다.

   새 레이어를 생성하고 텍스처 알파 없음(Texture No Alpha) 을 선택해도 됩니다.

2. 텍스처의 프로퍼티 를 다음과 같이 설정합니다.

   • 타입(Type): 텍스처(Texture)
   • 텍스처(Texture): 2
   • 오프셋(Offset): 0.0, 0.0
   • 회전(Rotation): 45.0
   • 스케일(Scale): 0.035, 0.035
   • 피벗(Pivot): 0.5, 0.5
   • X에서 미러링(Mirror on X): 비활성화
   • Y에서 미러링(Mirror on Y): 비활성화
   • 텍스처 범위제한(Clamp Texture): 비활성화
   

   새 텍스처 레이어의 프로퍼티입니다.

3. 그레이디언트 레이어의 블렌드(Blend) 를 아래 이미지처럼 곱하기(Multiply) 로 설정합니다.

   

   블렌드 레이어를 곱하기로 설정합니다.

이제 그래픽이 다음 이미지와 비슷한 모습일 것입니다.

초기 패턴에는 거친 그레이디언트가 있습니다.

다음으로, 그레이디언트의 거친 정도를 줄여야 합니다.

• 앞서 인터페이스 개요 목록의 5번 항목인 오파시티(Opacity) 를 0.11로 설정합니다.

  

  패턴의 오파시티를 줄여 그레이디언트를 부드럽게 만듭니다.

패턴을 분리하려면 바의 왼쪽으로 페이드합니다.

1. 레이어 세팅으로 돌아가 레이어 마스크를 다시 활성화하되, 레이어 UV는 링크가 해제된 채로 놔둡니다.

2. 선형 그레이디언트를 하나 더 마스크에 추가합니다. 같은 선형 그레이디언트를 추가해도 됩니다.

3. 텍스처 파라미터의 텍스처 범위제한(Clamp Texture) 버튼을 사용하여 범위제한합니다. 그러면 텍스처가 반복되지 않습니다.

4. 알파 텍스처의 프로퍼티를 다음과 같이 설정합니다.

   • 텍스처 범위제한(Clamp Texture): True
   • 오프셋(Offset): -0.566, 0.0
   • 회전(Rotation): 220.0
   • 스케일(Scale): 3.0, 0.0

결과는 다음 이미지와 비슷한 모습일 것입니다.

범위제한된 선형 그레이디언트를 추가한 후의 배너입니다.

다음으로, 모서리를 둥글게 다듬고 셰이프를 약간 왜곡합니다.

1. 셰이프를 선택한 상태에서 셰이프(Shape) 버튼을 클릭합니다.

2. 오른쪽 경사(Right Slant) 프로퍼티를 선택하고 값을 18.00으로 설정합니다.

베벨링(Beveling) 은 두 가지 방식으로 작동하는데, 각 코너에 대해 독립적으로 작동하거나 균등하게 작동합니다. 이 디자인의 경우, 오른쪽 상단 코너와 오른쪽 하단 코너를 베벨링합니다.

1. 셰이프(Shape) 세팅 하단에 있는 오른쪽 상단(Top Right) 및 오른쪽 하단(Bottom Right) 옵션을 펼칩니다.

2. 각각의 값을 다음과 같이 설정합니다.

   • 타입(Type): Curve In
   • 크기(Size): 13.0
   • 서브디비전(Subdivisions): 8
   

   값이 이 스크린샷에 표시된 값과 일치해야 합니다.

뷰포트 유틸리티 바(Viewport Utility Bar) > RGB 에서 뷰포트 백그라운드를 체커보드에서 검은색 단색으로 변경할 수 있습니다. 그러면 그래픽이 더 잘 보입니다.

RGB 세팅을 사용하여 뷰포트를 검은색 백그라운드로 설정합니다.

1. 백그라운드 바를 재생성하려면 L3_BG 그룹(L3_BG group) 을 우클릭 하고 복제(duplicate) 를 선택합니다. 바의 컬러가 하얀색이 되고 바 자체는 살짝 오프셋됩니다.

2. 액터 이름을 L3_BG_Bar_Offset 으로 변경합니다.

3. 이 액터를 모션 디자인 아웃라이너의 다른 바 아래 배치합니다. 아직 두 바의 우선순위를 정하는 규칙이 없기 때문에 깜박임 현상이 약간 보입니다.

4. L3_BG 및 L3_BG_Bar_Offset 액터를 선택하고 CTRL+G를 눌러 그룹화합니다.

5. 그룹 루트에서 새 null 액터 를 우클릭 하고 반투명 우선순위(Translucent Priority) 라는 모디파이어를 추가합니다.

   

   반투명 우선순위 모디파이어를 추가합니다.

반투명 우선순위(Translucent Priority) 모디파이어는 반투명 오브젝트의 렌더 우선순위를 자동으로 정렬합니다. 목록의 첫 번째 항목이 다음 항목 위에 렌더링됩니다. 대규모의 중첩된 액터 그룹에 이 모디파이어를 사용할 수도 있고 개별 액터에 사용할 수도 있습니다. 이 튜토리얼에서는 모션 디자인 아웃라이너의 상단에 반투명 오브젝트를 사용하고 반투명 우선순위 모디파이어가 모든 것을 조절하도록 합니다.

그래픽이 서로 바로 위에 있지 않고 오프셋되도록 그래픽을 이동합니다.

• Z 값 이 -170.0 이 되도록 L3_BG_Bar_Offset을 오프셋합니다. 결과는 다음 이미지와 비슷한 모습일 것입니다.

그래픽과 UI는 다음과 같은 모습일 것입니다.

모션 디자인에 콘텐츠 추가하기

다음으로, 이미 생성한 바 그래픽에 로고와 약간의 텍스트를 추가합니다.

레이아웃에 텍스트 추가하기

텍스트를 생성하려면 툴박스 로 돌아갑니다.

텍스트로 작업할 때는 주어진 텍스트 액터에 대해 모든 캐릭터가 같은 세팅을 공유한다는 점을 기억하세요. 개별 캐릭터에 다른 폰트, 색상, 크기 등을 사용하려면, 다른 세팅이 필요한 각 캐릭터에 대해 별도의 텍스트 액터를 사용해야 합니다.

모션 디자인 유저 인터페이스입니다.

모션 디자인 인터페이스는 모션 디자인 퀵스타트에 자세히 설명되어 있습니다.

1. 툴박스(위 이미지에서 뷰포트 왼쪽의 2번)에 액터(Actors) 버튼이 있습니다. 이 버튼을 클릭하면 디자인에 추가할 수 있는 다양한 타입의 액터가 모두 표시됩니다.

2. 텍스트 액터(Text Actor) 를 더블클릭하여 모션 디자인 아웃라이너의 루트 레벨에 추가합니다.

3. 백그라운드 및 백그라운드 바 오프셋에 맞춰 표시되도록 새 텍스트 액터를 null 액터 그룹에 드래그합니다.

4. 모션 디자인 아웃라이너에서 액터를 더블클릭하여 액터 이름을 Text_Line_1 로 변경합니다.

5. Text_Line_1 액터를 선택한 상태로 CTRL+G 를 눌러 그룹화합니다.

6. 잘 알아볼 수 있도록 그룹 이름을 Text_Lines 로 지정합니다.

7. 두 개의 텍스트 라인이 필요하므로 Text_Line_1을 우클릭하고 복제 한 다음, 복제한 텍스트 라인 이름을 Text_Line_2로 지정합니다.

폰트 변경하기

모션 디자인 아웃라이너에서 텍스트 액터 중 하나를 선택한 후 디테일 패널에서 텍스트의 폰트를 설정할 수 있습니다. 선택할 수 있는 버튼이 여러 개 있는데 그중에서 텍스트(Text) 라는 버튼을 클릭합니다.

텍스트 버튼을 선택한 상태로 하단의 디테일 패널에서 텍스트 필드의 스트링을 변경하여 텍스트 라인의 콘텐츠를 업데이트할 수 있습니다. 또한, 폰트와 타입페이스도 변경할 수 있습니다.

1. 폰트를 Roboto로 변경합니다.

2. 타입페이스를 이탤릭(Italic)으로 변경합니다.

3. 텍스트 라인이 겹치지 않도록 Text_Line_2의 위치를 아래로 내립니다.

   

   텍스트 액터의 폰트와 타입페이스를 설정합니다.

텍스트가 녹색 바로 덮여 있는 것이 보일 것입니다. 이전에 구성한 반투명 정렬 우선순위(Translucency Sort Priority) 모디파이어를 사용하여 이 문제를 해결할 수 있습니다. 하지만, 이 모디파이어를 사용하려면 액터가 반투명 머티리얼 타입을 사용해야 합니다.

1. 텍스트 액터 중 하나를 선택한 다음, 디테일 패널의 스타일(Style) 버튼을 클릭합니다. 반투명 스타일이 없음(None)으로 설정되어 있을 텐데, 이는 이 액터가 반투명이 아니라서 반투명 정렬 우선순위 모디파이어가 정렬할 수 없다는 뜻입니다.

2. 스타일을 반투명(Translucent) 으로 변경합니다.

3. 다른 텍스트 액터에도 이 과정을 반복하면 이제 텍스트가 바 위에 표시될 것입니다.

4. 루트에서 Text_Lines null 액터를 선택합니다.

5. 디테일 패널에서 일반(General) 버튼을 클릭합니다.

6. 바와 겹칠 때까지 null 액터 위치 를 아래로 이동하여 전체 그룹을 아래로 이동합니다.

7. 각 텍스트 라인을 선택하고 트랜스폼 세팅에서 스케일(scale) 을 0.45로 설정합니다.

   

   일반 텍스트 액터 세팅입니다.

텍스트 레이아웃 툴

이제 텍스트 레이아웃 툴(Text Layout Tools) 을 사용해야 합니다.

• 텍스트를 선택한 상태에서 디테일 패널에서 레이아웃(Layout) 버튼을 클릭합니다.

  

  텍스트 레이아웃 세팅입니다.

이 섹션에서 다양한 일반 텍스트 프로퍼티를 설정할 수 있습니다. 이제 그중 몇 가지를 수정합니다. 정렬(Alignment) 옵션부터 시작합니다.

1. 텍스트의 가로 정렬을 왼쪽 맞춤으로 유지해야 하므로 해당 옵션은 변경하지 않습니다.

2. 각 텍스트 라인의 세로 정렬을 중앙으로 변경해야 하므로 두 번째 행에서 세 번째 옵션을 선택합니다.

커닝(Kerning), 줄 간격(Line Spacing) 및 단어 간격(Word Spacing)도 모두 여기서 변경할 수 있지만, 지금은 사용하지 않습니다.

1. Text_Line1과 Text_Line2가 서로 바로 위에 있지 않고 떨어져 있도록 수동으로 위치를 조정합니다.

   그리드 정렬 모디파이어를 사용하여 텍스트 액터 위치를 조정할 수도 있습니다.

2. 최대 너비(Max Width) 세팅을 사용하여 텍스트가 레이아웃 안에만 머물도록 합니다.

3. 텍스트가 그래픽의 테두리 안에 유지되도록 값을 설정합니다.

   레이아웃 가장자리를 벗어날 때까지 난수를 입력하는 방식으로 필요한 최대 너비 값을 좀 더 빠르게 파악할 수 있습니다. 그런 다음, 텍스트가 원하는 경계를 벗어나지 않을 정도로 해당 값을 미세 조정합니다.

   

   텍스트 레이아웃에 대한 최대 너비 값을 설정합니다.

다음은 최대 너비 값을 1550으로 설정하고 텍스트 위치를 조정하기 전과 후를 비교한 것입니다.

텍스트 레이아웃을 조정하기 전과 후의 모습입니다.

로고와 표시 이름을 추가할 때 바 왼쪽에 공간을 남겨두어야 합니다.

그리드 정렬 모디파이어

위에서 언급했듯, 이 두 텍스트 라인의 간격을 조정하는 또 다른 방법은 그리드 정렬(Grid Arrange) 모디파이어를 사용하는 것입니다. 테스트하는 방법은 다음과 같습니다.

1. Text_Lines 루트 액터를 선택한 다음 우클릭합니다.

2. 모디파이어로 이동하여 그리드 정렬(Grid Arrange) 을 선택합니다.

3. 다음과 같은 인터페이스가 표시될 것입니다.

   

   텍스트 라인 액터에 대한 그리드 정렬 모디파이어 세팅입니다.

여기서 사용법을 학습해야 하는 두 세팅은 카운트(Count) 와 스프레드(Spread) 입니다.

• 카운트(Count) 를 (1, 2) 로, 스프레드(Spread) 를 (0.0, 31.0) 으로 설정합니다.

그리드 정렬 모디파이어를 추가하면 모션 디자인 아웃라이너가 변경됩니다. 두 번째 액터의 에디터 및 런타임 비저빌리티에 대한 눈 아이콘이 모두 비활성화됩니다. 너비와 높이 모두에 대한 카운트가 1로 설정되어 더는 이러한 세팅을 표시할 필요가 없기 때문입니다.

카운트 및 스프레드 세팅 변경 후 텍스트 라인 액터 정렬입니다.

이러한 변경에 따라 텍스트 액터가 정렬되고 액터 간에 간격이 띄워지고 디테일 패널에서 비저빌리티가 활성화되었습니다. 더 동적인 레이아웃의 경우 이러한 종류의 로직이 필요하지만, 이 튜토리얼 프로젝트처럼 레이아웃이 비교적 정적인 경우에도 효과적인 툴입니다.

전체 모디파이어 스택이나 개별 모디파이어의 체크 표시를 클릭하여 모디파이어를 비활성화할 수 있습니다. 이는 실험이나 디버깅에 유용합니다.

레이아웃에 로고 추가하기

이 작업을 하려면 다시 머티리얼 디자이너 를 사용합니다. 그러나 먼저 작업할 지오메트리를 추가해야 합니다.

1. 툴박스 에서 2D 셰이프의 직사각형 을 추가합니다.

2. 직사각형을 더블클릭하고 모션 디자인 아웃라이너에서 선택한 다음, 키보드의 CTRL+G를 눌러 그룹 을 생성합니다.

3. 그룹 이름을 Show_ID 로 지정하고 새로 생성한 직사각형 이름을 Logo 로 지정합니다.

4. 그룹에 두 텍스트 액터를 추가하고 각각의 이름을 Banner_Line1 및 Banner_Line2 로 지정합니다. 이 두 액터를 배너의 일부로 사용할 것입니다.

5. 전체 Show_ID 그룹을 선택하고 모션 디자인 아웃라이너에서 Text_Lines 그룹 위로 드래그합니다.

이제 모션 디자인 아웃라이너가 다음 이미지와 비슷한 모습일 것입니다.

로고 액터 및 배너 라인 텍스트 액터를 추가한 후의 모션 디자인 아웃라이너입니다.

이러한 엘리먼트를 제자리에 배치한 상태에서 로고 빌드를 시작할 수 있습니다. 방금 추가한 로고 액터를 클릭하고 머티리얼 디자이너(Material Designer) 를 엽니다. 다시 한번 설명하자면, 다음을 수행합니다.

1. 액터를 선택합니다.

2. 머티리얼(Material) 버튼을 클릭합니다.

3. 머티리얼 타입(Material Type) 을 머티리얼 디자이너(Material Designer) 로 설정합니다. 이제 머티리얼 디자이너 탭이 모션 디자인 아웃라이너 왼쪽에 채워집니다.

   • 이번에는 채우기와 마스크의 링크를 해제하지 않아도 됩니다. 여기서는 두 채널이 모두 있는 텍스처를 적용하므로 자동으로 사용하게 됩니다.

4. 프로퍼티에서 드롭다운을 클릭하고 EDC_Content 폴더에서 UE_Logo_icon-only 에셋을 찾습니다. 캔버스에 텍스처를 드래그 앤 드롭해도 됩니다.

   결과는 다음 이미지와 비슷한 모습일 것입니다.

   

   캔버스에 UE_Logo_icon-only 에셋을 추가합니다.

5. 해당 레이어에 대한 머티리얼 디자이너 프로퍼티 목록에서 텍스처를 범위제한합니다.

   

   텍스처 범위제한 세팅을 활성화합니다.

언제나 뷰포트 유틸리티 툴바 를 사용하여 알파(Alpha) 를 선택해 레벨의 키 및 채우기를 확인할 수 있습니다.

알파 채널을 표시하도록 뷰포트를 변경합니다.

뷰포트가 변경되어 다음 이미지와 비슷한 뷰가 표시됩니다.

뷰포트에 알파 채널이 표시됩니다.

작업을 계속하기 전에 잊지 말고 뷰포트를 다시 RGB로 전환해야 합니다.

머티리얼 디자이너(Material Designer) 기본값은 반투명 머티리얼이므로 로고를 레이아웃으로 이동할 수 있으며, 목록 위쪽에 있는 한 제대로 정렬됩니다.

1. Banner_Line1 및 Banner_Line2 텍스트 액터를 앞서 생성한 두 텍스트 라인 액터와 세팅이 같도록 환경설정합니다.

2. 각 배너 라인 액터를 선택하고 오파시티(Opacity) 1.0 의 반투명(Translucent) 으로 설정합니다.

   

   배너 라인 텍스트 액터 스타일 세팅입니다.

3. 로고가 그래픽의 왼쪽에 오도록 뷰포트의 핸들이나 디테일 패널의 일반(General) 아래에 있는 트랜스폼(Transform) 세팅을 사용하여 전체 Show_ID 그룹을 이동합니다. 중간 결과는 추가 조정이 필요하며 다음 이미지와 비슷한 모습일 것입니다.

   

   트랜스폼이 필요한 배너 아이콘과 텍스트 작업이 진행 중입니다.

4. 로고를 클릭하여 선택합니다.

로고를 선택하는 것이 어렵다면 반투명 선택(Translucent Selection) 이 활성화되어 있지 않은 것일 수 있습니다. 키보드의 T 키를 눌러 활성화한 다음 다시 선택해 보세요.

두 가지 방식으로 로고 크기를 조정할 수 있습니다.

• 디테일 패널의 일반(General) 아래에 있는 액터 트랜스폼 세팅을 사용하여 실제 크기 스케일을 조절합니다.
• 텍스처 범위제한이 활성화된 머티리얼 디자이너에서 스케일 값을 변경합니다.

지금은 액터 트랜스폼 세팅을 사용하여 크기를 조정합니다. 나중에 애니메이팅을 위해 머티리얼 디자이너 트랜스폼 메서드를 사용하여 UV 스케일을 조절할 것입니다.

*디테일 패널에서 세 축 모두의 스케일(scale) 을 0.55 로 설정합니다.

로고 액터 스케일을 조절합니다.

다음으로, 배너 제목을 작업합니다.

1. Banner_Line1을 선택하고 텍스트를 'The Daily'로 설정합니다.

2. Banner_Line1 및 Banner_Line2 모두의 레이아웃 세팅을 다음과 같이 설정합니다.

   • 정렬(Alignment)
     • 가로(Horizontal): 왼쪽 맞춤(Left Justified)
     • 세로(Vertical): 중앙(Centered)
   • 커닝(Kerning), 줄 간격(Line Spacing) 및 단어 간격(Word Spacing): 0
   • 최대 너비(Max Width), 최대 높이(Max Height), 비례 스케일(Scale Proportionally): 비활성화(Disabled)
   

   배너 라인 텍스트 액터 레이아웃 세팅입니다.

배너 라인 텍스트 액터에 대한 최대 너비 세팅은 필요 없는데, 완성된 프로젝트로 작업할 때는 해당 세팅을 편집할 수 없기 때문입니다.

1. 결과가 다음 이미지와 비슷한 모습이 될 때까지 텍스트 스케일과 위치를 조절합니다.

   

   트랜스폼 이후 배너 아이콘과 텍스트 액터입니다.

2. 텍스트 폰트를 원하는 폰트로 변경합니다. 표시된 예시에서는 둘 다 Roboto 이탤릭을 사용합니다. 타입페이스(Typeface) 옵션 아래에서 다양한 폰트 가중치를 선택할 수 있습니다.

폰트와 타입페이스를 조정합니다.

뷰포트 기능

뷰포트 오른쪽 하단에는 여러 기능이 있습니다. 이 튜토리얼의 목적과 관련이 있는 기능은 뷰포트 스내핑(Viewport Snapping)과 뷰포트 가이드(Viewport Guides) 두 가지뿐입니다.

뷰포트 오른쪽 하단에 사용할 수 있는 기능 아이콘이 표시됩니다.

뷰포트 스내핑

뷰포트 스냅 옵션입니다.

뷰포트 스냅 옵션을 이용하려면 자석 아이콘을 우클릭합니다. 각각의 아이콘은 토글이며 원하는 대로 환경설정할 수 있습니다.

• 이 예시에서는 자석 아이콘을 우클릭하고 화면 및 가이드(Screen & Guide) 를 선택합니다.

자석 아이콘을 좌클릭하면 선택한 옵션이 비활성화됩니다.

바로 오른쪽에 있는 그리드와 자석 아이콘은 지정된 크기의 그리드에 스냅하는 옵션을 제공합니다.

뷰포트 스내핑을 위한 그리드 크기를 지정합니다.

뷰포트 가이드

모든 액터를 원하는 방식으로 정렬하기 위해 언리얼 엔진에 내장된 가이드 시스템을 사용할 수 있습니다. 뷰포트 왼쪽 및 상단에 있는 눈금자를 클릭하고 드래그하여 가이드를 그릴 수 있는데, 이는 더 정밀한 작업을 원할 때 유용합니다.

두 개의 가이드를 드래그하여 언리얼 엔진 로고와 정렬합니다. 가이드를 제거하려면 더블클릭합니다.

가이드라인을 사용하여 액터를 정렬합니다.

저장하고 싶은 복잡한 가이드 세트가 있다면, 뷰포트에서 카메라(Camera) 를 클릭한 다음, 가이드 프리셋(Guide Presets) > 다른 이름으로 저장(Save As) 을 선택합니다.

가이드 프리셋을 저장합니다.

저장해둔 가이드 프리셋이 있다면, 추가 옵션이 가이드 프리셋 아래에 표시됩니다. 추가 옵션은 다음과 같습니다.

• 활성(Active): 현재 사용 중인 저장된 프리셋을 식별합니다.
• 저장(Save): 현재 프리셋을 저장합니다.
• 다른 이름으로 저장(Save As): 현재 프리셋을 새 이름으로 저장합니다.
• 리로드(Reload): 현재 프리셋 세팅을 리로드합니다.
• 저장된 가이드 프리셋을 선택하여 뷰포트에 채울 수 있습니다.

가이드 프리셋을 저장한 다음에 사용할 수 있는 추가 옵션입니다.

이 시점에서 프로젝트는 다음 이미지와 비슷한 모습일 것입니다.

튜토리얼의 이 시점에 해당하는 배너와 텍스트 액터, 로고입니다.

계속하기 전에 작업을 저장합니다.

백그라운드 바 비주얼 디테일

계속 진행하기 전에 백그라운드 바에 새 텍스처를 직접 추가하여 단순한 하얀색 바 대신 시각적으로 더 흥미로워 보이도록 몇 가지 디테일을 더해 보세요.

추가한 다음에는 아래 단계를 읽고 자신이 한 방식과 비교해 보세요. 문제가 있다면, 지침에 따라 백그라운드 바를 수정하세요.

1. 하얀색 백그라운드 바를 선택하고 디테일 패널에서 머티리얼(Material) 버튼을 클릭합니다.

2. 머티리얼 타입(Material Type) 을 머티리얼 디자이너(Material Designer) 로 설정합니다.

3. 머티리얼 디자이너로 편집(Edit with Material Designer) 을 클릭합니다.

   

   머티리얼 디자이너로 편집 버튼입니다.

4. 알파 채널 없는 텍스처를 추가합니다.

   

   레이어 추가 메뉴를 사용하여 알파 채널 없는 텍스처를 추가합니다.

5. 블렌드 모드를 곱하기(Multiply) 로 설정하고 텍스처 컨트롤을 다음과 같이 설정합니다.

   • 텍스처 드롭다운을 선택하고 2 라고 라벨이 지정된 선형 그레이디언트 에셋 을 선택합니다.
   • 텍스처 범위제한(Clamp Texture) 을 활성화합니다.
   • 오프셋(Offset), 회전(Rotation) 및 스케일(Scale) 에 대한 UV 세팅을 조정합니다.
     • 오프셋을 -1.415로 설정합니다.
     • 회전을 -90으로 설정합니다.
     • 스케일 X 값을 0.029, Y 값을 1.0으로 설정합니다.
   • 오파시티(opacity) 를 0.87로 설정합니다.
   

   알파 채널 없는 새 텍스처에 대한 세팅입니다.

결과는 다음 이미지와 비슷한 모습일 것입니다.

드롭 섀도 결과입니다.

이와 같은 드롭 섀도는 텍스처 그레이디언트를 기반으로 할 필요가 없으며, 리얼타임 섀도가 있는 노멀 씬 라이팅을 사용할 수 있습니다. 녹색 백플레이트에 복제 지오메트리를 사용하고 반투명이 아닌 불투명으로 설정하면 되는데, 반투명 머티리얼은 그림자를 드리울 수 없기 때문입니다. 자유롭게 실험해 보세요!

디자인 애니메이팅하기

이제 목표는 지금까지 만든 결과를 오프스크린에서 뷰로 슬라이딩하여 중앙에 멈추게 하는 것입니다. 또한, 그래픽이 왼쪽을 통해 다시 오프스크린으로 물러나는 오프 애니메이션도 구성합니다.

배너 그래픽 애니메이팅하기

먼저, 전체 그래픽을 선택하고 그래픽을 배치할 키프레임을 설정합니다.

1. 루트 null 액터를 클릭합니다. 이 예시에서는 UE를 통해 자동으로 액터 이름이 Null Actor1로 지정되었습니다.

   

   배너 그래픽 null 액터입니다.

2. 시퀀서(Sequencer) 패널에서 플레이헤드를 프레임 30으로 이동합니다.

3. 키보드의 S 키 를 누르거나 디테일(Details) 패널 일반(General) 세팅의 위치(Location) 오른쪽에 있는 다이아몬드 아이콘을 클릭하여 키프레임을 설정합니다.

   

   키프레임 설정 다이아몬드 아이콘입니다.

4. 키프레임을 클릭하여 새로운 선택 섹션을 표시합니다.

   

   키프레임을 배치하고 클릭한 뒤에 표시되는 새 선택 섹션입니다.

5. 시퀀서에서 자석 아이콘 왼쪽에 있는 펜 아이콘을 클릭하여 자동 키(Auto-key) 를 찾아 활성화합니다. 이 기능은 트랙의 값을 변경할 때마다 키프레임을 자동으로 배치합니다.

   

   메뉴의 자동 키 기능입니다.

6. 플레이헤드를 다시 프레임 0으로 드래그하고 시퀀서에서 Null Actor1 트랜스폼 위치(Transform Location) 세팅을 펼칩니다.

   

   Null 액터 트랜스폼 위치 세팅입니다.

7. 루트 null 액터의 키프레임 Y 값 을 -1500 으로 변경합니다. 그러면 자동 키를 활성화했기 때문에 전체 그래픽이 오프스크린으로 이동되고 해당 값으로 키프레임이 생성됩니다. 또한, 모션 디자인 아웃라이너에서 값을 변경하고 키프레임 다이아몬드 아이콘을 클릭하여 해당 키프레임을 설정할 수도 있습니다.

8. 애니메이션을 프레임으로 이징하려면 이동이 시작되는 키프레임, 즉 이 경우에는 프레임 0을 클릭합니다. 오른쪽의 선택 섹션에 그래프 뷰가 표시될 것입니다.

   

   선택에 대한 그래프 뷰입니다.

9. 선택(Selection) 드롭다운 메뉴를 클릭하면 애니메이팅 시간을 절약할 수 있는 몇 가지 옵션이 표시됩니다. 이 예시에서는 큐빅(Cubic) 을 선택합니다.

   

   선택 메뉴의 큐빅 옵션입니다.

   시퀀서에서 재생(Play) 버튼을 클릭하여 각 옵션을 선택하면 어떤 모습이 될지 확인할 수 있습니다.

10. 다음으로, 오프 애니메이션 애니메이팅 작업을 시작할 수 있도록 이 애니메이션에 일시정지를 추가합니다. 플레이헤드를 프레임 30으로 이동한 다음, 우클릭하고 마크 추가(Add Mark) 를 선택합니다. 그러면 A 라는 라벨의 마크가 생성됩니다. A를 우클릭하고 라벨(Label) 프로퍼티를 수정하여 라벨을 변경할 수 있습니다. 지금은 A를 라벨로 사용해도 괜찮습니다.

    

    마크를 추가합니다.

    

    새 마크입니다.

11. 버튼을 클릭하여 시퀀서 패널 오른쪽에 시퀀스(Sequence) 탭을 엽니다.

    

    시퀀스 탭입니다.

12. 역할(Role) 드롭다운을 클릭하고 중지(Stop) 를 선택합니다.

    마크에는 여러 가지 역할이 있을 수 있습니다. 그 역할은 다음과 같습니다.

    • 마크(Mark)(기본값, 기능 없음)
    • 중지(Stop)
    • 일시정지(Pause)
    • 점프(Jump)
    • 반전(Reverse)
    

    마크 역할 옵션입니다.

    중지(Stop)를 선택하면 그 지점에서 애니메이션이 중지되며, 계속을 선택하고 만들려는 오프 애니메이션을 시작할 때까지 중지되어 있습니다.

13. 이미 프레임 50에 엤는 현재 Y 위치에 또 다른 키프레임을 생성합니다. 트랙 선택 시 바로가기로 ENTER를 눌러도 됩니다. 아래 이미지처럼 null 액터 트랜스폼 위치 세팅의 Y 세팅에 연결된 키프레임 추가 버튼을 클릭하여 시퀀스에 대한 키프레임을 생성할 수도 있습니다.

    

    키프레임 추가 버튼입니다.

14. 첫 번째 키프레임을 클릭하고 ALT 키를 누른 상태에서 키프레임을 프레임 90 정도로 드래그합니다. 그러면 원래 키프레임인 오프스크린 키프레임이 복제되고 적합한 오프 애니메이션이 생성됩니다.

15. 프레임 70의 플레이헤드를 우클릭한 다음, 끝 시간 설정(Set End Time) 을 선택하여 타임라인의 불필요한 섹션을 제거합니다.

로고 애니메이팅하기

이제 바를 애니메이팅했으니 다음 단계로 앞서 생성했던 언리얼 엔진 로고를 머티리얼 디자이너(Material Designer) 를 사용하여 애니메이팅합니다.

머티리얼 디자이너 를 사용한 프로퍼티 애니메이팅은 다른 프로퍼티 애니메이팅과 다를 바 없으며, 프로퍼티 옆에 다이아몬드 아이콘이 있는 한 워크플로도 거의 동일합니다.

1. 먼저 모션 디자인 아웃라이너에서 로고 액터를 선택합니다. 레이어 오파시티를 사용하여 페이드 인하고 액터의 스케일을 줄일 것입니다.

   

   오파시티 및 스케일을 사용하여 애니메이션을 생성합니다.

2. 오파시티를 키프레이밍합니다.

   • 시퀀서 플레이헤드 를 프레임 8 로 이동합니다.
   • 오파시티 값을 0 으로 설정합니다.
   • 키프레임 다이아몬드 아이콘을 클릭하면 시퀀서가 해당 지점으로 이동합니다. 등장 애니메이션에 약 20 프레임을 할당합니다.
   

   오파시티를 키프레이밍합니다.

아래 이미지는 이동 애니메이션의 시작 값과 끝 값을 보여줍니다. 시작 값에서 끝 값으로의 주요 변경사항은 다음과 같습니다.

• 오파시티 값 0.0 -> 오파시티 값 1.0
• 스케일
  • X 값 2.786 -> X 값 1.0
  • Y 값 2.786 -> Y 값 1.0

이동 애니메이션의 시작 값과 끝 값입니다.

다음 작업은 오파시티 탭을 사용하여 로고 마스크를 애니메이팅하는 것입니다.

오파시티 탭을 다시 사용합니다.

• 이 탭에서 레이어만 마스킹하는 것이 아니라 전체 머티리얼 레벨에서 마스킹할 텍스처를 할당합니다.

  

  머티리얼에 티어링 텍스처를 할당합니다.

이 티어링 텍스처를 머티리얼에 추가하면 기본 RGB 탭에서 무엇을 하든 텍스처가 이를 마스킹합니다.

여기서는 사용자의 창의력을 마음껏 발휘할 수 있으며, 키프레임을 사용하는 모든 방법을 실험해 보기를 바랍니다. 정말 다양하게 활용할 수 있습니다!

리모트 컨트롤로 레이아웃 및 콘텐츠 리깅하기

이제 그래픽을 디자인하고 애니메이팅했으니 다음 단계는 리모트 컨트롤(Remote Control) 을 활용하도록 이를 리깅하는 것입니다. 리모트 컨트롤을 통해 다양한 프로퍼티를 노출하여 중앙 위치에서 이러한 프로퍼티를 커스터마이징할 수 있습니다.

리모트 컨트롤은 비헤이비어(Behaviors) 라는 강력한 시스템도 제공합니다. 비헤이비어는 더 강력한 리깅 기능을 제공하는 논리 연산을 제공합니다. 단일 정수 값을 제어하여 여러 프로퍼티로 구성된 다양한 스타일 간에 전환하고 싶으신가요? 리모트 컨트롤과 비헤이비어를 조합하면 그렇게 할 수 있습니다.

• 먼저 리모트 컨트롤(Remote Control) 탭을 선택합니다. 이 탭은 시퀀서 탭 바로 옆에 있습니다.

  

  리모트 컨트롤 탭을 선택합니다.

• 메인 메뉴에서 창(Window) > 리모트 컨트롤 패널(Remote Control Panel) 을 선택하여 열 수도 있습니다.

  

  메인 메뉴에서 리모트 컨트롤 탭을 엽니다.

모든 모션 디자인 레벨에는 사전 링크된 리모트 컨트롤 프리셋이 함께 제공됩니다. 패널을 열면 보이는 인터페이스는 다음 이미지와 비슷한 모습일 것입니다.

리모트 컨트롤 패널 초기 상태입니다.

리모트 컨트롤 패널에서는 강력하면서도 복잡할 수 있는 많은 기능을 제공하지만, 이번 사용 사례에서는 필수 기능만 사용하면 됩니다. 다음과 같은 기능을 사용합니다.

• 두 텍스트 라인을 제어합니다.
• 단일 컨트롤을 사용하여 쇼의 브랜딩 텍스트, 쇼의 로고 및 바 자체의 컬러를 변경합니다.

두 텍스트 라인으로 시작합니다.

• 리모트 컨트롤 에 프로퍼티를 노출 하려면, 모션 디자인 아웃라이너로 이동하여 Text_Line_1 액터를 선택합니다.
• 디테일 패널을 보면 조이스틱 아이콘이 보일 것입니다. 프로퍼티 세팅 버튼으로 이동하여 텍스트(Text) 를 클릭합니다.

이러한 조이스틱 아이콘은 많은 곳에 있습니다. 즉, 리모트 컨트롤로 프로젝트의 많은 부분을 제어할 수 있습니다.

조이스틱 아이콘은 리모트 컨트롤 기능으로 제어할 수 있는 세팅을 나타냅니다.

이제 인터페이스가 다음 이미지와 비슷한 모습일 것입니다. 프로퍼티(Properties) 열 아래에 텍스트 스트링이 노출되어 있으며 이를 편집할 수 있습니다. 텍스트 스트링을 변경하면 즉시 뷰포트에 반영됩니다.

프로퍼티 열에 노출된 텍스트 스트링입니다.

왼쪽에 있는 프로퍼티 ID(Property ID) 열은 왼쪽의 브랜딩을 제어한 후에 중요합니다. 프로퍼티 ID로는 컨트롤을 그룹화할 수 있는데, 이는 정리해야 하는 노출된 프로퍼티가 많을 때 유용합니다. 단일 소스에서 여러 프로퍼티를 설정해야 할 경우의 워크플로에 해당하며, 이 튜토리얼에서 나중에 다룹니다.

프로퍼티(Properties) 오른쪽의 열에서 구성에 컨트롤러(Controllers) 를 추가할 수 있습니다. 컨트롤러 는 더 간단한 작업자 친화적인 인터페이스를 제공합니다.

• 노출된 프로퍼티에 대한 컨트롤러를 생성하려면 그룹을 클릭하여 컨트롤러(Controller) 열로 드래그합니다. 인터페이스가 다음 이미지와 비슷한 모습일 것입니다.

  

  노출된 프로퍼티에 대한 컨트롤러를 생성합니다.

컨트롤러 정리는 작업자가 리깅에 쉽게 접근할 수 있게 하는 데 중요하며, 필드에 라벨을 지정하면 도움이 될 수 있습니다. 컨트롤러 ID(Controller ID) 및 설명(Description) 필드를 더블클릭한 다음 새 영숫자 스트링을 값으로 입력하여 편집할 수 있습니다. 컨트롤러 ID 기본값은 Text 입니다.

1. 컨트롤러 ID 라벨을 B100 으로 변경합니다.

2. 설명을 Text - Line 1 로 설정합니다.

이제 인터페이스가 다음 이미지와 비슷한 모습일 것입니다.

컨트롤러 ID 및 설명 텍스트 필드를 변경한 후의 모습입니다.

• Line 2 텍스트에 이 프로세스를 반복합니다.

아니면 전체 프로세스를 반복하는 대신, 더 복잡하긴 하지만 더 효율적인 방식으로 같은 결과를 얻을 수 있습니다.

• Text_Line_2 액터를 삭제합니다.
• Text_Line_1 액터를 복사하여 붙여넣습니다.
• 복제된 액터 이름을 Text_Line_2로 변경합니다.

이렇게 하면 트래커 컴포넌트(Tracker Component) 가 복제된 액터에 추가됩니다. 이 프로세스에서 액터가 복제되고 동일한 프로퍼티가 리모트 컨트롤에 노출되었습니다. 이 워크플로에 다음 단계만 추가로 수행하면 됩니다.

• 그리드 모디파이어가 여전히 라인 간격을 적절히 두고 있는지 확인합니다.
• 새 액터의 노출된 그룹을 프로퍼티(Properties) 패널에서 컨트롤러(Controller) 열로 드래그합니다.

인터페이스가 다음 이미지와 비슷한 모습일 것입니다.

두 번째 Text_Line 액터를 생성한 후의 인터페이스입니다.

• 입력(Input) 필드 아래의 컨트롤러 열에서 값을 변경하여 리모트 컨트롤되는 프로퍼티를 테스트합니다.

모두 제대로 환경설정되었다면 변경사항이 즉시 표시될 것입니다. 프로퍼티(Properties) 패널에서 컨트롤러(Controller) 열로 텍스트를 드래그하면 위의 스크린샷에서 볼 수 있듯이 바인드 비헤이비어(Bind Behavior) 가 추가됩니다. 이러한 비헤이비어는 몇 가지가 있는데, 모든 비헤이비어는 워크플로를 간소하기 위한 추가 자동화와 로직을 제공하도록 설계되었습니다.

이 점을 염두에 두고 프로퍼티 ID(Property ID) 시스템과 함께 조건부 비헤이비어(Conditional Behavior) 를 사용하여 바 왼쪽의 항목을 구동하는 로직을 구성합니다.

• 먼저 작업해야 할 프로퍼티를 노출합니다. 방금 Text_Line 액터에서 배운 것과 같은 프로세스를 사용하여 다음 프로퍼티를 노출합니다.

로고

1. 모션 디자인 아웃라이너에서 로고 액터를 클릭하고 머티리얼 디자이너를 엽니다.

   

   로고와 연결된 머티리얼 디자이너를 여는 버튼입니다.

2. 로고 텍스처와 연결된 리모트 컨트롤(Remote Control) 버튼을 클릭하면 텍스처 컨트롤러가 리모트 컨트롤(Remote Control) 패널에 추가됩니다.

3. 리모트 컨트롤 프로퍼티(Remote Control Properties) 열에서 새로 노출된 텍스처를 하이라이트합니다. 현재 없음(None) 으로 나열된 프로퍼티 ID를 100.Logo 로 설정합니다.

100이 여기서 가장 중요한 부분이지만, 라벨을 지정하고 제어하려는 이미지나 컬러가 여러 개인 경우 프로퍼티를 추가로 설명하기 위해 마침표를 사용할 수 있습니다.

쇼 제목 텍스트

1. The Daily 와 Hotfix 를 구성하는 텍스트 필드를 개별적으로 노출합니다.

2. 각각에 프로퍼티 ID 100.ShowTitleLine1 과 100.ShowTitleLine2 를 할당합니다. 인터페이스가 다음 이미지와 비슷한 모습일 것입니다.

텍스트 필드에 프로퍼티 ID를 할당합니다.

백그라운드 바 컬러

1. BG_Main 액터를 클릭하거나 모션 디자인 아웃라이너에서 선택합니다. 자동으로 열리지 않으면 이미 구성한 머티리얼 디자이너로 이동합니다.

2. 녹색 하단 레이어를 클릭하고 더 보기(More)(⋮) 메뉴를 클릭하여 노출 옵션을 펼칩니다.

   

   더 보기 메뉴 옵션입니다.

3. 프로퍼티를 노출하고 프로퍼티 ID 100.Background 를 할당합니다.

이제 인터페이스가 다음 이미지와 비슷한 모습일 것입니다.

모든 프로퍼티를 노출한 후의 인터페이스입니다.

이제 노출된 프로퍼티가 구성되었으니, 다음 단계는 하나의 정수로 여러 프로퍼티를 제어하도록 구성하는 것입니다.

1. 컨트롤러(Controller) 열 아래에서 왼쪽의 더하기 기호 를 클릭하고 정수(Integer) 를 선택합니다.

   

   컨트롤러 값 옵션입니다.

2. 정리 목적으로 컨트롤러 ID A100 을 라벨로 지정합니다.

3. 각 라인에 대한 컨트롤러 ID 필드 왼쪽의 드래그 핸들을 사용하여 목록을 수동으로 재정렬합니다.

4. 이 프로퍼티의 설명을 0 = Show 1 | 1=Show 2 로 변경합니다.

5. 컨트롤러를 선택하고 비헤이비어(Behavior) 열에서 더하기 기호를 클릭하여 수동으로 비헤이비어를 추가합니다.

6. 조건부(Conditional) 를 선택하고 프로퍼티를 클릭합니다.

   

   조건부 비헤이비어를 추가합니다.

   조건부 비헤이비어를 선택하면 추가할 항목을 평가할 방법을 선택할 수 있지만, = 로 설정된 상태로 둡니다.

7. 액션(Actions) 옆의 + 버튼을 클릭합니다.

   

   액션 열의 상단에 있는 + 버튼을 클릭하여 새 액션을 추가합니다.

8. 다음 이미지에 나오는 것처럼 메뉴에서 특정 ID 액션 추가(Add specific ID action)> ID: 100 을 선택합니다.

   

   ID: 100을 사용하여 특정 ID 액션을 추가합니다.

그러면 접두사가 100인 모든 프로퍼티를 수집하는 동시에 액션(Actions) 열에 모두 추가합니다.

접두사가 100인 모든 프로퍼티가 액션 열에 함께 수집됩니다.

이제 리모트 컨트롤(Remote Control) 컨트롤러에서 해당 값을 0 으로 설정하면, 선택한 프로퍼티에 구성한 값으로 모든 값이 설정됩니다. 이 경우, 0 = 언리얼 로고와 녹색 바가 되도록 설정해야 합니다.

1. 프로퍼티 그룹을 우클릭하고 복제(Duplicate) 를 선택합니다.

2. 복제 그룹의 조건(Condition) 필드를 더블클릭하고 값을 1로 설정합니다.

다음은 이 워크플로를 사용하여 만들 수 있는 예시입니다.

여기 설명된 워크플로를 사용하여 완성한 예시입니다.

제대로 구성한 경우, 0을 누르면 첫 번째 배너 테마가 표시되고, 1을 누르면 다른 배너 테마가 표시됩니다.

Storm Sync를 사용하여 콘텐츠 패키징하기

.spak 파일 익스포트하기

콘텐츠를 가벼운 .spak 파일로 익스포트할 수 있습니다. 이는 소스 컨트롤 없이 콘텐츠를 백업하거나 동료에게 전체 씬과 모든 종속 파일을 전달하는 경우에 유용합니다. 프로젝트에서 이 기능을 사용하는 방법은 다음과 같습니다.

1. 작업 중이던 레벨을 엽니다. 여기 표시된 예시 프로젝트는 Demo_Working_Project 입니다.

2. 뷰포트를 우클릭하고 익스포트(Export) 를 선택합니다.

   

   프로젝트를 .spak 파일로 익스포트합니다.

   그러면 UE가 자동으로 필요한 파일의 전체 목록을 수집하고 표시합니다.

   

   자동 수집된 익스포트용 파일 목록입니다.

3. 다음(Next) 을 클릭합니다. 그러면 .spak 파일 이름을 지정할 수 있는 익스포트 옵션 화면이 표시됩니다.

   

   익스포트 파일의 이름을 지정합니다.

4. 파일 이름을 지정하고 완료(Finish) 를 클릭합니다. 파일이 저장된 위치를 보여주는 메시지가 오른쪽 하단에 표시됩니다.

.spak 파일 임포트하기

.spak 파일을 임포트하려면 파일을 익스포트한 디렉터리에서 콘텐츠 브라우저(Content Browser) 로 파일을 드래그 앤 드롭합니다. 임포트하기 전에 파일의 콘텐츠를 확인하는 화면이 표시됩니다. UE가 .spak 파일과 프로젝트에 있는 파일 간에 변경사항을 탐지하면 알려 주고 변경된 항목을 임포트합니다. 완전히 새로운 에셋 세트라면 체인지리스트에 모든 내용이 표시됩니다.

다음은 어떠한 파일도 보유하고 있지 않은 경우 체인지리스트의 모습을 보여주는 예시입니다.

.spak 파일에서 프로젝트를 임포트할 때 표시되는 체인지리스트입니다.

임포트(Import) 를 클릭하여 필수 파일로 콘텐츠 브라우저를 채웁니다.

런다운 툴 UI 개요

이 섹션을 시작하기 전에 두 대의 모니터를 구성할 것을 적극 권장합니다. 두 대의 모니터 중 하나는 출력 모니터로 사용하고 다른 하나는 그래픽 작업용 모니터로 사용할 수 있습니다. 듀얼 모니터 구성이 아니라면 이 튜토리얼을 따라 진행하기 어려울 것입니다.

모든 구성이 완료되면, 이제 런다운(Rundown) 툴을 사용하여 커스터마이징한 콘텐츠를 재생하기만 하면 됩니다.

먼저, 콘텐츠 브라우저에서 우클릭하고 모션 디자인(Motion Design) > 모션 디자인 런다운(Motion Design Rundown) 을 선택하여 새 런다운을 생성합니다.

새 모션 디자인 런다운을 생성합니다.

런다운(Rundown) 툴을 사용하여 중앙 위치에 레벨을 추가하고 라이브로 재생할 콘텐츠를 신속하게 생성할 수 있는 페이지를 만들 수 있습니다. 다음은 간단한 재생을 위한 워크플로로, 런다운 툴에 대한 피상적인 수준의 단편적인 개요를 제공합니다.

제대로 구성한다면, 네트워크에서 여러 개의 UE 인스턴스를 실행할 수 있으며, 재생하려는 프로젝트를 호스팅하는 검색 가능한 UE 인스턴스를 런다운 및 런다운의 프리뷰 기능을 실행하는 UE 인스턴스로 제어할 수 있습니다.

모션 디자인 런다운 인터페이스입니다.

이 튜토리얼의 핵심인 런다운 툴 인터페이스의 몇 가지 측면은 다음과 같습니다.

1. 템플릿 목록(Template List): 모든 임포트된 레벨이 여기 있으며, 콘텐츠 브라우저(Content Browser) 에서 레벨을 드래그하여 임포트할 수 있습니다.

2. 재생 컨트롤(Playback Controls): 선택한 페이지를 이 패널에서 제어할 수 있습니다. 테이크 인, 테이크 아웃, 계속하기, 런다운의 다음 항목 가져오기를 모두 여기에서 수행할 수 있습니다. 이러한 재생 컨트롤은 엄밀하게 말해 그래픽을 실제로 방송하는 것을 의미합니다. 페이지를 가져오기 전에 6번 항목에서 설명한 페이지 프리뷰(Page Preview)를 사용하여 프리뷰할 수 있습니다.

3. 페이지 목록(Page List): 템플릿 목록에서 항목을 드래그하면 페이지가 생성됩니다. 지정된 특정 채널로 페이지를 가져올 수 있습니다. 이 튜토리얼에서는 Channel_0에 그대로 둡니다.

4. 페이지 디테일(Page Details): 여기서 텍스트 라인, 정수 값 등, 개별 페이지 프로퍼티를 설정할 수 있습니다. 또한, 페이지 ID(Page ID)와 페이지 이름도 여기서 수정할 수 있습니다.

5. 툴바(Toolbar): 툴바에는 저장, 새 템플릿 또는 페이지 추가/제거, 브로드캐스트 세팅 설정 등, 자주 사용되는 몇 가지 컨트롤이 포함되어 있습니다. 또한 오른쪽에 모든 채널을 시작하고 효과적으로 '방송'할 수 있는 빠른 액세스 버튼도 있습니다.

6. 페이지 프리뷰(Page Preview): 위에서 언급한 재생 컨트롤과 비슷하게 작업자는 그래픽을 방송하기 전에 선택한 페이지의 콘텐츠를 프리뷰할 수 있습니다. 또한, 다음 프리뷰(Preview Next) 를 사용하여 전체 페이지 목록을 검토할 수도 있습니다.

런다운 툴 사용하기

먼저 런다운에 레벨을 추가합니다.

1. 상단 행의 템플릿 추가(Add Template) 를 클릭하거나 템플릿 목록에 레벨을 바로 드래그합니다.

2. 프리뷰 인(Preview In) 버튼을 더블클릭하여 작업 중인 내용을 확인합니다.

결과는 다음 이미지와 비슷한 모습일 것입니다.

런다운 툴에서 페이지를 프리뷰합니다.

프리뷰는 그래픽을 방송에서 라이브로 재생했다는 의미가 아닙니다. 인터페이스 설명의 2번 목록 항목의 테이크 인(Take In)과 테이크 아웃(Take Out) 버튼인 여전히 회색으로 표시되어 있는 것을 볼 수 있을 것입니다.

이는 이제 해당 템플릿을 페이지 목록에 드래그해야 하기 때문입니다.

1. 템플릿을 페이지 목록에 드래그한 다음, 페이지 프리뷰 패널에서 계속(Continue) 을 클릭합니다. 모든 것이 제대로 작동하면 생성한 오프 애니메이션 그래픽이 애니메이팅되는 것을 볼 수 있습니다.

2. 런다운에서 페이지를 선택하고 일부 페이지 디테일을 수정합니다.

   1. 디폴트 텍스트가 아닌 다른 텍스트가 표시되도록 B100 및 B200 값을 변경합니다.

   2. 프리뷰 인(Preview In) 을 다시 클릭합니다.

결과는 다음 이미지와 비슷한 모습일 것입니다.

프리뷰에서 페이지의 텍스트를 수정합니다.

1. 0001 페이지를 우클릭하고 복제(Duplicate) 를 선택합니다. 컨트롤을 추가로 실험하기 위해 페이지의 변형을 만들 것입니다.

2. 복제 페이지에서 페이지 디테일의 A100 프로퍼티 값을 0 대신 1로 설정합니다. 로직을 적용하면 그래픽에 프리뷰 인을 사용한 결과가 다음 이미지와 비슷한 모습일 것입니다.

   

   복제 페이지를 생성합니다.

이제 페이지가 구성되어 작동하고 있으니 그래픽 출력을 간략하게 살펴봅니다. 간단하게 하기 위해 이 튜토리얼에서는 같은 엔진에서 작업과 출력을 진행하는 단일 머신 작업에 초점을 맞출 것입니다.

• 브로드캐스트(Broadcast) 버튼을 클릭하여 브로드캐스트 에디터(Broadcast Editor) 를 엽니다.

  

  브로드캐스트 에디터를 엽니다.

이제 브로드캐스트(Broadcast) 창이 열립니다.

브로드캐스트 창입니다.

오른쪽의 출력 디바이스(Output Devices) 목록에 사용할 수 있는 디스플레이가 표시됩니다.

앞서 언급한 것처럼 디스플레이가 두 개 이상 필요합니다.

1. 출력하려는 디스플레이를 클릭하고 Channel_0 뷰포트로 드래그합니다. 결과는 다음 이미지와 비슷한 모습일 것입니다.

   

   출력 디스플레이에서 드래그한 후 Channel_0 뷰포트의 모습입니다.

2. 출력을 구성한 상태에서 모든 채널 시작(Start All Channels) 버튼을 클릭합니다.

   

   모든 채널 시작 버튼입니다.

해당 채널용으로 지정한 화면이 검은색으로 변하고 런다운(Rundown) 으로 돌아갈 때까지 더 이상 어떠한 활동도 표시되지 않을 것입니다.

1. 이 튜토리얼의 목적을 위해 방금 검은색으로 변한 모니터를 프로그램 디스플레이(Program display) 로 지정하고 다른 모니터를 런다운 디스플레이(Rundown display) 로 지정합니다.

2. 현재 라이브(Live) 상태입니다. 런다운 디스플레이를 보고 페이지 중 하나에서 프리뷰 인(Preview In) 을 클릭합니다. 그러면 프리뷰 뷰포트에서 재생됩니다. 프리뷰 모습이 정확하다고 가정하고 런다운 디스플레이에서 테이크 인(Take In) 을 클릭합니다. 앞서 검은색이었던 프로그램 디스플레이에 이제 로어 서드 그래픽이 표시됩니다.

다음 이미지는 두 모니터의 디스플레이가 어떤 모습이어야 하는지 보여주는 합성 이미지입니다.

왼쪽은 런다운 디스플레이, 오른쪽은 프로그램 디스플레이입니다.

• 프로그램 디스플레이에 활발하게 출력되는 동안 런다운 디스플레이에서 두 번째 페이지를 선택하고 해당 페이지를 프리뷰 인 합니다.

  

  프로그램 디스플레이를 변경하지 않고 런다운 디스플레이를 프리뷰 인합니다.

지금 라이브 페이지가 활발하게 표시되는 동안 다음 페이지를 프리뷰하고 있습니다.

• 여기서 계속(Continue) 을 클릭합니다.

  

  계속 버튼입니다.

프로그램 디스플레이에서 오프 애니메이션 그래픽이 애니메이팅되고 디스플레이에서 사라집니다.

• 002 페이지를 선택한 상태에서 테이크 인(Take In) 을 클릭하면 파란색 로어 서드 그래픽이 애니메이팅되며 프로그램 디스플레이로 이동합니다.

이제 그래픽이 구성되었으니 여기에 있는 옵션을 사용하여 그래픽을 작동하는 방법을 알아보세요.

숫자 패드를 사용하여 페이지 목록에서 페이지를 불러올 수 있습니다. CTRL+Enter를 누르면 해당 페이지에 대한 프리뷰 인이 활성화되고, Shift+Enter를 누르면 테이크 인이 활성화되어 해당 페이지를 프로그램 디스플레이로 보냅니다. 다른 버튼 위에 마우스를 올리면 해당 바로가기를 확인할 수 있습니다.