Framer Motion으로 본 Rotating Text 레이아웃 처리 방식

최근 전 직장에서 함께했던 멋진 동료분이 발표자로 참여한 오픈소스를 주제로 한 밋업에 다녀왔다. 발표에서 소개된 오픈소스들을 살펴보다가, React Bits 에서 최근 내가 디자인 시스템에서 구현했던 텍스트 애니메이션 컴포넌트와 동일한 동작을 하는 컴포넌트를 발견했다. 시각적으로 자연스럽게 보이기 위해 고려해야 할 점이 많았던 컴포넌트였는데, 다음과 같은 디테일한 문제들을 해결해야 했다.

1. 단어가 바뀔 때 문장 전체가 흔들리는 문제

예를 들어

• “오늘은 피자를 먹을까요?”
• “오늘은 샤브샤브를 먹을까요?”

두 문장은 동적으로 교체되는 단어(볼드로 표시된 부분)만 다르지만, 이 단어의 폭이 달라지는 순간 뒤쪽 텍스트가 좌우로 흔들려 보인다.

원인

텍스트가 바뀌면 해당 span의 width가 즉시 재계산되면서 오른쪽 텍스트가 밀리거나 당겨진다.

해결

모든 단어를 렌더링 전에 임시 span으로 측정하여 가장 긴 단어의 폭으로 컨테이너 width를 고정해서 해결하였다.

• visibility: hidden, position: absolute로 공간 차지 없이 임시 측정
• getBoundingClientRect()로 실제 폭 계산
• 가장 긴 폭으로 고정하면 흔들림이 사라진다

2. 오른쪽 정렬일 때 단어가 들쑥날쑥해 보이는 문제

문장이 아래와 같은 형태일 때 문제가 발생했는데, 동적 단어가 고정 문자 기준으로 왼쪽에 있는 경우에 짧으면 왼쪽에 붙고, 길면 중앙으로 오기 때문에 오른쪽 텍스트와의 간격이 계속 일정하지 않게 보였다.

[동적 단어] [오른쪽 prefix]

해결

동적 단어가 항상 동일한 기준점에서 렌더링 되도록 최장 단어 길이를 기준으로, 부족한 길이만큼 앞쪽에 투명한 패딩을 조건부로 삽입하는 방식을 사용했다.

3. 초기 렌더링 시 레이아웃이 깨져 보이는 문제

처음 로드되는 순간, width 계산이 되기 전의 상태가 잠깐 보이면서 문장이 어긋나 보였다.

원인

useEffect는 브라우저가 화면을 그린 뒤 실행되므로, “깨진 화면 → 계산 → 고정” 순서가 발생한다.

해결

width 계산과 초기 스타일 적용을 모두 useLayoutEffect로 변경했다. useLayoutEffect는 DOM 업데이트 후, 화면을 그리기 전에 동기적으로 실행되므로 깨지는 이슈가 해결되었다.

✨ React Bits의 Rotating Text

RotatingTextDemo 코드 살펴보기

RotatingText 코드 살펴보기

<LayoutGroup>
  <motion.p className="rotating-text-ptag" layout>
    <motion.span
      className="pt-0.5 sm:pt-1 md:pt-2"
      layout
      transition={{ type: 'spring', damping: 30, stiffness: 400 }}
    >
      Creative{' '}
    </motion.span>
    <RotatingText
      texts={words}
      mainClassName="rotating-text-main"
      staggerFrom={'last'}
      initial={{ y: '100%' }}
      animate={{ y: 0 }}
      exit={{ y: '-120%' }}
      staggerDuration={0.025}
      splitLevelClassName="rotating-text-split"
      transition={{ type: 'spring', damping: 30, stiffness: 400 }}
      rotationInterval={2000}
    />
  </motion.p>
</LayoutGroup>;

React Bits의 Rotating Text 코드를 실제로 살펴보니, 구조적으로 눈에 띄는 부분들이 몇 가지 있었다.

1. 컴포넌트 전체가 Framer Motion의 LayoutGroup으로 감싸져 있었다. 고정 텍스트와 동적 텍스트를 하나의 레이아웃 그룹 안에서 관리해, 컴포넌트 내부에서 발생하는 레이아웃 변화를 Motion이 일관되게 계산할 수 있도록 설계되어 있었다.

2. 정적 텍스트 역시 motion.* 컴포넌트로 감싸고 layout 속성을 적용하고 있었다. <motion.playout>이나 <motion.span layout>처럼 고정된 요소까지 레이아웃 애니메이션 대상에 포함시키는 방식이었다.

