CSS 유효성 검사기 사용법 총정리 - W3C 검사기부터 Stylelint까지 오류 잡는 방법

분명히 코드를 제대로 작성한 것 같은데 특정 브라우저에서만 레이아웃이 깨지는 경험, 웹사이트를 만들어 본 분이라면 한 번쯤 있으실 겁니다. 몇 시간 동안 원인을 찾다가 결국 세미콜론 하나가 빠져 있었다는 사실을 발견하면 허탈해집니다. 이런 시간 낭비를 크게 줄여주는 도구가 바로 CSS 유효성 검사기입니다. 무료로 쓸 수 있고, 사용법도 생각보다 간단합니다.

CSS 유효성 검사기가 필요한 이유

CSS는 오류가 있어도 브라우저가 에러 메시지를 띄우지 않습니다. 잘못된 속성이나 값을 만나면 해당 선언을 조용히 무시하고 다음 줄로 넘어갑니다. 그래서 오타 하나 때문에 스타일이 적용되지 않아도 개발자는 원인을 바로 알기 어렵습니다.

CSS 유효성 검사기는 작성한 코드를 CSS 표준 명세와 대조해서 문제가 되는 부분을 줄 번호와 함께 알려줍니다. 구체적으로 이런 상황에서 도움이 됩니다.

• 오타 찾기: colr, widht처럼 사람 눈으로 놓치기 쉬운 속성명 오타를 즉시 잡아냅니다
• 잘못된 값 확인: color 속성에 존재하지 않는 색상 키워드를 넣는 등 값 자체가 유효하지 않은 경우를 찾아줍니다
• 문법 오류 발견: 닫히지 않은 중괄호, 빠진 세미콜론 등 뒤에 오는 코드 전체를 무효화할 수 있는 구조적 문제를 확인합니다
• 유지보수 품질 관리: 여러 명이 함께 작업하는 프로젝트에서 코드 일관성을 지키는 기준이 됩니다

CSS 오류의 가장 무서운 점은 조용하다는 것입니다. 자바스크립트는 콘솔에 빨간 에러를 띄우지만, CSS는 아무 말 없이 해당 스타일만 버립니다. 검사기를 쓰는 습관이 디버깅 시간을 지켜줍니다.

W3C CSS 유효성 검사기 사용법

가장 널리 쓰이는 도구는 웹 표준을 관리하는 W3C가 직접 운영하는 W3C CSS 검증 서비스(jigsaw.w3.org/css-validator)입니다. 회원가입 없이 무료로 사용할 수 있고 한국어 인터페이스도 제공합니다.

세 가지 입력 방식

검사할 CSS를 넣는 방법은 세 가지입니다.

• URI 입력: 이미 공개된 웹페이지 주소를 넣으면 해당 페이지에 연결된 CSS를 가져와 검사합니다. 운영 중인 사이트를 점검할 때 가장 편합니다
• 파일 업로드: 로컬에 있는 CSS 파일을 직접 올려서 검사합니다
• 직접 입력: 텍스트 상자에 CSS 코드를 붙여넣어 검사합니다. 특정 코드 조각만 빠르게 확인할 때 유용합니다

검사 절차

사용법은 단순합니다. 원하는 입력 방식 탭을 선택하고, CSS를 넣은 뒤 검사 버튼을 누르면 됩니다. 결과 화면에는 오류와 경고가 줄 번호, 해당 선택자, 문제 설명과 함께 표시됩니다. 페이지가 몇 개 없는 작은 사이트, 예를 들어 D-Day 계산기 같은 단일 목적 사이트라면 전체 점검에 몇 분이면 충분합니다.

자주 나오는 오류와 경고 해석하기

검사 결과를 처음 보면 오류와 경고가 수십 개씩 나와서 당황할 수 있습니다. 하지만 모든 항목을 고쳐야 하는 것은 아닙니다. 오류(Error)와 경고(Warning)는 성격이 다릅니다.

