백고등어 개발 블로그
CSS 성능 최적화 질문과 답변 본문
CSS 성능 최적화는 종종 간과되는 영역이지만, 실제로는 웹사이트 성능에 큰 영향을 미치는 중요한 부분이에요.
특히 대규모 웹사이트에서는 CSS 최적화 여부에 따라 사용자 경험이 크게 달라질 수 있어요.
CSS 로딩 최적화
1. CSS는 어떻게 로드하는 것이 좋나요? CSS는 렌더링 차단 리소스이기 때문에 가능한 한 빠르게 로드되어야 해요. <head> 섹션에 위치시키고, 중요한 CSS는 인라인으로 넣거나 preload로 우선 로드하는 것이 좋아요. 마치 요리하기 전에 필요한 재료를 미리 준비해놓는 것과 같아요.
2. Critical CSS가 무엇인가요? 사용자가 처음 보는 화면(Above the fold)을 렌더링하는 데 필요한 CSS만 추출한 것이에요. 이 부분만 인라인으로 포함시키고 나머지는 나중에 로드하면 초기 렌더링 속도가 빨라져요.
3. CSS 번들 크기를 줄이는 방법은? 사용하지 않는 CSS 제거(PurgeCSS), CSS 압축(minify), gzip 압축을 활용할 수 있어요. CSS-in-JS를 사용한다면 코드 스플리팅으로 필요한 스타일만 로드하는 것도 좋은 방법이에요.
선택자 최적화
4. CSS 선택자 성능에 차이가 있나요? 있어요. ID 선택자가 가장 빠르고, 클래스 선택자, 태그 선택자, 속성 선택자 순으로 느려져요. 복잡한 선택자(후손 선택자, 형제 선택자)는 브라우저가 더 많은 계산을 해야 해서 느려요.
5. CSS 선택자를 최적화하는 방법은? 가능한 한 간단하고 구체적인 선택자를 사용하세요. 깊이 중첩된 선택자보다는 클래스를 직접 지정하는 것이 좋아요. 전체 선택자(*)는 피하고, 정규식 속성 선택자도 성능에 영향을 줄 수 있어요.
6. BEM 방법론이 성능에 도움이 되나요? 네, 도움이 돼요. 클래스명이 구체적이어서 브라우저가 요소를 빨리 찾을 수 있고, 선택자 우선순위 계산도 단순해져요. 코드 유지보수도 쉬워지는 추가 이점이 있어요.
렌더링 성능
7. CSS 애니메이션을 최적화하는 방법은? transform과 opacity 속성만 사용하는 것이 가장 좋아요. 이 속성들은 컴포지트 레이어에서 처리되어서 리플로우나 리페인트를 발생시키지 않아요. will-change 속성으로 미리 GPU 가속을 준비할 수도 있어요.
8. 레이아웃 스타일과 페인트 스타일을 구분할 수 있나요? 레이아웃 스타일은 width, height, margin, padding 같이 요소의 크기나 위치에 영향을 주는 속성이에요. 페인트 스타일은 color, background, box-shadow 같이 시각적 표현만 변경하는 속성이죠. 레이아웃 스타일 변경이 더 비용이 커요.
9. CSS Grid와 Flexbox의 성능 차이는? 둘 다 성능이 좋지만, 적절한 용도에 맞게 사용하는 것이 중요해요. 1차원 레이아웃에는 Flexbox, 2차원 레이아웃에는 Grid가 더 효율적이에요. 복잡한 레이아웃을 float나 position으로 구현하는 것보다 훨씬 성능이 좋아요.
실무 최적화 기법
10. CSS 변수(Custom Properties) 사용이 성능에 영향을 주나요? 런타임에 계산되기 때문에 약간의 오버헤드가 있지만, 대부분의 경우 무시할 수 있는 수준이에요. 테마 시스템이나 반응형 디자인에서 얻는 이점이 더 커요.
11. CSS 캐싱 전략은? 파일명에 해시를 포함시켜서 변경될 때만 새로 다운로드되도록 하고, 긴 캐시 만료 시간을 설정하세요. CDN을 활용하면 지리적으로 가까운 서버에서 파일을 제공받을 수 있어요.
12. 다크모드 구현 시 성능 고려사항은? CSS 변수를 활용하면 JavaScript 없이도 효율적으로 구현할 수 있어요. prefers-color-scheme 미디어 쿼리를 사용하면 시스템 설정에 따라 자동으로 적용되고, 불필요한 스타일 재계산을 줄일 수 있어요.
CSS 성능 최적화는 눈에 바로 보이지 않지만 사용자 경험을 크게 좌우하는 요소예요. 실제 프로젝트에서 적용해본 최적화 기법이나 성능 개선 결과를 구체적인 수치와 함께 이야기할 수 있다면 면접에서 좋은 인상을 줄 수 있을 거예요.
'면접' 카테고리의 다른 글
| 프론트엔드 테스트 관련 질문 정리 (0) | 2025.09.17 |
|---|---|
| 자바스크립트 비동기 처리 면접 질문 (0) | 2025.09.17 |
| 브라우저 렌더링 원리 관련 면접 질문 (0) | 2025.09.17 |
| Next.js 면접에서 자주 나오는 질문 (1) | 2025.09.17 |
| React 면접 질문 & 모범 답변 (0) | 2025.09.17 |
