·1분 읽기
CSS 코드 정리 워크플로우 — 압축, 포맷팅, 배포까지 3단계
CSS 파일이 지저분해서 유지보수가 힘드셨죠? 압축부터 포맷팅까지 깔끔하게 정리하는 워크플로우를 알려드릴게요.
⚡
CSS/JS 압축기 바로 사용하기
CSS, JavaScript 코드를 압축하세요
→
CSS 파일, 왜 정리해야 할까?
프로젝트 하다 보면 CSS 파일이 점점 커지거든요. 처음엔 깔끔했는데 기능 추가하고 수정하다 보면 1,000줄이 넘어가요.
그러면 어떤 문제가 생기냐면요:
- 같은 스타일이 여기저기 중복돼요
- 안 쓰는 클래스가 쌓여요
- 파일 크기가 커져서 페이지 로딩이 느려져요
저도 예전에 CSS 파일 하나가 200KB 넘어간 적이 있었어요. 정리하고 압축했더니 60KB로 줄었더라고요.
1단계: 포맷팅으로 읽기 좋게 만들기
먼저 코드를 읽기 좋게 정리하세요. 들여쓰기가 뒤죽박죽이면 수정할 때 실수하기 쉽거든요.
좋은 포맷팅 규칙:
- 속성 하나당 한 줄
- 중괄호 앞에 스페이스
- 관련 속성끼리 그룹핑 (레이아웃 → 박스 모델 → 타이포그래피 → 비주얼)
Toolkio CSS 압축기에 코드를 붙여넣으면 정리된 결과를 바로 볼 수 있어요.
2단계: 중복 제거하고 최적화하기
포맷팅 했으면 이제 중복을 잡을 차례예요.
체크리스트:
- 같은 선택자가 여러 번 나오면 하나로 합치세요
- 공통 스타일은 클래스로 분리하세요
- !important가 3개 이상이면 구조를 다시 생각해보세요
- 미디어 쿼리를 한곳에 모으세요
이 과정만 해도 파일 크기가 20~30% 줄어들더라고요.
3단계: 배포용으로 압축하기
개발할 때는 읽기 좋은 코드가 좋지만, 배포할 때는 압축해야 해요.
CSS 압축이 하는 일:
- 공백, 줄바꿈 제거
- 주석 삭제
- 색상 코드 단축 (#ffffff → #fff)
- 불필요한 세미콜론 제거
Toolkio CSS 압축기에 붙여넣고 압축 버튼 누르면 끝이에요. 보통 30~50% 용량이 줄어요.
지금 프로젝트의 CSS 파일을 한번 넣어보세요. 얼마나 줄어드는지 바로 확인돼요.