[마이크로 인터랙션] 2021 Apple Music : Scroll, Text Focus

예전에 했던 마이크로 인터랙션 분석 영상을 발견해서 관련 내용을 정리해봤다.

'둘러보기' 기능을 브라우징 하는 과정에서 보이는 마이크로 인터랙션을 프로토파이에서 구현한 영상이다.

 

Task : 스크롤 - 검색창 - 세부 카테고리(page scroll)

주의할만한 Apple Music의 마이크로 인터랙션 & 구현 방법

1. 상단 nav바의 Background Blur 적용(Range 값)

    - 원래는 오퍼시티 100의 단색이 초기 설정값

    - 스크롤을 어느정도 내리면 오퍼시티 값이 내려가며 Background Blur가 적용됨(Apple의 글래스모피즘 UI)

      (영상에서 Range 값은 임의로 설정함)

    - 다시 초기 스크롤 값에 도달할 때, Reset

 

2. 검색 창 클릭시 '취소' 버튼이 오른쪽에서 나타났다가, 화면의 다른 부분을 클릭하면 원상태로 복귀함

    - Focus 기능(In)을 이용해서 크기/투명도/이동에 키프레임 설정

    - Focus 기능이 빠지면(Out) Reset을 이용해서 처음 키프레임으로 돌아오게 설정

 

3. 두 가지의 스크롤 : default or page

    - page 스크롤은 컴포넌트의 크기에 맞춰 condition을 설정해야 됨

 

* 키프레임의 자연스러운 모션은 Easing 기능을 사용하면 된다.

* 애프터이펙트를 먼저 학습한 후면 더 편할 것이다.

 

최근 애플뮤직의 클래식버전 앱이 나왔고, 가라오케 버전도 꽤 인상깊은 인터랙션 & 모션이라,

꽤 즐겁게 살펴볼만한 부분인 것 같아 이에 대한 분석과 구현 영상도 시간이 될 때 해보고자 한다.