위처럼 텍스트의 path를 따서 애니메이션 효과를 주는 예제를 만들어봤다. 프로토타이핑 툴로 잘 사용하고 있는 figma로 기본이 되는 SVG를 만들고, 간단한 자바스크립트와 CSS로 애니메이션을 만들었다. SVG 태그 생성 figma로 아무 draft나 열어서 캔버스를 만든 다음, T 아이콘을 눌러 텍스트를 생성한다. figma에서 한글은 받침을 타이핑할 때 문제가 있어서, 한국어 텍스트로 SVG 소스를 준비해야 한다면, 포토샵 등 다른 도구를 사용하는 것이 낫다. 이렇게 아무 텍스트 박스가 생성되고, 현재는 Path를 따지 않았으므로 파란색 테투리가 텍스트 박스 전체에 걸쳐 있는 것을 볼 수 있다. 여기서 우클릭 -> outline stroke를 눌러주고, 이 상태에서 오른쪽의 Design 패널의 S..
