로티(lottie)로 애니메이션 마켓열기
로티 마켓 작업기
얼마 전 로티에 대한 글을 포스팅한 적 있었는데요. 마지막에 '부지런한 저를 기대하며 로티 마켓에서 만나요'라면서 느닷없는 업로드 예고를 했는데, 제가 그래도 그럭저럭 부지런히 지냈나 봅니다.
오랜 작업 끝에 로티 마켓에 해보고 싶던 사이드 프로젝트. '슈퍼 노멀-모션 아이콘(거창..)'을 업로드 완료하였고요, 첫 구매도 이루어져 1.3달러, 마이쮸 하나 살 정도는 벌었습니다 :) 이런 작은 성취에 대한 기쁨과 작업 후기를 남기려 합니다.
1. 마켓 셀러 신청하기
마켓셀러가 되어 내가 만든 로티파일을 판매하려면 'LottieFiles'팀에 우선적으로 셀러 신청을 해야하는데요, lottiefiles.com/marketplace/apply 로 접속하세요
제가 신청할때만해도 신청조건이 없었는데요. 이제는 5개 이상의 로티파일을 올린 유저만 셀러가 될 자격을 주고 있어요. '업로드 5개' 조건을 충족시키고 다시 신청을 하면 셀러약관 및 수수료 등 동의메일이 올텐데요, 회신을 하고 신청이 완료됐다면 아래와 같은 메일을 받으실겁니다. 이 메일을 받으셨다면 신청완료!
웰컴! 로티파일즈 마켓!2. 의미있는 모션 디자인하기
마이크로 인터렉션. 사실 처음에는 아이콘도 단순해서 조금 가볍게 생각했었는데, 겪은 바론 '어려웠다'입니다. 아이콘 하나당 은근 시간도 많이 걸리고 자연스러우면서도 의미 있는 모션을 만들어내기 위해선 픽셀 하나씩 옮기고 멀리서 보는 느낌으로 키프레임 하나씩 옮기고 재생시켜보는 많은 시간들이 필요했는데요. 디자인할때 어떤 것을 고려하느라 어려웠는지, 시행착오는 무엇이 있었는지 말하려 합니다.
메타포로 이해를 더하다
모든 아이콘에 넣을 수는 없었지만, 모션으로써 그 아이콘이 의미하는 메타포의 이해를 도울 수 있는 트랜지션으로 아이디어를 전개해 나갔습니다. 업로드와 다운로드는 마치 프로그래스 바(Progress-bar)가 채워지는 것처럼 보이게 하거나, 프로필은 얼굴 부분이 확대되며 'MY, 나의 메뉴'라는 것을 알 수 있게 해 주고, 하트의 경우는 자물쇠가 풀리는 느낌으로 '마음이 열렸다'를 알려줌으로써 기존 미니멀한 아이콘들이 함축하고 있는 메타포를 조금 더 직관적으로 느끼도록 도왔어요.
긴 시간은 지루함을 준다
디자인을 하면서 욕심을 부리다 보면 애니메이션이 길어질 수 있습니다. 시간이 길어지면 그만큼 표현할 수 있는 것도 많고 전달도 더 명확하니까요. 그렇지만 이 아이콘 모션 같은 경우에는 어떤 일러스트의 모션이 아닌 내가 선택한 기능에 대한 피드백이기 때문에 길어지게 되면 서비스 경험이 루즈해질 수 있어요. 즉각적인 피드백을 위해 각 애니메이션 당 평균 1.5초가량으로 통일하였습니다.
물리적법칙을 따른다
관성, 바운스 등 현실세계의 물리적법칙을 따라야 조금 더 자연스러운 모션을 줄 수 있습니다. 모든 키프레임을 Ease로 설정하는 이유이기도 합니다. 모션이 무언가 어색하다면 이 부분을 한번 체크해보세요.
3. 업로드하기
이제 다 만들었으니 Export 및 Upload를 해야겠죠,
에프터 이펙트 파일을 Lottie로 만드는법은 이전 포스팅해놓은 글을 보고 따라하시면 됩니다.
로티마켓은 에프터이펙트파일(.aep)과 코드로 이루어진 제이슨파일(.Json) 두가지를 함께 올려야하는데요, 디자인된 아이콘모션을 각각 따로따로 저장해줍니다. 로티도 벡터방식이기 때문에 사이즈에 영향을 받지는 않지만 192x192(px)로 크게 작업하였어요.
Pack폴더에 가서 잘 올라갔는지 확인해보세요. 업로드 된 것이 확인된다면 이제 다른 사용자의 판매를 기다리는 일 뿐!
이미지출처 : https://www.youtube.com/watch?v=w2PEp8awu-0특수한 경우를 제외하고는 모션은 아직 서비스 디자인에 있어서 필수적인 부분은 아닙니다. 추가적인 여력이 될 때 하고있죠. 그렇지만 모션을 단순히 장식으로서가 아니라 사용자경험을 개선을 목표로 고심해서 디자인하는 디자이너들이 많아진다면, 그 위상은 더욱 더 높아질 가능성이 충분하다고 생각됩니다. 모션이 곧 사용자가 해야할 일(task)에 대한 단서가 될 수 있으니까요.
앞으로의 서비스디자인에서 모션의 인기가 더욱 많아지지 않을까 생각됩니다. 많은 실력자 디자이너분들도 관심을 갖고 업로드하여 로티마켓이 더 활성화 되었으면 좋겠네요! 저도 계속해서 여러 디자인의 모션을 업로드하도록 하겠습니다.
