UX 디자인과 개발 2. Lottie와 Json
애니메이션을 만들기 위해 말로만 듣던 lottie를 사용하게 되었다.
'프로그램이 돌아간다', '진행 중'의 상태처럼 작업이 처리되고 있다는 상황을 알려줄 때 애니메이션이 들어가기도 합니다. 유저에게 상태가 작동하고 있는지, 혹은 어느정도 되었는지 등 다양한 효과를 시각적으로 전해줄 수 있는 애니메이션은 GIF 파일 형식을 사용할 수도 있지만 GIF는 파일 용량이 큽니다. 게다가 화질이 깨지기 쉽고, 이미지 사이즈를 가변적으로 변경하기에 어려움이 있습니다.
이럴 때, Lottie를 이용하면 화질이 깨지거나 가변적인 이미지 사이즈, 용량 처리 대한 문제를 손쉽게 해결 할 수 있습니다.
Lottie libraries and plugins available for Web, iOS, Android, Flutter, React, React Native, Xamarin, NativeScript, Windows, Vue, Angular, QT, Skia, Framer X, Sketch, Figma & After Effects.
Lottie 홈페이지에서는 다양한 환경에서 로티 라이브러리를 지원한다고 알려줍니다. 또한 실무에서 사용하는 스케치, 피그마에서도 플러그를 통해 파일을 가져와 프로토타이핑할 수 있습니다. 그 외에 로티를 통해 추출된 Json 파일을 이용한다면 디자이너가 아닌 개발쪽에서도 용량 걱정없이 편하게 크기를 조절할 수 있습니다
Lottie를 이용하려면?
준비물 : 에프터 이펙트 + Lottie
Lottie를 통해 Json 파일을 저장하려면 에프터 이펙트가 필수.
Lottie를 이용해 Json 파일 추출하기
1. 가입하고, 에프터 이펙트 플러그인을 설치.
로티 공식 홈페이지 : https://lottiefiles.com/
공식 홈페이지 에프터 이펙트 플러그인 : https://lottiefiles.com/plugins/after-effects
* 플러그인을 설치할 때 ZXP 압축을 풀기 위해서는 ZXP 압축 해제 프로그램을 설치해야합니다.
https://aescripts.com/learn/zxp-installer/
예전에는 없었던 'VIA ADOBE EXCHANGE'를 통해서 ZXP 압축 파일을 설치하지 않고 adobe에서 설치, 에프터 이펙트에서 바로 설치가 가능하도록 기능이 추가되었습니다.
* VIA ADOBE EXCHANGE를 설치하면 에프터 이펙트에서는 LottieFiles 플러그인이 생성됩니다.
LottieFiles 플러그인에 대한 사용환경은 아래 설명되어 있습니다.
2. 모든 설치를 마치고 에프터 이펙트를 실행 후 '창 - 확장자명 - LottieFiles, Bodymovin'을 불러온다.(둘 중 하나만 사용하면 됩니다.)
여기서 잠깐, LottieFiles 플러그인을 열면...
"왜? 창이 안 나오지? 분명히 로티 홈페이지에서는 에프터이펙트와 바로 연결이 된다고 했는데?"
이와 같은 문제가 빈번히 발생한다는 글을 발견했습니다. 그리고 답변도 찾았습니다.
즉, LottieFiles 플러그인 사용 시 에프터이펙트의 설치 언어를 '영어'로 해야합니다.(한국어로 설치 되었을 경우 삭제 후 영문판으로 재설치)
3-A. Bodymovin을 통한 Json 추출, 미리보기
셋팅은 작업 파일에 대한 상세 셋팅을 조절할 수 있습니다. 완료 후, 초록색 버튼을 누르면 파일경로, 저장 이름을 설정한 뒤 저장됩니다.
그렇게 저장된 Json 파일이 잘 돌아가는지 확인을 하고 싶다면 Lottie 홈페이지에서 테스트 해볼 수 있습니다.
https://lottiefiles.com/preview
3-B. LottieFiles을 통한 Json 추출
영문판 설치가 번거롭지만, 설치한다면 Bodymovin에선 지원하지 않는 프리뷰를 파일 저장과 함께 볼 수 있습니다. 작업중인 파일을 오른쪽 화살표를 눌러 저장하면, 다음 프리뷰 메뉴에서 바로 제대로 플레이가 되는지 테스트 화면이 보입니다. 또한 Lottie에서 제공하는 무료 애니메이션을 쉽게 다운 받을 수도 있습니다.
(왼쪽) 프리뷰 (오른쪽) free 파일그 외 Lottie Point
1. Lottie 홈페이지에는 다양한 디자이너가 작업한 작품을 만나볼 수 있습니다. 유료 패키지 다운, 무료 다운이 함께 있어 빠른 작업을 위해 구매하거나 무료 아이콘을 다운 가능합니다.
2. 에프터이펙트에서 배경색상을 설정하지 않고 투명으로 만들고 싶은데... 이게 맞을까?라는 고민이 든다면 작업 프레임의 하단 셋팅 메뉴 중 'Toggle Transparency Grid'를 눌러보면 됩니다. 타임라인창에 배경색을 위해 도형을 깔지 않았고 작업했다면 기본적으로 배경은 투명으로 설정되어 저장되는 게 기본 설정이라는 걸 알고 있다면 마음이 놓이죠. 추후 Lottie 사이트에서 프리뷰를 위해 Json파일을 등록하고, 홈페이지에서 별도의 색을 지정해서 바로 수정할 수도 있으니 투명으로 작업하는 게 더 수월합니다.
3. 개발 환경을 주의해서 에프터 이펙트 작업을 해야합니다. 에프터이펙트에서 열심히 '효과'를 삽입해서 넣은 작업이 Json 파일 추출 시에는 에러가 나서 제대로 작동되지 않는 경우가 있습니다. 효과를 적용할 때 한 번 체크하면 추후 있을 에러를 방지할 수 있습니다.
개발 환경별 효과를 여부를 참고할 수 있는 사이트 : https://lottiefiles.zendesk.com/hc/en-us/articles/900000997203-When-I-render-my-animation-in-the-plugin-it-doesn-t-look-like-how-I-ve-designed-it-in-After-Effects
4. 파일 적용 사이즈는 기본적으로 에프터 이펙트에서 제작한 사이즈입니다. 하지만 개발자님에게 nn% 축소, 증가 등 사이즈 변경을 부탁하면 '에프터이펙트 - Lottie - Json 파일 재추출' 단계를 건너 뛸 수 있다는 사실!(하지만 귀찮아하는 개발자님도 있으니 이왕이면 서로 편하게 처음 제작할 때부터 사이즈를 맞춰가는게 좋습니다.)
참고 -
https://lottiefiles.zendesk.com/hc/en-us/categories/360002488051-Plugins
https://medium.com/@congjang/f-번외편-lottie로-animation-만들기-93135f18e450
http://airbnb.io/lottie/#/after-effects