오류는 대부분 고쳐야 합니다

속성명 오타, 유효하지 않은 값, 문법 오류는 실제로 스타일이 적용되지 않는 원인이므로 우선적으로 수정해야 합니다. 특히 닫히지 않은 중괄호는 그 뒤에 오는 규칙까지 연쇄적으로 무효화하므로 가장 먼저 확인하세요.

경고는 판단이 필요합니다

-webkit-, -moz- 같은 벤더 프리픽스는 표준 명세에 없는 확장 속성이라 경고로 표시되지만, 실제로는 브라우저 호환성을 위해 의도적으로 쓰는 경우가 많습니다. 이런 경고는 무시해도 사이트 동작에 문제가 없습니다. 아직 표준화 진행 중인 최신 속성이 경고로 잡히는 경우도 있으니, 경고는 하나씩 내용을 읽고 판단하면 됩니다.

반응형 레이아웃에서 자주 쓰는 aspect-ratio 속성처럼 비교적 최근에 표준이 된 속성을 다룰 때는, 16:9나 4:3 같은 비율을 실제 픽셀 크기로 환산할 일이 많습니다. 이때는 화면 비율 계산기를 함께 쓰면 값 계산 실수를 줄일 수 있습니다.

Stylelint로 검사 자동화하기

W3C 검사기는 훌륭하지만 코드를 수정할 때마다 사이트에 접속해서 붙여넣는 방식은 번거롭습니다. 코드를 저장하는 순간 자동으로 검사하고 싶다면 Stylelint가 답입니다.

Stylelint는 npm으로 설치하는 오픈소스 CSS 린터입니다. 100개가 넘는 내장 규칙으로 문법 오류뿐 아니라 중복 선언, 잘못된 코드 패턴까지 잡아냅니다. 설치는 터미널에서 npm install --save-dev stylelint stylelint-config-standard 명령으로 하고, 프로젝트 루트에 설정 파일을 만들어 stylelint-config-standard를 확장하면 표준 규칙 세트가 바로 적용됩니다.

VS Code의 Stylelint 확장 프로그램을 함께 설치하면 코드를 입력하는 동안 문제가 있는 줄에 실시간으로 밑줄이 표시됩니다. GitHub Actions 같은 CI 환경에 연결하면 오류가 있는 코드가 병합되는 것 자체를 막을 수도 있습니다.

검사 도구 비교와 선택 기준

상황별로 어떤 도구가 적합한지 정리하면 다음과 같습니다.

브라우저 개발자 도구도 함께 알아두면 좋습니다. 크롬에서 F12를 누르고 요소를 선택하면, 적용되지 않은 잘못된 속성에는 취소선과 경고 아이콘이 표시됩니다. 특정 요소 하나가 이상할 때 원인을 찾는 데는 이 방법이 가장 빠릅니다.

검사 후 해야 할 일

검사기를 한 번 돌리는 것으로 끝내면 효과가 오래가지 않습니다. 코드는 계속 수정되고, 오류는 다시 쌓이기 때문입니다.

지금 바로 할 수 있는 행동은 두 가지입니다. 첫째, 운영 중인 사이트 주소를 W3C CSS 유효성 검사기에 넣어보세요. 5분이면 현재 상태를 파악할 수 있고, 오류 목록이 곧 수정 우선순위가 됩니다. 둘째, 계속 관리할 프로젝트라면 Stylelint를 설치하고 에디터 확장과 연결하세요. 처음 설정에 30분 정도 들지만, 이후에는 오류가 코드를 작성하는 순간 잡히기 때문에 디버깅에 쓰는 시간이 눈에 띄게 줄어듭니다.

CSS 유효성 검사기는 결국 시간을 아끼는 도구입니다. 브라우저마다 화면이 다르게 보이는 원인을 추측으로 찾는 대신, 검사기가 알려주는 줄 번호부터 확인하는 습관을 만들어 보세요.