트랜지션이란 페이지 간 이동할때 적용하는 애니메이션을 말함. 페이지와 페이지 사이의 정보 구조 및 연계성을 시각적으로 인식시켜주기 위한 방법. 트랜지션을 결정하는 두 가지 기준은 페이지 간 이동 방식과 애니메이션에 대한 시간임. 유저가 특정 행동을 그만두는 경우는 다음 행동에 대한 주의가 덜 필요하여 열리는 시간보다 닫거나 접는 시간이 비교적 더 짧아야 함.
피그마 프로토타입 기능에 기본으로 제공하는 프리셋 Instant, Move, Push, Slide 등을 참고하면 트랜지션에 대한 이해가 쉬울 것.
웹 환경에서의 트랜지션
웹사이트는 기본적으로 각 페이지마다 고유의 링크(url)을 가지고 있으며, 링크 기반으로 페이지 이동시 클라이언트와 서버와의 통신으로 이루어지기 때문에 화면을 불러올 때 로딩이 필요함. 웹사이트 내에 고급 트랜지션을 적용하려면 ajax를 잘 활용해야 함.
앱 환경에서의 트랜지션
앱은 각 OS마다 트랜지션에 대한 스타일이 다르며, 머티리얼은 명확한 가이드라인이 있음.
머티리얼 트랜지션 참고 : https://material.io/design/navigation/navigation-transitions.html
주의점
UI 내에서 유저가 예상한 대로 트랜지션이 되지 않은 경우 어색함을 느낄 수 있으며, 과한 트랜지션은 지양해야 함.
관련 키워드
인터렉션
