어떤 로고에나 애니메이션 효과를 줄 수 있는 능력을 가졌다면 어떨까요? 모션 디자이너와 복잡한 소프트웨어 없이 그저 화장실에 다녀올 짧은 시간 안에 회사 로고에 애니메이션 효과를 줄 수 있다고 상상해 보세요.
네, 바로 LottieFlies와 함께라면 가능하죠. 단지 SVG to Lottie 툴을 사용해 Adobe After Effects없이 어떤 로고에든 애니메이션 효과를 줄 방법이 여기에 있습니다.
영상 보기: Adobe After Effects 없이 로고에 애니메이션 효과 주기
아래 비디오 튜토리얼을 시청하거나 아래로 스크롤하여 기록된 안내 사항을 확인해 보세요. 튜토리얼을 따라 연습할 수 있는 연습 파일은 여기에서 다운로드하실 수 있습니다.
1. 선택 사항: Figma에서 처음부터 로고 제작하기
로고가 아직 없으시다면, Figma에서 시험 삼아 만들어 보실 수 있습니다. 아래는 Figma에서 맨 처음부터 빠르게 로고를 만들 수 있는 방법입니다.
- 펜 툴로 전환하기 위해 ‘P’를 누릅니다.
- 펜 툴을 사용하여 구불한 선을 그립니다(이후에 보시겠지만, 애니메이션 효과가 이 선의 획 경로를 따라 나타납니다.)
- 획의 두께를 1에서 36까지 변경합니다.
- 획의 색상을 #3C48F6으로 변경합니다.
- 회사 이름을 그 옆에 추가합니다.
- 로고 레이어를 선택하여 그룹으로 묶습니다.
- SVG 파일 형태로 내보내기하고 파일을 저장합니다.
2. LottieFiles의 SVG to Lottie 툴에 끌어다 놓기
LottieFiles의 SVG to Lottie 툴로 이동합니다. SVG 파일을 툴에 끌어다 놓습니다.
그 다음, 다양한 애니메이션 옵션을 볼 수 있습니다. 이 사례에서는, 위의 옵션을 선택하겠습니다. 어떤 애니메이션 스타일이 내 로고에 가장 어울리는지 다른 옵션들도 마음껏 실험해 보세요.
그럼 다 되었습니다! 나만의 애니메이션 로고, 그것도 Adobe After Effects를 사용하지 않고 작업 1분만에 완성되었습니다.
3. 내 애니메이션을 저장하기
내 애니메이션을 저장하려면, “Lottie 다운로드(Download Lottie)” 또는 “업로드하여 미리 보기(Upload to Preview)”를 클릭하여 자신의 비공개 애니메이션 대시보드(private animation dashboard)에 저장합니다.
이미 로고를 가지고 있다면 어떻게 할까요?
애니메이션 효과를 주고 싶은 기존 SVG 로고를 가지고 있나요? 바로 SVG to Lottie 툴에 끌어다 놓고 다양한 애니메이션을 시도해 보세요.
애니메이션을 더 효과적으로 제어하려면 Figma에서 편집도 할 수 있습니다. 예를 들면, LottieFiles 로고를 Figma에 드롭합니다.
다음과 같은 편집을 적용해 보겠습니다.
- LottieFiles 아이콘을 선택 후 #24E2E5 색상으로 획 추가하기
- 색상 채우기 삭제하기
- 로고를 SVG 파일로 내보내기
Lottie 툴로 SVG를 끌어다 놓기만 하면 짜잔! 애니메이션 로고가 완성됩니다.
일부 작은 부분에는 적절하게 애니메이션 적용이 안 되는 것을 보실 수도 있습니다. 위 예시에서는 ‘e’의 공백이 채워져 있습니다. 이러한 작은 디테일을 고치려면 Figma에서 SVG 파일을 편집할 수 있고 부울 연산(Boolean operations)을 사용해 로고에서 원치 않는 부분을 제거할 수도 있습니다.
복잡하고 맞춤 구성된 애니메이션을 위해서는 Adobe After Effects와 같은 소프트웨어를 작동해야 할 수 있습니다. 하지만 모션 디자이너가 아니거나 내게 잠깐의 여유만 있다면 SVG to Lottie 툴을 사용하는 것이 로고에 애니메이션 효과를 줄 탁월한 방법입니다.
내가 만든 디자인에 더 멋진 모션 마법을 추가하는 방법을 배워보고 싶으신가요? 다른 튜토리얼을 저희 블로그에서 확인하고 Lottie 전문가로부터 무료 코스를 통해 배워 보세요. 혹은 저희 YouTube 채널에 방문해 보세요!
