<aside> <img src="/icons/bookmark_purple.svg" alt="/icons/bookmark_purple.svg" width="40px" />
목차
</aside>
사용자에게 여러 개의 텍스트 데이터를 시각적으로 표현한 UI 요소로서, 주로 중요한 단어나 자주 등장하는 단어들이 크고 두드러지게 표시되고, 덜 중요한 단어들은 작은 크기로 표시된다. 워드 클라우드는 데이터를 시각적으로 분석하고 강조할 수 있게 해주며, 주로 데이터 분석, 키워드 강조, 트렌드 분석 등을 나타낼 때 사용된다.
backgroundColor와 border , font 스타일을 쉽게 적용할 수 있어야 한다.css transition 속성을 적용할 수 있어야 한다.CSS transition은 아래와 같은 CSS property 값이 변화할 때, 해당 변화가 일정 시간(duration)에 걸쳐 일어나도록 해주는 속성이다. 즉, :hover와 같은 pseudo 클래스 선택자 또는 Javascript의 부수적인 액션에 의해 변경된 CSS 프로퍼티 값에 의한 표시의 변화를 부드럽게 하기 위해 사용된다.
CSS에서는 @keyframes, animation 속성으로도 애니메이션을 제어할 수 있는데, transition 은 요소 프로퍼티값이 다른 값으로 변화할 때 주로 사용하며 요소의 로드와 함께 자동으로 발동되지 않는 반면, animation 속성은 하나의 줄거리를 구성하여 줄거리 내에서 세부 움직임을 시간 단위로 제어할 수 있고, 전체 줄거리의 재생, 정지, 반복까지 제어할 수 있다.
문제는 워드 클라우드 UI의 경우 어떤 키워드가 새로 생겨나거나 크기가 커질 때, 기존 키워드들의 레이아웃(위치)이 변하는데 이때는 자기 자신의 css property 가 변경된 건 아니다 보니 새 위치로 이동될 때 부드러운 애니메이션 처리를 하기가 어렵다.
그렇다고 키워드들을 전부 position: absolute로 설정한 다음, 새 키워드가 생기거나 크기가 커질 때마다 주변의 모든 키워드들의 위치를 미리 계산해서 transform: translate() 처리하여 애니메이션을 적용하는 건 물리엔진 구현 수준으로 난이도가 올라가고, 오버헤드도 커 보인다. (오해였음)
Framer Motion을 활용하면 위에서 지적한 레이아웃의 변화 에 따른 주변 요소들의 위치 변화 시에 부드러운 애니메이션 적용이 가능해진다. 다만 우리가 원하는 UI는 키워드들이 자유분방한(?) 위치에서 서로 겹치지 않게 하는 것인데, 위치를 랜덤한 수치로 조금씩 변형시켰을 때 다른 요소가 자기와 겹쳤는지 감지하는 기능은 따로 없어서, 겹침을 방지하기가 다소 어려워보인다.