담당하고 있던 웹페이지의 version2를 진행하게되어 CSS를 선택해야하는 상황이 왔습니다.
선택을 하기 위해 조사해보던 중 CSS 방식에 따라 렌더링 성능에도 큰 영향을 줄 수 있다는 것을 알게 되었습니다. 대표적인 CSS 방식인 CSS-in-JS vs CSS Module에 대해 비교해보며 어떤 영향을 주고 있는지 설명하겠습니다.
1. CSS-in-JS: 컴포넌트 단위 스타일링의 편리함
CSS-in-JS는 컴포넌트 안에서 직접 스타일을 정의하는 방식으로, React와 같은 프레임워크에서 특히 많이 사용됩니다. 대표적인 라이브러리로는 styled-components와 Emotion이 있습니다.
이 방식은 개발자가 CSS와 JavaScript 코드를 한 곳에서 관리할 수 있어, 컴포넌트 단위로 스타일을 격리하고 재사용하기에 매우 편리합니다.
import styled from 'styled-components'
const Button = styled.button`
background-color: blue;
color: white;
padding: 10px;
`장점
- 캡슐화된 스타일 : CSS 코드가 컴포넌트 내부에 위치해, 다른 컴포넌트에 영향을 미치지 않음.
- 동적 스타일 : JavaScript 변수나 상태에 따라 동적으로 스타일을 변경할 수 있음.
단점: 렌더링 성능
- 렌더링 속도 : CSS-in-JS는 스타일을 동적으로 생성하기 때문에 렌더링 과정에서 JavaScript가 실행되며, 그로 인해 추가적인 구문 분석과 처리가 필요합니다. 결과적으로 렌더링 속도가 느려질 수 있습니다.
- 초기 로딩 시간 증가 : 특히, **서버 사이드 렌더링(SSR)**에서 이 방식은 JavaScript가 동작하지 않는 초기 단계에서 CSS가 빠르게 적용되지 않을 수 있어 초기 로딩이 지연될 수 있습니다.
2. CSS Module: 정적인 CSS로 빠른 렌더링
CSS Module은 전통적인 CSS 파일을 모듈화하여 사용하지만, 각 컴포넌트마다 고유의 CSS 클래스를 자동으로 생성하여 전역 네임스페이스 충돌을 방지합니다.
특히 Next.js와 같은 SSR 프레임워크에서 자주 사용됩니다.
// Example.module.css
.button {
background-color: blue;
color: white;
padding: 10px;
}// 컴포넌트 파일
import styles from './Example.module.css'
export default function Button() {
return <button className={styles.button}>Click</button>
}장점
- 빠른 렌더링: CSS가 별도의 파일로 빌드 타임에 처리되므로, 브라우저는 이를 정적 리소스로 바로 로드합니다. 그로 인해 추가적인 구문 분석이 필요 없으며, 빠른 렌더링 속도를 유지할 수 있습니다.
- SSR 친화적: 서버에서 미리 CSS가 렌더링되어 전달되기 때문에 초기 로딩 속도가 빠릅니다.
단점: 렌더링 성능
- 동적 스타일 한계: CSS-in-JS와 달리 동적으로 JavaScript 상태에 따라 스타일을 변경하는 기능이 부족할 수 있습니다.
- 추가적인 파일 관리: CSS 파일을 따로 관리해야 하므로 파일 구조가 복잡해질 수 있습니다.
3. 렌더링 성능 비교: CSS-in-JS vs CSS Module
테스트 환경
- 테스트 구성: 간단한 웹 페이지에서 동일한 스타일을 적용한 후, CSS-in-JS와 CSS Module 방식을 각각 사용하여 렌더링 속도를 비교했습니다.
- 측정 도구: 크롬 개발자 도구의 Network 탭을 사용해 요청별 렌더링 시간을 측정했습니다. 각 방식이 페이지 로드에 어떤 영향을 미치는지 확인할 수 있습니다.
a. CSS-in-JS 방식으로 렌더링된 성능 결과입니다.
-
주요 스크립트 로딩 시간과 fetch 요청들이 보입니다. 특히, 큰 사이즈의 JS 파일(%5Bid%5D.js)이 로딩되는데 787ms가 걸렸으며, fetch 요청에서도 비교적 더 많은 시간이 소요되고 있습니다.
전체적으로 스크립트 로드 시간과 fetch 요청에서 추가적인 시간 소요가 발생하고 있음을 확인할 수 있습니다.
b. CSS Module 방식으로 렌더링된 성능 결과입니다.
- 동일한 스크립트 파일(%5Bid%5D.js)이지만, 로딩 시간이 48ms로 줄어들었고, 전체적으로 fetch 요청도 짧은 시간 내에 처리되고 있습니다.
이 방식은 정적 CSS 파일을 사용함으로써 렌더링 시 추가 구문 분석이 필요 없기 때문에, 페이지 로드 성능이 개선되었습니다.
| 방식 | 주요 스크립트 로딩 시간 | 주요 fetch 요청 시간 | 전체 렌더링 시간 |
|---|---|---|---|
| CSS-in-JS | 787ms | 2.59s | 약 3.4s |
| CSS Module | 48ms | 10ms | 약 0.1s |
c. 정리
이미지에서 확인할 수 있듯이, CSS-in-JS 방식은 JavaScript로 스타일을 동적으로 처리하는 과정에서 추가적인 스크립트 로드와 구문 분석 비용이 발생해 렌더링 속도가 느려집니다.
반면, CSS Module 방식은 정적 CSS 파일로 관리되어 더 빠른 로딩과 렌더링 속도를 보여주며, fetch 요청 및 스크립트 로딩 시간이 현저히 줄어들었습니다.
따라서, 성능을 중시해야 하는 프로젝트에서는 CSS Module을 사용하여 렌더링 성능을 최적화하는 것이 더 유리한 것으로 보입니다.
4. 어떤 CSS 방식이 적합할까?
결국 CSS 방식을 선택할 때는 프로젝트의 규모와 특성에 따라 달라질 수 있습니다.
- 소규모 프로젝트: 빠른 개발과 유지보수가 중요한 경우, CSS-in-JS를 사용해 생산성을 높일 수 있습니다.
- 대규모 프로젝트: 복잡한 상호작용이 많은 프로젝트에서는 렌더링 성능을 고려해 CSS Module이나 Tailwind CSS와 같은 정적 CSS 방식을 사용하는 것이 더 나은 선택이 될 수 있습니다.
5. 결론
CSS는 단순한 스타일링 도구를 넘어서, 페이지의 렌더링 성능에도 중요한 영향을 미치는 요소라는 걸 알 수 있습니다.
특히, CSS-in-JS 방식은 편리한 반면 성능에 영향을 줄 수 있으며, CSS Module은 성능 면에서 더 유리한 선택입니다. 각 프로젝트의 특성과 성능 요구 사항을 고려해 적절한 CSS 방식을 선택하는 것이 중요합니다.