모션 디자인 퀵스타트 가이드

모션 디자인 소개

모션 디자인(Motion Design)은 브로드캐스팅을 위한 내부 에디터 플러그인입니다. 이 플러그인은 라이브 텔레비전, 뉴스, 날씨, 스포츠 프로덕션, 삽입형 그래픽, 기타 신속한 디자인 및 애니메이션 워크플로를 필요로 하는 다양한 사용 사례를 위한 그래픽 제작, 플레이아웃 및 리얼타임 데이터 시각화에 사용할 수 있습니다. 또한 이 플러그인은 유저 인터페이스가 UMG와 비슷하지만 3D 파라메트릭 셰이프, 다이내믹 머티리얼 빌더 등 위젯 내에서는 사용할 수 없는 기능을 포함합니다.

모션 디자인 플러그인 활성화하기

모션 디자인을 사용하려면 필수 '모션 디자인' 및 'Storm Sync 모션 디자인 브리지(Storm Sync Motion Design Bridge)' 플러그인을 활성화해야 합니다.

모션 디자인 씬 생성

모션 디자인 씬을 생성하려면 빈 레벨을 생성하거나 기존 레벨 템플릿 중 하나를 선택합니다.

1. 툴바 > 모션 디자인 으로 이동하여 버튼을 클릭합니다.

   

2. 툴바 > 모션 디자인 드롭다운으로 이동하여 디폴트 생성(Create Default) 을 선택합니다.

   

3. 스폰(Spawn) 을 클릭하여 환경설정된 액터 세트를 생성합니다.

   

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

이후 씬을 삭제할 수 있습니다. 씬을 삭제하려면 앞서 사용한 드롭다운에서 씬 비활성화(Deactivate Scene) 버튼을 사용합니다. 디폴트 씬(Default Scene) 그룹을 수동으로 삭제해도 됩니다.

모션 디자인 UI 개요

모션 디자인의 UI에는 오브젝트를 스폰하고 조작하는 데 사용할 수 있는 여러 창이 있습니다.

UI의 구성 요소는 다음과 같습니다.

• 모션 디자인 툴 박스(Motion Design Tool Box)
• 팔레트(Palettes) 탭
• 시퀀서(Sequencer)
• 연산자 스택(Operator Stack)
• 모션 디자인 아웃라이너(Motion Design Outliner)
• 모션 디자인 디테일(Details) 패널
• 뷰포트 아래에 표시되는 새 뷰포트 유틸리티 툴바

모션 디자인 씬이 활성화되면 기본적으로 '모션 디자인 툴박스'가 열립니다.

위 스크린샷에서 컬러가 지정된 영역은 다음과 기능을 나타냅니다.

1. 모션 디자인 에디터 패널 바로가기

   • 연산자 스택, 리모트 컨트롤(Remote Control), 머티리얼 디자이너(Material Designer) 등 크리에이티브 툴에 액세스하는 단계를 줄여 주는 내비게이션 모음을 추가합니다. 또한 트랜지션 로직(Transition Logic) 시스템을 한 곳에서 액세스할 수 있게 해줍니다.

2. 모션 디자인 툴 박스

   • 이 패널을 사용하면 파라메트릭 2D 및 3D 셰이프, 텍스트, SVG, 클로너/이펙터, 미디어 플레이트를 비롯하여 다양한 표준 언리얼 엔진 액터 타입을 배치할 수 있습니다. '2D' 및 '3D' 카테고리의 파라메트릭 셰이프는 모션 디자인용으로 커스터마이징되어 있으며, 메시(Meshes) 카테고리는 커스터마이제이션 옵션 없이 다양한 표준 메시를 스폰합니다.

3. 뷰포트

   • 디폴트 뷰포트는 모션 디자인 UI에서 계속 표시되며, 캔버스에서 줌 인 및 아웃할 수 있는 추가 옵션을 제공합니다. 줌 기능은 마우스 휠을 스크롤하여 사용할 수 있습니다. 카메라를 선택한 경우에는 '모션 디자인 뷰포트(Motion Design Viewport)'라는 옵션을 선택하여 이 행동을 사용할 수 있습니다.

