플러스엑스 UI패키지 강의 후기 - (24)

◆ 오늘 수강/복습 할 부분
Part4. UI 인터랙션 디자인 
- 인터랙션 디자인 테스트 
 
 
◆ 정리 및 느낀점
- 전일 인터렉션 디자인에서 다뤘던 내용중 디자인 후의 단계가 바로 인터랙션 디자인 테스트이다. 사실 인터랙션 가이드를 화면별로 모두 만들면 좋지만 그러기 쉽지 않은 경우가 있을 수 있으므로, 말로 다 설명이 어려울 때 요 디자인 테스트를 진행한다고 한다. 

 

- 인터랙션 테스트를 위한 애니메이션 구현시, 염두에 두어야 할 것은 1) 반응은 빠르고 정확하게 나오도록 2)현실에서 보던 규칙이 적용된것처럼 자연스럽도록 3)다른요소와 어우러져 해당 인터렉션이 인식 되도록 4)목적과 의도가 명확하게 느껴질 수 있도록 하는 것이다.

 

- 특히 지속시간과 속도가 중요한데, 속도는 milesecond(=ms)로 표시하며, 이는 1초를 1000으로 나눈 단위이다. 즉 1초가 1000ms가 되는 것! 피그마에서 애니메이셔 적용시 ms라는 단어를 보고 이게 뭐지 싶었는데, 요기서 궁금증 해결.

ㅇ최적의 속도는 = 200~500ms (100ms 이하는 인식을 못한다고 한다) 

ㅇmo 최적 속도 = 200~300ms

ㅇpc 최적 속도 = 150~200ms

ㅇta 최적 속도 = 400~450ms

ㅇ전반적으로 작은건 빠르고 큰건 느린 경향이 있으며, 위의 속도는 정해진건 아니니까 참고만 하자!  

 

-easing이라는 개념도 배웠는데, 속도 변화를 부드럽게 만들어 주는 것이라고 이해하면된다고 한다. 이 또한 피그마에서 ease-in/out 이런 단어로 많이 봤었는데, 하나도 이해가 안됐다가 최근에 조금씩 이해하게 되었고, 오늘 강의를 통해서 다시 한 번 짚고 넘어갈 수 있었다. easing을 설명할때는 베지어커브라는 것을 알아야 하는데 아래 수강샷에서 보이는 그래프 같은 선을 이야기 한다. 몇가지 패턴을 정리해보면

1) linear movement : 일정한 속도로 움직이는 것, 카드나 무한롤링 되는 것 같이 첫 요소와 마지막 요소의 속도가 비슷할 때 사용한다.

2) ease-in: 천천히 들어갔다가 점점 가속화되어 빠르게 끝나는 경우 

3) ease-out : 빠르게 들어갔다가 천천히 끝나는 경우 

4) eas in-out : 천천히 들어갔다가 빠르게 가다가 천천히 끝나는 경우

5) ease back : 통하고 튕기는 애니메이션, 오브젝트의 탄성 또는 유동성을 강조하는 것! 

 

ease라는 단어가 완화하다 라는 뜻으로 알고있는데, 속도를 줄여주는 느낌이라서, ease 뒤에 붙는쪽이 천천히라고 생각하면 외우기 쉬운 것 같다. 

 

- 이후에는 XD파일로 디자인 테스트 진행하는 것을 했는데, (예제파일 있음) 나는 XD는 사용하지 못해서.. 내일 피그마 파일 테스트를 기대중이다 :) 

◆ 그럼 오늘의 수강 인증 샷!