Framer로 하루만에 팀을 위한 웹 제품 만들기
알다 로띠 애니메이션 라이브러리 제작기
Editor : 김태길(디자인 팀 리더) Taekil Kim
ChatGPT로 플러그인을 만든 이야기에 이어서 또 다른 내부 제품을 설계한 경험을 공유합니다. 지은님이 쓰신 페이즈 사용후기를 먼저 읽고 오시면 더 좋습니다.
지난 ChatGPT로 플러그인 만들기 이후로도 꾸준히 알다 팀 내부의 비효율을 찾아 개선하고 있던 와중, 마침 새로운 기능을 추가하면서 애니메이션을 삽입하기로 했다.
알다 팀에서 현재 제품에 삽입하는 애니메이션은 2가지 확장자로 사용하는데, 하나는 이미 잘 알려진 로띠 애니메이션이고, 하나는 마케팅 환경에서 사용하는 gif다. gif 를 사용하는 경우는 매우 제한적이라 대부분의 애니메이션은 로띠로 제작하게 되는데, 문제는 이 애니메이션들을 보관하거나 공유하는 프로세스가 제각각이었다는 것이다.
사실 알다 팀은 내가 지금까지 경험한 조직 중 디자인 레거시가 유독 많은 조직이다. 워낙 빠르게 성장하는 것에 초점을 두고 움직이면서 시간이 많이 흐르다보니, 저장된 위치가 사라지거나, 백업이 누락되거나 누군가의 정보에 의존하는 경우가 많았다.
디자인 시스템부터 디자인 프로세스 등 처리해야 할 것은 많지만, 애니메이션처럼 자주 사용하면서 또 팀이 공유해야 하는 파일 및 작업에 대해서 우선적으로 정리하는 게 필요했다. 그래서 제일 먼저 했던 건 애니메이션 작업 방식 통일이었고, 지은님께 Phase를 사용한 애니메이션 작업 방식을 정리해달라고 요청드렸다.
로띠 애니메이션의 경우 json 파일로 사용되는데, json 파일 자체는 스크립트로 만들어져 있다보니 노션이나 슬랙에서는 미리보기가 불가능하다. 또한 스크립트 파일로 전달해야 해서 공유가 편한 것도 아니다.
비슷한 애니메이션을 만들면 다른 스쿼드에서 가져다 활용할 수 있어야 하는데, 작업 방식이 다르면 누구는 애프터이펙트 파일, 누구는 프리미어, 누구는 피그모션으로 만들게 되기 때문에 서로 간의 작업을 공유하거나 배리에이션을 만들기도 어렵게 된다.
덕분에 제작부터 엄청난 비효율이 끊임 없이 발생하고 있었고, 프론트엔드에서는 애니메이션을 어디서 어떻게 찾아서 써야 하는지 매번 디자이너에게 슬랙, 노션 댓글, 피그마 댓글로 물어보고 있었다. 디자인에서도 프론트엔드에게 전달하는 방식이 매번 달라서 소통에 혼선이 자주 생겼고, 공용 폴더에 담겨 있지도 않았다.
필요한 걸 요약하자면 다음과 같다.
- 어떤 디자이너가 작업하더라도 연속성을 유지할 수 있다.
- 언제든지 필요한 애니메이션을 정해진 곳에서 찾아 사용할 수 있다.
첫번째 문제는 Phase로 제작 도구를 단일화하고, 디자인 가이드라인을 계속 잡아가는 것으로 해결됐다. 2번의 경우가 내가 해결할 문제였다.
노션은 데이터를 모으기 적합하고, 이미 팀 전체가 사용하고 있기 때문에 가장 쉽게 파일을 모을 수 있는 공간이었지만 애니메이션을 직관적으로 확인하고 다운로드하기엔 적합한 곳은 아니라고 판단했다.
슬랙은 메시지가 오가며 휘발되기 때문에, 슬랙에서는 공유하지 않는 것을 원칙으로 삼았다.
구글 드라이브 등의 공유 폴더는 단순히 모아두는 역할에는 적합하겠지만 한판으로 파일 관리를 하려면 그보단 조금 더 기능적인 게 필요했다.
이쯤 생각했을 때, 여기어때에서 프레이머를 활용한 그래픽 라이브러리를 구축한 이야기를 보게 됐다. 디자이너가 애니메이션 파일을 관리하기도 쉬울 뿐만 아니라, 프론트엔드에서도 디자이너에게 불필요한 확인이나 질문할 필요 없이 애니메이션을 다운로드받기만 하면 되는 편리한 프로세스를 만들 수 있을 것 같았고, 결론적으로는 프레이머를 사용해보기로 했다.
주요하게 사용한 프레이머 기능은 CMS와 컴포넌트 기능이다. CMS에 애니메이션 파일 등을 추가하면 컴포넌트로 미리 구축해둔 카드 디자인에 반영이 되고, 이 카드 디자인을 웹사이트 상의 애니메이션 목록으로 만들어 자동으로 새 애니메이션이 추가되게 했다.
CMS 기능은 생각보다 더 강력하고 효과적이었다. 애니메이션 뿐만 아니라 반복되는 정보 타입으로 저장할 수 있는 모든 데이터베이스는 CMS를 통해서 관리가 가능하다.
CMS로 목록에 들어갈 데이터를 관리한다면, 컴포넌트 기능으로 어떻게 보일지를 자유롭게 디자인할 수 있다. 피그마와의 확실한 차별점이 바로 이 CMS와 디자인이 결합되는 부분이다.
배포하는 것도 간단하다. 그냥 Publish를 누르면 공개 도메인으로 만들어진다. 웹사이트의 애니메이션 카드에 마우스를 올리면 다운로드 버튼이 나오고, 다운로드 버튼을 누르면 CMS에서 업로드한 애니메이션 파일을 다운로드할 수 있다.
디자이너는 프론트엔드에 애니메이션을 굳이 일일히 전달할 필요도 없고, 노션에 태그하거나 슬랙에서 전달할 필요도 없다. 작업에 사용한 원본 파일들을 압축하거나 주섬주섬 챙기지 않아도 된다. 또 만들어진 애니메이션 파일을 어디에 모아둘지 고민하지 않아도 된다. 디자이너는 그저 디자인에 phase에서 gif로 추출한 이미지를 이름을 맞춰 넣어두기만 하면 된다.
프론트엔드 엔지니어 역시 디자이너에게 이 부분이 로띠인지, 어디에 있는지 묻지 않아도 된다. 피그마에서 디자인을 확인하고, 해당 이름을 애니메이션 라이브러리에서 찾아 다운로드하기만 하면 끝난다.
아직 본격적으로 더 사용되기에는 멀었지만, 잠깐 프론트엔드와 얘기해본 바로는 많은 도움이 될 것 같다는 의견을 받았다. 물론 디자인 팀 내부의 레거시를 개선하는 것이 주 목적이었지만, 결국 디자인 팀의 생산성이 좋아진다는 건 협업하는 다른 직무의 생산성도 좋아질 수 밖에 없다.
Phase와 Framer 둘다 생소하고, 이렇게 써보는 건 처음이었지만 생각보다 더 성공적으로 도입할 수 있었다. 구상부터 배포까지 하루가 채 걸리지 않았다. 퇴근 후 가볍게 시작해서, 자정을 조금 넘겨 완성할 수 있었다. ChatGPT로 플러그인을 만들었던 경험에 이어서 실제로 도움이 되는 개선책을 만들 수 있었다.
디자이너는 불편함을 찾아내고 그것을 더 낫게 만드는 직업이라고 이전 글에서 쓴 바가 있다. 그도 그럴 것이, 디자이너는 뭔가 화면에 국한된 직업이라고 생각하는 사람들이 여전히 많다. 특히 화면을 멋지게, 또는 나이스(?)하게, 또는 사용하기 좋게 만드는 것 정도로만 알고 있는 경우가 많다.
디자이너의 본질은 관찰과 개선이다. 실제로 UI를 그려내는 것은 도구에 불과하다. UI를 그려내는 것은 개선하는 하나의 방법일 뿐이지, UI 자체가 목적이 되어선 안 된다.
프레이머로 라이브러리를 만든 것도 같을 것이다. 디자인 팀에서 애니메이션을 관리할 때 많은 불편함이 있었고 또한 프론트엔드에서도 매번 커뮤니케이션 비효율이 발생한다는 문제를 포착했다면, 그것을 개선하는 과정 자체가 디자인이 되어야 한다. 그 개선의 결과물이 반드시 UI여야 하는 것도 아니다. 시스템에 문제가 있다면 프로세스를 개선하는 것 역시 디자인일 수 있다는 것이다.
디자인과 디자이너의 본질 자체가 툴이나 시각적인 결과물로 매몰되지 않도록 항상 관찰과 개선, 그리고 사용자에 대한 애정을 잃지 않았으면 한다.
금융의 모든 연결고리, 알다
앱 다운로드 바로 가기
