라이트하우스 측정 결과

ForexBar.tsx컴포넌트의 CLS가 0.21로 개선이 필요한 상황

기존 코드 (BAD)

  return (
    <section aria-label="forex-bar">
      <div className="border-b border-primary p-1">
        <div className="flex gap-4 font-exo max-w-7xl mx-auto">
          {Object.entries(forexRates).map(([key, value]) => (
            <div key={key} className="flex items-center gap-1">
              <Image
                className="size-4 ml-2"
                src={CURRENCY_ICONS[key as CurrencyKey]}
                alt={key}
                width={16}
                height={16}
              />
              <span>{value}</span>
            </div>
          ))}
        </div>
      </div>
    </section>

문제점

렌더링될 때 이미지와 value에 대한 레이아웃이 잡혀 있지 않았기 때문에 CLS에 문제가 생긴 것
또한 value는 텍스트 이기 때문에 길이에 대한 shift가 발생

개선 코드(GOOD)

<div className="border-b border-primary">
        <ul className="flex justify-center items-center gap-2 sm:gap-4 lg:gap-6 px-2 py-1.5 font-exo max-w-7xl mx-auto">
          {isLoading ? (
            <ForexCardSkeleton />
          ) : (
            Object.entries(forexRates).map(([key, value]) => (
              <li
                key={key}
                className="flex items-center gap-1.5 min-w-[60px] sm:min-w-[80px] px-2 py-1 rounded-lg"
              >
                <div className="w-3 h-3 sm:w-4 sm:h-4 flex-shrink-0">
                  <Image
                    className="w-full h-full object-contain"
                    src={CURRENCY_ICONS[key as CurrencyKey]}
                    alt={key}
                    width={16}
                    height={16}
                    priority={true}
                  />
                </div>
                <span className="text-xs sm:text-base font-medium text-gray-100 min-w-[30px] sm:min-w-[40px] text-right tabular-nums">
                  {value || "—"}
                </span>
              </li>
            ))
          )}
        </ul>
      </div>

1. 가장 핵심적인 개선 포인트는 각 value가 들어갈 영역에 min-w를 지정하여 레이아웃이 미리 고정되도록 한 점
2. 로딩 중에도 동일한 레이아웃을 유지하기 위해 skeleton UI를 도입함으로써 LCP 개선에도 긍정적인 영향을 주었다

내 생각

CLS를 개선하려면 데이터가 아직 렌더링되지 않은 상태에서도 UI 구조를 미리 확보해주는 것이 가장 중요
요소가 언제 등장하든 그 자리를 미리 만들어두는 것이 레이아웃 안정성의 핵심