경력직 사이드잡 플랫폼의 Lottie 활용법
정보람 - 프로덕트 디자이너
애프터이펙트 LottieFiles 플러그인을 활용한 후에는 제작한 모션 이미지를 제품에 적용해보고, 수정이 필요할때 수정 후 다시 렌더링 시간이 소요되지 않는다는 점에서 가장 큰 시간 단축 효과를 볼 수 있었습니다.
DIO는 150년간 굳어져 온 전통적인 고용 구조에 대한 의구심을 가지고 문제를 해결하기 위해 개발된 사이드잡 플랫폼입니다. DIO의 서비스는 기업에게 그들이 필요로 하는 인재를 빅테크 개발자, 마케터, 디자이너 등과 같이 리모트 파트타임으로 채용할 수 있는 기회를 제공하고, 추가적인 소득을 원하는 네이버, 카카오, 라인, 쿠팡, 배달의 민족 등과 같은 주요 빅테크 기업에서 일하는 경력직 현직자들에게는 추가적인 소득을 늘릴 수 있는 N잡의 기회를 제공합니다. 이러한 연결은 작은 기업과 스타트업이 경력직 인력을 채용하는 데 어려움을 겪고 있는 문제를 해결하고, 더불어 DIO는 부수입을 높이려는 현직자와 채용이 필요한 기업 모두에게 이익이 되는 사이드잡 환경을 조성하여 모든 이들에게 윈-윈 할수있는 생태계를 만듭니다.
DIO의 Lottie 애니메이션 활용 사례를 알려주세요.
DIO 팀은 정보를 전달할 때 설명을 돕고, 눈길을 끌기 위해 움직이는 이미지를 활용합니다. 예를 들어, 서비스 온보딩이나 특별한 상태 알림 등을 전달할 때 움직이는 이미지를 사용하여 주목성을 높이고 사용자들의 관심을 집중시킵니다.
Lottie를 활용하기 이전에는 움직이는 이미지가 필요한 경우 GIF나 MP4 파일을 사용했거나, 개발자에게 CSS 애니메이션 작업을 요청했습니다. 이러한 방법은 일부 제약이 있었고, 움직이는 이미지를 효과적으로 관리하기 어려웠습니다. DIO는 웹 서비스로서, 새로 로딩하는 화면의 경우 이미지가 늦게 로딩되어 보여지는 문제가 있었습니다. 웹 페이지 최초 접속 시 해당 이미지를 다운로드하는 시간이 오래 걸려서 원하는 타이밍에 이미지가 표시되지 않을 수 있었습니다. 이는 사용자 경험을 저해하는 문제로 작용했고, Lottie를 사용하여 아주 작은 용량의 움직이는 이미지를 만들어 해결하였습니다. Lottiefiles를 활용하여 모션 이미지 관리를 효율적으로 하고, 사용자 경험을 향상시키는 데 기여할 수 있었습니다.
상황 1: DIO의 기업 사용자에게 채용 공고 작성 후 심사 안내를 기다려 달라는 안내 화면에서 모션 이미지를 사용합니다.
상황 2: DIO의 크루(현직자) 사용자에게 크루 합격 이후 DIO 서비스 온보딩시에 모션 이미지를 활용합니다
After Effects 플러그인을 사용하여 DIO 제품을 위한 모션 그래픽 이미지를 생성하는 과정 (ft. LottieFiles)을 소개해 주세요.
초기 과정
초창기의 DIO의 모션 애니메이션 그래픽 생성 프로세스는 처음에는 매우 일반적이었습니다.벡터 일러스트레이션을 만든 다음 Adobe After Effects를 사용하여 모션 그래픽을 제작했고, MP4 또는 GIF 파일 형식으로 제품에 적용해왔습니다.이러한 방법은, 몇 가지 단점이 있었습니다. 첫번째는 각 애니메이션을 렌더링하는 데 걸리는 시간이 오래 걸린다는 것이었고, 두번째는 수정이 필요한 경우 애니메이션을 완전히 다시 렌더링해야 했다는 점이며 이는 시간과 자원이 많이 소요되는 비효율적인 방법 이였습니다.
LottieFiles로의 전환
DIO의 애니메이션 생성 프로세스에서의 전환은 LottieFiles 플러그인이 After Effects에 도입되면서 시작되었습니다. 저희는 계속해서 After Effects에서 벡터 일러스트레이션과 모션 그래픽을 만들었지만, MP4 또는 GIF로 렌더링하는 대신 LottieFiles 플러그인을 사용하여 애니메이션을 JSON 파일로 내보내기 시작했고 이 과정은 업무의 흐름을 크게 간소화 할 수 있었습니다. 현재 DIO의 애니메이션 생성 프로세스는 직접 백터 일러스트를 제작하고, After Effects를 활용하여 모션 그래픽을 제작한 후 LottieFiles 플러그인을 활용하여 모션 이미지를 json 파일로 개발자에게 핸드오프합니다. LottieFiles를 모르던 시절에는 모션 이미지를 하나하나 랜더링을 걸어서 mp4나 gif 파일로 뽑아봐야했습니다. 만약 모션 이미지를 중간에 수정을 하게 된다면 다시 랜더링 하는데에 시간이 꽤 소요됐습니다. 그러나 애프터이펙트 LottieFiles 플러그인을 활용한 후에는 제작한 모션 이미지를 제품에 적용해보고, 수정이 필요할때 수정 후 다시 렌더링 시간이 소요되지 않는다는 점에서 가장 큰 시간 단축 효과를 볼 수 있었습니다.
LottieFiles 의 애니메이션 자원과 도구들이 어떤 도움이 되었나요?
애니메이션을 제작할 경우 최대한 모션 이미지 작업을 직접 하려고 하지만, 디자인 리소스가 부족할 경우도 있습니다. 이럴땐 LottieFiles 라이브러리에서 현 상황에서 사용할만한 무료소스가 있는지를 확인해보고, 적합한 애니메이션이 있을땐 라이브러리에서 해당 애니메이션 파일을 사용하기도 합니다. 그리고 라이브러리에서 찾은 애니메이션 소스를 컬러팔렛 기능을 활용하여 DIO 제품에 활용할 수 있는 컬러로 변환하고 제품에 적용합니다. 예시로, 로딩 이미지 등 움직이는 이미지가 필요할 때 LottieFiles 라이브러리에서 원하는 느낌의 이미지만 찾으면 아주 쉽게 해당 이미지의 색이나 속도나 디테일을 변경할 수가 있었습니다. ‘원하는게 없더라도 그냥 써야지’가 GIF 시절의 얘기였다면, LottieFiles에서는 원하는 방향으로 아주 쉽게 수정해서 쓸 수 있다는 장점이 있습니다.
DIO 서비스는 과정이 복잡하고 규칙이 많은 서비스이기 때문에, 효과적인 정보 전달 방식을 항상 고민합니다. 전통적인 방법에서 LottieFiles의 통합으로의 애니메이션 생성 프로세스의 변화는 DIO 서비스의 효율성과 창의적인 유연성을 크게 향상시켰을 뿐만 아니라 이를 통해 더 빠르게 고품질의 매력적인 애니메이션을 제작하고 제품의 디자인 요구 사항과 더 밀접하게 일치시킬 수 있었습니다.
