CSS 분석은 스타일의 양과 사용 현황, 선택자의 명시도 등을 살펴봅니다. 보고서의 ‘미사용’은 검사한 페이지 상태에서 규칙이 사용되지 않았다는 뜻입니다. 메뉴를 열거나 화면 너비가 달라졌을 때 필요한 규칙까지 바로 삭제하지 마세요.
검사할 페이지와 동작을 정하기
공통 헤더, 상품 목록, 입력 폼 등 서로 다른 인터페이스 요소가 있는 페이지를 선택합니다. 최초 화면뿐 아니라 메뉴 열기, 입력 오류 표시, 탭 전환도 검사에 포함합니다. 수정 전후에는 화면 너비와 동작을 동일하게 유지합니다.
Milten CSS Scanner로 공개 페이지를 분석하고 해당 스타일시트와 발견된 문제를 기록합니다. 자동 분석이 다루지 않는 상태는 수동 검사 항목에 추가합니다.
미사용 비율만으로 삭제를 결정하지 않기
설명을 위한 예로, 페이지를 불러올 때 닫혀 있는 메뉴를 생각해 보세요. 처음에는 메뉴의 스타일이 사용되지 않더라도 메뉴를 열면 필요할 수 있습니다. 실제로 메뉴를 조작한 뒤 규칙이 불필요한지 판단합니다.
Chrome DevTools Coverage 문서는 페이지와 상호작용하는 동안 CSS와 JavaScript 사용 현황을 기록하는 방법을 설명합니다. 한 번의 기록에서 사용되지 않았다는 사실과 사이트 전체에서 불필요하다는 판단을 구분해야 합니다.
삭제 후보마다 해당 CSS를 생성하는 소스 파일이나 빌드 단계를 찾습니다. 압축된 결과 파일을 직접 편집하기보다 소스를 수정하고 다시 빌드한 뒤 결과를 확인하는 편이 변경 사항을 관리하기 쉽습니다.
중복 선언과 선택자 명시도 확인하기
같은 선언이 반복되더라도 적용 조건은 다를 수 있습니다. 미디어 쿼리, 요소 상태와 캐스케이드 순서를 확인합니다. 규칙을 통합한 뒤에도 같은 요소에 의도한 스타일이 적용되는지 검사합니다.
또 다른 예는 버튼 색상을 바꾸려고 !important를 계속 추가하는 경우입니다. 먼저 충돌하는 규칙과 명시도를 확인합니다. MDN 명시도 안내를 참고해 의도한 우선순위를 소스 코드에 반영합니다.
배포 후 화면과 동작 확인하기
변경 후 대상 URL을 다시 분석합니다. 파일 크기뿐 아니라 버튼, 폼과 펼침 메뉴의 동작도 확인합니다. 모바일 기기와 큰 화면에서 줄 바꿈과 포커스 표시가 올바른지도 검사합니다.
색상과 간격의 공통값을 살펴보려면 Design Tokens를 사용하세요. 화면 문제가 마크업과 관련되어 있다면 HTML 검사 안내를 참고할 수 있습니다.
미사용 CSS를 줄이면 페이지가 반드시 빨라지나요?
로딩 순서, 리소스 전송과 JavaScript도 속도에 영향을 줍니다. 같은 조건에서 Speed Scanner 결과를 비교해 실제로 무엇이 달라졌는지 확인합니다.
자동 분석만으로 충분한가요?
관련된 사용자 동작과 다양한 화면 너비도 검사해야 합니다. 자동 분석의 범위와 수동으로 확인한 상태를 구분해 기록하세요.
공개 페이지의 CSS를 분석해 보세요. 수정하기 전에 검사 조건과 발견된 문제를 저장해 두세요.
