프론트엔드 개발 · 중급
웹 페이지 로딩 시 렌더링을 차단하는 CSS 리소스로 인해 발생하는 성능 문제를 해결하기 위한 Critical CSS 기법에 대해 설명하고, 이 기법을 적용했을 때의 장점과 단점은 무엇인지 이야기해 주세요.
힌트 · FCP 개선, 인라인 스타일, CSS 추출 도구 사용을 언급하고, 관리의 복잡성 등 단점도 함께 고려하세요.
렌더링 차단Critical PathAbove-the-fold인라인 스타일체감 성능
모범답안
웹 페이지 로딩 성능을 개선하기 위해 Critical CSS 기법을 사용합니다. 렌더링을 차단하는 CSS 리소스 때문에 발생하는 문제를 해결하는 방법인데요. 핵심은 초기 화면에 필요한 CSS, 즉 Above-the-fold 영역에 해당하는 스타일만 먼저 로딩하는 겁니다.
이 부분을 HTML에 인라인 스타일로 삽입해서 브라우저가 빠르게 화면을 그릴 수 있도록 합니다. 나머지 CSS는 나중에 로딩하도록 지연시키죠. 이렇게 하면 First Contentful Paint (FCP)를 개선해서 사용자 체감 속도를 높일 수 있습니다.
장점은 초기 로딩 속도가 빨라지고 사용자 경험이 향상된다는 점입니다. 반면에 단점은 Critical CSS를 추출하고 관리하는 과정이 복잡해질 수 있다는 겁니다. CSS가 변경될 때마다 Critical CSS를 업데이트해야 하고, 인라인 스타일이 많아지면 HTML 파일 크기가 커질 수도 있습니다. 하지만 성능 개선 효과가 크기 때문에 잘 활용하면 좋은 기법입니다.
읽었다면, 이제 직접 답해볼 차례예요
패스잇 앱에서 이 질문에 말로 답하면 AI가 꼬리질문까지 이어가며 1:1 코칭합니다.
함께 보는 웹 성능 최적화 면접 질문
- 웹 성능 최적화에서 HTTP 캐싱이 중요한 이유를 설명하고, `Cache-Control` 헤더의 주요 지시어(예: `max-age`, `no-cache`, `must-revalidate`)들이 각각 어떤 역할을 하는지 구체적인 시나리오와 함께 설명해 주세요.
- Service Worker를 활용한 캐싱 전략이 HTTP 캐싱과 어떻게 다른지 설명하고, Service Worker를 사용하여 웹 애플리케이션의 오프라인 지원 및 성능 향상을 어떻게 구현할 수 있는지 구체적인 캐싱 전략(예: Cache-First, Network-First)을 들어 설명해 주세요.
- 웹 브라우저의 렌더링 과정에서 발생하는 Reflow(Layout)와 Repaint(Paint)의 개념을 설명하고, 이들이 웹 성능에 미치는 영향과 Reflow/Repaint를 최소화하기 위한 개발 실천 방법들을 제시해 주세요.
- 대규모 웹 애플리케이션에서 Critical Rendering Path(CRP)를 최적화하기 위한 고급 전략에는 어떤 것들이 있으며, 각 전략이 렌더링 성능에 미치는 영향을 구체적인 예시와 함께 설명해주세요. 특히, CSSOM과 DOM 트리의 병합 및 렌더 트리 생성 과정에서 발생하는 병목 현상을 어떻게 식별하고 해결할 수 있을까요?
- 웹 페이지 로딩 성능을 극대화하기 위해 `fetchpriority`, `preload`, `preconnect`, `prefetch`와 같은 리소스 힌트(Resource Hints)를 어떻게 전략적으로 활용할 수 있을까요? 각 힌트의 동작 원리와 브라우저의 리소스 로딩 우선순위 결정 로직에 미치는 영향을 비교 설명하고, 실제 프로젝트에서 발생할 수 있는 오용 사례와 그로 인한 성능 저하 시나리오를 제시해주세요.
- 현대 웹 애플리케이션에서 초기 로딩 성능과 사용자 인터랙션 반응성을 동시에 최적화하기 위한 SSR, CSR, SSG의 장단점을 비교하고, 이들을 조합한 하이브리드 아키텍처(예: Next.js의 Incremental Static Regeneration, React Server Components)의 설계 원리와 성능 이점을 설명해주세요. 특정 서비스의 특성을 고려하여 가장 적합한 아키텍처를 선택하고 구현하는 기준은 무엇일까요?