brunch

매거진 디자이너의 작업

라이킷 19 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 이기복 May 13. 2023

움직이는 이모지가 만들어지는 과정(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을 옮겨 표정전체를 움직이고 눈 레이어는 개별적으로 스케일변화를 주는거에요.

이렇게 키프레임을 옮기고 설정값을 바꿔가면서 원하는 모션감이 나올때까지 만져주고 작업을 마무리합니다.