UX 디자인과 개발 _ Lottie와 Json
애니메이션을 만들기 위해 말로만 듣던 Lottie를 사용했다
한눈에 알아보기 쉬운 애니메이션, 언제 사용하면 좋을까요? ‘프로그램이 돌아간다’거나 ‘진행 중’의 상황을 유저에게 설명할 때 단순히 텍스트보다 애니메이션의 힘이 크게 작용하기도 합니다. 이런 애니메이션에는 GIF 파일 형식을 사용할 수도 있지만, GIF는 파일 용량이 크다는 단점이 있습니다. 게다가 화질이 깨지기 쉽고, 이미지 사이즈를 가변적으로 변경하기도 어렵죠.
이럴 때, 로티(Lottie)를 이용하면 화질이 깨지거나 가변적인 이미지 사이즈, 용량 처리와 같은 문제를 쉽게 해결할 수 있습니다. 이 글에서는 애니메이션을 만들기 위해 로티를 사용한 경험에 대해 다뤘습니다.
로티 웹사이트에는 다양한 환경에서 로티 라이브러리를 지원한다는 정보가 있습니다. 실무에서 사용하는 스케치, 피그마에서도 플러그를 통해 파일을 가져와 프로토타이핑할 수도 있죠. 이외에 로티를 통해 추출된 Json 파일을 이용한다면 디자이너가 아닌 개발팀에서도 용량 걱정 없이 편하게 크기를 조절할 수 있습니다.
그럼 로티 사용법에 대해 알려드리겠습니다.
먼저, 로티를 이용하려면?
준비물 : 에프터이펙트(After Effects) + 로티
로티를 통해 Json 파일을 저장하려면 에프터이펙트가 필수입니다.
로티를 이용해 Json 파일 추출하기
1. 가입하고, 에프터이펙트 플러그인 설치
로티 공식 웹사이트(클릭)
공식 웹사이트 에프터이펙트 플러그인(클릭)
* 플러그인을 설치할 때 ZXP 압축을 풀기 위해서는 ZXP 압축 해제 프로그램을 설치해야 합니다. (ZXP 프로그램 다운로드 바로가기)
예전에는 없었던 ‘VIA ADOBE EXCHANGE’를 통해서 ZXP 압축 파일을 설치하지 않고 adobe에서 설치, 에프터이펙트에서 바로 설치가 가능하도록 기능이 추가됐습니다.
* VIA ADOBE EXCHANGE를 설치하면 에프터이펙트에는 LottieFiles 플러그인이 생성됩니다. LottieFiles 플러그인에 대한 사용 환경은 아래 설명돼 있습니다.
2. 모든 설치를 마치고 에프터이펙트를 실행 후 ‘창 – 확장자명 – LottieFiles, Bodymovin’을 불러옵니다(둘 중 하나만 사용하면 됩니다.)
여기서 잠깐, LottieFiles 플러그인을 열면,
“어라? 왜 창이 안 나오지? 분명히 로티 웹사이트에서는 에프터이펙트와 바로 연결된다고 했는데?” 이와 같은 문제가 빈번히 발생한다는 글을 발견했습니다. 그리고 답변도 찾았습니다.
즉, LottieFiles 플러그인 사용 시 에프터이펙트의 설치 언어를 ‘영어‘로 설정해야 합니다(한국어로 설치됐을 경우 삭제 후 영문판으로 재설치.)
3-A. Bodymovin을 통한 Json 추출, 미리보기
작업 파일에 대한 상세 세팅을 조절할 수 있습니다. 완료 후, 초록색 버튼을 누르면 파일경로, 저장 이름을 설정한 뒤 저장됩니다. 그렇게 저장된 Json 파일이 잘 돌아가는지 확인을 하고 싶다면 로티 웹사이트에서 테스트할 수 있습니다(클릭).
3-B. LottieFiles을 통한 Json 추출
번거롭더라도 영문판을 설치한다면 Bodymovin에선 지원하지 않는 프리뷰를 파일 저장과 함께 볼 수 있습니다. 작업 중인 파일을 오른쪽 화살표를 눌러 저장하면, 다음 프리뷰 메뉴에서 제대로 플레이가 되는지 확인할 수 있는 테스트 화면이 보입니다. 또한 로티에서 제공하는 무료 애니메이션을 쉽게 다운로드할 수도 있습니다.
그 외 로티 Point
1. 로티 웹사이트에는 다양한 작품을 만날 수 있습니다. 유료 패키지 다운로드, 무료 파일 다운로드가 함께 있어 빠른 작업을 위해 구매하거나 무료 아이콘을 저장할 수 있습니다.
2. ‘에프터이펙트에서 배경 색상을 설정하지 않고 투명으로 만들고 싶은데… 이게 맞을까?’하고 고민된다면 작업 프레임의 하단 세팅 메뉴 중 ‘Toggle Transparency Grid(사진 속 하단 원이 표시된 투명한 박스)’를 눌러보면 됩니다. 타임라인창에 배경색을 위해 도형을 깔지 않고 작업하셨나요? 기본적으로 배경은 투명으로 설정돼 저장된다는 사실을 알고 있다면 마음이 놓이죠. 추후 로티 웹사이트에서 프리뷰를 위해 Json파일을 등록하고, 웹사이트에서 별도의 색을 지정해서 바로 수정할 수도 있으니 투명으로 작업하는 것이 더 수월합니다.
3. 개발 환경을 주의해서 에프터이펙트 작업을 해야 합니다. 에프터이펙트에서 열심히 ‘효과’를 삽입해서 넣은 작업이 Json 파일 추출 시에는 에러가 나서 제대로 작동되지 않는 경우가 있습니다. 효과를 적용할 때 한 번 체크하면 추후 에러를 방지할 수 있습니다.
4. 파일 적용 사이즈는 기본적으로 에프터이펙트에서 제작한 사이즈입니다. 하지만 개발자에게 nn% 축소, 증가 등 사이즈 변경을 부탁하면 ‘에프터이펙트 – Lottie – Json 파일 재추출’ 단계를 건너뛸 수 있다는 사실!(하지만 번거로운 작업일 수 있으니 이왕이면 처음 제작할 때부터 사이즈를 맞춰가는 것이 좋습니다.)