3. RotatingText 자체도 Motion 기반으로 구현되어 있었다. 단어의 등장/퇴장 애니메이션은 initial, animate, exit로 처리하고,
레이아웃 변화는 layout과 에서 자연스럽게 처리하는 구조였다.

정리하면, 내가 직접 폭 측정이나 baseline 정렬, 초기 깜빡임 방지 등을 수동으로 처리했던 부분들을 React Bits는 Framer Motion의 레이아웃 시스템에 위임하는 방식으로 해결하고 있었다.

✨ Framer Motion - FLIP 기법

Framer Motion 내부 동작을 더 살펴보면, 레이아웃 전환은 FLIP(First, Last, Invert, Play) 기법으로 처리되고 있다.
나는 이번에 처음 알게 된 기법이라 간단히 정리해보면, 레이아웃이 바뀌는 상황에서 튀는 느낌 없이 부드러운 애니메이션을 만드는 데 최적화된 방식이라고 한다. 핵심 아이디어는 다음과 같다.

• 실제 레이아웃은 바로 반영한다.
• 이후, transform으로 이전 위치에 있었던 것처럼 보이도록 보정한다.
• 마지막으로 그 transform 값을 0까지 애니메이션하며 자연스럽게 새 레이아웃에 안착시킨다.

1. F — First

요소가 변경되기 전의 위치와 크기를 측정한다. Motion 내부에서는 willUpdate() 시점에서 snapshot을 저장한다.
AnimatedText에서 생각한다면,

• “피자” 위치와 폭
• “햄버거”로 변경되기 직전 상태
  이 시점의 레이아웃이 First에 해당한다.

// packages/framer-motion/src/projection/node/create-projection-node.ts

willUpdate(shouldNotifyListeners = true) {
    // ... 생략 ...

    if (this.instance) {
        // 현재 위치와 크기를 측정하여 snapshot에 저장
        this.snapshot = this.measure()
    }

    this.updateSnapshot()
    shouldNotifyListeners && this.notifyListeners("willUpdate")
}

updateSnapshot() {
    if (this.snapshot || !this.instance) return

    // 현재 레이아웃 스냅샷 저장
    this.snapshot = this.measure()
}

2. L — Last

React 렌더링이 끝난 뒤, 변경된 이후의 위치와 크기를 다시 측정하는데, Motion에서는 updateLayout() 단계에서 측정한다.

• “햄버거”가 렌더링 된 이후의 폭
• 주변 텍스트가 밀려난 결과 레이아웃

// packages/framer-motion/src/projection/node/create-projection-node.ts

updateLayout() {
    if (!this.instance) return

    // ... 생략 ...

    const prevLayout = this.layout

    // 새로운 레이아웃 측정 (React 리렌더링 후)
    this.layout = this.measure(false)
    this.layoutCorrected = createBox()
    this.isLayoutDirty = false

    this.notifyListeners("measure", this.layout.layoutBox)
}

3. I — Invert

First와 Last 사이의 차이를 기반으로 delta를 계산하는데, 이 delta를 scale/translate transform으로 역적용해, 요소가 "옛날 위치에 있는 것처럼" 보이게 만든다. 즉 실제 DOM은 이미 변화된 상태지만, transform이 그 차이를 보정해 준다. 이 단계에서 레이아웃 점프가 사라진다. 내가 구현했던 AnimatedText에서는 직접 width를 계산해 고정해 줬지만, FLIP 방식은 이러한 계산 자체를 불필요하게 만든다.

// packages/framer-motion/src/projection/geometry/delta-calc.ts

export function calcAxisDelta(
    delta: AxisDelta,
    source: Axis,      // First (이전 상태)
    target: Axis,      // Last (새로운 상태)
    origin: number = 0.5
) {
    delta.origin = origin
    delta.originPoint = mixNumber(source.min, source.max, delta.origin)

    // 이전 크기를 새 크기로 만들기 위한 scale 계산
    delta.scale = calcLength(target) / calcLength(source)

    // 위치 이동 계산
    delta.translate =
        mixNumber(target.min, target.max, delta.origin) - delta.originPoint

    // 미세한 차이는 무시한다!
    if ((delta.scale >= 0.9999 && delta.scale <= 1.0001) || isNaN(delta.scale)) {
        delta.scale = 1.0
    }
}

export function calcBoxDelta(
    delta: Delta,
    source: Box,  // snapshot (First)
    target: Box,  // layout (Last)
    origin?: ResolvedValues
): void {
    calcAxisDelta(delta.x, source.x, target.x, origin?.originX)
    calcAxisDelta(delta.y, source.y, target.y, origin?.originY)
}