4. 툴 바로가기

   • 이 옵션 패널은 모디파이어(Modifier) 및 트랜지션 로직 패널을 포함할 수 있습니다. 이는 리모트 컨트롤 및 머티리얼 디자이너 버튼을 클릭하여 에디터 패널 바로가기(Editor Panel Shortcuts) 바(섹션 1)를 통해서도 열 수 있습니다.

5. 모션 디자인 아웃라이너

   • 모션 디자인 아웃라이너 는 기존 언리얼 엔진 아웃라이너의 커스터마이징된 버전으로, 필터링 및 중첩된 그룹 등 추가 기능을 제공합니다. 중첩된 그룹은 단일 Null 액터 를 여러 액터의 부모로 설정함으로써 트랜스폼을 오프셋하거나 여러 액터에서 동시에 비저빌리티를 설정하는 등 다양한 용도로 활용할 수 있습니다. 또한 단일 액터 또는 Null 액터 아래에 중첩된 여러 액터에 강력한 모디파이어를 동시에 적용할 수 있습니다. **

6. 시퀀서

   • 모션 디자인 워크플로의 향상된 '시퀀서' 패널에서는 여러 시퀀스를 추가하고 개별적으로 재생하거나 트랜지션 로직 같은 시스템에서 적용한 로직을 활용할 수 있습니다. **

7. 뷰포트 유틸리티 툴바

   • 뷰포트 유틸리티 툴바는 마스크 시각화 토글, 색 선택 툴, 스크린샷, 컬러 채널 시각화 툴(알파 채널 프리뷰에 유용), 게임 모드 토글, 바운딩 박스 시각화 토글, 액터 솔로잉, 안전 프레임 토글, 다양한 스냅 툴 등 여러 기능에 액세스할 수 있게 해줍니다.

8. 리모트 컨트롤

   • 모든 모션 디자인 레벨에는 에셋 없이 링크된 리모트 컨트롤 프리셋이 포함되어 있습니다. 트랜지션 로직과 같이 여러 레벨이 런다운 툴에 결합되어 있는 일부 상황에서 각각의 노출된 리모트 컨트롤 프로퍼티가 결합 및 정렬됩니다.

모션 디자인 뷰포트

레벨 에디터에서 모션 디자인은 표준 뷰포트를 사용하지만 하단에 다음과 같은 파라미터가 추가됩니다.

• 선택된 오브젝트의 위치 제어:

  • 0,0,0으로 리셋

  • X, Y, Z축 슬라이더

• 마스크 모드 토글: 부울('마스크') 모디파이어와 함께 작업하는 경우 사용합니다.

• 다양한 뷰포트 비저빌리티 세팅이 표시되는 섹션:

  • 게임 뷰(Game View): 모든 에디터 엘리먼트의 비저빌리티를 토글할 수 있습니다.

  • 바운딩 박스 토글(Toggle Bounding Boxes)

  • 선택된 액터 고립(Isolate Selected Actors)

  • 가이드 토글(Toggle Guides)

  • 뷰포트 오버레이 비저빌리티(Viewport Overlay Visibility)

• 스냅 세팅 섹션: 글로벌 스냅, 그리드 스냅, 스크린 스냅, 액터 스냅을 토글할 수 있습니다.

• 그리드 세팅 섹션: 그리드를 토글하거나, 항상 그리드를 표시하거나, 그리드 크기 슬라이더를 조절할 수 있습니다.

모션 디자인 아웃라이너

'모션 디자인 아웃라이너'의 구성 요소는 다음과 같습니다.

• 가장 왼쪽 패널: 모션 디자인에 필터를 설정하는 데 사용합니다.

  • 클릭하여 클릭 가능한 필터를 스크롤할 수 있습니다.

  • 또한 빠른 타입 필터를 선택(Select) 하거나 모든 빠른 타입 필터 선택 해제(Deselect All Quick Type Filters) 할 수 있습니다.

• 검색(Search) 바

• Null 액터 아래에 선택된 액터 그룹화(Group selected actors under a Null Actor) 버튼

• 뷰 옵션(View Options) 드롭다운: 모디파이어, 머티리얼 아이콘 등 '모션 디자인 아웃라이너'에 표시되는 항목을 환경설정합니다.

• 세팅(Settings) 드롭다운: '모션 디자인 아웃라이너' 계층구조의 세팅을 환경설정합니다.

• 에디터 비저빌리티(Editor Visibility) 및 런타임 비저빌리티(Runtime Visibility)

