Phase.com

[Phase.com] 간단 Lottie 제작 툴

나용진

• 4 min read

5월 2일 오픈한 Lottie 파일 제작 툴인 Phase.com을 사용해보았습니다. Lottie가 무엇인지, Phase.com을 통해 어떻게 만들 수 있는 지 대략적으로 알 수 있는 좋은 기회였다고 생각하고 블로그에도 기록을 남깁니다.

Lottie란 무엇인가요?

움짤을 위한 웹은 없다 - gif

Lottie란 미국의 유명한 숙박 플랫폼인 airbnb에서 개발한 오픈소스 모바일 라이브러리입니다. 기존 웹 페이지에서 움직이는 이미지를 담기 위해서는 gifGraphics Interchange Format 형태를 사용해야 했지만 이 형식에는 몇 가지 문제가 있었습니다.

  1. bitmap 타입이라 파일을 확대할 경우 깨질 수 있습니다.
  2. 색상 표현에서 256색(8Bit)밖에 사용할 수 없습니다.
  3. 그럼에도 불구하고 용량이 큽니다.

도망친 웹에도 낙원은 없다 - Webp, AVIF

이런 gif 파일의 단점을 해결하기 위해 Webp, AVIF 형식이 등장하였지만 이 또한 문제가 있습니다.

  1. bitmap 타입입니다. 상황에 따라 확대와 축소하기 어렵습니다.
  2. 호환성 문제가 발생합니다. 브라우저에서 지원하지 않으면 볼 수 없습니다.

그럼 Lottie는?

이러한 문제를 해결하는 방법으로 airbnb가 들고온 게 Lottie라는 형식입니다. 뱀발이지만, Lottie라는 이름은 독일의 유명한 영화감독인 로테 라이니거Lotte Reiniger에서 따왔다고 하네요.

Lottie는 기본적으로 다음과 같은 특징과 그에 따른 장점이 있습니다.

  1. JSONJavaScript Object Notation 형태입니다.
    그렇기 때문에 디자이너와 개발자 간 협업에 유리하다는 장점이 있습니다.
  2. 벡터Vector 형태입니다.
    따라서 확대와 축소에서 깨지지 않습니다.

장점 많은 Lottie 파일는 어떻게 만들 수 있을까요? 기존에는 Adobe의 애프터 이펙트를 사용해야 만들 수 있었습니다. 유료 프로그램이죠. 교육할인을 받으면 조금 싸다지만 그래도 사용하기에는 비싼 프로그램입니다. 요즘은 Adobe에서 프로그램을 따로 구매할 수 없고 구독해야만 해서 더 부담스러운 경향이 있죠.

여기까지 글을 썼으면 Phase를 소개하는 이유를 아시겠죠. 무료입니다(중요)

Phase를 써보자

중요한 점 하나. 저는 서비스기획자이지 디자이너가 아닙니다. 그렇기때문에 정말 간단하게만 사용해보았습니다.

일단 처음 들어가면 해당 화면을 볼 수 있습니다.

해당 화면에서 이미지를 놓고 하단에 있는 애니메이션 창을 켜면 애니메이션을 활성화할 수 있습니다. 이미지들을 움직이면 자동으로 애니메이션을 활성화해줍니다. Phase의 또 다른 장점으로는 여러명이 동시에 작업할 수 있다는 것입니다만, 그 부분은 친구가 없는 관계로 생략하도록 하겠습니다.

간단하게 만들어보고 추출한 결과물입니다. JSON 파일 형태는 현재 Ghost Blog에서 지원하지 않기 때문에 Lottie Web Player 를 통해서 변환하여 공유할 수 있었습니다.

해당 파일은 다음과 같이 크기를 자유롭게 조정하여도 깨지지 않습니다.

결론

Phase.com은 애니메이션 제작을 해보지 않은 서비스기획자도 간단하게 사용법을 익히고 Lottie 파일로 제작할 수 있는 툴이었습니다. 저도 사용법을 조금 더 익힌다면 블로그를 운영하면서 적절한 움짤을 넣을 수 있을 거 같네요. 앞으로도 계속 사용해봐야할 거 같습니다.