After Effects를 사용하지 않고 화면 녹화로 쉽고 간편하게 짧은 UI 애니메이션을 제작하는 방법
Last updated at September 25, 2023
<aside> ⚠️ 주의
이 글에선 작업시 정합성을 완전히 무시하고 있어 불편할 수 있습니다. 짧은 글이니 가볍게 읽어주시고, 이렇게 대강 처리하는 방법도 있다는 것을 알려주는 것이 이 글의 목적입니다.
</aside>
올해 초 우리 회사 프로덕트인 MediaCAT의 리스트에 아무것도 없는 상태에서 사용자에게 이해를 도울만한 가이드 애니메이션이 보여지면 좋겠다란 요구사항이 생겼습니다.
(제가 어떤 환경에서 일하는지는 XL8에서, 1년 회고 에서 참고)
결과를 먼저 보여드리면 아래와 같은 간단한 애니메이션이 필요했던건데,
MediaCAT의 Translate 기능에 대한 애니메이션
MediaCAT의 Translate 기능에 대한 애니메이션
이처럼 짧고 간단한 애니메이션이지만, 각각의 기능마다 필요하여 좀 번거로운 일이었습니다. 그에 비해 요구사항 자체가 중요하지는 않아서 짧은 시간 내에 가볍게 처리하고 싶었고, 방법을 먼저 찾아보았습니다.
일단 제대로 하려면 After Effects를 사용해야 할텐데, 사용해본 지가 한참 오래되어서 잘 기억이 나지 않고 익숙하지도 않았습니다.
대충 예전에 어떻게 했었더라고 기억을 더듬어보아도, UI로 그려진 요소들이 들어가는 것이기 때문에 UI가 있는 Figma에서 After Effects로 변환하기 위한 플러그인을 찾아 설치해야 하고, 이 변환을 위해서 Figma에서 실제로 사용되는 용도와는 다르게 After Effects를 위해 각각의 레이어를 별도로 조정해야 하며, 그 다음에 After Effects에서 애니메이션 작업을 하는 것도 상당한…
... 여러 애니메이션들을 모두 이렇게 일일히 처리하면 시간이 상당히 많이 소요될 것 같았습니다.