• 잠금(Lock): 뷰포트에서 항목을 이동할 수 있는지 여부를 토글합니다.

모션 디자인 툴 박스(셰이프 및 액터 생성)

'모션 디자인 툴 박스'를 사용하면 셰이프 및 액터를 생성할 수 있습니다. 이 툴 박스는 뷰포트에서 다양한 액터를 그리거나 드래그 앤 드롭할 수 있도록 지원합니다.

생성할 수 있는 항목은 다음과 같습니다.

• 2D 셰이프(2D 셰이프 액터)

• 3D 셰이프(3D 셰이프 액터)

• 액터(텍스트, 클로너, 이펙터, Null, 스플라인)

• SVG

• 메시(스태틱 메시)

• 카메라(카메라 액터, 카메라 릭 액터, 카메라 셰이크 소스 액터, 포스트 프로세스 볼륨)

• 라이트

• 미디어 플레이트

색 선택 툴

색 선택 툴(Color Picker) 패널에는 다음과 같은 구성 요소가 포함되어 있습니다.

• 컬러 휠: 단순 머티리얼과 함께 선택된 셰이프에 컬러를 적용합니다.

• 스포이드: 뷰포트 내 오브젝트에서 컬러를 선택합니다.

• RGB/HSV 전환: 오른쪽 슬라이더가 제어하는 값 세트를 변경합니다.

• 라이팅포함/언릿 토글: 선택된 액터의 머티리얼을 라이팅포함/언릿 간에 토글합니다.

• 현재 테마의 컬러

• 단색/선형 그레이디언트 전환

• 단순 및 그레이디언트 컬러 간에 전환하는 버튼

• '테마(Themes)' 버튼: 이 메뉴를 사용하면 현재 테마의 이름을 편집하고, 새 테마를 만들고, 테마 간에 전환하고, 테마를 삭제할 수 있습니다.

뷰포트 정보

뷰포트 정보(Viewport Information) 탭은 현재 뷰포트에 대한 통계를 표시합니다.

• 크기(Size): 픽셀 단위로 측정됩니다.

• 표시 영역(Visible Area): 줌 인된 영역의 크기를 픽셀 단위로 표시합니다.

• 중앙 오프셋(Center Offset): 뷰포트의 현재 중앙이 실제 중앙으로부터 얼마나 오프셋되어 있는지 표시합니다.

  • 픽셀 단위로 측정됩니다.

  • 오프셋은 양수 또는 음수일 수 있습니다.

• 커서(Cursor): 뷰포트에서 커서의 위치를 표시합니다.

• 줌(Zoom): 해당되는 경우 현재 줌의 퍼센티지(%)를 표시합니다.

정렬

'정렬(Alignment)' 탭은 다음을 표시합니다.

• 가로 정렬(Horizontal Alignment): 여러 액터를 가로로 정렬합니다. 옵션은 왼쪽, 가운데, 오른쪽입니다.

• 세로 정렬(Vertical Alignment): 여러 액터를 세로로 정렬합니다.

• 스택(Stack): 여러 액터의 깊이를 정렬합니다. 앞, 뒤, 가운데로 정렬할 수 있습니다.

• 분포(Distribute): 선택된 액터를 분포시킵니다. 옵션은 왼쪽에서 오른쪽, 위에서 아래, 앞에서 뒤가 있습니다.

• 회전(액터)(Rot(Actor)): 액터의 회전을 다른 액터에 맞춰 정렬합니다.

• 회전(카메라)(Rot(Camera)): 액터의 회전을 카메라에 맞춰 정렬합니다.

• 화면(Screen): 선택된 액터의 크기와 위치를 현재 카메라 프러스텀에 맞춥니다.

모션 디자인 시퀀서

시퀀서는 애니메이션 제작, 수정 및 프리뷰에 사용되는 핵심 툴입니다. 모션 디자인은 언리얼 엔진의 일반적인 시퀀서에 몇 가지 툴과 기능을 추가합니다.

UI의 구성 요소는 다음과 같습니다.

• 애니메이션(Animations) 섹션: 이 섹션은 모든 애니메이션 목록(열린 레벨/씬 내에 임베딩된 레벨 시퀀스)과 재생(Play), 테이크 인(Take in), 중지(Stop) 버튼을 포함합니다. 또한 애니메이션을 추가하고 검색할 수도 있습니다.

