Zero Runtime CSS-in-JS에 대해 알아보자

최근에 진행한 프로젝트에서 요즈음 주목받고 있는 Zero Runtime CSS-in-JS 라이브러리, Vanilla Extract를 사용해 보았습니다. Vanilla Extract는 컴파일 타임에 CSS 파일을 생성하여 기존 런타임에 생성되는 CSS-in-JS보다 성능상의 이점을 제공하는 것으로 알려져 있습니다. 

 

그렇다면 기존의 CSS-in-JS에는 어떤 성능적인 문제가 있었기 때문에 Zero Runtime CSS-in-JS 기술이 떠오르게 되었을까요?

 
이 포스팅에서는 런타임 CSS-in-JS 라이브러리의 특징과 문제는 무엇인지, 그리고 Zero Runtime 접근 방식이 그 문제를 어떻게 해결하는지에 대해 알아보도록 하겠습니다.
 
 
 
 

CSS 적용 과정

CSS가 웹 페이지에 적용되는 과정부터 알아봅시다.
 

1. 네트워크에서 HTML을 받아 브라우저로 로딩한다.
2. HTML을 DOM(Document Object Model)로 변환한다.
3. 브라우저는 HTML 문서에 리소스들을 가져온다. 이미지, 동영상, CSS 등이 해당된다.
4. 브라우저는 가져온 CSS를 변환하여 CSSOM(CSS Object Model)을 생성한다. 2에서 만들어진 DOM Tree와 CSSOM Tree를 결합하여 스타일을 DOM 노드에 적용한다. 이때, CSS Cascading 규칙에 따라 스타일이 적용된다. 이 과정을 Render Tree라고 한다.
5. 페이지를 화면에 그린다. 이 단계를 Painting이라고 한다.

 
 
위 과정을 그림으로 표현하면 다음과 같습니다.

출처: MDN web docs

 
 
 
 
 
 

CSS의 렌더링 문제

위에서 설명한 것처럼 브라우저는 HTML을 먼저 받아온 다음 CSSOM을 생성하여 HTML에 스타일을 적용시킬 준비를 합니다.
 
여기서 CSS로 인해 발생하는 렌더링 문제가 있습니다. 
한 페이지에 적용될 CSS에 수많은 스타일과 선택자가 포함되어 있다면 어떨까요? CSS 파일의 크기가 클수록 브라우저가 CSSOM을 만드는 데 걸리는 시간이 길어집니다.
 
이 과정에서 렌더링 블로킹이 발생해 요청된 페이지의 첫 Painting이 지연될 수 있습니다.
첫 Painting은 브라우저가 요청된 페이지의 첫 번째 픽셀을 렌더링하는 이벤트입니다.

첫 Painting이 0.5초 이상 지연된다면 사용자 경험이 저하되어 부정적인 영향을 미칠 수 있습니다.
클라이언트에게 CSS를 더 빨리 전달하고 첫 Painting 시간을 최적화하여 사용자 경험을 개선해야 합니다.

 

 

✔️ CSS-in-JS: 렌더링 블로킹 해결과 클래스 중복 방지

렌더링 블로킹을 해결하려면 CSS 파일을 컴포넌트화하여 chunk(작은 덩어리)로 분할하면 됩니다.
그러나 이 방법은 동일한 클래스 이름을 사용할 경우 전역적으로 스타일이 중복되어 디자인 상의 버그가 발생할 수 있습니다.
 
CSS-in-JS가 이러한 클래스 중복과 범위 문제를 해결해 줍니다. 
 
 
 
 

CSS-in-JS의 장점

CSS-in-JS가 해결하는 가장 큰 문제는 위에서 짧게 설명한 글로벌 스코프 문제인데,
이외에도 CSS-in-JS가 가지고 있는 장점은 다음과 같습니다.
 
 

1️⃣ CSS 파일을 JavaScript와 함께 관리

