After Effects Shape 레이어에서 한 패스의 정점을 다른 패스의 정점으로 보간해, 도형 자체가 다른 도형으로 변하는 제작 기법.
디자인 아틀라스<svg class="morph-svg" viewBox="0 0 100 100"><path id="sh" class="sh"/></svg>.morph-svg{width:min(52%,200px);aspect-ratio:1}
.sh{fill:var(--accent)}const SHAPES = [
'M50,20 L80,50 L50,80 L20,50 Z',
'M50,15 L85,85 L15,85 Z',
'M20,20 L80,20 L80,80 L20,80 Z',
'M50,15 A35,35 0 1 1 49.9,15 Z',
];
const el = document.getElementById('sh');
let i = 0;
el.setAttribute('d', SHAPES[0]);
function next() {
i = (i + 1) % SHAPES.length;
el.style.transition = 'none';
el.animate([{ d: 'path("' + SHAPES[(i + SHAPES.length - 1) % SHAPES.length] + '")' }, { d: 'path("' + SHAPES[i] + '")' }], { duration: 900, easing: 'cubic-bezier(.4,0,.2,1)', fill: 'forwards' });
setTimeout(next, 1700);
}
setTimeout(next, 1200);웹의 모핑이 SVG path의 d 속성을 직접 보간한다면, After Effects는 Shape 레이어 두 개의 패스 데이터를 키프레임 사이에서 보간한다. 두 패스의 정점(anchor point) 개수가 같아야 매끄럽게 이어지는 원리는 동일하다 — 정점 수가 다르면 애니메이터가 손으로 정점을 추가·삭제해 맞춘다.
실무에서는 재생 버튼(▶)이 일시정지 아이콘(❙❙)으로 바뀌는 UI 마이크로 인터랙션부터, 브랜드 로고의 여러 변형이 순서대로 이어지는 타이틀 시퀀스까지 폭넓게 쓴다. Trim Paths와 함께 쓰면 "그려지면서 동시에 모양이 바뀌는" 연출도 가능하다.
정점 순서(어느 점이 어느 점으로 이동하는지)가 맞지 않으면 도형이 뒤집히거나 꼬이며 변한다 — 모프 전에 두 패스의 시작점을 같은 위치로 맞춰두는 게 핵심이다.
의미가 이어지는 도형끼리만 모프하세요. 재생↔일시정지처럼 관계가 분명해야 사용자가 변화를 자연스럽게 읽습니다.