• 선택(Selection) 탭: 선택된 키의 프로퍼티를 표시합니다.

• 시퀀스(Sequence) 탭: 전체 시퀀스의 태그와 프리뷰 마크를 표시합니다. 또한 생성된 마크의 프로퍼티 및 세팅도 표시합니다. 프리뷰 및 마크에 대한 자세한 내용은 시퀀서 에디터 문서를 참고하세요.

• 재생(Playback) 탭: 예약된 재생을 위한 세팅을 표시합니다.

• 시퀀서 자체의 구성 요소는 다음과 같습니다.

  • 바인딩 및 재생 세팅

  • 시퀀스 에셋 액션. 시퀀스 및 서브시퀀스를 저장하고, 콘텐츠 브라우저에서 시퀀스로 이동하고, 시퀀스를 렌더링하고, 시퀀스의 디렉터 블루프린트를 열 수 있습니다.

  • 시퀀스 세팅: 액션(Actions), 뷰(View) 옵션, 재생 옵션이 있는 메뉴를 포함합니다.

  • 키프레임 세팅: 자동 키 지정 및 자동 트래킹 세팅 등 키 지정된 항목에 대한 세팅입니다. 편집이 허용된 항목에 대한 세팅과 스냅 세팅도 포함됩니다.

  • FPS 및 시간 표시 세팅

  • 애니메이션 편집 옵션: 커브 편집, 수정 및 스태거 옵션

  • 현재 열려 있는 애니메이션의 이름

  • 잠금: 애니메이션 편집을 토글합니다.

  • 트랙 추가(Add Track): 다양한 트랙을 추가할 수 있습니다.

  • 검색 및 필터링

  • 현재 시간 및 프레임 표시기

  • 애니메이션의 시퀀스 목록

  • 애니메이션의 타임라인 에디터

모션 디자인 모디파이어 스택

스택을 채우려면 액터를 선택해야 합니다. 사용 가능한 액터로는 모션 디자이너 셰이프, 텍스트, Null 액터가 있습니다.

모디파이어 스택(Modifiers Stack) 의 구성 요소는 다음과 같습니다.

• 검색: 추가된 모디파이어에서 검색합니다.

• 모디파이어를 타입별로 필터링할 수 있는 필터 메뉴입니다. 사용할 수 있는 카테고리는 다음과 같습니다.

  • 지오메트리(Geometry)

  • 레이아웃(Layout)

  • 렌더링(Rendering)

  • 트랜스폼(Transform)

• 모디파이어 추가(Add Modifiers) 버튼

• 스택의 모든 모디파이어에 적용되는 '모디파이어 스택' 메뉴 바의 구성 요소는 다음과 같습니다.

  • 모든 모디파이어의 퍼포먼스 데이터를 표시하거나 숨기는 토글

  • 모든 모디파이어를 삭제하는 버튼.

  • 모든 모디파이어를 활성화 또는 비활성화하는 체크박스

  • 디폴트로 리셋(Reset to Default), 프로퍼티 노출(Expose Property) 및 키 생성(Create Key) 작업을 지원하는 메뉴. '키 생성' 옵션은 모든 모디파이어 활성화(Enable All Modifiers) 체크박스 상태에 대한 키프레임을 생성합니다.

• 개별 모디파이어와 해당 파라미터의 목록:

  • 모디파이어 삭제

  • 모디파이어를 활성화하고, 모디파이어의 프로퍼티를 노출 하거나 비활성화 하는 체크박스

  • 디폴트로 되돌리고 키프레임을 생성 하는 메뉴

모션 디자인 애니메이터 스택

'모션 디자인 애니메이터 스택(Motion Design Animators Stack)'의 구성 요소는 다음과 같습니다.

• 검색: 추가된 애디메이터에서 검색합니다.

• 애니메이터를 타입별로 필터링할 수 있는 필터 메뉴입니다. 카테고리는 바운스(Bounce), 시간(Time), 위글(Wiggle) 입니다.

• 애니메이터 추가(Add Animators) 버튼

• '애니메이터' 메뉴 바의 구성 요소는 다음과 같습니다.

  • 모든 애니메이터를 활성화 또는 비활성화하는 토글

  • 모든 애니메이터 삭제(Delete All Animators) 버튼