4. P — Play

마지막으로 delta을 scale/translate 0까지 애니메이션 하며 자연스럽게 새로운 레이아웃으로 이동한다.
아래는 간단한 예시다. scale이 변화하면서 어떻게 폭이 자연스럽게 보정되는지 확인할 수 있다.

// progress = 0.0 (시작)
scaleX = 0.5 * (1 - 0.0) + 1.0 * 0.0 = 0.5  // 40px처럼 보임

// progress = 0.5 (중간)
scaleX = 0.5 * (1 - 0.5) + 1.0 * 0.5 = 0.75 // 60px

// progress = 1.0 (완료)
scaleX = 0.5 * (1 - 1.0) + 1.0 * 1.0 = 1.0  // 80px (원래 크기)

transform 기반이기 때문에

• GPU 가속
• 리플로우 생략
• 60fps 유지
• 주변 레이아웃 영향 없음

이 모든 조건을 만족하며 자연스러운 레이아웃 애니메이션이 가능해졌던 것이었다.

//매 프레임 리플로우
element.style.width = '40px';  // Reflow
animate(() => {
  element.style.width = `${currentWidth}px`;  // 매 프레임 Reflow
});

// FLIP 방식 (단 1회 리플로우)
element.style.width = '80px';           // Reflow 1회
element.style.transform = 'scaleX(0.5)'; // Composite only
animate(() => {
  element.style.transform = `scaleX(${scale})`;  // Composite only
});

다만, FLIP 기법만으로는 Rotating Text를 완전히 구현하기 어렵다. FLIP은 기본적으로 “개별 요소가 자신의 레이아웃 변화에 맞춰 부드럽게 전환되도록” 만드는 기법이기 때문에, Rotating Text처럼 여러 요소가 동시에 위치가 변하고, 동적 단어의 길이 변화가 양쪽의 정적 텍스트까지 함께 이동시키는 구조에서는 요소 하나만 잘 움직인다고 해결되지 않는다. 이 경우에는 여러 요소의 레이아웃 변화를 하나의 단위로 묶어주는 상위 개념이 필요한데, React Bits의 RotatingText 내부 구현을 보면, 이를 위해 Framer Motion의 LayoutGroup으로 전체 문장을 감싸고 있다.

✨ Framer Motion - LayoutGroup

LayoutGroup의 역할을 한 문장으로 정리하면, 같은 그룹 안의 모든 motion 요소가 동일한 순간에 FLIP 사이클을 시작하도록 조율하는 것이다. 덕분에 Rotating Text처럼 여러 요소가 한 번에 움직이는 UI에서도 각각이 제각각 애니메이션을 시작하지 않고, 문장 전체가 하나의 단위처럼 자연스럽게 전환된다. 실제 내부 코드를 살펴보면 안의 모든 motion 요소를 Set으로 모아두고 어느 한 요소에서든 willUpdate가 발생하면, 그룹 전체에 dirtyAll()을 호출해 형제 요소 모두가 FLIP의 First 단계를 동시에 시작하도록 만든다.

// packages/framer-motion/src/projection/node/group.ts

export function nodeGroup(): NodeGroup {
  const nodes = new Set<IProjectionNode>()

  const dirtyAll = () => nodes.forEach(notify)
  
  
  // 어떤 노드에서든 willUpdate가 발생하면
  // 같은 그룹의 모든 노드에게 dirtyAll을 호출한다
  return {
    add: (node) => {
      nodes.add(node)
      node.addEventListener("willUpdate", dirtyAll)
    },
    remove: (node) => {
      nodes.delete(node)
      dirtyAll()
    },
    dirty: dirtyAll,
  }
}

const notify = (node: IProjectionNode) =>
  !node.isLayoutDirty && node.willUpdate(false)

 

느낀점

이번 오픈소스 분석을 통해, 여러 요소가 동시에 움직이는 UI에서는 개별 span에 애니메이션을 적용하기보다 LayoutGroup처럼 그룹 단위로 레이아웃을 묶어 처리하는 방식이 훨씬 자연스럽다는 점을 배웠다. 이번에 처음 알게 된 FLIP 기법도 흥미로웠다. Q&A에서 ‘오픈소스에서 배운 것을 어떻게 활용하느냐’는 질문이 나왔는데, 발표자분은 당장 쓰이지 않아도 언젠가는 ‘어, 그게 있었지’ 하고 떠올라 도움이 된다고 답했다. 나 역시 이번 배움이 그런 경험으로 남기를 기대한다.