정보처리기사 기출 핵심 ㊲ 웹 성능 최적화와 핵심 웹 바이탈 완전 정복

웹 성능 최적화의 중요성

웹 성능은 사용자 경험과 SEO에 직접 영향을 미칩니다. 정보처리기사 시험에서는 핵심 웹 바이탈(Core Web Vitals), 렌더링 전략(SSR/CSR/ISR), 코드 스플리팅, 이미지 최적화가 핵심 출제 범위입니다.

핵심 웹 바이탈(Core Web Vitals)

Google이 정의한 사용자 경험의 핵심 지표입니다.

• LCP(Largest Contentful Paint): 가장 큰 컨텐츠 요소가 렌더링되는 시간. 2.5초 이하 권장. 로딩 성능 지표
• FID(First Input Delay) → INP(Interaction to Next Paint): 사용자 첫 상호작용부터 브라우저 응답까지 지연. 200ms 이하 권장. 반응성 지표
• CLS(Cumulative Layout Shift): 예상치 못한 레이아웃 이동 누적 점수. 0.1 이하 권장. 시각적 안정성 지표

렌더링 전략

• CSR(Client-Side Rendering): 브라우저에서 JavaScript로 렌더링. 초기 로딩 느림, SEO 불리. React/Vue SPA
• SSR(Server-Side Rendering): 서버에서 HTML 생성 후 전송. 초기 로딩 빠름, SEO 유리. Next.js getServerSideProps
• SSG(Static Site Generation): 빌드 시 HTML 생성. 가장 빠른 응답. 정적 콘텐츠에 적합. Next.js getStaticProps
• ISR(Incremental Static Regeneration): SSG + 주기적 재생성. 정적 성능 + 동적 콘텐츠. revalidate 설정

번들 최적화

• 코드 스플리팅(Code Splitting): 번들을 여러 청크로 분리. 필요할 때만 로드. React.lazy(), dynamic import
• Tree Shaking: 사용되지 않는 코드(Dead Code) 번들에서 제거. ES Modules 정적 구조 활용. webpack, Rollup
• Minification: 공백, 주석 제거, 변수명 축소. Terser(JS), cssnano(CSS)

이미지 최적화

• 차세대 포맷: WebP(PNG 대비 26% 작음), AVIF(WebP보다 50% 작음). 브라우저 지원 확인 필요
• Lazy Loading: 뷰포트에 진입할 때 이미지 로드. loading=”lazy” 속성
• Responsive Images: srcset, sizes 속성으로 화면 크기별 적합한 이미지 제공
• CDN: 지리적으로 가까운 서버에서 정적 자원 제공. 레이턴시 감소

정보처리기사 기출 핵심 정리

• LCP = 가장 큰 요소 렌더링(2.5초 이하), CLS = 레이아웃 이동(0.1 이하)
• SSR = 서버 렌더링(SEO 유리), CSR = 클라이언트 렌더링(SPA)
• ISR = SSG + 주기적 재생성(revalidate)
• Tree Shaking = 사용하지 않는 코드 제거
• 코드 스플리팅 = 청크 분리, 필요 시 로드

핵심 웹 바이탈을 개선하는 실무 방법

핵심 웹 바이탈(Core Web Vitals)은 구글이 사용자 경험의 핵심으로 제시한 지표입니다. LCP(주요 콘텐츠 표시 속도), INP(상호작용 반응성), CLS(레이아웃 이동)로 구성되며, INP는 2024년에 FID를 대체했습니다. 일반적인 “좋음” 기준은 LCP 2.5초 이하, INP 200ms 이하, CLS 0.1 이하입니다.

측정은 실험실 도구(Lighthouse)와 실제 사용자 데이터(CrUX, 검색 콘솔의 핵심 웹 바이탈 보고서)를 함께 봅니다. 실제 사용자 지표가 순위 신호에 반영되므로 현장 데이터가 중요합니다.

• LCP 개선: 대표 이미지 최적화(WebP/AVIF, 적절한 크기), 서버 응답 시간 단축, 렌더링 차단 CSS·JS 줄이기, 핵심 리소스 preload.
• INP 개선: 긴 자바스크립트 작업 분할, 서드파티 스크립트 지연 로드, 불필요한 이벤트 핸들러 정리.
• CLS 개선: 이미지·광고 영역에 크기를 미리 지정, 폰트 교체로 인한 이동 방지.
• 캐시·CDN: 정적 자원 캐시와 CDN 활용.
• 측정 주기: 배포마다 성능 예산을 점검해 회귀를 막습니다.

※ 이 글은 학습·참고용 정리입니다. 제품 사양과 표준 개정 사항은 공식 문서에서 최신 내용을 확인하세요.