동일한 파일에 JavaScript 코드와 스타일 코드를 함께 작성해 컴포넌트의 유지보수가 보다 더 용이합니다.
 
 

2️⃣ 스코프 및 선택자 관련

CSS-in-JS는 JavaScript 파일마다 스타일을 작성하기 때문에 다른 컴포넌트의 스타일과 충돌하는 문제를 해결합니다.
스타일 충돌을 피하기 위해 어떤 CSS 방법론을 사용할지 걱정할 필요도 없습니다.

보통 스타일을 작성할 때 선택자를 앞에 붙이지 않고 하나의 컴포넌트에 대해서만 작성하므로, specificity 문제는 거의 발생하지 않습니다.
 
 

3️⃣ 동적 스타일링

CSS-in-JS는 다음과 같이 조건부 CSS를 작성할 수 있습니다.
 

import styled from 'styled-components';

const Title = styled.h1<{ highlight?: boolean }>`
  font-size: 1.5em;
  text-align: center;
  color: ${(props) => (props.highlight ? 'black' : '#BF4F74')};
`;

function App() {
  return (
    <>
      <Title>Hello World</Title>
      <Title highlight>Hello World</Title>
    </>
  );
}

export default App;

 

상단 코드의 로컬 환경 실행 결과

 
 
 

CSS-in-JS의 단점

CSS-in-JS가 컴포넌트 단위로 CSS를 나누어 작성할 수는 있지만, 위에서 설명했던 렌더링 블로킹을 완전히 해결하지는 못합니다.
이외에도 몇 가지 단점이 있습니다.

 

1️⃣ 렌더링 블로킹

CSS-in-JS 라이브러리는 *컴포넌트가 렌더링될 때 새로운 스타일을 동적으로 계산해 추가하는 방식으로 동작하며, 이는 근본적으로 성능에 좋지 않습니다.
컴포넌트가 많을수록 첫 Painting 시간이 길어져 렌더링 블로킹이 생기고 사용자 경험을 저해합니다.

 

*예시

import { useState } from 'react';
import styled from 'styled-components';

const Title = styled.h1<{ $primary?: boolean }>`
  font-size: 1.5em;
  text-align: center;
  color: ${(props) => (props.$primary ? '#000000' : '#BF4F74')};
`;

function App() {
  const [primary, setPrimary] = useState(false);

  const changeColorStyledComponent = () => {
    setPrimary((p) => !p);
  };
  return (
    <>
      <Title $primary={primary}>Hello World</Title>
      <button onClick={changeColorStyledComponent}>change color</button>
    </>
  );
}

export default App;

상단 코드의 로컬 환경 실행 결과

 
사용자가 버튼을 눌렀을 때 동적으로 스타일이 추가되는 것을 확인할 수 있습니다.
 
 
 

2️⃣ SSR과의 호환성

CSS-in-JS는 런타임에 스타일을 생성하고, 서버에서 페이지의 초기 HTML을 생성하는 SSR 방식은 서로 상충되는 요구사항으로 인해 생기는 문제가 많습니다.
서버에서 생성된 HTML이 사용자의 브라우저로 전달되기 전까지 CSS-in-JS로 생성한 스타일이 적용되지 않습니다.
이는 초기 로딩 시 스타일이 적용되지 않은 콘텐츠가 깜빡이며 보이는 문제가 발생할 수 있습니다.
 

Next.js의 공식 문서에는 런타임 자바스크립트가 필요한 CSS-in-JS 라이브러리는 현재 서버 컴포넌트에서 지원되지 않는다는 주의 문구가 써 있고,
Emotion GitHub 리포지토리에는 이와 관련된 수많은 문제가 접수됩니다.

 
 
 
 

Zero Runtime CSS-in-JS

