Unreal Engine SVG 가져오기: Motion Design 도형 확인하기

Unreal Engine의 SVG Importer는 Motion Design을 위한 도형 작업 흐름을 제공합니다. Epic의 SVG 가져오기 튜토리얼은 2D 벡터 파일을 3D 도형으로 바꾸는 과정을 설명합니다. 먼저 엔진 버전에 맞는 플러그인과 문서를 확인한 뒤 구멍, 색상, 분리된 부분을 알아볼 수 있는 작은 소스를 가져오세요.

이는 SVG를 런타임 UI 이미지로 표시하는 것과 다른 작업입니다. 텍스처 미리보기, 장면 액터, 위젯 렌더러는 서로 다른 결과물입니다. 이 안내는 장면 도형 방식에 맞게 아트워크를 준비하고 결과 객체가 모션 디자인에 적합한지 판단하는 데 초점을 맞춥니다.

예제는 직접 만든 가운데가 빈 배지와 분리된 마름모입니다. 프로젝트에서 시도할 문서 기반 작업 흐름이며 실제 Unreal 가져오기나 돌출 테스트 결과를 보고하는 것은 아닙니다.

아트워크를 바꾸기 전에 대상 선택하기

그래픽이 무엇이 되어야 하는지 결정하세요. SVG 확장자만으로는 그 질문에 답할 수 없습니다.

Epic의 Motion Design 빠른 시작은 방송 그래픽용 편집기 플러그인을 설명합니다. 인터페이스가 UMG와 비슷하지만 위젯 밖의 기능도 포함합니다. 그 유사성은 일반 UMG Image가 임의의 SVG 파일을 불러올 수 있다는 증거가 아닙니다.

같은 소스를 여러 엔진 사이에서 옮긴다면 Unity SVG 가져오기 안내가 별도의 가져오기 도구와 대상 선택을 다룹니다. 한 엔진에서 받아들여졌다고 다른 엔진의 파일 지원이 검증되지는 않습니다.

엔진 버전의 플러그인 확인하기

Epic의 SVG Importer 플러그인 목록에는 현재 Beta 배너가 있으며 범주는 Experimental로 표시됩니다. 특히 이 기능에 크게 의존하기 전에 전달할 프로젝트에서 검증해야 하는 이유로 받아들이세요.

공식 튜토리얼에는 Unreal Engine 5.4와 5.5 태그가 붙어 있습니다. 현재 API 문서는 별도 참조이므로 오래된 영상의 패널이나 라벨이 다른 설치 릴리스와 정확히 같다고 가정하지 마세요.

Motion Design 설정에서는 버전에 맞는 빠른 시작 안내를 따라 Motion Design과 Storm Sync Motion Design Bridge를 활성화하세요. 해당 프로젝트에서 대응하는 SVG Importer를 사용할 수 있고 활성화했는지 확인하세요. 아트워크를 살펴보기 전에 편집기의 재시작 요청을 따르세요.

먼저 작은 테스트 레벨을 사용하세요. 빠른 시작은 빈 레벨이나 템플릿을 만든 뒤 Motion Design > Create Defaults > Spawn을 실행하도록 설명합니다. 복잡한 시퀀스와 이 테스트를 분리하면 누락된 액터, 카메라 문제, 플러그인 설정 문제를 잘못된 소스와 구분하기 쉬워집니다.

분리된 조각 하나가 있는 빈 배지 준비하기

이 직접 만든 예제를 hollow-badge.svg로 저장하세요.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 140">
  <path fill="#147D78" fill-rule="evenodd"
    d="M24 24H116V116H24Z M46 46H94V94H46Z"/>
  <path fill="#EF8067" d="M150 30L168 48L150 66L132 48Z"/>
</svg>

청록색 경로는 정사각형 중심이 비어 있는 정사각형 프레임을 만듭니다. 산호색 마름모는 별도 경로이며 프레임과 사이에 공간이 있습니다. 파일에는 배경 사각형, 스트로크, 텍스트, 필터, 외부 이미지, 애니메이션이 없습니다.

이러한 생략은 의도적입니다. 복잡한 일러스트레이션을 테스트하기 전에 몇 가지 유용한 질문을 확인할 수 있습니다. 중심이 계속 뚫려 있나요? 마름모가 분리된 상태로 남나요? 두 색상이 모두 의도대로 표현되나요?

자신의 소스도 벡터 편집기에서 살펴보세요. SVG 컨테이너로 사진을 감싼 것뿐이라면 포함된 래스터 확인으로 식별할 수 있습니다. 비트맵의 이름을 바꾸거나 감싸도 이 도형 예제에 필요한 닫힌 경계가 제공되지는 않습니다.

