애니메이션 소스 활용하기 [day_27]

이번 강의는 플러스엑스가 어떻게 애니메이션 소스들을 활용하는 지 볼 수 있었다. 인터렉티브한 표현을 구현하는데 개발 인터렉션 기능뿐만 아니라 애니메이션 소스들을 사용하여 동적인 느낌을 만들어낸다. 영상소스를 png이미지 시퀀스로 변환하는 방식, 웹 접근성이 떨어지는 gif의 단점을 보완한 apng 이미지 추출방식, mp4영상 소스를 활용하거나, json을 활용한 애니메이션 소스로 제작하는 방식이 있었다.

 

다양한 파일을 활용하는 애니메이션 소스들

 

나는 다른 방식보다도 json을 활용해서 제작하는 방법이 흥미가 갔다. 그 이유는 웹과 앱 서비스에서도 자주 사용되고 용량에 대한 부담이 적으며 무엇보다 피그마와 호환이 되는 점이 매력적이라고 느꼈다. 어플리케이션 쪽에 관심이 많은 나는 마이크로 인터렉션을 활용해서 업무해야 되는 일이 많을텐데 json파일을 활용해 작업하면 내가 원하는 부분에서 효율적으로 작업이 가능하고 인터렉션 디자인 역량을 높이는데 도움을 줄 것 같기 때문이다.

 

json은 사람이 읽을 수 있는 텍스트를 사용하여서 데이터를 저장하고 전송하는, 데이터 공유를 위한 개방형 표준 파일 형식이다. 즉 애니메이션 파일을 코드로 저장하는 것이다. 에이비앤비가 제작한 오픈 소스 라이브러리인 Lottie 애니메이션을 통해 영상 소스를 제이슨 파일로 저장할 수 있게 되어 제이슨 파일의 활용도가 더욱 넓어졌다. 제이슨 형식의 애니메이션은 다른 소스들의 용량보다 훨씬 작지만 어떤 기기에서는 작동하고, 크기를 자유롭게 조정해도 해상도가 낮아지지는 않는다. 용량에 대한 이슈는 프로젝트를 진행하면 꽤 자주 브레이크를 걸게하는 허들 요소이다. 제이슨은 이러한 용량 문제에 부담이 적으면서도 해상도 퀄리티에 대한 걱정도 하지 않아도 되니 이렇게 장점이 많은데 굳이 안 쓸 이유가 없을 것 같다. 또한 피그마를 주로 사용하는 사람에게는 제이슨 파일을 이용해 애니메이션 소스를 만들 수 있는 로띠 툴과 호환까지 되니 더욱 쉽고 편리하게 생산성을 높일 수 있겠다. 

 

로띠 툴을 제대로 배워보고 싶은 욕구가 솟는다.

 

애니메이션 소스를 활용하여 만들어진 인터렉티브한 구현 방식들은 그 제작에 관해서 어떤 방식으로 진행되는지 접하기 어려운데 이번 강의에서 플러스엑스가 어떤식으로 이런 작업 방식을 진행하는지 접할 수 있어서 새로운 인사이트를 얻었다. 플러스엑스가 진행했던 프로젝트의 사례를 보여주며 실무에서 어떻게 애니메이션 소스를 활용하는지 여러가지 방식으로 알아 볼 수 있어 인터렉션 디자인에 대한 역량 향상에 도움이 됐다.