09. 🚀 웹 성능 최적화와 Core Web Vitals

📌 이 면접 항목의 목표

⏱️ 예상 읽기 시간: 25분 (핵심 요약: 12분)

🗺️ 이 챕터의 흐름
[개념 사전] → [질문 1: Core Web Vitals (LCP/CLS)] → [질문 2: 코드 분할 & 번들 최적화] → [실전 변형 질문]

🎯 이 챕터를 다 읽으면 할 수 있는 것

• LCP, CLS 등 핵심 성능 지표의 의미와 구체적인 개선 방법을 제시합니다.
• Dynamic Import를 통해 초기 로딩 속도를 획기적으로 줄이는 전략을 세웁니다.
• 브라우저의 렌더링 파이프라인(CRP)과 연계된 성능 병목 지점을 진단합니다.

📚 핵심 개념 사전 (Concept Glossary)

1. LCP (Largest Contentful Paint)

페이지의 주요 콘텐츠(가장 큰 이미지나 텍스트 블록)가 화면에 나타나는 데 걸리는 시간입니다. 사용자에게 '페이지가 실제로 로딩되었다'고 느끼게 하는 결정적인 지표입니다.

2. CLS (Cumulative Layout Shift)

로딩 도중 예상치 않게 레이아웃이 움직이는 정도를 측정합니다. 버튼을 누르려는데 갑자기 이미지가 뜨면서 버튼이 아래로 밀리는 등의 불쾌한 경험을 수치화한 것입니다.

3. 코드 분할 (Code Splitting)

하나의 거대한 자바스크립트 번들을 여러 개의 작은 조각으로 나누는 기술입니다. 당장 필요하지 않은 코드는 나중에 로딩하여 초기 구동 속도를 높입니다.

🗺️ 이 문서의 배경 세계관: '영수네 커뮤니티'

• 🐣 영철 ( 신입 ): "영호 님! '영수네 메인 페이지' 라이트하우스(Lighthouse) 점수가 빨간색이에요! 😭 특히 이미지가 늦게 떠서 사용자들이 다 도망가는 것 같아요. 어떡하죠?"
• 🦁 영호 ( 리드 ): "영철 님, 점수 자체보다 중요한 건 '사용자의 체감'입니다. 이미지가 늦게 뜨는 건 소스가 무거워서일 수도 있지만, 브라우저가 이미지의 자리를 미리 몰라서 레이아웃이 출렁거리기 때문일 수도 있죠. 자, 지표부터 하나씩 뜯어봅시다."

Q1. Core Web Vitals 중 LCP와 CLS 지표를 개선하기 위한 구체적인 전략을 설명해 보세요.

🎯 출제 의도

현대적인 웹 성능 지표를 이해하고 있는지, 그리고 이를 단순히 아는 것을 넘어 실제 코드로 어떻게 개선할 수 있는지(예: 이미지 태그 속성, 폰트 로딩 등) 확인합니다.

🐣 영철이의 Naive 구현 (Bad Case)

영철이는 이미지 태그에 크기를 지정하지 않고, 모든 이미지를 한 번에 로딩하려 합니다.

<!-- 🐣 영철: "이미지가 알아서 크기에 맞춰 나오겠죠?" -->
<img src="/hero-banner.jpg" alt="메인 배너">
<!-- ⚠️ 문제: 
   1. 이미지 로딩 전 크기를 몰라 CLS 발생 (레이아웃 흔들림)
   2. 최적화되지 않은 큰 용량으로 인해 LCP 지연
-->

🦁 영호의 팩폭 조언
"영철 님, 브라우저는 예언자가 아니에요. 이미지 자리를 미리 잡아주지 않으면 그림이 그려질 때마다 전체 화면이 널뛰기를 합니다. 그리고 메인 이미지는 '가장 높은 우선순위'로 받아야죠."

🦁 영호의 아키텍처 가이드 (Good Case)

영호 리드가 제안하는 성능 최적화의 정석입니다.

<!-- 🦁 영호: "브라우저에게 힌트를 주세요. 자리를 잡고, 먼저 받아야 할 걸 알려줘야 합니다." -->
 
