2nd/10_Wiki/Topics/웹 성능 가이드(Web Performance).md

웹 성능 가이드(Web Performance)

📌 Brief Summary

웹 성능(Web Performance)은 웹 애플리케이션이 로드되고 렌더링되며 사용자의 상호작용에 즉각적으로 응답하는 속도를 최적화하는 포괄적인 과정을 의미합니다 [1-3]. 이는 브라우저의 중요 렌더링 경로(CRP)를 최소화하고, 리플로우(Reflow)와 리페인트(Repaint) 같은 브라우저의 값비싼 연산을 줄여 메인 스레드(Main Thread)의 과부하를 방지하는 것을 포함합니다 [4-7]. 더 나아가 프로젝트의 요구 사항에 맞춰 CSR, SSR, SSG 등의 렌더링 전략을 선택하고 하이드레이션(Hydration)을 최적화하여, 실제 로드 시간과 사용자의 체감 성능(Perceived Performance)을 모두 향상시키는 것이 핵심 목적입니다 [8-10].

📖 Core Content

• 중요 렌더링 경로(Critical Rendering Path, CRP) 이해와 최적화 브라우저는 네트워크를 통해 HTML과 CSS를 파싱하여 각각 DOM(문서 객체 모델) 및 CSSOM 트리를 생성하고, 이를 결합해 화면에 표시될 렌더 트리(Render Tree)를 구축합니다 [11-14]. 이후 요소의 크기와 위치를 계산하는 레이아웃(Layout)과 실제 화면에 픽셀을 그리는 페인트(Paint) 과정을 거칩니다 [15-20]. 이 경로를 단축하기 위해 초기 렌더링을 차단하는 렌더링 차단 리소스(Render-Blocking resources, 예: CSS 및 동기식 JavaScript)를 최소화하고, 비핵심 리소스의 지연 로딩(Lazy Loading)을 적용해야 합니다 [4, 21-25].

• 브라우저 리플로우(Reflow) 및 리페인트(Repaint) 최소화 리플로우(또는 레이아웃)는 브라우저 창 크기 조절, DOM 요소 추가, 혹은 요소의 크기 및 위치(width, margin 등) 변경 시 페이지 전체 또는 일부의 레이아웃을 다시 계산하는 과정으로, 컴퓨팅 자원을 많이 소모해 성능 저하(Jank)를 유발합니다 [7, 26-31]. 반면 리페인트는 색상이나 그림자 등 시각적 스타일만 변경될 때 발생하며 리플로우보다는 가볍지만, 과도하게 발생할 경우 여전히 성능을 저하시킵니다 [31-33]. 이를 방지하려면 DOM 조작을 일괄 처리하고, 복잡한 렌더링 변경(애니메이션 등) 시 문서 흐름에서 벗어난 요소(position: absolute 등)를 사용하거나 GPU 가속을 활용하는 transform 속성을 사용해야 합니다 [32, 34-38].

• 웹 렌더링 전략 비교 (CSR, SSR, SSG, ISR)

  • CSR (Client-Side Rendering): 클라이언트가 빈 HTML과 자바스크립트를 다운로드하여 브라우저에서 동적으로 UI를 렌더링합니다. 초기 로딩(FCP)은 느릴 수 있으나 로드 후 페이지 간 전환과 상호작용이 매우 매끄럽습니다 [39-48].
  • SSR (Server-Side Rendering): 서버에서 HTML을 완전히 렌더링하여 클라이언트에 제공하므로 초기 콘텐츠가 즉시 표시되며 SEO에 유리합니다 [49-55].
  • SSG (Static Site Generation) & ISR (Incremental Static Regeneration): 빌드 시점에 정적 HTML을 생성하여 CDN을 통해 서비스하는 SSG는 속도가 가장 빠르며 [56-62], ISR은 백그라운드에서 주기적으로 정적 페이지를 재생성하여 데이터의 최신화와 속도를 동시에 만족시킵니다 [57, 63-67].

• React 아키텍처 및 렌더링 성능 최적화 기술

  • 자동 일괄 처리(Automatic Batching): React 18부터 도입된 기능으로, 비동기 작업(Promise, setTimeout 등) 내에서 발생하는 여러 상태 업데이트를 하나로 묶어 리렌더링 횟수를 대폭 줄여줍니다 [68-72].
  • 동시성 렌더링(Concurrent Rendering): useTransition 및 [[useDeferredValue|useDeferredValue]]를 사용하여 긴급하지 않은 UI 업데이트를 지연시키고, 타이핑이나 클릭 같은 긴급한 상호작용을 우선 처리하여 INP(Interaction to Next Paint) 성능을 크게 개선합니다 [73-77].
  • React 컴파일러 (React Compiler): React 19 컴파일러는 빌드 시점에 코드를 분석(AST)하여 반응형 값과 정적 값을 구별하고, 필요한 위치에 메모이제이션을 자동으로 삽입합니다. 이로 인해 개발자가 수동으로 useMemo, useCallback, React.memo를 작성하는 수고와 잦은 실수(오버/언더 메모이제이션)를 없애줍니다 [78-86].

🔗 Knowledge Connections

• Related Topics: 중요 렌더링 경로(Critical Rendering Path), 리플로우 및 리페인트(Reflow and Repaint), 웹 렌더링 전략(CSR, SSR, SSG, ISR), 하이드레이션(Hydration), 코어 웹 바이탈(Core Web Vitals), React 컴파일러(React Compiler)
• Projects/Contexts: 프론트엔드 아키텍처 설계 및 최적화, 단일 페이지 애플리케이션(SPA) 성능 프로파일링
• Contradictions/Notes: SSR 방식은 HTML을 서버에서 미리 그려 사용자에게 가장 먼저 콘텐츠를 보여주기 때문에 초기 화면 표시(FCP, LCP)나 SEO 측면에서는 훌륭합니다 [49, 50, 54, 55]. 그러나 이 과정에서 생성된 화면은 자바스크립트가 다운로드되고 DOM 요소에 이벤트 핸들러가 결합되는 '하이드레이션(Hydration)' 과정이 완료되기 전까지는 상호작용이 불가능합니다. 따라서 화면은 보이지만 버튼을 눌러도 반응하지 않는 상호작용 지연 현상(Time to Interactive 및 Total Blocking Time 증가)을 유발할 수 있다는 명확한 Trade-off가 존재합니다 [87-93]. 또한 성능 최적화를 위한 React.memo 등의 메모이제이션 기법 역시, 측정 없이 남용될 경우 불필요한 속성 비교 연산과 메모리 할당이 추가되어 렌더링이 빠른 가벼운 컴포넌트에서는 오히려 성능 오버헤드를 발생시킬 수 있으므로 주의해야 합니다 [82, 94].

---

Last updated: 2026-04-25