💫 CSS, JS 없이도 SVG 모핑을 구현할 수 있다니

문제 정의: 메뉴 표시 애니메이션

주요 목표는 위 초안과 같이 메뉴가 표시될 때 등장 애니메이션을 구현하는 것이었습니다. 리서치를 진행했을 때는 framer-motion과 같은 애니메이션 라이브러리를 사용한 예제들을 많이 찾아볼 수 있었는데, 이 애니메이션만을 구현하기 위해서 새로운 의존성을 추가하는 것은 좋지 않다고 생각이 들어서 추가적인 라이브러리 없이 구현할 수 있는 방법을 모색하기 시작했습니다.

일단 해결해야하는 문제를 정의해보겠습니다. palette menu 컴포넌트는 각 버튼이 육각형 SVG로 이루어져 있습니다. 제가 해야할 일은 원 모양의 SVG를 선언해주고 육각형 SVG로 자연스럽게 변하는 모션을 만들면 됩니다.

CSS Transition을 써볼까요?

처음으로 시도했던 방법은 CSS Transition 속성을 이용하는 방향이었습니다. 육각형은 SVG 내에서 Polygon 속성으로 정의되고 있는데, 모션 연결을 하기 위해서 Path로 변환해주었습니다. 이때 Path 내에서 어떻게 그려질지를 정의해주는 속성이 d 속성인데, transition을 d에 걸어주면 자연스러운 변경이 되지 않을까 생각했습니다.

하지만 아쉽게도 transition은 d 속성을 지원해주지 않았습니다. (참고: CSS Animations and Transitions on SVG Attributes)

처음 만난 animate

SVG에 사용가능한 애니메이션을 찾던중 animate 속성을 사용한 예제를 발견했습니다. animiate 는 svg 내에서 속성으로써 사용이 가능하고, SMIL 애니메이션 기술을 사용합니다. 별도의 CSS나 JS 없이도 애니메이션을 정의해줄 수 있는 XML 기반 정의를 할 수 있습니다.

예시 코드는 하단과 같습니다.

<svg>
  <animate
    attributeName="d"
    dur="10s"
    repeatCount="indefinite"
    values="M 1045,520 L 1173,558 L 1184,393 Z;
  	    M 1036,540 L 883,540 L 883,693 Z;
	    M 1045,520 L 1173,558 L 1184,393 Z"
    keyTimes="0; 0.5; 1" />
</svg>

css의 keyframes와 같은 역할을 하는 keytimes를 사용할 수 있으며, from과 to 속성을 사용할 수도 있습니다. 이 방법을 찾았을 때는 문제 해결에 가까워졌다고 생각했는데, animate 속성이 뚝뚝 끊겨서 전환하는 것처럼 보였습니다. 즉, 제가 원하는 부드러운 트랜지션이 되고있지 않았습니다.

내 애니메이션만 부드럽지 않은 이유

하지만 다른 예제들을 보면 분명히 animate 속성을 사용하면서 부드럽게 트랜지션을 하고 있는 것을 발견할 수 있었습니다. 더 찾아본 결과, 부드러운 트랜지션이 지원되려면 svg path가 특정 조건을 충족해야 했습니다.

1. 앵커 포인트의 수가 일치할 것
2. 앵커 포인트의 순서가 일치할 것
3. 모든 경로 명령어 타입이 일치할 것

path d는 아래와 같이 이루어져 있는데, 앞에 알파벳으로 M,C,Q,L,Z와 같이 명령을 적을 수 있고 그 옆에는 해당 명령에 따른 포인트들을 설정해줄 수 있습니다. (예를 들어 L은 선분을 그리는 명령어입니다.)

const d = `
  M 50 0
  Q 71.65 12.5, 93.3 25
  Q 93.3 50, 93.3 75
  ... 이하 생략

부드러운 트랜지션 조건을 일치시키기 위해서 원과 육각형을 그리는 경로 명령 타입이 일치해야하는데, 고려해보면 원은 무조건 곡선 명령으로 그려야하니 육각형을 line 명령이 아닌 곡선 명령으로 그려지도록 SVG path를 수정해줘야 했습니다. 이 과정에서 원하는 결과물을 얻기가 쉽지 않아서 오랜 시간이 걸렸습니다. AI한테 수차례 수정 요청을 부탁한 끝에 육각형과 가까운 svg를 받을 수 있었습니다.

이 과정에서 알게된 점은 C(3차 베지어 곡선)이 아니라 Q(2차 베지어 곡선)을 사용하는 것이 다각형 형태를 유지하는 데 더 수월하게 진행할 수 있었습니다. 육각형은 곡률을 적게하고, 원은 곡률을 매우 올려서 그리면 베지어 곡선으로도 다양한 도형을 표현할 수 있습니다. 원과 육각형을 Q 명령을 통해서 그린 후, 모핑이 지원되는 것을 확인할 수 있었습니다.

추가적으로 CSS transition-transform을 사용해서 각 버튼이 중앙에서부터 퍼져나오도록 설정을 해주면 다음과 같은 애니메이션을 얻을 수 있습니다.

마치며

애니메이션을 구현할 때, 복잡한 애니메이션을 구현해야하는 서비스가 아니라면 SVG 관련 내장 기술을 통해서 용이하게 모핑을 구현해볼 수 있었습니다. 특히 path d 속성에 변화를 줘야하는 경우가 아닌 경우, rx , ry 를 다루는 경우에는 더 쉽게 구현할 수 있습니다.

어려웠던 점은, SVG가 많이 사용되고 있음에도 불구하고 애니메이션과 관련된 자료는 인터넷에 많지 않았던 것 같습니다. 그리고 path를 조절하는 것은 직접 편집 도구를 사용하지 않는 이상 AI에게 수정 요청을 해줘야 하는데, "어떤 부분을 어떤 곡선을 통해서 표현할 수 있도록 수정해줘"와 같이 구체적인 키워드를 포함해야 원하는 결과물에 가깝게 얻을 수 있었습니다.

만약 인터랙션 요구사항이 더 많고 복잡해지는 경우, 라이브러리를 도입하는 것이 팀의 생산성에 도움이 될 수 있기 때문에 문제 상황을 잘 판단하는 것이 좋다고 느꼈습니다.

References

• https://stackoverflow.com/questions/32729752/css-transition-animation-doesnt-work-on-svg-paths-d-attribute-change
• [SVG animation with SMIL - SVG: Scalable Vector Graphics | MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_animation_with_SMIL)
• https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animate