Rive SVG 가져오기: 애니메이션용 편집 가능한 도안 준비
Rive용 SVG를 준비하고 움직일 부분을 편집 가능하게 유지하세요. 사라진 이미지와 달라진 색을 수정하고 가져오기 전에 래스터 도안 추적이 필요한지 결정합니다.
목차
파일을 편집기로 드래그하거나 Assets 패널을 사용해 Rive로 SVG를 가져올 수 있습니다. Rive는 도안을 편집 가능한 네이티브 벡터 객체로 변환합니다. 가져온 결과는 두 가지를 확인해야 합니다. 올바르게 보이는지, 애니메이션에 사용할 부분을 선택할 수 있는지입니다. Rive SVG 문서는 변환과 제한을 설명합니다.
원본 벡터 파일이 있다면 그것으로 시작하세요. 원본이 PNG나 JPG라면 이미지 유지, 필요한 도형 그리기 또는 먼저 SVG로 추적하기 중 선택하세요. 추적은 편집 가능한 윤곽 복원에 유용하지만, 애니메이션용으로 윤곽을 구성하는 작업은 여전히 필요합니다.
Rive 내부에서 SVG는 어떻게 되나요?
가져온 후에는 Rive 객체로 작업합니다. 원본 SVG는 내보낸 .riv 파일에 포함되지 않으며 Rive 런타임은 현재 SVG 자산을 실행 시점에 변환하지 않습니다. Rive 파일을 내보내기 전에 편집기에서 SVG 준비와 가져오기를 완료하세요. Rive 내보내기 동작이 이 경계를 설명합니다.
도안을 선택할 때도 구분이 중요합니다. 도형 레이어는 채우기와 스트로크를 제어하고 내부의 경로는 형상을 정의합니다. Hierarchy에서 도형을 펼쳐 경로를 확인하세요. 하위 요소가 편집 가능해도 부모 그룹을 선택하면 전체 일러스트가 움직일 수 있습니다. Rive 도형 및 경로 안내가 구조를 보여 줍니다.
원본 SVG 자체가 분리되지 않으면 변경 전에 SVG 객체 및 그룹 해제 진단으로 그룹, 복합 경로나 내장 이미지를 식별하세요.
내보내기 전에 부분 준비하기
도안을 합치거나 평면화하기 전에 원하는 움직임을 적으세요. 책상 램프를 생각해 보세요. 갓은 끄덕이고, 팔은 기울어지고, 받침은 고정되어야 합니다. 그런 움직임에는 따로 선택하고 배치할 조각이 필요합니다.
| 램프 부분 | 원하는 변화 | 준비 결정 |
|---|---|---|
| 갓 | 관절에서 회전 | 외곽선과 색상 세부 요소를 함께 두고 팔과 분리 |
| 팔 | 받침 관절에서 기울어짐 | 받침과 독립적으로 선택 가능하게 유지 |
| 받침 | 고정 | 움직이는 팔 그룹 밖에 유지 |
| 빛줄기 | 표시 여부 변경 | 효과가 필요하다면 별도로 선택 가능한 도형으로 제작 |
캐릭터 눈꺼풀, 흔드는 손이나 로고 요소에도 같은 방법을 적용할 수 있습니다. 움직임을 명시한 뒤 원본에 그 움직임을 위한 부분이 있는지 확인하세요.
원본 문서에서 의미 있는 부분에 이름을 붙이고 원본 사본을 보존하세요. 관련 세부 요소가 함께 움직여야 한다면 함께 두세요. 객체 목록을 줄이려는 이유만으로 전체 일러스트를 하나의 경로로 합치지 마세요.
가져온 후 Rive 그룹으로 조각을 구성하고 별도 변환 제어를 부여하세요. Rive에서는 그룹을 만들고 Hierarchy에서 객체를 안에 넣을 수 있습니다. macOS의 Command+G 또는 Windows의 Ctrl+G로 선택 항목을 그룹화할 수도 있습니다. Rive 그룹 문서가 제어 방법을 다룹니다.
SVG, Figma 또는 Illustrator에서 가져오기
저장한 SVG 파일
- 편집 가능한 원본을 계속 사용할 수 있도록 별도 SVG 내보내기를 저장하세요.
- 파일을 Rive로 드래그하거나 Assets 패널의 **+**를 눌러 가져올 파일을 선택하세요.
- 필요한 곳에 도안을 배치하고 Hierarchy에서 구조를 펼치세요.
- 작은 부분 하나를 선택해 채우기를 바꾼 후 되돌리세요. 원하는 영역만 바뀌었는지 확인하세요.
두 파일 가져오기 경로는 Rive Assets 개요에 나와 있습니다. 가져오기 성공은 편집 확인의 시작입니다.
Figma
Figma에서 원하는 도안에 Copy as SVG를 사용하고 Rive 편집기에 붙여 넣으세요. 큰 구성의 나머지를 복사하기 전에 가져온 도형과 모습을 확인하세요. Rive가 문서화한 Figma 가져오기 경로입니다.
Illustrator
SVG 스타일을 Presentation Attributes로 설정하세요. Rive는 Illustrator 내보내기 경로에서 약간 다른 이름을 안내합니다.
- Save As: SVG Options에서 CSS Properties를 Presentation Attributes로 설정하세요.
- Export As: SVG Options에서 Styling을 Presentation Attributes로 설정하세요.
- 직접 복사 및 붙여넣기: Illustrator가 이 경로에 해당 설정을 사용하므로 Export As SVG 스타일 옵션을 확인하세요.
전달할 SVG에서 Preserve Illustrator Editing Capabilities도 끄세요. Illustrator 원본은 따로 보관하세요. Rive는 이 옵션이 추가 Illustrator 데이터를 넣어 파일 크기를 늘리고 가져오기 도구가 인식하지 못하는 데이터를 포함할 수 있다고 경고합니다. Rive Illustrator 안내가 해당 설정의 출처입니다.
가져오기 증상에 맞는 첫 확인 선택하기
Rive는 선형 및 방사형 그라디언트를 지원하지만 모든 SVG 기능을 재현하지는 않습니다. 아래 표는 미지원 기능 목록을 수정 순서로 풀어 쓴 것입니다. 첫 확인 열은 진단 제안이며 파일에 대한 보장은 아닙니다.
| 바뀐 것 | 문서에 나온 가져오기 동작 | 원본 사본에서 먼저 확인할 것 |
|---|---|---|
| 사진, 질감이나 일러스트 영역이 사라짐 | 내장 이미지 무시 | 이미지 객체 확인. 원본 래스터를 따로 가져오거나 경로가 필요한 영역만 추적 |
| 그라디언트는 있지만 위치가 틀림 | 그라디언트 변환 무시 | 그라디언트 배치 재구성 또는 조정. 모든 그라디언트를 자동으로 제거하지 않기 |
| 점선 외곽선이 실선이 됨 | stroke-dasharray를 실선 스트로크로 가져옴 | 대시 도형이 고정되어야 한다면 편집 가능한 형상으로 변환하고 결과 확인 |
| 부드러운 마스크가 날카로운 경계처럼 동작 | SVG mask를 클리핑으로 가져옴 | 같은 부드러운 투명도 변화를 기대하지 말고 대상에 맞게 표시 효과 재구성 |
| 흐림, 그림자나 다른 필터 효과가 사라짐 | SVG filter 미지원 | 필요한 외관을 지원 도안으로 대체하거나 Rive에서 효과 제작 |
| 기울어진 도안이 달라짐 | 기울이기 변환 미지원 | 내보내기 사본에서 원하는 모양을 경로 형상에 적용 |
| 상속된 색상 표현이 흰색으로 바뀜 | inherit 채우기와 스트로크는 기본 흰색 | 영향받은 도형에 명시적 색상 지정 |
Illustrator SVG가 검게 보이면 Presentation Attributes 내보내기 설정부터 확인한 후 해당 도형의 색상 표현을 살펴보세요. 검은 도안만으로 원인을 알 수 없습니다. 이를 Rive가 문서화한 inherit의 흰색 대체 동작과 혼동하지 마세요.
이미지 콘텐츠가 누락됐다면 내장 래스터 SVG 안내를 참고하세요. 파일이 실제 경로를 포함하는지 SVG 안의 그림인지 확인하는 방법을 설명합니다. 자산 유형 목록에 따르면 Rive는 JPEG, PNG와 WebP를 자체 이미지 자산으로 가져올 수 있습니다. 질감 있는 배경을 별도 래스터로 유지하는 것이 맞을 수 있습니다.
가져오기가 끝나지 않는다면
같은 세션에서 작고 단순한 SVG를 시험하세요. 그것도 실패하면 도안을 재구성하기 전에 작업을 저장하고 편집기를 다시 시작하세요. 파일 하나만 실패한다면 영향받는 부분을 찾을 때까지 그룹을 별도 내보내기 사본으로 분리하세요. 세션 문제와 파일별 문제를 구분하는 방법이며 보편적인 복잡성 한계를 확정하지는 않습니다.
이 작업에서 PerfectVector가 필요한 경우
원본이 래스터이고 Rive용 편집 가능한 벡터 윤곽이 필요할 때 PerfectVector가 유용합니다. 평면 PNG나 JPG 일러스트를 SVG 경로로 변환한 후 가져오기 전에 벡터 편집기에서 결과를 확인하세요. 실루엣, 작은 틈과 따로 움직여야 하는 부분의 경계를 확인하세요. 추적은 보이는 영역을 재구성하며 원래 레이어 이름을 복원하거나 애니메이션 관절 위치를 결정하지 않습니다.
램프 예시로 돌아가 보세요. 팔과 받침이 연결된 도형 하나가 되었다면 경계를 분리하거나 다시 그리세요. 움직이는 조각이 원본에 가려진 영역을 드러낸다면 빠진 영역을 직접 그리세요. 가져온 구조를 중심으로 애니메이션을 만들기 전에 진행하세요.
원본 SVG에 이미 적절한 경로가 있다면 사용하세요. 단순한 기하학적 부분 몇 개에는 기본 그리기 도구를 사용하세요. 편집 가능한 윤곽보다 모습이 중요하다면 사진과 채색 질감은 래스터 자산으로 유지하세요. 이미지 벡터화 개요는 원본 이미지의 선택을 설명하고, Adobe Animate 추적 안내는 대상이 Animate일 때 별도 작업 방식을 다룹니다.
애니메이션을 만들기 전에 움직임 하나 확인하기
작업 사본에서 램프 갓을 선택하고 조금 회전하세요. 받침은 고정되고 원하는 세부 요소가 갓을 따르는지 확인하세요. 되돌린 뒤 팔을 선택해 반복하세요. 잘못된 부분이 움직이면 경로를 더 편집하기 전에 부모-자식 구성을 확인하세요.
회전축도 확인하세요. Rive에서 자식은 부모의 변환을 상속하며 원점은 회전이나 배율 조정이 일어나는 곳을 정합니다. Freeze를 사용하면 자식을 움직이지 않고 부모를 재배치할 수 있습니다. Y로 전환하고 원점을 조정한 뒤 끄세요. 제어는 Rive Freeze 및 Origin 안내를 따르세요.
애니메이션 작업을 확정하기 전에 다음을 확인하세요.
- 필요한 모든 조각을 독립적으로 선택할 수 있습니다.
- 채우기, 외곽선, 구멍과 그라디언트가 여전히 원하는 모습과 일치합니다.
- 따로 가져온 래스터가 유지하기로 한 위치에 있습니다.
- 움직일 때 의도치 않은 틈이나 빠진 숨은 도안이 드러나지 않습니다.
- 각 움직이는 조각이 의도한 관절 주위로 회전합니다.
- 원본과 정리된 가져오기 사본을 계속 사용할 수 있습니다.
FAQ
SVG를 가져오면 Rive에서 편집할 수 있나요? 네. Rive가 지원하는 SVG 기능에 해당합니다. Hierarchy에서 가져온 도안을 펼쳐 필요한 부분을 선택하세요. 여러 영역이 계속 하나의 객체로 동작하면 그룹과 경로 구조를 확인하세요.
SVG 안의 이미지가 사라진 이유는 무엇인가요? Rive는 SVG 가져오기에서 내장 이미지를 무시합니다. 원본 래스터를 찾아 이미지 자산으로 가져오거나 편집 가능한 윤곽이 필요할 때 적절한 도안을 경로로 추적하세요.
Rive는 SVG 그라디언트를 지원하나요? 선형과 방사형 그라디언트를 지원합니다. 그라디언트 변환은 무시하므로 가져온 후 위치를 조정해야 할 수 있습니다.
PNG를 추적하면 Rive 애니메이션이 만들어지나요? 추적으로 적절한 래스터 도안에서 SVG 형상을 만들 수 있습니다. 여전히 움직일 부분 확인과 분리, 계층 및 원점 설정과 Rive 애니메이션 제작이 필요합니다.
Sources
- Rive — SVG 및 벡터 자산 — 네이티브 객체 변환, Illustrator 및 Figma 가져오기, 런타임 내보내기 동작과 미지원 SVG 기능.
- Rive — 자산 — 파일 가져오기 제어와 별도 래스터 이미지 자산.
- Rive — 도형 및 경로 개요 — 도형 스타일과 도형 레이어 내부의 경로 형상.
- Rive — 그룹 — 부분 구성과 Hierarchy의 그룹 제어.
- Rive — Freeze 및 Origin — 부모-자식 변환과 자식 도안을 움직이지 않는 원점 재배치.
도안이 PNG나 JPG에서 시작하고 편집 가능한 윤곽이 필요하다면 PerfectVector로 SVG를 준비하세요. 추적한 부분을 확인하고 Rive로 가져온 뒤 나머지 애니메이션을 만들기 전에 독립 움직임 하나를 시험하세요.