편집 가능한 마스터를 보관하고 전달용 사본을 내보내세요. 기준으로 단순한 닫힌 채우기 도형을 사용하세요. 프로젝트에 필요하고 처리 상태를 검증할 수 있을 때만 효과, 그라디언트, 복잡한 클리핑을 추가하세요. API 참조에 비슷한 이름의 클래스가 있다고 해당 기능의 완전한 호환성이 보장되는 것은 아닙니다.

파일 하나를 가져와 결과 에셋 식별하기

실험용 프로젝트 콘텐츠 폴더를 선택하세요. Epic의 일반 에셋 가져오기 안내는 Content Browser의 Import 버튼과 드래그 앤 드롭 가져오기를 설명합니다. 버전에 맞는 SVG 가져오기 도구를 활성화한 상태에서 작은 SVG를 선택하고 설치된 버전의 가져오기 전용 옵션과 진단 내용을 살펴보세요.

파일이 거부되거나 예상한 가져오기 도구가 나타나지 않으면 먼저 엔진 버전과 플러그인 설정을 확인하세요. 아트워크를 반복해서 단순화해도 사용할 수 없는 가져오기 기능은 해결되지 않습니다.

가져온 후 배치하기 전에 에셋 유형을 확인하세요. Epic의 SVGImporter API에는 SVG 데이터, SVG 액터, 동적 메시 컴포넌트가 포함됩니다. 이 구분은 유용합니다. 소스 데이터 에셋 자체가 장면에 원하는 도형이 있다는 증거는 아닙니다.

자신의 버전에서 제공하는 SVG 액터 배치 작업 흐름으로 에셋을 테스트 장면에 넣으세요. Motion Design 도구 상자에는 SVG 액터가 포함됩니다. 배치한 결과를 선택하고 깊이, 머티리얼, 애니메이션을 바꾸기 전에 정면에서 살펴보세요. 다른 팀원이 설정을 재현할 수 있도록 사용한 에셋과 액터를 기록하세요.

가져온 에셋을 저장하고 원본 SVG를 유지하세요. Unreal의 일반 가져오기 안내는 가져온 콘텐츠가 프로젝트 에셋에 저장된다고 설명합니다. 이후 편집과 다시 가져오기에는 소스 파일이 여전히 중요합니다.

구멍, 칠, 분리된 객체 확인하기

배지의 정사각형 구멍부터 시작하세요. 대비되는 배경에서 보고 결과에 깊이가 있다면 다른 각도에서도 보세요. 중심을 덮는 옅은 색 면은 정면에서 구멍처럼 보일 수 있습니다. 수용 기준은 의도한 빈 영역이 실제로 비어 있는지입니다.

중심이 채워진다면 효과를 추가하기 전에 소스의 하위 경로와 채우기 동작을 살펴보세요. SVG 구멍 문제 해결 안내는 칠해진 안쪽 영역과 진짜 구멍이 평면 미리보기에서 비슷해 보이는 이유를 설명합니다.

다음으로 마름모 옆 공간을 살펴보세요. 의도하지 않은 연결부, 추가 면, 배경 영역이 있는지 확인하세요. 그런 다음 애니메이션에 필요한 객체를 선택하세요. 마름모가 독립적으로 움직여야 한다면 사용 가능한 액터 및 컴포넌트 구성이 프레임을 바꾸지 않고 이동할 수 있게 하는지 검증하세요. 시각적으로 분리된 강조 요소만으로 원하는 선택 구조가 입증되지는 않습니다.

도형을 확인한 뒤 칠을 확인하세요. 구성이 사용할 머티리얼과 조명 조건에서 청록색 프레임과 산호색 마름모를 소스와 비교하세요. 음영이 있는 옆면이 앞면보다 어둡다는 이유만으로 소스 색상 오류라고 판단하지 마세요.

깊이 관련 문제에는 SVG 돌출 확인 목록이 조사할 소스 도형 질문을 제공합니다. Unreal 전용 명령 안내는 아니며 이 테스트에서 보기 좋게 나타나도 제조용 수밀 메시가 입증되는 것은 아닙니다.

곡선 아트워크를 검토하고 의도적으로 다시 가져오기

정사각형 예제는 곡선을 피하지만 대부분의 로고는 그렇지 않습니다. Epic의 SVGImporter API는 스플라인을 폴리라인으로 바꾸는 변환 품질 설정을 설명합니다. 따라서 소스 곡선과 생성된 표현은 별도로 확인해야 합니다.

둥근 로고는 샷에서 사용하는 가장 가까운 카메라 거리에서 바깥 곡선과 가장 작은 구멍을 확인하세요. 가장자리가 각져 보이면 엔진 버전의 관련 변환 제어를 살펴보세요. 소스가 벡터라는 이유만으로 임의의 최대값을 설정하지 마세요.

