망고보드 사용팁

시선 확 끄는 모션 만들기(3) 커뮤니케이션이 잘 되려면

 

시선을 확 끄는 모션효과 설정 관련 세번째 글 시작합니다.

1. 잔잔한 움직임 설정하기
  
(1) 이럴 때는 커뮤니케이션이 어려워
  
콘텐츠의 내용과 분위기는 차분한데 여러 개의 큰 이미지들을 너무 세게 흔들면 아래와 같이 정신 없이 보입니다. 
 


안타깝게도 이런 식으로 모션을 사용하시는 분들도 보게 됩니다. 보시다시피 어지럽게 보이고 커뮤니케이션이 잘 되지



않을 수 있습니다.
  
(2) 잔잔한 분위기에 맞는 움직임 설정하기
 
차분한 분위기의 디자인 템플릿에는 이에 맞는 모션 효과를 설정해야 합니다. 
 

 


꽃이 살랑살랑 흔들리는 움직임을 만들기 위해 ‘천천히 흔들기’ 를 적용하였습니다.
 

속도도 절반인 0.5배로 설정하였습니다. 배경에 나무나 꽃이 있는 경우 이런 움직임이 잘 어울립니다. 
 
아래도 역시 ‘천천히 흔들기’ 를 적용한 사례입니다.


 
다음 사례는 단풍 나뭇가지가 가을 바람에 흔들리는 움직임을 나타내고자 하였습니다.



단풍 나뭇가지 이미지에 ‘늘이기(상하)’ 효과를 선택하였습니다.



 
차분한 분위기에서는 배경이 될 만한 이미지들을 살살 흔드는 것이 분위기에 맞는 GIF나 MP4를 만들 때 좋습니다.


그러면, 차분한 분위기 말고, 역동적으로 강조해야 하는 분위기에서는 어떻게 해야 할까요?

2. 강렬하게 역동적으로 강조하는 모션 설정







(1) 강하게 강조하고자 하는 내용인지 확인
 
강조하기 위해 큰 움직임을 적용하는 것은 아무 때나 어울리지는 않습니다.


그 내용 자체가 소리를 지를만한 내용인지를 확인하고 적용해야 합니다.
  

 
(2) 긴 텍스트에서 중요한 단어만 분리 시켜서 강조
 

그리고, 텍스트를 크게 흔들 때에는 짧은 텍스트가 좋습니다.


긴 텍스트를 크게 흔들면 정신 없어 보이게 되니 중요한 단어만 따로 떼서 그 단어만 강조하는 것이 좋습니다.
  

 
위의 움직임에서 글을 읽는 것이 쉽지는 않습니다. 

 
아래와 같이 글의 일부분만 모션 효과를 넣으면 강조도 되면서 잘 읽혀집니다. 



위의 경우 단어 ‘가격’ 은 ‘솟아나기’ 를 적용하였고, 사람은 ‘뛰어 오르기’ 를 적용하였습니다. 
 
(3) 따로 노는 큰 움직임을 2개 이상 적용하지 말기 

아래의 경우는 반값이라는 깜짝 놀랄만한 중요한 메시지를 강조해야 합니다.


그런데, 사람 이미지까지 크게 흔들어 버리니 중요한 메시지인 반값에는 집중이 되지 않습니다.




(텍스트에는 ‘솟아나기’를 적용하였고, 사람 이미지에는 ‘작아졌다 커지기(회전)’를 적용하였습니다. )
   
(4) 강조할 것과 같은 방향으로 움직이거나 잔잔한 움직임 혹은 정지 처리


가장 강조할 것이 아닌 것은 그냥 두는 것이 좋으나, 꼭 움직이고 싶다면 다음 두 가지 중에 고르는 것이 좋습니다.

첫번째는 같은 방향으로 움직이는 것입니다. 다음의 사례는 반값과 사람이 같은 방향으로 움직이니 시선이 덜 분



산됩니다.

   


위의 사례에는 텍스트에는 ‘솟아나기’를 적용하고, 사람 이미지에는 ‘솟아나기(엇박)’을 적용하였습니다.
 
또 다른 방법은 강조할 텍스트에 집중 시키기 위해 이미지에는 잔잔한 움직임을 적용하는 것입니다. 





아래의 경우 텍스트에는 강하게 강조하는 ‘3D입체 나타나기’를 적용하였고, 사람 이미지에는 ‘잔잔하게 두근대기



(느림)‘를 적용하였습니다.




이미지만 움직이고, 텍스트는 정지 시키는 것도 방법입니다.



깜짝 놀라는 움직이는 이미지를 통해 일차적으로 시선을 끌고, 그 다음으로 반값이라는 메시지에 주목을 하게 됩니다.


순차적으로 시선이 이동하면 문제 없이 커뮤니케이션이 될 수 있습니다.

위의 사례에는 이미지에 ‘작아지며 나타나기’를 적용하였습니다.



또 다른 사례도 보여 드리겠습니다.



위의 경우도 반값이라 강조할 메시지인 반값에는 ‘솟아나기’를 적용하였으나, 사람 이미지에는 부드러운



움직임인 ‘두근대기(느림)’을 적용함으로써 강조할 메시지에 집중할 수 있도록 하였습니다.

지금까지 강하게 강조해야하는 경우 어떻게 역동적인 움직임을 넣어서 효과적으로 커뮤니케이션 할 수



있는지에 대해 설명 드렸습니다.

앞에 1편과 2편을 보시지 않은 분들은 아래 링크를 통해 꼭 보실 것을 강추합니다.








(클릭) 시선 확 끄는 모션 만들기(1)반짝반짝, 터뜨리고, 쏟아지고




(클릭) 시선 확 끄는 모션 만들기(2) 이미지 동작에 따라 애니메이션 설정

목록으로 돌아가기