인터랙티브 웹: 카드 애니메이션
완성도 높은 사용자 경험을 제공하기 위해 많은 고민을 하게 되었다. 🤔
기능이 올바르게 동작하는 것 이상으로, 사용자에게 즐거움과 감동을 주기 위해서는 애니메이션 효과를 적절하게 활용해야 한다고 생각했다.
핵심 기능인만큼 카드 애니메이션에 가장 공을 많이 들였다.
카드 화면 진입 시에 왼쪽에서 오른쪽으로 카드가 펼쳐지고 다시 접히는 애니메이션을 구현해두었다. 또한 드래깅과 스크롤 시 방향에 맞게 카드가 회전하고, 카드를 클릭하면 뒤집히는 효과를 볼 수 있다. 효과음도 넣어주어서 현장에 있는 듯한 생동감 넘치는 사용자 경험을 제공하기 위해 노력했다.
많은 분들이 궁금해 해주셨던 카드 회전 애니메이션 구현 과정에 대해서 간략하게 소개하고자 한다.
우선 카드 이미지를 감싸고 있는 형태인 tarotCard 컴포넌트가 존재하는데, 내부 카드 이미지는 외부 박스 윗방향으로 밀어둔다.
이때 이미지를 감싸고 있던 외부 박스는 움직이지 않으며, 나중에 만들어질 원형 타로 스프레드의 중심 역할을 하게된다.
이러한 방식으로 78개의 TarotCard 컴포넌트를 만들고 겹쳐서 카드덱을 만들어준다.
회전 효과를 주기 위해서 전체 카드덱을 감싸는 TarotSpread 컴포넌트도 만들어준다.
원의 왼쪽 중앙 지점부터 회전이 시작되도록 하기 위해서 TarotSpread 컴포넌트를 시계 방향으로 270도 회전을 시켜주면 첫 번째 그림과 같은 형태가 된다. 여기서 각 Tarotcard를 index 곱하기 4.6도만큼 회전시켜주면 두 번째 그림처럼 원 형태가 된다.
여기까지가 펼치기 애니메이션 구현 방법이고, 접기 애니메이션의 경우 다시 TarotCard 컴포넌트의 회전 각도를 0도로 초기화 시켜줘야한다.
드래깅과 스크롤 시 카드 스프레드가 회전하는 애니메이션의 경우, 270도 설정되어 있던 TarotSpread 회전 각도를 방향에 맞게 재설정 해주면 된다.
카드 뒤집기 애니메이션의 경우, 한 가지 트릭이 필요하다. 카드의 앞면과 뒷면을 겹쳐 놓고 하나의 컴포넌트인 것처럼 보여주는 것이다. 실제 코드는 좀 더 복잡하지만, 이해하기 쉽게 간략하게 요약해두었다.
앞면과 뒷면 이미지가 존재하고 이를 감싸는 외부 박스가 있다. 앞면과 뒷면은 포개어 겹쳐두고, 뒷면은 뒤집어둔다. 이때 앞면, 뒷면 모두 뒤집었을 때 보이지 않도록 설정하고, 외부 박스에 대해서는 원근법을 적용한다. 이제, 외부 박스에 flip 클래스를 적용해주면 카드가 뒤집어지는 애니메이션을 볼 수 있다.
애니메이션 속성을 다루는 것 자체가 어렵기도 했지만, 나를 더 힘들게 했던 것은 tailwind였다. 우선 tailwind는 transform의 적용 순서가 선언 순서와 같지 않다.
변환을 적용하는 방식은 크게 2가지로, transform 속성을 사용해서 각 변환을 한 번에 적용하는 방식과 translate, rotate, scale 속성을 개별적으로 적용하는 방식이 있다.
전자는 선언 순서에 따라 왼쪽에서 오른쪽으로 적용되지만, 후자는 선언 순서와 관계없이 무조건 translate, rotate, scale 순으로 적용된다.
tailwind는 후자의 방식으로 변환이 적용되기 때문에 원하는 순서대로 요소를 중첩해서 사용하거나 tailwind를 사용하지 않고 style 객체에 문자열 형태로 직접 넣어주어야 한다는 불편함이 있다.
또 다른 문제는 tailwind는 rotateY와 같은 3d 기능을 공식적으로 지원하지 않고, 변수를 활용한 동적 클래스 생성이 되지 않아서 완전한 문자열의 클래스명만 인식한다는 것이다.
해당 문제도 style 객체에 직접 넣어줌으로써 해결할 수 있었지만, 큰 불편함을 느꼈다.
이러한 이유로, tailwind는 기존에 잘 만들어진 클래스를 가져다 쓰기 때문에 쉽고 편하다는 장점이 있지만, 복잡한 디자인이 필요한 웹 사이트 구현할 때는 적합하지 않다는 결론을 내렸다.