본 글은 디자인스펙트럼과 로티파일즈에서 주최한 오프라인 이벤트에서 배운 내용을 정리한 글입니다

LottieFiles

motion evokes emotions , motion is universal language

인간의 뇌가 기억할 수 있는 단어의 수 → 7개로 한정
하지만 이미지는 오래 기억 가능

이미지를 받아들이는 과정에서 유저가 유저의 경험과 연결해 해석하기 때문에 personalize to user 가 가능해짐

• 유저의 참여도 증가
• 유저가 머무는 시간 증가 → SEO(검색엔진)에 유리

Banksalad

모션 도입기

모션은 최소한의 리소스로 큰 임팩트를 전달

특히 모바일 환경과 같이 한정된 공간에서 많은 설명이 필요한 경우, 모션이 유용

비트맵은 결국 png(로티x) → 벡터 위주의 작업

회원가입에 적용한 모션 사례

현재 뱅크샐러드의 회원가입 프로세스

1. 회원가입
2. 금융 데이터 받아오기
3. 서비스 이용

앱 설치 후 회원가입을 하지않고 이탈하는 유저가 많음 why?

1. 뭐하는 앱인지?
2. 위험한 정보에 대한 불안증

→ 앱의 특장점을 소개하고, 보안에 대한 안심을 시켜주면 이탈률이 줄어들 것이다.

회원가입 이후 이용할 있는 서비스에 대한 모션 스토리 제공

모션에 유저 선택시 스킵 가능하도록 함

• 하지만 대부분의 유저가 모션을 보지 않고 스킵해버림

대부분의 유저가 앱을 설치하는 이유

• 필요에 의해
• 추천에 의해
• 서치에 의해 → 이미 아는 내용에 대한 온보딩 skip
  

따라서 자연스럽게 유저가 사용하면서 배우는 온보딩 프로세스로 진행

모션을 어디에서 활용하면 좋을 지

Form follows functions : 형태는 기능을 따른다

모션만으로 성공하는 모션은 없다.
’고객의 멘탈리티에 공감하고 있는가’ 가 제품에서의 모션 성공요인이다.

BX와 UX를 위해 감정 전달이 필요 / user mentality를 고려해야함.

모션의 특징

• express
  • 불편한 감정을 전달해야할 때 (송금 실패, 위험 등), 모션을 이용해 임펙트 있게 전달
• focus
• informative
  • 기능 설명을 위해 모션으로 미리 UI를 보여줌

라인

모션을 주로 사용하는 곳 : 리액션, 이미지, 날씨 등

벡터나 shape(?)으로 이뤄짐

→ 시퀀스(+벡터)를 이용 - JSON에 넣기

Lottie optimizing

코드를 이용하는 것이 가장 best, 하지만 디자인이 너무 구림

→ Lottie 사용

로티 크기에 따라 디바이스 별로 성능에 차이 발생

• Device 별 분기 처리
• 최대한 vector < image (2배~3배 증가)
• JSON을 여러 레이어로 나누기

JSON Data converter

JSON 파일은 애니메이션과 이미지 데이터를 가지고 있음

1. 주사위 게임 예시

여섯면을 모두 비디오로 만들어 넣으면 용량이 너무 커지기 때문에

하나의 JSON으로 여섯개의 데이터를 낼 수 있도록 파일 output을 쪼갬

( 면의 데이터 ) → return 해당 면에 대한 데이터 적용

ex ) ( 5 ) → 숫자 5가 그려진 그림을 만들어냄

2. 인스타 스토리 같은 상품 이미지

CMS와 JSON 연동 → video 대신 Lottie

UI, Title, Image, Description 각각의 레이어로 쪼갬

메인 컬러를 자동으로 골라 input으로 넣어주면 JSON 컬러 데이터에 반영되도록

이미지 (비디오)를 일일이 만드는게 아니라 입력값에 따라 동적으로 사용할 수 있도록 해 용량을 줄임

Toss

💡 토스의 모션

1. 1 movement > 100 words
2. making the mood light
3. impact with less resources
4. maximizing impact with 3D
5. 3D interaction animation

모션의 장점

어려운 개념 → 쉽고 재밌게

스팟 애니메이션 : 좁은 공간에 많은 정보 함축 가능

어렵거나 불편한 경험을 모션으로 light 하게

less resource unlimited data

여러 상태에서 동작 가능하도록 3D와 적은 이미지를 이용

3D 파일 제작 후, 3D 형식을 그대로 사용하는 게 아니라 이미지로 만들어 효과를 줌

→ 크기가 커졌다 작아졌다 하는 애니메이션을 줘서 입체감 있어 보이지만 3D를 직접 넣는 것보다 낮은 리소스

토스가 모션을 다루는 방법

👑 사용자를 보다 주인으로
🌐 모션은 토스의 그래픽 자산이자 세계관
🤩 볼 때 재밌게, 다시 보고싶게
👩‍💻 디자인 → 인터랙션 순서로 개발

• 유저에게 어떻게 접근되는지
• 의미가 제대로 전달되었는지 확인 필요

느낀 점

모션을 적용했을 때의 장점과 직접 적용해보며 겪었던 시행착오를 실제 예시와 함께 들으니 왜 모션을 이용해야하는지, 어떻게 모션을 이용해야하는지 잘 이해할 수 있었다. 지금 당장 우리의 서비스에 모션을 도입하는 건 어렵겠지만, 추후에라도 모션을 이용한 다양한 서비스를 제공할 수 있게되면 굉장한 시너지 효과가 날 수 있겠다고 생각했다. 특히 모션의 가장 큰 장점 중 하나인 말로 설명하기 힘든 감정을 사용자에게 전달 할 수 있다는 점이 커뮤니티에 유저들을 적응시키고, 연대시키는데 큰 도움이 될 것 같다.