[Study] CSS 경량화(Minify) 툴 사용법

 

 

핵심 요약

 

CSS 경량화 Minification(미니피케이션) 란?

코드에 있는 불필요한 띄어쓰기, 줄 바꿈, 주석을 싹 지워서 파일 용량을 확 줄이는 작업.

(마치 옷을 압축팩에 넣어 여행 가방 부피를 줄이는 것과 같다)

 

왜 해야 할까?

파일 용량이 작아지면 웹사이트 로딩 속도가 훨씬 빨라진다.

로딩이 빠르면 방문자도 좋아하고, 구글 검색(SEO)에서도 높은 점수를 받는다.

 

추천 툴: Toptal CSS Minifier

(설치 필요 없이 웹에서 클릭 한 번으로 끝나는 초간단 무료 사이트)

https://www.toptal.com/developers/cssminifier

---

 

 

상세 내용 및 사이트 소개

 

CSS 경량화를 해야하는 이유

코드를 짤 때는 사람이 읽기 편하게 엔터(줄 바꿈)도 치고, 띄어쓰기도 하고, 주석(메모)도 달아둔다

하지만 컴퓨터(웹 브라우저)는 엔터나 띄어쓰기가 없어도 코드를 완벽하게 읽을 수 있다

 

사람을 위해 남겨둔 이런 빈 공간과 메모들은 결국 전부 데이터 용량을 차지한다

이 불필요한 거품을 쫙 빼서 컴퓨터가 가장 빠르고 가볍게 다운로드할 수 있도록 압축해 주는 과정

 **'CSS 경량화(Minification)'**

 

 

Toptal CSS Minifier 사이트 소개

이러한 압축 과정을 일일이 백스페이스를 눌러가며 할 수는 없기 때문에 Toptal CSS Minifier 라는 사이트를 이용한다

 

장점

 회원가입이나 프로그램 설치가 전혀 필요 없다

 화면이 딱 직관적으로 반으로 나뉘어 있어서 처음 보는 사람도 1초 만에 사용법을 알 수 있다

 

---

 

3. 초간단 사용 방법 (3단계)

 

코드 복사하기

원본 CSS 코드를 전체 복사(Ctrl+C)

 

붙여넣고 버튼 누르기

  'Input CSS' 칸에 코드를 붙여넣고,  MINIFY 버튼을 클릭

 

압축된 코드 가져오기

  'Minified Output' 칸에 띄어쓰기가 싹 사라진  코드가 나온다

이 코드를 복사해서 내 프로젝트에 적용하면 끝

 

 

 

💡 실무 꿀팁 (이름 짓는 법)

이렇게 꽉꽉 압축된 CSS 파일은 원본 파일과 구분하기 위해 이름 뒤에 보통 **.min**을 붙여준다

원본 파일: style.css (사람이 읽고 수정하는 용도)

압축 파일: style.min.css (실제 웹사이트에 적용하는 용도)