Zero-Runtime CSS란?
스타일을 런타임에 적용하지 않고, 빌드 타임에 CSS를 생성하여 사용자가 페이지를 로드할 때 이미 최적화된 CSS를 제공하는 방식이다.
Zero-Runtime의 장점
-
성능 향상: 런타임에 스타일을 생성하지 않고 빌드 시점에 CSS를 생성하기 때문에 페이지 로딩 시 불필요한 계산이 줄어들어 성능이 개선된다.
-
최적화된 스타일: 빌드 타임에 사용되지 않는 스타일을 제거하여 최종 CSS 파일의 크기를 줄이고, 브라우저의 렌더링 성능을 높인다.
-
유지보수 용이: 컴포넌트 기반의 개발을 지원하며, 각 컴포넌트에 필요한 스타일을 독립적으로 관리할 수 있어 코드의 가독성이 향상된다.
-
서버 컴포넌트 호환성: 서버에서 미리 생성된 CSS를 클라이언트에 전달함으로써 초기 로딩 속도를 향상시킨다.
이를 통해 불필요한 런타임 스타일 계산을 줄이고, 서버 렌더링의 이점을 극대화하여 사용자 경험을 개선한다.
서버 컴포넌트란?
서버에서 렌더링되고 클라이언트에 전달되는 컴포넌트이며, 서버에서 데이터를 직접 가져와 HTML을 생성하기 때문에 초기 로딩 속도를 개선하고 클라이언트의 렌더링 부담을 줄이는 데 도움을 준다.
기존 CSS-in-CSS, Css-in-JS와의 차이점
- CSS-in-CSS(Module css)
각 컴포넌트에 대한 별도의 CSS 파일을 작성하고, 이를 모듈화하여 사용한다.
이 방식은 CSS 클래스 이름의 충돌을 방지하고, 각 컴포넌트의 스타일을 독립적으로 관리할 수 있는 장점이 있지만 런타임에 CSS가 적용되며, 전체 애플리케이션의 스타일의 크기가 클 경우 성능에 영향을 미칠 수 있다.
- CSS-in-JS
JavaScript 파일 내에서 CSS를 정의하며 런타임에 스타일을 동적으로 생성한다.
이 방식은 컴포넌트의 상태에 따라 스타일을 쉽게 변경할 수 있는 장점이 있지만, CSS-in-CSS 방식과 같이 런타임에 CSS를 생성하기 때문에 성능에 영향이 미칠 수 있다.
Zero-Runtime 라이브러리 비교하기
Linaria (Github Star: 11.4K)
장점
-
TypeScript 지원: TypeScript와 잘 통합되어, 타입 안정성을 제공한다.
-
사용 용이성: CSS-in-JS 문법을 사용하므로 러닝 커브가 적다.
단점
-
제한된 기능: 복잡한 동적 스타일링에는 한계가 있을 수 있다.
-
설정: Babel이나 Webpack과 같은 빌드 도구에 의존하며, 설정 과정이 복잡할 수 있다.
vanilla-extract (Github Star: 9.4K)
장점
-
타입 안전성: TypeScript의 타입 시스템을 활용하여 오류를 줄일 수 있다.
-
CSS 변수 지원: CSS 변수를 쉽게 사용할 수 있어, 유연한 스타일링이 가능하다.
-
정적 분석: 정적 스타일링을 통해 런타임 성능이 최적화된다.
단점
- 러닝 커브: TypeScript에 대한 이해와 vanilla-extract 문법을 공부해야 한다.
Panda CSS (Github Star: 4.9K)
장점
-
유연한 스타일링: CSS-in-JS의 장점을 유지하면서도 정적 스타일링을 지원한다.
-
구성 가능성: 다양한 스타일링 방법론을 지원하여, 프로젝트 요구에 맞게 사용할 수 있다.
-
모듈화: 스타일을 모듈화하여 재사용성이 높다.
단점
- 커뮤니티: 다른 라이브러리에 비해 커뮤니티와 자료가 적을 수 있다.
개인적으로는 CSS 라이브러리를 학습할 시간이 부족하다면 러닝 커브가 적은 Linaria를 사용하고, 아니면 vanilla-extract가 더 괜찮은 것 같다!