Epic의 버전별 5.4 SVGData 참조는 품질 재정의를 바꾸면 다시 가져오기와 도형 재생성이 발생한다고 설명합니다. 이를 모든 후속 작업에 영향이 없다고 가정할 이유가 아니라, 기준 상태를 저장하고 소스나 변환 설정을 바꾼 뒤 장면을 재확인할 이유로 받아들이세요. 해당 참조의 속성 이름이 이후 모든 편집기 패널을 보장하지는 않습니다.

다시 가져온 후 구멍, 틈, 머티리얼, 객체 제어 확인을 반복하세요. 전체 아트워크 세트를 구성하기 전에 실제 전달 환경에서 장면을 테스트하세요. 이 안내는 패키징된 런타임 지원, 브라우저와 동등한 SVG 렌더링, 플러그인의 보편적 성능을 입증하지 않습니다.

래스터 엠블럼 재구성이 필요한 경우

벡터 마스터가 없고 소스가 단순한 PNG나 JPG 엠블럼이라면 PerfectVector의 이미지 벡터화 작업 흐름으로 정적인 SVG 후보 파일을 준비할 수 있습니다. 디자인 부분으로 자르고 미리보기에서 구멍과 분리된 강조 요소를 살펴본 뒤 원본과 후보 파일을 비교하세요. 채택한 SVG를 다운로드하고 Unreal에서 같은 도형 확인을 수행하세요.

벡터화는 장면 단위를 선택하거나 리그를 만들거나 제작용 머티리얼을 지정하거나 특정 메시 토폴로지를 보장하지 않습니다. 기존 벡터 마스터가 있다면 사용하세요. 사진과 복잡한 회화 효과는 래스터가 모양을 더 잘 보존한다면 그대로 유지하세요. 단순한 기하학 배지는 픽셀에서 복원하는 것보다 필요한 몇 개의 도형을 직접 작성하면 더 잘 제어할 수 있습니다.

소스 파일, 엔진 및 플러그인 버전, 가져오기 설정, 예상되는 빈 영역, 독립적으로 움직이는 부분, 검토에 사용한 카메라 거리를 짧게 기록해 전달하세요. 블로그의 아트워크 준비 안내는 이 엔진별 단계 전에 필요한 소스 결정을 다룹니다.

FAQ

Unreal Engine이 SVG 파일을 가져올 수 있나요? 네. Epic은 Motion Design 도형에 사용하는 SVG Importer를 제공합니다. 엔진 버전에 맞는 기능과 문서를 확인한 뒤 가져온 에셋과 장면 결과를 검증하세요.

SVG 가져오기를 지원하면 UMG가 런타임에 모든 SVG를 표시할 수 있나요? 아닙니다. Motion Design 도형 작업 흐름은 일반 UMG 위젯의 임의 런타임 SVG 로딩을 입증하지 않습니다. UI에 필요한 렌더링 방식을 선택하고 테스트하세요.

가져온 뒤 SVG 구멍이 채워져 보이는 이유는 무엇인가요? 소스에 실제 구멍이 있는지 칠해진 안쪽 영역이 있는지 살펴보고 하위 경로와 채우기 동작을 확인하세요. 정면 모습에만 의존하지 말고 대비되는 배경에서 가져온 도형을 검증하세요.

PNG 로고를 Unreal용으로 준비된 3D 객체로 변환할 수 있나요? 벡터화는 정적인 소스 도형을 복원할 수 있지만 Unreal 장면을 완성하지는 않습니다. 채택한 SVG를 가져오고 생성된 도형과 머티리얼을 살펴본 뒤 프로젝트에 필요한 객체 제어를 검증하세요.

Sources

1. Epic Games — 가져오기와 SVG importer — Motion Design 도형 방식과 튜토리얼 버전 맥락.
2. Epic Games — SVG Importer 플러그인 — 플러그인 범위, Beta 배너, Experimental 범주.
3. Epic Games — Motion Design 빠른 시작 안내 — 프로젝트 설정, 편집기 범위, SVG 액터 도구 상자.
4. Epic Games — 에셋 직접 가져오기 — 일반 Content Browser 가져오기와 에셋 저장.
5. Epic Games — SVGImporter API — 데이터, 액터, 동적 메시 클래스, 스플라인 변환 개념.
6. Epic Games — SVGData, Unreal Python 5.4 — 버전별 품질 재정의와 재생성 동작.

세트를 가져오기 전에 배지 하나의 구멍, 분리된 조각, 장면 동작을 검증하세요. 래스터 아트워크만 남았다면 SVG 후보 파일을 준비하고 도형을 살펴본 뒤 Unreal 프로젝트에서 채택한 파일을 확인하세요.