TGS 변환에 적합한 SVG에는 실제 벡터 도형이 있어야 하며 캔버스 범위도 명확해야 합니다. 파일 이름만으로 알 수 있는 것은 거의 없습니다. SVG에도 사진, 글꼴에 의존하는 편집 가능한 텍스트, 변환 과정에서 유지되지 않는 효과가 들어갈 수 있습니다. 애니메이션을 추가하기 전에 내보내기용 사본을 따로 준비하면 문제를 수정하면서 편집 가능한 원본을 손상시키지 않을 수 있습니다.
파일에 실제로 무엇이 들어 있는지 확인하기
디자인 편집기에서 SVG를 열고 개별 개체를 선택해 보세요. 편집 가능한 윤곽선으로 만든 로고는 좋은 출발점입니다. SVG 안에 넣은 사진은 브라우저에서 완벽하게 표시되더라도 여전히 래스터 이미지입니다. 텍스트 역시 벡터 그림처럼 보이면서도 실제로는 특정 글꼴에 의존할 수 있습니다.
예를 들어 배지 하나에 세 종류의 요소가 들어 있을 수 있습니다. 패스로 만든 방패, 편집 가능한 텍스트 라벨, 삽입된 인물 사진입니다. 방패는 그대로 두고, 라벨은 패스로 변환하고, 사진은 단순한 벡터 일러스트로 교체하세요. 이런 변경 없이 같은 구성을 다시 저장하는 것만으로는 호환성 문제가 해결되지 않습니다.
원본과 내보내기용 사본을 분리하기
편집 가능한 텍스트, 재사용할 수 있는 구성 요소, 원하는 효과가 들어 있는 원본 문서는 보관하세요. 변환용으로 아트보드나 문서를 복제합니다. 이 사본에서는 패스를 단순화하고 글자를 윤곽선으로 바꿀 수 있으므로, 나중에 원본의 문구를 수정할 때 불필요한 어려움을 겪지 않아도 됩니다. 두 버전에는 각각의 용도를 알 수 있는 이름을 붙이세요.
사용하지 않는 개체는 다른 도형 뒤에 숨겨 두는 데 그치지 말고 내보내기용 사본에서 삭제하세요. 따로 움직여야 하는 요소는 분리된 상태로 유지하되, 시각적으로 하나인 도형을 수십 개의 작은 조각으로 쪼개지는 마세요. 요소 구조가 깔끔하면 어느 부분에 애니메이션을 적용하는지 이해하기 쉬워집니다.
변환할 때 깨지기 쉬운 시각 효과 바꾸기
그림자, 마스크, 질감 채우기와 그 밖의 효과를 하나씩 살펴보세요. 브라우저에서 렌더링할 수 있는 SVG 기능이라도 TGS 내보내기 기능에서는 재현하지 못할 수 있습니다. 작은 스티커에서는 흐림 필터보다 위치를 조금 옮긴 단순한 실루엣이 그림자를 더 안정적으로 표현할 수 있습니다. 효과를 바꿀 때마다 모양을 확인하세요.
모양을 유지하려고 그림 전체를 한 장의 이미지로 변환하지 마세요. 이렇게 하면 SVG 미리보기는 그럴듯하게 보이지만 TGS에 필요한 벡터 구조가 사라질 수 있습니다.
- 확정된 문구를 패스로 변환하세요.
- 삽입된 이미지를 벡터 작업물로 교체하세요.
- 꼭 필요한 효과는 단순한 도형으로 다시 만드세요.
- 의도한 모양의 스크린샷을 비교용으로 보관하세요.
계획한 움직임을 위한 공간 남기기
용도에 맞게 정한 캔버스의 중앙에 작업물을 배치하고 가장 바깥쪽 점들을 확인하세요. 정지 상태에서 거의 모든 가장자리에 닿는 디자인은 튀어 오르거나 회전할 공간이 부족합니다. 그림에 딱 맞게 아트보드를 자르기 전에 어떤 움직임을 줄지 먼저 대략 정하세요.
중심을 기준으로 회전하는 정사각형 엠블럼을 생각해 보세요. 회전 도중에는 모서리가 변이 수평일 때보다 더 바깥으로 뻗습니다. 작업물의 크기를 줄이거나 움직임의 폭을 더 작게 설정하세요. 캔버스에 표시된 값만 바꾼다고 실제 도형이 이동하지는 않습니다.
복잡하게 만들기 전에 단순한 내보내기 결과 비교하기
변환기에서 SVG를 선택하고 Telegram 로그인을 완료하세요. SVG를 선택하면 진단용 사본이 서비스로 전송됩니다. 정적인 구성이나 움직임이 적은 프리셋으로 시작해 미리보기를 참고 이미지와 비교하세요. 세부적인 움직임을 만드는 데 시간을 쓰기 전에 글자, 구멍, 색상, 투명 영역을 확인하세요.
이 기본 버전에서 이미 무언가가 빠져 있다면 SVG로 돌아가 해당 요소를 수정하세요. 기본 버전은 올바르지만 애니메이션 버전에서 문제가 생긴다면 움직임, 타이밍, 표시 범위를 집중적으로 확인하세요. 이렇게 나누어 살펴보면 수정마다 목적이 명확해지고, 관련 없는 변경 때문에 원래 문제가 가려지는 일을 막을 수 있습니다.