🧚 Rally
토스가 만든 플랫폼 공통 애니메이션 라이브러리
-
의사 코드(Pseudo-code) 형태로 소통
의사 코드(Pseudo-code)
프로그램을 작성할 때 각 모듈이 작동하는 논리를 표현하기 위한 언어
자연어로 코드를 흉내 내어 알고리즘을 써놓은 코드 -
플랫폼별 언어로 번역해서 개발
🔧 기존
➡️ 디자이너: 시안/프로토타입 제작
➡️ 개발자: 제작
😵 AOS, iOS, Web 공통 스펙 X ➡️ 결과물 동일 X
😵 디자이너가 각 플랫폼 개발자와 소통 및 조율 ➡️ 커뮤니케이션 비용 증가
😵 애니메이션 스케줄링의 복잡도 증가
😵 화면 전체가 유기적으로 움직이는 애니메이션 ➡️ 개발 난이도 상승 및 가독성 저하 ➡️ 유지보수 비용 증가
？ Why Rally ？
✅ 애니메이션 스케줄링과 컨트롤 용이
✅ 가독성 보장
✅ 각 플랫폼이 동일한 개발 언어와 로직 공유
✅ 구현 난이도 하락
🔑 Keyword
-
Motion
랠리의 가장 작은 구성요소
어떻게 움직일 것인지 정의(움직임에 대한 상세 기술) ➡️ Motion 자체로 재생 X
속성별 재생 스펙 포함(ex. translateY, scale) ➡️ from / to 값 지정 가능(생략 시 내부적으로 추론) -
Rally
재생할 수 있는 최소 단위
Motion을 특성 target(애니메이션을 적용하려는 대상)에 연결
모션이 여러개 ➡️ 순서대로 재생 -
Timeline
여러 개의 랠리 스케줄링
playback(parallel / serial / stagger)을 통해 재생 방식 지정 -
Preset
간단한 Motion을 쉽게 적용
자주 쓰이는 Motion들이 조금씩 다르게 구현되는 것 방지
AnimateTransition ➡️ 들어오고 나갈때
AnimateEffect ➡️ 화면 안에서 강조 -
play
정의한 Rally 또는 Timline 재생
일시정지 / 특정 시간대로 이동 / 역재생과 같은 컨트롤 지원
🔥 활용
1️⃣ 디자이너가 인터랙션 컴포넌트를 사용하여 Motion 생성
2️⃣ 인스펙터에서 Rally 스펙으로 표현
3️⃣ 개발자가 각 플랫폼에 맞는 코드 적용
❗️복잡한 애니메이션의 경우 인터랙션 디자이너가 수도 코드 형태의 가이드 작성