이러한 CSS-in-JS의 문제를 해결하기 위해, Zero Runtime CSS-in-JS 라이브러리가 만들어지게 됩니다.
Zero Runtime 라이브러리에서는 CSS-in-JS 코드를 CSS 파일로 먼저 변환합니다. 그런 다음 브라우저가 해당 스타일을 읽고 웹 페이지에 적용합니다.
이 방식으로 런타임에 스타일 태그를 생성함으로써 발생하는 문제를 해결할 수 있습니다.
 
 
 

---

 
위에서 보여 드린 사용자가 버튼을 눌렀을 때 텍스트의 색상이 변경되는 동일한 기능을 Vanilla Extract로 작성한 예제입니다. 
 

import { useState } from 'react';
import { title } from './test.css';

function App() {
  const [primary, setPrimary] = useState(false);

  const changeColor = () => {
    setPrimary((p) => !p);
  };

  return (
    <>
      <h1 className={`${title} ${primary ? 'primary' : ''}`}>Hello World</h1>
      <button onClick={changeColor}>change color</button>
    </>
  );
}

export default App;

// test.css.ts

import { style } from '@vanilla-extract/css';

export const title = style({
  fontSize: '1.5em',
  textAlign: 'center',
  color: '#BF4F74',

  selectors: {
    [`&.primary`]: {
      color: 'black',
    },
  },
});

상단 코드 로컬 환경 실행 결과

 
빌드 타임에 버튼을 눌렀을 때의 스타일까지 모두 계산되어 HTML과 CSS의 초기 로딩이 완료되면 style 태그에서 확인할 수 있습니다.
 

---

 
 
 
 
Vanilla Extract 외에도 Linaria, Astroturf, Reshadow, Panda CSS 등 다양한 Zero Runtime CSS-in-JS 라이브러리가 있습니다.
 
 
 

Vanilla Extract

Vanilla Extract는 GitHub에서 2024년 1월 기준 9천 개 이상의 스타를 받은 인기 있는 Zero Runtime CSS-in-JS 라이브러리입니다.
프레임워크에 구애받지 않아 바닐라 자바스크립트 또는 모든 프론트엔드 프레임워크에서 사용할 수 있습니다.

Vanilla Extract를 사용하면 로컬 범위의 스타일과 변수를 JavaScript 또는 TypeScript로 작성하고 빌드 시점에 CSS 파일을 생성할 수 있습니다. 또한 애플리케이션의 테마를 동적으로 지정하기 위한 API도 제공합니다.
 
 
 
Vanilla Extract의 다른 특징은 다음과 같습니다.
 

• 타입 안전: 타입스크립트를 지원하여 개발자 경험을 개선합니다.
• 번들러 지원: 웹팩, Vite, Parcel, Babel과 같은 가장 인기 있는 프론트엔드 React 프레임워크 및 도구와 통합되어 있습니다.
• 잘 문서화됨
• 쉬운 설정
• 여러 패키지와 함께 사용할 수 있음 (sprinkles, recipe, dynamic)
  • sprinkles를 활용해 tailwind처럼 Atomic CSS를 구성할 수 있음
  • recipe를 활용하여 variant 기반 스타일링을 구성할 수 있음
  • dynamic을 활용해 동적으로 값을 업데이트할 수 있음

 
 
 

글을 마치며

이 포스팅에서, Vanilla Extract와 같은 Zero Runtime CSS-in-JS 라이브러리가 기존 CSS-in-JS 방식의 한계를 어떻게 극복하는지 알아보았습니다. Zero Runtime CSS-in-JS는 컴파일 타임에 CSS 파일을 생성함으로써 런타임 렌더링 문제를 해결하고, 성능을 향상시킵니다. 이를 통해 웹 서비스에서 중요한 첫 화면 로딩 시간을 단축하여 좋은 사용자 경험을 만들 수 있습니다.



 

📌 참고

• CSS vs. CSS-in-JS: How and why to use each - LogRocket Blog
• Comparing the top zero-runtime CSS-in-JS libraries - LogRocket Blog
• 렌더링 차단 CSS  |  Articles  |  web.dev
• Why We're Breaking Up with CSS-in-JS - DEV Community