[📚정보] 쫀득한 UI 모션 타이밍 내 생각

[성실성실(look1357)]

잡설

- 얼마전에 UI 관련 쫀득한 모션감에 대해 궁금해 하는 쓴이가 있어서 한번 적어봄.

- 유니티 Dotween 플러그인으로 활용 가능한 내용임. 하지만 본인은 영상 전공이라 에펙으로 예시 만듦.

1. 프레임으로 보는 균등 분배  vs 쫀득 분배

균등 분배란?

예) 몇 프레임 동안 위치 / 크기가 동일한 비율로 움직임이 변함.

그래프로 그리면 이런 느낌

일정한 속도를 고수하는데, 이게 참... 딱딱하고 맛없는 움직임으로 보임.

쫀득 분배란?

초반과 후반에 시간 비중을 더 두고, 중간 변화를 압축하거나 생략.

결과 : 속도감 + 타격감 + 만족감 상승

요게 쫀득 분배 그래프.

*파란 박스부분은 왜 속도가 늦음?
A : 준비 동작 / 여운 동작으로 기대감과 만족감을 강하게 줄 수 있는 장치.

2. 그럼 쫀득 분배를 UI에도 적용해보자!

예시 영상 1

개 맛없는 슴슴한 균등 분배를 적용해본 간단한 UI 모션

딱봐도 딱딱하고 텁텁한 움직임. 이러면 UI가 예뻐도 느낌이 안 삼.

예시 영상 2

맛도리 스무스한 쫀득 분배를 적용해본 UI 모션.

비교 및 슬로우 모션

영상을 해설해보자면

버튼을 누른 직후 > 천천히 UI 등장 시작. 시선 유도를 위해 버튼에 테투리 불 들어옴.

(버튼 누른 직후 UI 팝업 속도 그래프, 도착 즈음에 여운을 엄청 두게끔 배치함)

40~70% 구간 > 급 가속. UI 창도 시원시원하게 움직이고, 팝업이 튀어나가는 순간임.

대략적인 UI 형태와 글자, 이미지가 보임.

~90% 구간 > 안정적으로 목적지에 UI가 도착함. 하지만 아직 마무리는 아님.

모든 UI가 다 읽히고 보임. 

~100%구간 > 여운이 남는 동작으로 천~천히 도착하며 마무리.

*이때 모든 과정은 0.3~0.5초 이내에 100%로 도착하게끔 해야함. 안그럼 UI 열고 닫는데 한세월이라 유저 피로도가 쌓임.

특이하게 UI 닫는 모션에서 약간의 기교가 있음.

ㄴ녹색 선은 클릭 시점부터 닫히는 시점까지 그래프.. 위에 쫀득 그래프랑 비슷함.

ㄴ 아래 파란 선은 불투명도 값임.

특이하게도 동작 100% 달성을 하기 전에, 불투명도 0을 먼저 찍어서 화면을 사라지게 만들어버림.

이러면 부드럽게 UI 창이 사라지면서 공기처럼 스르륵 하고 사라지는 연출이 가능함. 보통 창 닫을 때 자주 씀

여기까지 이해가 됐다면 축하함. 내가 하고 싶은 말은 끝임

혹시 이해가 안 된다면 아래 비슷한 내용 글 하나 링크 둠

[사쿠라이 개발 강의 요약] 2D와 3D 모션의 차이 - 인디 게임 개발 마이너 갤러리

[오카리(half6224)]

많이 어렵네...

[성실성실(look1357)]

사실 내가 쓰고도 먼말인지... 다른 게임 ui영상 뜯어보면서 이해하면 좀 쉬울듯

[불타는키보드(1bnmaker)]

[디피프(dlffff)]

블라인드 테스트 하면 저 두개 구분할 자신이 없다

[비월(lunar1228)]

그래서 두트윈을 애용하고 있읍니다

[퍅셔미(wvvwvwwvw)]

이것이 바로 애니메이션 12원칙의 6번째 항목(Ease in Ease out)에 대한 내용임. 이 글을 보고 연출에대한 관심이 생긴다면 한번 찾아보시옹

[dd(directly1991)]

[Indie 1(175.125)]

이거보고 easing functions cheat sheet 무지성으로 베끼기로 했다