움직이는 이모지가 만들어지는 과정(WebP)
"좋아요 N개"
콘텐츠를 만드는 크리에이터에게 가장 중요한 것 중 하나는 '좋아요' 반응이죠. 댓글로도 소통을 하긴하지만 가장 직관적이고 간단한 소통방법 중 하나입니다.
제가 만들고 있는 제품 또한 초기에 이 '좋아요' 기능이 필요했는데요, 제품이 팬덤플랫폼인 만큼 다양한 표현의 니즈를 소화하는쪽으로 방향성을 잡고 작업을 시작하였습니다.
규모가 더 큰 회사라면 브랜드디자이너에게 작업이 주어졌겠지만, 스타트업 초기인 만큼 저에게 작업할 기회가 왔습니다. 그동안 UI모션에 흥미가 있었어서 재미있는 작업이였고 결과물이 나오기까지의 디자인 과정을 공유할까 합니다.
준비하기
만들 표현 정하기
우선 수많은 이모지 표현들 중에 제공할 표현을 리스트업 하였고 최종적으로 [ 좋음 / 웃김 / 슬픔 / 화남 / 열정 ] 5가지 표현으로 정했어요.
레퍼런스 리서치
이제 본격적으로 디자인 작업을 시작하기에 앞서 레퍼런스 리서치를 시작합니다. 익숙한 이모지이지만 리서치가 꼭 필요한 이유는 유저로서 무심코 사용할 때의 시각과 만들기 위해 리서치할 때의 시각은 큰 차이가 있어서 "같은 이모지인데 왜-어떤점이 좋아보이게 만드는가?"라는 것에 포커스하게 됩니다. 이때 지나쳐 왔던 많은 디테일을 학습하게 됩니다.
레퍼런스는 실제 서비스 둘러보는 방법과 레퍼런스 사이트를 찾아보는 방법으로 모았어요. 글로벌 소셜 커머스 실제 서비스들과 LottieFiles, Pinterest, Mobbin등이였습니다. 모션은 상대적으로 정적인 이미지들에 비해 하이퀄리티 레퍼런스가 찾기가 힘들더라구요.
좋은 레퍼런스로부터 우리 서비스에 적용할 이모지 스타일, 모션의 느낌, 감정의세기, 컬러톤 등에 대한 기준점을 잡아나갑니다.
플랫폼별 다양한 디자인의 이모지실행하기
이모지 디자인 (Figma)
여러방법이 있겠지만 역시 가장 익숙한 Figma에서 작업을 시작했어요. 여러 브랜드감성을 표현해야하는 SaaS 플랫폼에서 쓰이는 공통 이모지이기에 너무 절제하지도 않고 너무 개성있지도 않은 중립적인 톤으로 디자인하였습니다.
또한 색상을 정할때 고려한점은 5가지로 정한 감정의 컬러의 차이를 주어 색상으로도 구분이 잘 될 수 있도록했어요. 실제 사용할때 원하는 이모지를 잘 못찾을때가 많았었거든요.
콘티 그리기
어느정도 디자인이 되었다면 표정의 변화를 상상하며 큰 특징이되는 씬을 추가로 그려줍니다. 아무래도 루프(Loop)될 것이니 처음표정과 끝표정 사이를 어떻게 이어줄지 고민해야겠죠?
콘티없이 에프터이펙트에서 테스트해가면서 만들기에는 시간이 많이 소요되기 때문에 가볍게 여러 디자인을 테스트해보고 에펙에서는 '실행'만 하는것을 추천해요.
모션작업 (AfterEffect)
이제 피그마에서 에프터이펙트로 디자인을 넘겨야하는데요. 구글링 해보니 'Convertify Sketch/Adobe/Google'라는 플러그인과 'AEUX'라는 플러그인을 주로 사용하고 있는 듯 했습니다. 저는 'AEUX'라는 플러그인을 사용했는데 (설치는 조금 까다롭지만) 아주 편리했어요. 이 플러그인을 사용하면 피그마 프레임 그대로 벡터 레이어가 넘어가게 되고 에펙에서 바로 작업을 시작할 수 있습니다.
팁은 모션을 주기 전 함께 움직일 요소들을 묶어 줄 '핸들용 레이어'를 만드는거에요. 예를들면 얼굴전체 / 눈 / 눈썹 / 입 이렇게 움직이는 단위로 묶어주게되면 함께 혹은 개별적으로 움직임을 줄 수 있게되죠. 저는 Face Null / brow Null / Eye Null 이렇게 만들었습니다.
얼굴을 돌리고 깜빡이는 모션을 하고싶다면 Face Null을 옮겨 표정전체를 움직이고 눈 레이어는 개별적으로 스케일변화를 주는거에요.
이렇게 키프레임을 옮기고 설정값을 바꿔가면서 원하는 모션감이 나올때까지 만져주고 작업을 마무리합니다.
산출 및 정리
내보내기
에프터이펙트에서 [File/Export/Add to Render que]를 하면 내보내기 리스트에 등록이 되는데요. 여기서 내보내기 설정값을 'PNG Sequence로 하고 RGB+Alpha'로 해야 뒤 배경이 투명한 이미지시퀀스로 뽑히게 되요.
시퀀스연결하여 애니메이션 파일 만들기
여러장의 이미지를 N초간 보여주면 그게 애니메이션이 되는거죠. 이것을 도와줄 툴이 또 있습니다. WebP로 만들어주는 웹 사이트도 시도해보았는데 잘 안되서 'WebP Animator'라는 유료 Mac툴을 사용했어요.
이 툴에서는 한장 한장 지속시간을 설정해주고 '내보내기'하면 WebP가 만들어집니다!
결과물 확인과 수정
WebP는 웹사이트 창에 끌어다놓아도 되고, 슬랙에 업로드해봐도 되는 등 웹에서 미리보기가 잘 되요. 올려보고 속도감을 확인한 다음 방금 전 썼던 프로그램에서 지속시간을 조절해가며 속도를 보고 '내보내기'를 반복하다보면 원하는 이모지를 얻을 수 있을거에요.
