Apple Motion SVG 가져오기: 애니메이션 전에 아트워크 확인하기
정적 SVG를 Apple Motion으로 가져와 투명도와 지원되지 않는 기능을 확인하고, 애니메이션 전에 아트워크에 별도 객체가 필요한지 판단하세요.
목차
Apple Motion은 SVG 가져오기를 지원합니다. Apple의 Motion 6.3 기능 안내에 SVG 지원이 나열되어 있으므로 모든 SVG를 다른 형식으로 거치게 하는 오래된 조언은 그 버전의 신뢰할 만한 출발점이 아닙니다. 정적 파일로 시작해 미디어로 가져온 뒤 애니메이션을 만들기 전에 결과를 확인하세요.
답해야 할 질문은 세 가지입니다. 아트워크가 나타나나요? 투명도가 올바르게 보이나요? 독립적으로 움직여야 하는 부분을 제어할 수 있나요? 캔버스에 그래픽이 나타나는 것은 첫 질문에만 답합니다. 각 SVG 경로가 네이티브 Motion 도형이 되었다는 것을 입증하지는 않습니다.
이 작업 흐름은 단순한 고리와 원판 엠블럼으로 확인 대상을 명확히 합니다. 설치된 버전에서 시도할 문서 기반 절차이며 네이티브 Motion 가져오기 테스트 보고가 아닙니다.
Motion 버전과 작업에 맞는 작업 흐름 선택하기
오래된 포럼 글을 따르거나 큰 모음을 가져오기 전에 설치 버전을 확인하세요. Apple의 현재 SVG 안내는 지원되는 사용과 구체적 한계를 모두 설명합니다. 설치 버전이 문서 버전과 다르면 아트워크 자체를 진단하기 전에 맞는 안내를 확인하세요.
가져온 후 무엇이 일어나야 하는지 결정하세요.
| 원하는 결과 | 전달 파일이 제공해야 할 것 | 수용 기준 |
|---|---|---|
| 엠블럼 전체 이동 또는 크기 조절 | 올바르게 표시된 정적 그래픽 | 전체 디자인이 함께 반응함 |
| 작은 원판 독립 이동 | 따로 제어할 수 있는 객체 | 원판을 움직여도 고리는 그대로임 |
| 시간에 따라 고리 모양 변경 | 적절한 네이티브 도형 또는 다른 편집 가능한 구성 | 필요한 도형 제어 기능이 있음 |
| 기존 SVG 애니메이션 보존 | 별도로 계획한 애니메이션 전달 방식 | 원하는 프레임과 타이밍이 그 방식을 거쳐 유지됨 |
마지막 행은 특히 중요합니다. Motion의 SVG 문서는 애니메이션 SVG가 첫 프레임만 표시한다고 설명합니다. 애니메이션 파일을 가져오는 것과 애니메이션을 가져오는 것은 다릅니다.
애니메이션 애플리케이션을 선택 중이라면 After Effects 로고 추적 안내와 Adobe Animate 추적 작업 흐름이 각 도구의 대상 객체를 설명합니다. 이들의 명령과 객체 유형은 Motion의 미디어 가져오기와 서로 바꿔 사용할 수 없습니다.
확인할 수 있는 소스로 시작하기
이 직접 만든 예제를 orbit-mark.svg로 저장하세요.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 120">
<circle cx="68" cy="66" r="34" fill="none" stroke="#157D78" stroke-width="14"/>
<circle cx="126" cy="24" r="12" fill="#EF8067"/>
</svg>청록색 고리는 중심이 비어 있습니다. 작은 산호색 원판은 위쪽 오른편에 있으며 틈으로 분리됩니다. 파일에는 배경 사각형, 텍스트, 외부 이미지 참조, 스크립트, 애니메이션이 없습니다. 이런 선택 덕분에 이후 복잡한 엠블럼을 확인할 유용한 기준이 됩니다.
먼저 소스 편집기에서 여세요. 고리의 구멍, 틈, 캔버스 경계를 확인하세요. 아트워크 수정과 가져오기 설정 수정은 다른 작업이므로 편집 가능한 마스터를 보관하세요.
자신의 파일에서는 특정 기능이 문제를 일으키는 부분에서만 전달용 사본을 단순화하세요. 글자가 있는 디자인에는 명시적인 글꼴 전략이 필요합니다. 내보내기 전에 SVG 글꼴 변경 확인 목록을 사용하세요. 전달 사본에 외곽선 글자가 필요해도 마스터의 편집 가능한 텍스트를 보존하세요. 대상 애플리케이션이 다르다는 이유만으로 이미 사용할 수 있는 벡터를 추적하지 마세요.
컴포지션으로 가져온 뒤 미디어 확인하기
엠블럼을 표시할 그룹을 선택하세요. 현재 Motion 가져오기 작업 흐름에서는 File > Import > Media를 선택하거나 Command-I를 누른 뒤 SVG를 선택하여 가져옵니다. Finder에서 파일을 캔버스 또는 Layers 목록의 그룹으로 드래그할 수도 있습니다.
가져온 후 캔버스의 그래픽과 원하는 그룹의 레이어를 확인하세요. Media 목록에 이름이 나타나는지만으로 파일을 판단하지 마세요. Apple은 컴포지션에 미디어를 추가하지 않고 해당 목록으로 가져오는 방식도 설명합니다. 이 경우에는 아직 캔버스나 Layers 목록에 나타나지 않습니다.
검토를 위해 엠블럼을 대비되는 배경 위에 놓으세요. 열린 중심과 두 조각 사이 공간을 살펴보세요. 어두운 뷰어 배경에서는 누락된 콘텐츠와 투명 콘텐츠가 혼동될 만큼 비슷해 보일 수 있습니다.
Motion의 배경 대체를 확인하려면 Project 패널에서 Media를 누르고 SVG 객체를 선택하세요. Media Inspector를 여세요. Apple의 SVG 페이지는 Use Background Color와 관련 색상 제어를 설명합니다. 소스의 투명 영역을 유지하는 것이 목적이라면 대체를 꺼 두고, 대체 색상이 의도적일 때만 활성화하세요.
SVG 안에 이미 그려진 불투명 사각형은 별도 문제입니다. 미디어 배경 옵션을 꺼도 아트워크에 속하는 경로가 제거되지는 않습니다. 투명 SVG 배경 안내는 소스 수준의 진단을 다룹니다.
키프레임 추가 전에 부분 제어 테스트하기
가져온 엠블럼을 선택하고 작고 되돌릴 수 있는 위치 변경을 하세요. 고리와 원판이 함께 움직이면 단일 그래픽에 유용한 동작입니다. 위치를 복원한 뒤 계획한 애니메이션에 더 많은 제어가 필요한지 판단하세요.
원판을 독립적으로 움직여야 한다면 해당 부분만 선택하고 이동해 보세요. 고리가 그대로 있고 원하는 객체에 독립적으로 접근할 수 있을 때만 전달물을 채택하세요. SVG 그룹 이름, 눈에 보이는 틈, 레이어 썸네일만으로는 충분한 증거가 아닙니다.
사용 가능한 객체가 필요한 제어 기능을 제공하지 않으면 제공하는 구성을 선택하세요. 이 단순한 예제에서는 고리와 원판을 별도의 네이티브 도형으로 그리는 것이 합리적입니다. Apple의 단순 도형 안내는 Circle 도구와 색상 및 외곽선 제어를 설명합니다. 고리는 외곽선을 그리고 채우기를 없애서, 원판은 단색 채우기로 만든 뒤 각 객체의 선택을 따로 확인하세요.
더 복잡한 아트워크에서는 독립적으로 움직일 부분을 별도 소스 파일로 준비하는 방법도 있습니다. 소스 편집기에서 공통 캔버스를 유지하고 원하는 정렬을 기록하세요. 가져온 뒤 배치를 검증하세요. 파일 모음이 자동으로 애니메이션 준비가 된 레이아웃은 아닙니다.
이는 필요한 객체에 관한 결정이며 SVG 가져오기가 아트워크를 네이티브 도형으로 분해한다는 보장이 아닙니다. 점 수준의 변형이 필요하다면 애니메이션 작업을 확정하기 전에 선택한 구성이 필요한 도형 제어를 제공하는지 확인하세요.
단순한 사본으로 지원되지 않는 콘텐츠 진단하기
Apple의 SVG 제한 사항은 파일이 소스 편집기와 달라질 수 있는 여러 이유를 명시합니다. 증상에 따라 다음 확인을 선택하세요.
| 증상 | 문서화된 제약 또는 우선 확인할 사항 | 다음 단계 |
|---|---|---|
| 애니메이션 SVG가 정지함 | Motion은 첫 프레임을 표시함 | 가져온 결과를 정적으로 취급하고 움직임은 별도로 계획 |
| 페이드 인 SVG가 비어 보임 | 첫 프레임이 투명할 수 있음 | 아트워크 전달용으로 보이는 정적 상태 내보내기 |
| 사용자 지정 글꼴을 포함한 파일을 가져오지 못함 | 사용자 지정 글꼴 SVG는 지원하지 않음 | 적절한 전달용 사본을 준비하고 편집 가능한 마스터 유지 |
| 예상 이미지가 자리 표시자로 바뀜 | 외부 이미지 참조는 지원하지 않음 | 의존성을 적절한 자체 완결 전달 에셋으로 대체하고 테스트 |
| 링크 또는 스크립트 콘텐츠가 누락됨 | JavaScript 객체와 포함된 링크가 나타나지 않음 | 상호작용 동작 의존 제거 |
| 부분적으로 투명한 도형이 다르게 보임 | 도형의 다양한 불투명도가 다르게 렌더링될 수 있음 | 단순화한 사본과 원하는 합성 결과 비교 |
외부 참조 제한을 모든 자체 완결 SVG 기능이 작동한다는 증거로 해석하지 마세요. 작은 기준 파일은 의존성 구분을 돕지만 최종 아트워크는 여전히 자체 확인이 필요합니다.
정적 모양이 올바르게 되면 컴포지션에서 사용하는 최소 및 최대 크기로 엠블럼을 검토하세요. 고리 안의 구멍과 원판 옆의 틈을 주시하세요. 그런 다음 원하는 전달 해상도로 내보낸 짧은 구간을 살펴보세요. 벡터 소스 도형이 합성, 효과, 최종 영상 프레임 확인의 필요성을 없애지는 않습니다.
Motion용으로 래스터만 있는 엠블럼 준비하기
편집 가능한 엠블럼이 없고 단순한 PNG나 JPG만 남았다면 PerfectVector의 이미지 벡터화 작업 흐름으로 정적 SVG 후보 파일을 준비할 수 있습니다. 엠블럼 부분을 자르고 미리보기에서 채워진 고리 구멍, 합쳐진 원판, 원치 않는 배경 도형을 살펴본 뒤 원본과 후보 파일을 비교하세요. 채택한 아트워크를 다운로드하고 가져오기 및 독립 객체 확인을 반복하세요.
벡터화는 키프레임, 타이밍, 네이티브 Motion 레이어, 애니메이션 리그를 복원하지 않습니다. 기존 벡터 마스터가 있다면 사용하세요. 사진과 효과가 많은 이미지는 래스터가 더 잘 보존한다면 유지하세요. 실제 요구 사항이 네이티브 객체 제어라면 Motion에서 단순한 고리와 원판을 직접 그리세요.
프로젝트를 다른 사람에게 전달하기 전에 소스 파일 이름, Motion 버전, 배경 선택, 분리되어 있어야 하는 요소를 기록하세요. 편집 가능한 마스터와 원하는 배치를 보여 주는 참조를 포함하세요. 블로그의 아트워크 작업 흐름은 전달 전에 필요한 준비 결정을 다룹니다.
FAQ
Apple Motion이 SVG 파일을 직접 가져올 수 있나요? 네. Apple의 Motion 6.3 문서에는 SVG 지원이 나열되어 있습니다. 설치된 버전의 가져오기 작업 흐름을 사용하고 아트워크와 필요한 제어 기능을 살펴보세요.
SVG를 가져오면 애니메이션도 보존되나요? 아닙니다. Motion은 애니메이션 SVG의 첫 프레임만 표시합니다. 그 프레임이 투명하면 가져온 아트워크가 비어 보일 수 있습니다.
Motion에서 SVG에 색상 배경이 생기는 이유는 무엇인가요? Media Inspector의 Use Background Color를 확인하고 소스의 불투명 배경 도형을 살펴보세요. 미디어 배경 설정과 SVG에 그려진 사각형은 별도 원인입니다.
각 SVG 경로가 편집 가능한 Motion 도형이 되나요? 가져오기 성공만으로 가정하지 마세요. 필요한 부분과 도형 제어 기능을 사용할 수 있는지 테스트하세요. 애니메이션에 독립 제어가 필요하다면 별도 객체를 준비하거나 적절한 네이티브 구성을 사용하세요.
Sources
- Apple — Motion의 새로운 기능 — Motion 6.3에 문서화된 SVG 지원.
- Apple — Motion에서 SVG 파일 작업하기 — 투명도 제어와 SVG 기능 제한.
- Apple — Motion으로 미디어 가져오기 — 미디어 가져오기, 그룹 배치, Media 목록으로만 가져오기.
- Apple — Motion에서 단순 도형 그리기 — 별도 제어하는 단순 도형의 네이티브 대안.
전체 시퀀스를 준비하기 전에 엠블럼 하나의 모양과 객체 구조를 확인하세요. 래스터 아트워크만 남았다면 정적 SVG 후보 파일을 준비하고 분리된 부분을 살펴본 뒤 애니메이션 전에 Motion에서 채택한 파일을 검증하세요.
