웹 성능 최적화의 중요성
웹 성능은 사용자 경험과 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 = 사용하지 않는 코드 제거
- 코드 스플리팅 = 청크 분리, 필요 시 로드