Why Motion?
IT 프로덕트에서 모션의 이점과 최적화 팁에 대해
지난 달 인스타그램을 둘러보다 아주 설레는 세션 소식을 접했다. 바로 디자인스펙트럼, 로티파일즈가 함께 주최한 모션 디자인 세션 <Why Motion?> 이었다. 난 모션 디자이너는 아니지만, 최근 들어 업무차 필연적으로 모션의 중요성을 느끼고 혼자 고군분투하고 있던 와중이었기에 아주 반가운 마음으로 신청하여 참여하게 되었다.
Overview
- Motion의 활용이 디자인에 있어 얼마나 많은 가능성을 열어줄 수 있는지 이야기합니다.
- 또한 모션 디자인, 모션 디자이너들의 노력이 더 조명받을 수 있도록 기획되었습니다.
- 프로덕트, 브랜드, 모션 디자이너들이 ‘모션'이라는 개념을 작업에서 어떻게 활용하는지 케이스 스터디 위주로 세션을 진행합니다. [소개 페이지 중]
토스, 뱅크샐러드, 라인 등 스피커분들의 소속에서도 알 수 있듯이 IT 프로덕트에 적용한 모션 사례에 대한 내용 위주로 진행됐다. 이번 글에서는 프로덕트 경험에 기여하는 모션의 이점, 그리고 개발자와 원활한 협업을 위한 최적화 팁에 대해 기록해보려 한다. *실제 키노트에서는 다양한 시각 자료를 많이 보여주었지만, 이 글에는 포함되지 않았기에 다소 이해가 어려울 수도 있다.
모션의 이점
(1) 직관적으로 정보를 전달한다.
앱 내 애니메이션을 통해, 설령 외국인이어서 글씨를 읽기 어렵다해도 직관적으로 정보가 전달될 수 있다.
모션이 강력한 전달력을 주는 경우 중 하나는 로딩, 완료를 표현할 때이다. 루핑 애니메이션, 완료화면으로 넘어가는 적절한 인터랙션을 통해 명확한 notification과 지루하지 않은 경험까지 제공한다.
설명적인 내용도 애니메이션으로 요약하여 전달할 수 있다. (e.g. 기본 도형/같은 각도로 디자인이 되었다는 것을 설명할 때 등)
- Toss -
모바일 디바이스는 지면이 넓지 않기 때문에 구구절절 이야기 할 수 없는데, 모션 그래픽으로 여러 줄의 이야기를 짧은 순간에 본능적으로 이해할 수 있도록 전달이 가능하다. (e.g. 위험 질병 찾기 서비스 | 전문 용어 자체를 이해할 수 없어도 느낌으로 알 수 있게 됨)
- Bank Salad -
(2) 감정을 전달하고 극대화한다.
사용자에게 좋은 일이 생긴 상황에서 축하 애니메이션을 통해 함께 기뻐해주면서 사용자의 즐거움과 행복감을 극대화시킬 수 있다. (e.g. 월급날, 신용 점수 상승 알림)
특히 이런 재미 요소들은 누군가에게 공유할 때 배가 되는데, 토스에서는 이모지를 친구에게 보내서 여러 감정과 상황을 표현할 수 있어 재미있는 대화를 만들어주는 효과가 있다.
불편하거나 당황스러울 수 있는 상황에서도 최대한 귀엽고 가벼운 애니메이션을 통해 그 상황을 너무 진지하지 않게 여기도록 유도하기도 한다. (e.g. 네트워크 연결 끊김, 긴 약관 동의)
- Toss -
브랜드, 감정을 담아서 즐거움을 더하는 것이 모션의 첫번째 역할이다. (e.g. 샐러드 용돈 서비스 | 더 생동감있는 모션으로 금액 강조하여 자산관리의 즐거움 극대화)
- Bank Salad -
(3) 강한 임팩트로 유저들의 참여도와 전환율을 높여준다.
정적인 이미지는 그냥 지나치기 쉽고 유저들의 시선과 집중을 유도하기 어렵지만, 모션은 유저들이 페이지를 방문했을 때 시선을 어디에 두어야 하는지 명확히 알려주기 때문에 참여도를 높여준다.
유저들이 모션과 관계를 맺으면서 페이지에 오래 머물게 될 때 검색 엔진 랭킹 등에 상위에 오르게 되고 결국 이런 케이스들은 또 다른 유저를 유입하도록 하기 때문에 전환율이 높아질 수 있다.
- Lotti Files -
다양한 온드미디어에서 브랜드 활동 관련 그래픽을 제작할 때 주로 3D 애니메이션을 활용하는데, 이는 첫인상이 되어 사람들의 시선을 사로잡고 기대감을 높여주는 역할을 한다.(e.g. 컨퍼런스 키비주얼, 티저 영상)
프로덕트에서도 3D 인터랙티브 그래픽으로 사용자를 보다 더 주인으로 만들 수 있다.단순히 보는 것을 넘어 만지고 상호작용하며 더 큰 생동감과 임팩트를 줄 수 있다. (e.g. 토스뱅크 카드 - *WebGL 방식)
* WebGL 협업 프로세스
(디자이너) 3D 오브젝트 모델링 -> 텍스처링 -> 애니메이션 키프레임 작업 -> 파일 추출(GLB) -> (개발자) 환경 값 조성 or 환경 값 조성할 수 있는 셋팅을 디자이너에게 전달 -> PC, Mobile 디바이스에서 렌더링하여 사용자에게 보여짐
- Toss -
모션의 임팩트는 유지하면서 최적화하는 팁
프로덕트에서 모션이 네트워크 환경 및 디바이스 셋팅에 영향 없이 잘 보여지려면, 디자인 단계부터 적절한 용량과 포맷을 고려하여 최적화해야한다. 이를 위해 스피커 디자이너 분들은 MP4, GIF 등 보다 최적화된 포맷인 '로티(Lottie)'를 주로 사용한다는 것을 알 수 있었는데, 이를 더 최적화 할 수 있는 유익한 팁들도 있어 따로 모아봤다.
로티(Lottie): 벡터 애니메이션 파일 형식.
벡터이기 때문에 화면의 크기가 어떻든 깨지지 않는다는 장점이 있고, 작은 용량으로 높은 퀄리티를 낼 수 있어 프로덕트에서 자주 활용된다.
(1) Full 3D 애니메이션 -> 3D 이미지 컷 + 로티
날개 애니메이션 사례 | 펼친 & 접은 3D 이미지 2장 레이어만으로 로티를 활용하여 만들었다. 로티의 이점인 가벼운 용량, 투명 배경을 이용하면서 2D보다 더 볼륨감 있는 효과를 만들어 냈다.
- Toss -
(2) 쉐입 레이어로만 -> 비트맵 이미지로 *요소가 많을 경우
대화방의 불꽃놀이 애니메이션 사례 | 처음엔 로티가 가진 벡터의 장점을 살리기 위해 파티클 입자를 모두 쉐입 레이어로만 작업했으나, 최고 사양의 디바이스에서도 돌아가지 않는 문제가 있었다. 여러 테스트를 통해 이미지만 사용하는게 2~3배 퍼포먼스가 좋았고, 효과 자체만 보았을 때도 시각적인 차이가 없었다.
- LINE -
(3) 하나의 JSON -> 여러 개로 나누기
보통은 하나의 JSON으로 애니메이션을 재생을 하는데, 무거운 작업을 진행할 땐 하나의 JSON 안에 있는 수많은 데이터에 대한 값을 재생을 하다 보니까 버벅일 수 밖에 없다. 같은 속성끼리 최대한 여러 JSON으로 나눠서 하면 더 효과적으로 모든 디바이스에 적용을 할 수 있다.
- LINE -
* JSON(JavaScript Object Notation); 데이터를 담은 문자 기반 포맷. 용량이 작은 데이터 교환 형식이라는 게 특징이다.
세션을 듣고 느낀 점
사실 나에게 모션 그래픽은 욕심의 영역이었다. 어떠한 메시지를 전달할 때 모션/애니메이션이 더 효과적일 것이라는 판단이 들어도, 정적인 이미지로 만들 때에 비해 리소스를 더 들여야 하는 이유를 마땅히 설득하기가 어려웠었다. 그것을 고민하는 와중에 이미 다른 태스크가 생기고 듀데잇은 다가오기 때문이다 :) 그래도 핵심 랜딩페이지 등 정말 중요하다고 생각되는 경우엔 업무 외 시간, 새벽 시간을 할애하여 작업하곤 했다.
이 세션에 참여한 후엔 모션은 필수의 영역이라는 생각으로 변화했다. 프로덕트 관점에서 사용자 경험에 기여하는 모션의 역할을 알게 되었기 때문이다. 토스는 모션을 통해 향상된 사용자 경험을, 라인은 모션이 프로덕트에 원활히 적용되기 위해 최적화에 많은 시간을 쓴 노력을, 뱅크샐러드는 모션 도입을 위해 프로덕트에 기여하는 지표를 만드는 설득의 과정이 인상깊었다.
이제는 작업 전에 사용자 경험 혹은 브랜드 경험에서 어떤 점을 기여할 수 있는지를 항상 고민하고, 그 근거로 설득을 하고 싶다는 큰 동기부여가 생겼다. 이제껏 잘 만나기 어려웠던 주제로 정말 멋진 디자이너분들과 함께 오프라인 세션을 마련해준 디자인 스펙트럼 X 로티 파일즈, 앞으로도 많이 응원하고 싶다!