• 애니메이터와 개별 파라미터의 목록:

  • 애니메이터를 삭제하는 버튼

  • 모든 애니메이터를 활성화 또는 비활성화 하는 체크박스

  • 디폴트로 되돌리고 키프레임을 생성 하는 메뉴 애니메이터 세기, 시간 오프셋, 애니메이팅된 프로퍼티, 및 시간 소스를 포함하는 파라미터

리모트 컨트롤

모션 디자인은 링크된 리모트 컨트롤 프리셋과 액터, 모디파이어 및 애니메이터에 대한 파라미터를 포함합니다.

'리모트 컨트롤' 창을 열려면 모션 디자인 드롭다운으로 이동하여 리모트 컨트롤 을 선택합니다.

'리모트 컨트롤' UI의 구성 요소는 다음과 같습니다.

• 프리셋 저장(Save Preset) 및 저장된 프리셋 탐색(Browse to the Saved Preset) 버튼

• 구성 및 작업 모드 전환:

  • 구성(Setup) 모드는 프로퍼티 자체를 표시합니다. 로직을 환경설정하여 프로퍼티에 할당할 수 있습니다.

  • 작업(Operation) 모드는 추가된 컨트롤러를 표시합니다.

• 프로토콜(Protocols) 및 로직(Logic) 토글: 노출된 프로퍼티에 대한 프로토콜 및 로직 환경설정을 활성화합니다.

• 리모트 컨트롤 세팅(Remote Control Settings): 리모트 컨트롤에 대한 프로젝트 세팅을 엽니다.

• 로그(Log) 토글: '리모트 컨트롤'의 컨트롤 로그를 표시하거나 숨깁니다.

• 웹 앱(Web App) 버튼: 디폴트 브라우저에서 '리모트 컨트롤' 웹 앱을 엽니다.

• 창 왼쪽에서는 노출(Expose), 디테일 및 프로토콜(Protocols) 탭이 해당하는 섹션을 엽니다.

• 그룹(Group) 섹션: 노출된 프로퍼티를 그룹으로 정리합니다.

• 프로퍼티(Properties) 섹션: 액터 및 함수, 노출된 환경설정 가능한 프로퍼티를 '리모트 컨트롤'에 노출합니다.

모션 디자인 브로드캐스트

'모션 디자인 브로드캐스트(Motion Design Broadcast)'를 사용하면 할당된 디스플레이 또는 기타 미디어 출력에서 모션 디자인 에셋의 출력 퀄리티를 높일 수 있습니다.

'모션 디자인 브로드캐스트'를 열려면 다음 단계를 따릅니다.

1. 모션 디자인 플러그인이 활성화되어 있는지 확인합니다.

2. 언리얼 에디터에서 UE 툴바 > 모션 디자인 드롭다운으로 이동하여 모션 디자인 브로드캐스트 를 선택합니다.

   

'모션 디자인 브로드캐스트' UI의 구성 요소는 다음과 같습니다.

• 에셋 저장(Save Asset) 및 콘텐츠 브라우저 내 에셋 탐색(Browse) 버튼

• 모든 채널 시작(Start All Channels) 및 모든 채널 중지(Stop All Channels) 버튼

• 채널 프리뷰 표시(Show Channel Preview) 토글

• 프로파일(Profiles) 드롭다운: 다양한 프로파일 간에 전환하고, 새 프로파일을 추가하고, 프로파일을 삭제합니다.

• 프로파일 복제(Duplicate Profile) 버튼: 현재 선택된 프로파일의 사본을 생성합니다.

• '클라이언트(Client)' 및 '서버(Server)' 컨트롤: 클라이언트를 시작하고, 로컬 서버를 실행하고, 서버를 재시작합니다.

• 채널(Channels) 컨트롤의 구성 요소는 다음과 같습니다.

  • 새 채널(New Channel) 추가 버튼

  • 채널 상태

  • 채널 이름

  • 모든 프로파일에서 채널을 고정하고, 채널이 전체 영역을 차지하게 하고, 채널을 삭제하는 옵션

  • 채널의 출력 디바이스 목록

  • 채널 프리뷰

• 출력 디바이스(Output Devices): 채널에 할당할 수 있는 사용 가능한 미디어 출력을 나열합니다.

• 디테일: 채널에 할당된 선택된 출력 디바이스에 대한 세부 정보를 표시합니다.