CSS 개요 패널

크롬 DevTools에서 Cmd+Shift+P → "CSS 개요"를 통해 CSS 개요 패널을 엽니다. "개요 캡처"를 클릭하면 현재 페이지의 전체 스타일시트를 분석합니다. 이 패널은 색상, 글꼴, 미디어 쿼리와 사용되지 않는 선언을 요약합니다.

색상 섹션에는 페이지의 CSS에서 사용된 모든 색상 값이 유형별로 그룹화되어 표시됩니다. 여기에는 16진수, 빨강·초록·파랑 값, 이름이 지정된 색상, 그라데이션 색상점이 포함됩니다. 색상을 클릭하면 어떤 항목과 속성이 해당 색상을 사용하는지 표시되어 의도하지 않은 색상 변형과 팔레트의 불필요한 확장을 확인할 수 있습니다.

글꼴 섹션에는 페이지에 적용된 모든 글꼴 모음, 글꼴 크기, 글꼴 굵기의 조합이 표시됩니다. 글꼴 대체 목록을 확인하고, 일관되지 않은 글자 크기 체계를 찾아내며, 각 조합을 사용하는 항목을 확인할 수 있습니다.

미디어 쿼리 섹션에는 모든 @media 규칙과 중단점, 그 안에 포함된 선언의 수가 표시됩니다. 이 개요를 통해 중단점의 불일치를 확인할 수 있습니다. 한 코드베이스에 서로 조금씩 다른 중단점 값이 15개 이상 쌓이는 경우도 있습니다.

CSS 개요는 특이성 충돌이나 일치하지 않는 선택자로 인해 한 번도 적용되지 않는 선언을 표시합니다. 이는 커버리지와는 다릅니다. 사용자 상호작용으로 활성화하지 않아도 항상 덮어써지는 규칙을 찾아냅니다.

패널은 배경과의 대비 비율이 WCAG AA 또는 AAA 기준을 충족하지 못하는 텍스트 색상을 강조 표시합니다. 대비 기준을 충족하지 못한 항목을 클릭하면 DOM에서 해당 항목이 선택되므로 별도의 도구 없이도 접근성 문제를 쉽게 수정할 수 있습니다.

대규모 재설계 후 또는 기존 코드베이스에 새로 참여했을 때 CSS 개요를 사용하십시오. 색상 요약을 통해 구현이 디자인 토큰에서 얼마나 벗어났는지 확인할 수 있습니다. 글꼴 요약을 사용하면 사용자가 알아차리기 전에 타이포그래피의 불일치를 발견할 수 있습니다.

동일한 애플리케이션의 여러 페이지에서 CSS 개요를 실행하십시오. 색상과 글꼴 요약을 비교하면 페이지별 차이를 확인할 수 있습니다. 즉, 다른 페이지의 대응 항목과 다른 타이포그래피나 색상으로 렌더링되는 구성 요소를 찾을 수 있습니다.

CSS 개요에서 색상 데이터를 내보내 디자인 토큰 팔레트와 비교하십시오. 개요에는 있지만 토큰 팔레트에는 없는 색상은 하드코딩된 값이므로 토큰 참조로 변환하고 독립적인 값으로는 제거해야 합니다.

CSS 개요에서 중단점을 나열하고 중복되거나 거의 같은 값(서로 다른 개발자가 사용한 768px, 769px, 770px)을 식별하십시오. 그런 다음 디자인 시스템의 중단점 체계로 통합하고, 모든 미디어 쿼리가 CSS 사용자 지정 속성 또는 SCSS 변수를 사용하도록 수정하십시오.

CSS 개요는 연결된 스타일시트를 분석하지만 인라인 스타일이나 CSS와 JS를 결합한 런타임 스타일은 분석하지 않습니다. 초기 렌더링 후 JavaScript로 추가된 동적 클래스가 표시되지 않을 수도 있습니다. 동적 스타일을 빠짐없이 확인하려면 커버리지와 수동 검사를 함께 사용하십시오.

CSS 개요는 어떤 유형의 접근성 문제를 감지합니까?

CSS 개요는 페이지 수준에서 색상, 글꼴, 미디어 쿼리 중단점과 대비 문제를 검사합니다. 이를 사용하면 디자인의 변화, 팔레트의 불필요한 확장, 타이포그래피의 불일치와 접근성 실패가 쌓여 해결하기 어려운 기술 부채가 되기 전에 발견할 수 있습니다.