<!-- 1. CLS 방지: width, height를 명시하거나 aspect-ratio 사용 -->
<img 
  src="/hero-banner.webp" 
  width="1200" 
  height="600"
  style="aspect-ratio: 2 / 1; width: 100%; height: auto;"
  
  /* 2. LCP 개선: fetchpriority="high"로 브라우저에게 우선순위 전달 */
  fetchpriority="high"
  
  /* 3. 포맷 최적화: WebP/Avif 사용 */
  alt="메인 배너"
>

📊 레벨별 답변 가이드 (Self-Check)

• Level 1 (Junior): "LCP는 로딩 속도, CLS는 화면 흔들림입니다. 이미지를 작게 만들고 크기를 지정하면 좋아집니다."
• Level 2 (Senior): "LCP 개선을 위해 서버 응답 시간(TTFB) 단축, 불필요한 자바스크립트 실행 차단, 이미지 최적화(WebP, Lazy Loading) 전략을 제시합니다. CLS 방지를 위해 이미지와 광고 영역의 Aspect-ratio 확보, 폰트 로딩 최적화(font-display: swap) 등을 설명합니다."
• Level 3 (Specialist): "사용자 기기별 네트워크 환경에 따른 'Adaptive Loading' 전략을 설명합니다. 또한 브라우저의 전처리 지시자(preload, preconnect)를 전략적으로 배치하여 임계 경로(Critical Path)의 자원을 선점하는 고도화된 최적화 기법을 제안합니다."

Q2. 리액트 애플리케이션에서 코드 분할(Code Splitting)을 적용하는 방법과, 이를 통해 얻는 정량적인 이점은 무엇인가요?

🎯 출제 의도

불필요한 자원 낭비를 줄이려는 아키텍처적 노력을 확인합니다. 모든 코드를 한 번에 다운로드하는 '모놀리식 번들'의 위험성을 인지하고 있는지 평가합니다.

🐣 영철이의 Naive 구현 (Bad Case)

영철이는 모든 컴포넌트와 라이브러리를 최상단에서 정적으로 임포트합니다.

// 🐣 영철: "나중에 쓸 수도 있으니 미리 다 불러올게요!"
import HeavyChart from './components/HeavyChart'; // ⚠️ 5MB 짜리 차트 라이브러리
import AdminPanel from './components/AdminPanel'; // ⚠️ 일반 유저는 안 보는 관리자 페이지
 
function App() {
  return (
    <div>
      <MainContent />
      {/* ⚠️ 쓰지도 않는 차트와 관리자 페이지 코드가 초기 번들에 포함됨 */}
    </div>
  );
}

🦁 영호의 팩폭 조언
"영철 님, 집 이사할 때 모든 짐을 한 손에 들고 가려는 거랑 같아요. 1년에 한 번 쓰는 물건(관리자 페이지)은 창고에 두었다가 필요할 때만 꺼내 써야죠. 그게 바로 Dynamic Import입니다."

🦁 영호의 아키텍처 가이드 (Good Case)

영호 리드가 React.lazy와 Suspense를 활용한 번들 다이어트법을 보여줍니다.

// 🦁 영호: "사용자가 그 페이지에 도달할 때까지 코드를 다운로드하지 마세요."
 
import { lazy, Suspense } from 'react';
 
// ✅ 필요할 때만 불러오는 동적 임포트
const HeavyChart = lazy(() => import('./components/HeavyChart'));
const AdminPanel = lazy(() => import('./components/AdminPanel'));
 
function App() {
  return (
    <Suspense fallback={<Skeleton />}>
      <MainContent />
      {/* 이제 Chart와 Admin 코드는 실제 렌더링 시점에만 서버에서 가져옴 */}
      <HeavyChart />
    </Suspense>
  );
}

📊 레벨별 답변 가이드 (Self-Check)

