Zeplin 제플린 작업, 애니메이션 Lottie 관련

1. dp(dip)과 dpi 개념 (dp=m, dpi=m당 밀도)

2. mdpi 360X640 기준으로 작업해서 export 하면 사이즈별로 자동 생성

   (iphone은 8기준 375px X 667px) 

3. mdpi, hdpi~xxxdpi 는 해상도임 (사이즈X)
4. 고정된 값으로 디자인 X, 기준되는 View를 기준으로 다른 View들의 구성에 대해 정리

ex) 일정하게 나뉜 view라면 각각의 비율, 정렬 등 정리

화면이 커질 경우 이동되는지 고정된 위치인지 등

네비게이션 탭은 1:2:1 비율로 나뉘어진다 등 고정된 값이 아닌 플렉서블한 값이 되도록 고려

5. 안드로이드, iOS, web은 각각의 레이아웃이 다르다

6. 안드로이드의 다양한 해상도가 문제

360X640 기준 But 380X680, 370X700 등 해상도가 다양

어떤 view를 기준으로 어떻게 따라 움직이는지, 이 view는 어디가 고정인지, 어떤 비율로 나눠지는지 등

고려해서 디자인하고 개발자와 공유

보통 2~3(웹, 중간, 모바일)

7. mdip, hdpi, xhdpi, xxhdpi, xxxhdpi 대신 벡터 이미지(svg) 사용이 편하다. (확대, tint 컬러 적용 등에 용이)

8. 파일명 카테고리별로 정리 

icon_XX, bg_btn_on/bg_btn_off, logo_XXX 등

9. 색상에 대해 정리해서 개바랒 공유

10. shadow, line 등은 이미지보다 코드 정보 공유

11. 340X640에서 1px=1dp (스크린 가로세로가 360dp X 640dp로 나와야 함)

12. 안드로이드에서는 상태바, 소프트바 숨김 가능

디자인 전 상태바, 소프트바 노출 여부에 대해 합의 (상단 상태바 20dp, 하단 소프트바 50dp 사용 유무에 대해 미리 합의)

13. 툴바, 제목, 아이콘 세트 등은 그룹화해서 디자인

14. lottie 활용 가능 https://lottiefiles.com/

Free Lottie Animation Files, Tools & Plugins - LottieFiles

* lottie

에펙에서 작업한 애니메이션 데이터를 LottieFiles 라는 AE 플러그인을 통해 JSON 파일로 추출하는 방식

 

 

아이콘, 프로그래스 인디케이터, 아이콘 등에 간단한 모션 적용 시

 

STEP1

(스케치에서 AE로 가져갈 에셋을)

1. 레이어 정리 : 비어있거나 사용하지 않는 레이어 삭제

2. 레이어 이름 : 레이어 형태나 특징에 맞춰 네이밍 간단하게 수정

3. Group : 위 레이어 정리를 마친 에셋을 하나의 Group으로 묶음

4. SVG 파일로 추출

 

이 SVG 파일을 일러스트레이터에서 AI 파일로 저장 후 에펙에서 불러옴

변환한 일러스트 파일로 해당되는 레이어로 컴포지션 만들고 shape Layer로 변경해서 모션 및 애니메이션 작업 

 

 

STEP2

AE로 애니메이션 만들기

 

LottieFiles나 Bodymovin 플러그인 사용 위해서는 에펙으로 shape animation 이나 여러 모션 그래픽 작업된 파일 필요

Lottie를 위한 애니메이션은 일반적인 모션 그래픽 작업과는 조금 다름 

Lottie 애니메이션 제작을 위한 일반적 팁 

 

1. Composition Setting

1) Width, Height

에펙에서는 어떤 크기든 원하는 컴포지션 사이즈로 작업할 수 있지만 Lottie 작업시 에셋 크기의 1배수(1x)인 컴포지션 크기로 설정해야 함

에펙의 모든 픽셀값은 iOS에서 포인트(pt)로 변환되고, 안드로이드에서 dps로 변환되어 모든 화면 밀도에서 동일하게 표시됨

2) Frame Rate

이미지가 크고 움직임을 부드럽게 하고 싶으면 60fps로, 그 반대의 기능적인 모션이면 보통 30fps로 설정

내 작업에 맞는 프레임 속도를 미리 선택하는 것이 중요

* 나중에 변경할 경우 기존 키 프레임에 이상이 생길수도 있음

3) Duration

기간을 선택

정적 자산을 보내려면 지속 시간을 1초로 설정하고 나중에 언제든지 다시 변경 가능

 

2. 모든 백터파일은 Create Shape from Vector Layer로 변환 후 에펙 작업 시작해야 함

일반적으로 에펙에서는 AI, SVG, EPS, PDF 등의 벡터 파일을 Shape Layer로 변환해야 함

불러온 벡터 파일을 Shape Layer로 변환하지 않고 작업 시 (Bodymovin으로 렌더링 후) Lottiefiles에서 테스트 할 때 Lottie 애니메이션이 작동하지 않음 

 

레이어에 마우스 오른쪽 버튼 클릭, create > create shapes from vector layer 선택해서 

벡터 파일을 Shape Layer로 변환 후 애니메이션 및 모션 작업 시작

변환 후 composition에서 .ai파일은 삭제 가능

 

 

제작한 json 미리보기 

https://lottiefiles.com/private/animations

Free Lottie Animation Files, Tools & Plugins - LottieFiles

 

환경별 효과 참조

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