어도비 xd lottiefiles 애니메이션 이미지로 디자인하기

어도비 XD 에서 LottieFiles를 지원합니다. Lottie를 XD 에서 사용하는 방법을 공유합니다.

 

LottieFiles 로티파일스

lottiefiles에 대해 들어보셨을까요? 그냥 로티(Lottie)라고도 합니다. 이미 많은 분들이 알고 계시기도 할텐데 가볍고, 크기를 변경해도 이미지가 깨지지 않는 움직이는 이미지 - 애니메이션 이미지들을 라이브러리로 제공해주는 사이트입니다. Freepik에서는 정적인 일러스트 이미지를 받을 수 있다면 움직이는 일러스트 이미지는 로티파일스에서 받으면 됩니다. 이 서비스를 에어비앤비에서 만들었다고 합니다.

 

흔히 WEB이나 모바일 환경에서는 jpg, png, svg 같은 이미지를 쓰고 애니메이션을 만들려면 gif로 만듭니다. 아니면 동영상 파일인 mp4 같은 걸 써야 하죠. 그 외엔 이미지를 직접 움직일 수 있도록 자바스크립트( Javascript)를 사용하거나 해야 합니다. 

로티는 기본적으로 벡터이미지이기 때문에 파일 용량이 작고 이미지는 svg, 애니메이션은 json으로 되어 있다고 합니다. 로티에서는 PNG를 공룡, GIF를 코끼리, 로티를 강아지에 비유해서 각각의 파일크기가 얼마나 차이가 있는지 설명하고 있습니다.

 

웹에서 사용할 때는 lotties.js 파일을 삽입하면 움직이는 이미지를 이용할 수 있습니다. 

 

좀 더 자세한 내용은 lottieFiles 홈페이지에서 확인해보시구요.

LottieFiles: Download Free lightweight animations for website & apps.

 

어도비 XD에서 LottieFiles 사용하기

 

반응형

 

어도비 XD는 버전업을 통해  LottieFiles 애니메이션 이미지들을 이용해 디자인을 할 수 있도록 플러그인을 지원하고 있습니다. 로티 홈페이지에서는 디자인과 개발자 영상제작자들을 위해 다양한 플러그인을 제공하고 있는데요.

어도비 애프터이펙트, 피그마, 어도비 XD, 워드프레스 등에서 사용할 수 있는 다양한 플러그인이 있습니다.

여기서는 어도비 XD용 플러그인만 살펴보겠습니다.

 

XD용 플러그인 받기

XD용 LottieFiles플러그인을 받는 방법은 XD 내에서 플러그인을 추가하는 방법이 있고 lottiefiles 홈페이지에서 내려받는 방법이 있습니다. 홈페이지에서 플러그인을 받을 때는 윈도우, 맥 등 운영체제를 선택해서 다운로드 하면 됩니다.

lottiefiles adobe xd 플러그인 다운로드

LottieFiles for Adobe XD

위 링크를 이용해 플러그인을 받으시면 되고 다운로드된 파일은 adobe-xd-3.0.3-stable.xdx 입니다. XD 가 설치되어 있으시다면 다운로드한 .XDX 파일을 더블클릭하면 플러그인을 설치할 수 있습니다.

 

또다른 방법은 XD 안에서 플러그인을 받는 방법입니다. XD를 열고 상단 메뉴 > 플러그인 > 플러그인 검색으로 이동하거나 왼쪽 하단의 블럭모양을 클릭해 플러그인을 열고 + 를 눌러 추가하고자 하는 플러그인을 검색할 수 있습니다. 저는 이미 LottieFiles 를 추가했기 때문에 아이콘이 보이네요.

 

플러그인 검색을 누르면 Stock 및 마켓플레이스로 이동합니다. 왼쪽에 플러그인 관리 메뉴 및에 모든 플러그인 검색에서 lottie를 입력하면 플러그인을 찾을 수 있습니다.

 

검색된 플러그인이름은 LottieFiles for Adobe XD입니다. 해당 플러그인을 받기해서 설치하시면 됩니다.

플러그인을 설치하면 LottieFiles라는 플러그인이 추가된 것을 볼 수 있는데요. 플러그인을 클릭하면 로티 홈페이지에 있는 파일들이 펼쳐지는데요. 그전에 로티홈페이지로 로그인을 하는 과정을 먼저 거쳐야할 수 있습니다.

 

 

어도비 XD에서 Lottie 사용하는 방법

사용방법은 간단합니다. 왼쪽에 펼쳐진 로티 파일들을 아트보드로 드래그하면 됩니다. 다만 일부 애니메이션 파일들은 가져왔을 때 처음에는 아무것도 안보일 수도 있습니다. 미리보기를 해보면 해당 위치에 애니메이션이 삽입된 것을 확인할 수 있습니다.

 

 

 XD에서 다양한 로티 파일들을 얹어서 샘플을 만들어봤습니다.

 

아래는 미리보기를 녹화해서 다시 gif로 만든 이미지입니다.

 

JSON 파일 호환 문제

XD에 LottieFiles 파일을 드래그 해오면 파일 삽입이 되지 않는 것들도 있습니다. 아래와 같이 Lottie JSON 파일이 호환되지 않는다는 경고메시지와 함께 XD가 일부 Lottie 파일을 지원하지 않는다고 되어 있습니다.

 

 

어도비에서 Lottie 애니메이션을 XD에서 사용할 때 현재 상태에서 몇가지 제한 사항이 있다는 것을 공지하고 있습니다.

• 15MB 미만의 로티 파일만 XD에서 사용할 수 있습니다. (갯수제한은 없음)
• 비디오가 자동재생 설정된 경우 자동 재생 되지 않습니다. (미리보기에서 확인 가능)
• 다른 프로토타이핑 트리거 시작시 로티 정지
• 로티 애니메이션 데스크탑 글꼴을 사용하는 경우 웹 재생에서 글꼴 표시 안됨
  이부분은 제 생각에 SVG가 글꼴을 포함시켜주지 않기 때문인 것 같습니다.
• 이미지와 같은 외부 리소스를 참조하는 로티 애니메이션 사용 불가
• Lottie JSON 이 아닌 JSON 파일은 가져 올 수 없습니다.

위에 설명된 것처럼 현재는 애니메이션이 Lottie JSON으로 되어 있어야만 어도비 XD에서 호환이 되는 것 같은데요. 향후에 XD와 Lottie에서 업그레이드를 통해 해결해줄지는 지켜봐야할 것 같습니다.

 

고맙습니다.