• Level 1 (Junior): "React.lazy를 쓰면 컴포넌트를 나중에 불러올 수 있어서 초기 속도가 빨라집니다."
• Level 2 (Senior): "라우트 단위(Route-based) 및 컴포넌트 단위(Component-based) 분리 전략을 설명합니다. 이를 통해 TBT(Total Blocking Time)와 TTI(Time to Interactive) 지표를 개선할 수 있음을 정량적으로 언급합니다."
• Level 3 (Specialist): "번들 분석 도구(Webpack Bundle Analyzer 등)를 활용해 중복 라이브러리를 제거하고, 'Shared Chunk' 전략을 통해 공통 모듈의 캐싱 효율을 극대화하는 법을 설명합니다. 또한 리액트 서버 컴포넌트(RSC)를 활용해 아예 JS 코드 자체가 전송되지 않게 만드는 최상위 최적화 개념을 제시합니다."

🔗 실전 변형 질문 (Related Variations)

Q145. 브라우저의 렌더링 파이프라인(CRP) 최적화란 무엇인가요?

• 🎯 출제 의도: HTML/CSS가 화면에 그려지기까지의 전 과정을 이해하고 병목을 찾아낼 수 있는지 확인합니다.
• 💡 핵심 원리 & 답변: CRP 최적화는 DOM과 CSSOM 생성을 방해하는 요소(Critical Resources)를 줄이는 작업입니다. CSS는 <head> 상단에 배치하여 렌더링 차단을 방지하고, JS는 async나 defer 속성을 써서 파싱을 방해하지 않게 해야 합니다. 또한 미디어 쿼리를 사용해 필요한 기기에서만 특정 CSS를 로드하게 하거나, 인라인 스타일링을 통해 최초 화면(Above the fold)에 필요한 스타일을 빠르게 제공하는 기법이 포함됩니다.

Q152. 서비스 워커(Service Worker)를 활용한 성능 개선 사례를 들어보세요.

• 🎯 출제 의도: 네트워크 계층에서의 최적화와 오프라인 경험(PWA)에 대한 이해도를 확인합니다.
• 💡 핵심 원리 & 답변: 서비스 워커는 브라우저와 네트워크 사이의 프록시 역할을 합니다. 정적 자산(JS, CSS, Image)을 로컬에 '공격적으로 캐싱'하여 재방문 시 네트워크 호출 없이 즉시 화면을 띄울 수 있습니다. 또한 네트워크 불안정 시에도 오프라인 페이지를 보여주거나, 백그라운드에서 데이터를 페칭하여 최신 상태를 유지하는 'Background Sync'를 통해 사용자 체감 성능을 극대화할 수 있습니다.

Q160. 웹 폰트 로딩 성능을 최적화하는 방법은 무엇인가요?

• 🎯 출제 의도: 폰트 로딩 시 발생하는 텍스트 미표시(FOIT)나 갑작스러운 글꼴 변경(FOUT) 문제를 제어할 수 있는지 확인합니다.
• 💡 핵심 원리 & 답변: 첫째, preload를 통해 폰트 파일을 우선순위 있게 로드합니다. 둘째, font-display: swap; 속성을 사용하여 폰트 로딩 중에는 시스템 폰트를 먼저 보여줌으로써 LCP 지표를 방어합니다. 셋째, 폰트 파일의 서브셋(Subset)을 만들어 필요한 언어만 포함하거나 WOFF2와 같은 압축률 높은 포맷을 사용하여 용량을 줄이는 것이 핵심입니다.

🐣 영철이의 복기 일기

오늘 '1초의 미학'에 대해 배웠다. 1초만 늦어져도 사용자는 짜증을 내고 소중한 고객이 떠나간다는 사실이 무겁게 다가왔다. 라이브러리 점수 100점을 맞는 것보다, 사용자가 "와, 이 사이트 진짜 빠르다!"라고 느끼게 만드는 디테일(이미지 자리 잡기, 코드 쪼개기)이 진짜 시니어의 실력이라는 걸 깨달았다.

💡 "최고의 최적화는 불필요한 코드를 아예 실행하지 않는 것이다."

내일은 코드의 품질을 보증하는 방패, '테스트 & 품질 관리'를 배운다. 버그 없는 코드를 향한 영수네 커뮤니티의 도전을 지켜봐 줘! 🛡️🧪