트랜지션은 어떻게 구현할까요?
화면 속 요소가 언제나 정적으로 머무르지는 않습니다. 유저의 동작에 의해 사라질 수도 있고, 생겨날 수도 있지요. 선언형 프레임워크에서는 이를 쉽게 조건문으로 구현할 수 있습니다.
funtion App() {
// {...중략}
const [show, setShow] = useState(false)
return (
<>
<button onClick={() => setShow(!show)}>Toggle</button>
{show && <div>content</div>}
</>
) }
이때 애니메이션을 부여하려면 어떻게 해야할까요?
css로 dom이 나타났을때 애니메이션을 부여하는 것은 쉽습니다. css의 애니메이션은 dom이 나타나자마자 동작하니까요. 하지만 dom이 사라졌을때 애니메이션을 부여하는 것은 어렵습니다. 역설적으로 dom이 사라지는 애니메이션은 dom이 사라지지 않아야 가능합니다.
우리는 생성과 소멸의 트랜지션을 원합니다. 갑작스러운 생성, 갑작스러운 소멸. 유저는 집중하고 있지 않으면 자신의 전행동을 쉽게 까먹고, 상황 변화를 인지하기 어렵죠. 주의집중해야 하는 ux는 사용자로 하여금 피로를 느끼게 합니다. 트랜지션은 유저의 인지 부담을 줄여 줍니다. 생성과 소멸에 비대칭 애니메이션을 부여한 자신의 동작을 더욱 명확하게 인식할 수 있죠. 집중을 덜해도 말이죠.
사라지는 애니메이션을 구현하기 위해서는, dom이 사라지는 순간을 포착해야 합니다. 그리고 사라진 dom을 다시 복제해서 제자리에 넣어야 합니다. 이 제자리에 넣기 위해 dom이 생성되는 순간, 해당 dom의 부모 엘리먼트를 참조하고 있다가 사라질때 다시 부모에 넣어줍니다. 그리고 애니메이션을 동작시키고, 애니메이션이 끝난 순간이면 다시 dom을 삭제합니다.
즉 다음과 같은 과정이 생기는거죠
┌─────────┐ ┌─────────────┐ ┌───────────────┐ ┌──────────────┐
│ DOM │ ──> │ Clone │ ──> │ Animation │ ──> │ Final │
│ Removed │ │ Restore │ │ Running... │ │ Cleanup │
│ │ │ │ │ │ │ │
└─────────┘ └─────────────┘ └───────────────┘ └──────────────┘
↓ ↓ ↓ ↓
[Gone] [Reappear] [Fade Out] [Destroyed]
⚡⚡⚡
리액트에서는 motion 이란 라이브러리가 생성과 소멸 애니메이션을 구현할 수 있게 해줍니다. 스벨트에서는 자체적으로 transition: 지시어로서 생성과 소멸의 애니메이션을 구현할 수 있죠. 그러나 다른 라이브러리들은 어떨까요? 그들도 motion과 같은 라이브러리를 가지고 있을까요? 아니면 스벨트처럼 라이브러리 안에서 생성과 소멸 애니메이션을 지원해야 할까요.
신규 프레임워크들의 진입장벽은 여기서 시작됩니다. 아무리 뛰어난 성능 최적화와 수려한 dx를 가지고 있다 하더라도, 내가 만들어야할 화면의 요구사항을 충족하기 어려우면 채택하기 어렵습니다. 그중 트랜지션 애니메이션은 프로덕션 제품을 만들때 없어서는 안될 기능이라고 생각합니다.
그래서 저는 트랜지션이 프레임워크와 상관없이 동작할 수 있도록, 프레임워크 독립적인 라이브러리를 만들고 있습니다. 돔의 생성과 소멸 시점만 알 수 있으면 어느 프레임워크든 똑같은 코드로 똑같은 애니메이션을 구현할 수 있죠. 리액트에서만 쓰이는 motion과 같은 라이브러리에 의존하지 않고서도요.
ssgoi는 전 프레임워크 지원을 목표로 하고 있습니다. 그리고 타깃을 페이지 트랜지션 애니메이션으로 잡았죠. 그러나 원리는 같습니다. ssgoi의 transition은 돔 개별적으로도 적용시킬 수 있습니다. 마치 아래처럼 말이죠.
Options