각자의 툴에서 쓰는 팀 모션 라이브러리

Overview

저는 플러그인 디자이너로 참여했습니다. 웹에서 만든 라이브러리를 피그마와 애프터 이펙트에 어떻게 적용할지, 작업 중 수정한 내용을 어떻게 팀원들에게 다시 배포할지 설계했어요.

Situation

모션 시스템에 앞서 DAM 프로젝트를 진행했습니다. 로티 파일을 주로 다루던 워크스페이스에서 SVG, GIF, JPG, PNG뿐 아니라 애프터 이펙트의 AEP, 일러스트레이터의 AI 파일까지 함께 관리하도록 지원 범위를 넓힌 작업이에요. 포맷에 맞춰 파일을 보관하고 미리 보거나, 다운로드하고 작업 중인 툴에 삽입할 수 있게 했습니다.

다양한 작업 파일을 한곳에서 공유하게 됐지만, 모션에 쓰이는 값을 팀이 함께 재사용하는 일은 다음 과제였어요. 완성된 애니메이션을 공유하는 것과, 거기에 쓰인 이징을 다른 애니메이션에도 적용하는 것은 다른 일이었거든요.

모션 시스템에서는 이런 값과 에셋을 팀 라이브러리로 만들어 배포하고자 했습니다. 저는 플러그인 디자이너로서, 팀원들이 피그마나 애프터 이펙트에서 이 라이브러리를 사용하고 수정한 내용을 다시 공유하는 경험을 맡았어요.

Problem

라이브러리를 만드는 것만으로는 충분하지 않았어요. 디자이너들이 실제로 작업하는 곳은 피그마나 애프터 이펙트였고, 두 툴에서 모션을 다루는 방식도 달랐거든요.

피그마에서는 프레임 사이의 프로토타입 인터랙션에 이징을 설정합니다. 애프터 이펙트에서는 타임라인의 키프레임을 선택해 움직임을 조절하고요. 같은 이징 값이라도 어느 대상에, 어떤 방식으로 적용해야 하는지가 달랐어요.

플러그인에서는 이 차이를 고려해야 했습니다. 팀 라이브러리를 사용하려고 익숙한 작업 방식을 바꾸거나, 값을 따로 옮겨 적을 필요가 없어야 했어요.

Solution

피그마에서는 선택한 프로토타입 인터랙션에 모션 시스템의 이징 값을 적용하도록 했습니다. 사용자는 기존처럼 프레임을 연결해 프로토타입을 만들다가, 팀에서 정한 이징을 선택해 사용할 수 있어요.

애프터 이펙트에서는 선택한 키프레임에 같은 값을 적용하도록 설계했어요. 여기서는 모션 시스템의 이징을 키프레임 기반의 편집 방식에 맞게 대응시키는 것이 중요했습니다. 라이브러리에 등록된 로티 에셋을 작업에 삽입하고 업데이트하는 흐름도 함께 다뤘고요.

라이브러리를 가져다 쓰는 과정뿐 아니라 수정해서 공유하는 과정도 플러그인에 포함했습니다. 작업 중 변경한 값을 팀에서도 사용해야 한다면, 플러그인에서 라이브러리의 변경사항을 배포할 수 있도록 했어요.

Workflows

이 작업은 플러그인 화면만 설계해서 끝낼 수 없었습니다. 라이브러리를 만드는 웹, 모션을 편집하는 로티 크리에이터, 피그마와 애프터 이펙트가 같은 모션 시스템을 다루고 있었기 때문이에요.

로티 크리에이터 디자이너들과는 애프터 이펙트의 작업 방식을 공유했습니다. 이미 세밀한 편집 기능을 갖춘 툴에서 이징을 어떻게 적용하고 에셋을 어떻게 사용하는지 설명하며, 각 제품에서 지원할 경험을 논의했어요.

워크플로우와 대시보드 디자이너들과는 웹과 플러그인의 역할을 구체적으로 맞췄습니다. 플러그인에서 어떤 값과 에셋을 불러와야 하는지, 어디까지 생성하고 배포할 수 있는지, 어떤 작업은 웹으로 이어져야 하는지를 함께 정했어요.

그 결과 웹에서 모션 시스템을 만들고, 플러그인에서 작업에 적용한 뒤 필요한 변경사항을 다시 배포하는 흐름을 갖추게 됐습니다.

Results

엔터프라이즈와 유료 사용자는 웹에서 팀의 모션 시스템을 만들고, 피그마와 애프터 이펙트에서도 해당 라이브러리를 사용할 수 있게 됐어요. 필요한 값은 플러그인에서 수정하고 배포할 수 있게 됐고요.

피그마로 프로토타입을 만드는 디자이너와 애프터 이펙트로 애니메이션을 만드는 디자이너가 각자의 툴에서 같은 팀 라이브러리에 접근하게 된 점이 가장 큰 변화였습니다. 이 과정에서 발견한 니즈는 이후 VS Code 플러그인에서 개발자에게 맞는 모션 시스템 사용 방식을 지원하는 데도 이어졌어요.

제가 이 프로젝트에서 집중한 것은 각 툴에서의 적용 방식이었습니다. 같은 이징 값이 피그마에서는 인터랙션에, 애프터 이펙트에서는 키프레임에 적용되도록 했어요. 팀의 모션 시스템을 사용하면서도 디자이너가 익숙한 방식으로 작업을 이어가게 하는 것이 제 역할이었습니다.