CLS 0.5를 0으로 — TypeWriter 애니메이션의 함정과 해결

1CLS란 무엇인가

CLS(Cumulative Layout Shift)는 페이지 로딩 중 요소가 예상치 못하게 이동하는 정도를 측정하는 지표입니다. 뉴스 사이트에서 기사를 읽으려는데 갑자기 광고가 삽입되면서 텍스트가 밀려난 경험이 있을 겁니다. 그게 CLS입니다.

Lighthouse는 전체 Performance 점수의 25%를 CLS에 배정합니다. CLS가 0.481이면 이 25%에서 거의 만점 감점을 받는 것입니다. 이미지를 아무리 최적화해도 CLS가 높으면 점수가 오르지 않는 이유입니다.

2범인 찾기 — 타이핑 애니메이션

메인 페이지에는 글자가 한 자씩 타이핑되듯 나타나는 TypeWriter 컴포넌트가 있었습니다. Hero 영역의 제목, 서비스 섹션의 소제목, 프로세스 섹션의 제목, CTA 섹션의 제목 — 총 4곳에서 사용되고 있었습니다.

왜 CLS가 발생하나?

기존 TypeWriter 컴포넌트의 동작 방식은 이랬습니다:

// 상태: count가 0에서 시작하여 전체 글자 수까지 증가
const [count, setCount] = useState(0);

// 렌더링: count만큼의 글자만 표시
<span>{text.slice(0, count)}</span>

// "D" → "Di" → "Dig" → "Digi" → ...
// 글자가 추가될 때마다 높이/너비가 변함 → CLS!

한 글자가 추가될 때마다 텍스트의 너비가 변합니다. 줄바꿈이 발생하면 높이도 변합니다. 이 변화가 아래에 있는 모든 요소를 밀어냅니다. 4개 섹션에서 동시에 이런 일이 벌어지니 CLS가 0.481까지 올라간 겁니다.

3해결: Invisible Placeholder 패턴

아이디어는 단순합니다. 전체 텍스트를 처음부터 렌더링하되, 아직 타이핑되지 않은 부분을 보이지 않게 합니다.

수정된 코드

// 수정된 TypeWriter 컴포넌트 핵심 로직
function TypeWriter({ segments, speed = 45 }) {
  const [count, setCount] = useState(0);

  // 각 세그먼트를 순회하며 렌더링
  return segments.map((seg, i) => {
    const start = /* 이 세그먼트의 시작 인덱스 */;
    const visibleCount = Math.max(
      0, Math.min(seg.text.length, count - start)
    );

    return (
      <span key={i}>
        {/* 타이핑된 부분 — 보임 */}
        {seg.text.slice(0, visibleCount)}

        {/* 아직 안 타이핑된 부분 — 공간만 차지 */}
        {visibleCount < seg.text.length && (
          <span style={{ visibility: "hidden" }}>
            {seg.text.slice(visibleCount)}
          </span>
        )}
      </span>
    );
  });
}

사용자 눈에는 완전히 동일합니다. 글자가 한 자씩 나타나고, 커서가 깜빡이고, 스크롤 시 트리거되는 것도 똑같습니다. 하지만 브라우저 입장에서는 텍스트의 전체 크기가 처음부터 확정되어 있으므로 레이아웃 변화가 0입니다.

4두 번째 함정 — Suspense fallback

타이핑 애니메이션을 수정한 후 CLS가 0.481에서 0.095로 줄었습니다. 하지만 0.1 미만이 되어야 “Good” 등급입니다. 남은 0.095의 원인을 추적했습니다.

Header Suspense의 잘못된 fallback

레이아웃에 이런 코드가 있었습니다:

// layout.tsx
<Suspense fallback={<div className="h-20" />}>
  <Header />
</Suspense>

의도는 좋았습니다. Header가 로드되기 전에 80px 높이의 자리를 확보하려 한 것입니다. 그런데 문제가 있었습니다 — Header는 position: fixed입니다. fixed 요소는 document flow에 참여하지 않으므로, Header가 로드되어도 80px 공간은 필요하지 않습니다.

결과적으로 이런 일이 벌어졌습니다:

해결

// 수정: fixed 요소에는 fallback이 필요 없음
<Suspense fallback={null}>
  <Header />
</Suspense>

fallback을 null로 바꾸자 CLS가 0.095에서 0이 되었습니다.

5CLS에 안전한 애니메이션 vs 위험한 애니메이션

모든 애니메이션이 CLS를 유발하는 것은 아닙니다. 핵심은 레이아웃을 변경하느냐입니다.

6결과

수정한 것은 딱 두 가지입니다: TypeWriter 컴포넌트에 Invisible Placeholder 패턴 적용, Suspense fallback을 null로 변경. 디자인은 1픽셀도 바뀌지 않았습니다. 사용자가 보는 화면은 완전히 동일하지만, 브라우저가 측정하는 레이아웃 안정성은 완벽해졌습니다. 이후 LCP 등 추가 최적화를 계속하려면 LCP 최적화 글을 참고하세요.