벡터 모핑 편집기
두 폐곡선에서 같은 번호의 점을 대응시켜 시간에 따라 좌표를 보간합니다. 각 점을 끌거나 키보드와 숫자로 조정하고 끝 도형의 점 순서를 돌려 대응 관계를 바꿀 수 있습니다. 중간 프레임과 자체 교차 경고를 살핀 뒤 선택 프레임, 전체 프레임 시트 또는 왕복 SVG 애니메이션을 저장하세요. 이 편집기는 하나의 닫힌 윤곽과 같은 개수의 3~16개 점을 다룹니다. 임의의 SVG 파일, 구멍, 여러 서브패스나 복잡한 곡선의 자동 대응은 지원하지 않습니다.
주요 기능
- 시작·끝 도형의 3~16개 대응점을 드래그, 화살표 키 또는 좌표로 편집
- 같은 수의 점을 함께 삽입·삭제하고 끝 도형의 대응점 순서를 회전·반전
- 닫힌 M/L/H/V/Z SVG polygon 경로를 한쪽 도형에 불러오기
- 시작·끝 경로를 정확히 재현하며 2~24개 중간 프레임과 자체 교차 경고 제공
- 선택 프레임, 전체 프레임 시트, 왕복 애니메이션 SVG와 설정 JSON 저장
사용 방법
- 예제의 시작·끝 도형을 비교하고 같은 번호의 점이 어떻게 대응하는지 확인합니다.
- 점을 끌거나 좌표를 입력해 두 도형을 편집합니다. 필요한 경우 점 쌍을 추가하거나 끝 도형의 점 순서를 바꿉니다.
- 프레임 수와 곡선 부드러움을 정하고 슬라이더 또는 프레임 목록으로 중간 윤곽을 확인합니다.
- 자체 교차 경고가 뜨면 해당 프레임의 점 대응과 순서를 고칩니다.
- 현재 프레임 SVG, 프레임 시트 SVG 또는 왕복 애니메이션 SVG를 내려받습니다.
활용 예시
- 아이콘 A에서 아이콘 B로 바뀌는 간단한 벡터 애니메이션 초안
- 두 로고 윤곽의 점 대응이 접히지 않는지 검토
- 교육용 도형 보간 단계별 프레임 시트 제작
자주 묻는 질문
왜 시작과 끝 도형의 점 수가 같아야 하나요?
SVG 경로 보간은 각 명령과 점의 대응이 같아야 합니다. 이 도구는 같은 번호의 점을 짝지어 좌표를 계산하므로 양쪽에 점을 함께 추가하거나 삭제합니다.
SVG 파일을 바로 불러올 수 있나요?
파일 전체는 받지 않습니다. 하나의 닫힌 다각형을 나타내는 SVG path d 값에서 M, L, H, V, Z 명령과 상대 명령만 붙여 넣을 수 있습니다. 곡선, 구멍, 다중 경로는 먼저 단순화해야 합니다.
자체 교차 경고는 무엇을 뜻하나요?
보간 윤곽의 서로 떨어진 선분이 교차했다는 뜻입니다. 의도된 별 모양도 경고할 수 있으며, 이 경고는 다운로드를 막지 않습니다. 부드러운 곡선은 구간별 표본으로 검사해 아주 작은 교차는 놓칠 수 있습니다.
애니메이션 SVG는 어떤 방식으로 움직이나요?
같은 구조의 path d를 SVG animate로 시작→끝→시작 순서로 왕복시킵니다. SVG 애니메이션 지원은 뷰어마다 다르며, 움직임 줄이기 설정에서는 정지 시작 도형을 보이도록 만듭니다.
설정 JSON을 다시 불러올 수 있나요?
현재 버전은 설정 JSON을 참고·보관용으로 내려받습니다. 편집기에 JSON 파일 전체를 다시 불러오는 기능은 없으며, 경로 d를 붙여 넣어 작업을 이어갈 수 있습니다.
개인정보 안내
도형 좌표와 SVG 생성은 브라우저 메모리에서 처리됩니다. 이 도구는 작업 내용을 서버 API로 보내지 않습니다.
댓글과 질문