CSS 미화 작동 방식
미화기는 스타일시트를 한 문자씩 읽으며 각 블록의 중첩 깊이를 추적한 뒤 일관된 간격으로 다시 출력합니다. 스타일의 동작은 전혀 바뀌지 않으며, 오직 외형만 바뀝니다.
- 토큰화. 라이브러리는 입력을 선택자, 속성 이름, 값, at 규칙, 주석, 그리고 이들을 구분하는 중괄호, 콜론, 세미콜론 등의 토큰 스트림으로 스캔합니다. 문자열과 url() 값은 단일 단위로 인식되기 때문에 content 속성 안의 중괄호가 블록 구분자로 오인되지 않습니다.
- 중첩 추적. 토큰 스트림을 순회하면서 미화기는 실시간 들여쓰기 수준을 유지합니다. 여는 중괄호가 나타날 때마다 — 규칙 블록, 미디어 쿼리, 키프레임 블록 어디서든 — 수준이 깊어지고, 대응하는 닫는 중괄호가 나타날 때 수준이 되돌아옵니다. 이 깊이가 출력되는 각 줄 앞에 붙는 들여쓰기 단위 수를 결정합니다.
- 옵션 적용. 들여쓰기 선택(공백 2칸, 공백 4칸, 탭)이 한 수준의 너비를 결정합니다. 중괄호 스타일은 여는 중괄호가 앞 선택자와 같은 줄에 붙는지, 아니면 독립 줄에 내려가는지를 결정합니다. 나머지 토글은 규칙 블록 사이에 빈 줄을 추가하고, 그룹화된 선택자를 개별 줄로 분리합니다.
- 재출력. 마지막으로 포매터가 계산된 들여쓰기와 줄 바꿈으로 토큰을 출력합니다. 각 선언은 한 줄에 하나씩, 콜론 뒤에 공백 하나를 두어 출력됩니다. 결과는 동일한 스타일시트가 사람이 캐스케이드를 스캔할 수 있는 형태로 정리된 것입니다.
CSS를 미화하는 이유
- 압축 스타일시트 읽기. 프로덕션 CSS는 한 줄로 출시되며 규칙 사이에 간격이 없습니다. 미화하면 줄 바꿈과 들여쓰기가 복원되어, 소스맵 없이도 레이아웃 버그의 원인이 된 선택자를 찾고 정확한 선언 내용을 확인할 수 있습니다.
- 일관성 없는 파일 정리. 여러 사람이 손댄 스타일시트는 들여쓰기와 중괄호 스타일이 섞이기 마련입니다. 미화 한 번으로 파일 전체를 단일 레이아웃으로 정규화하면, 다음 diff에서 공백 잡음이 아닌 실제 캐스케이드 변경만 보이게 됩니다.
- 이 도구는 페이지에 부담을 주지 않습니다. 대부분의 온라인 포매터는 페이지를 열자마자 라이브러리 전체를 로드합니다. 이 도구는 미화 버튼을 클릭하거나 실시간 모드를 켤 때만 js-beautify를 지연 로드합니다. 그래서 페이지를 여는 비용이 수백 KB가 아닌 몇 KB에 불과하며 초기 렌더링이 빠르게 유지됩니다.
- 코드가 브라우저를 떠나지 않습니다. 미화기는 완전히 사용자의 기기에서 실행됩니다. CSS는 절대 서버에 업로드되지 않습니다. 검사하는 스타일시트가 클라이언트 소유이거나 내부 클래스 이름을 포함하거나 기밀 유지 계약의 대상일 때 특히 중요합니다.
주요 활용 사례
읽히도록 작성되지 않은 스타일시트를 읽어야 할 때마다 CSS 미화가 필요합니다.
- 프로덕션 디버깅: Network 탭에서 가져온 압축 스타일시트를 붙여넣고 예상 레이아웃을 덮어쓰는 규칙을 찾습니다.
- 코드 리뷰 준비: PR을 열기 전에 기여자의 들여쓰기가 불일치한 스타일시트를 재포맷해 리뷰어가 레이아웃 혼란이 아닌 캐스케이드 변경을 볼 수 있게 합니다.
- 학습 및 감사: 프레임워크나 컴포넌트 라이브러리의 스타일시트를 펼쳐 선택자, 미디어 쿼리, 커스텀 속성의 구조를 파악합니다.
실제 예시
압축된 한 줄 코드를 사용해보겠습니다: a{color:red;margin:0}b{padding:0}. 들여쓰기를 공백 2칸, 중괄호 스타일을 「같은 줄」로 설정하고 위에 붙여넣은 뒤 미화를 클릭하세요. 읽기 좋은 블록이 반환됩니다: a {가 독립 줄에, color: red;와 margin: 0; 선언이 각각 한 수준 더 들여써져, 닫는 중괄호가 선택자 아래 정렬되고, b 규칙이 그 아래 이어집니다. 중괄호 스타일을 「새 줄」로 바꾸면 모든 여는 중괄호가 독립 줄로 내려갑니다. 들여쓰기를 탭으로 바꾸면 각 수준이 공백 두 칸에서 탭 문자로 바뀝니다. 스타일은 동일하며 레이아웃만 바뀝니다.
FAQ
이것이 브라우저에서 실행되나요?
네. js-beautify 라이브러리는 처음으로 미화를 클릭하거나 실시간 모드를 활성화할 때 지연 로드된 뒤 캐시됩니다. CSS는 절대 페이지를 벗어나지 않으며, 서버 통신도 업로드도 없습니다.
미화와 압축 해제는 같은가요?
가독성 있는 서식(들여쓰기, 줄 바꿈, 간격)은 복원할 수 있지만, 압축 시 제거된 주석이나 파일에 존재하지 않았던 구조는 되돌릴 수 없습니다. 파일에 남아 있는 선언과 선택자만 재포맷합니다.
미화하면 스타일 렌더링이 바뀌나요?
아니요. 미화는 공백과 줄 바꿈만 추가하거나 제거하며, 캐스케이드는 그대로이고 페이지는 동일하게 렌더링됩니다. 속성 순서, 명시도, 값 모두 작성한 대로 유지됩니다.
중괄호 스타일 옵션은 무엇을 의미하나요?
「같은 줄」은 여는 중괄호를 앞 선택자와 같은 줄에 둡니다(a {) — 일반적인 CSS 관례입니다. 「새 줄」은 모든 여는 중괄호를 독립 줄에 둡니다. 빈 줄과 선택자 하나씩 한 줄 토글은 규칙 블록 사이의 간격과 h1, h2, h3 같은 그룹화된 선택자의 레이아웃 방식을 제어합니다.
브라우저 측 CSS 미화로 빌드 단계나 업로드 없이 읽기 쉬운 스타일시트를 얻을 수 있습니다. 압축되거나 지저분한 파일을 붙여넣고 들여쓰기와 중괄호 스타일을 선택한 다음 결과를 복사하거나 다운로드하세요. 코드는 기기를 떠나지 않고 계정도 필요 없으며 라이브러리는 요청할 때만 로드됩니다. 이 페이지를 여는 비용은 메가바이트가 아닌 몇 킬로바이트입니다.