Goodbye Styled,Emotion! and Tailwind...? Panda Css를 소개합니다!

조주영·2023년 10월 24일

회사 Web팀의 세미나를 위한 자료를 준비하다,
다른 분 들 께도 공유하면 좋을 것 같아 포스트를 해보게 되었습니다.

Panda CSS

새로운 CSS 라이브러리로,

기존 CSS-in-JS의 생산성 + 전통 CSS-in-JS(styled,emotion)의 단점인 런타임 오버헤드가 없어 성능이 우수함을 결합한 라이브러리라고 볼 수 있겠습니다!

Panda Css를 소개하기전 저희 회사 웹에서 사용중인 CSS-in-Js (emotion, styled) ,
Atomic CSS(tailwind) 특징을 간단하게 살펴봅시다.

CSS-in-Js(Emotion ,styled-components)

const Example = ({ children }) => {
  return (
    <div
      css={{
        color: "yellow",
        fontWeight: "bold",
      }}
    >
      {children}
    </div>
  );
}

or 

const Example = styled.div`
  color: yellow;
  font-weight: bold;
`;

보시는 바와 같이 개발자가 스타일을 자바스크립트 코드 단에서 직접 CSS를 작성하여 리액트 컴포넌트 스타일을 지정할 수 있습니다. 그렇기에 동적으로 유연하게 스타일링을 할 수 있게 됩니다(Sass, Css Modules 에 비해)

하지만 여기서 문제는, 자바스크립트가 로드되고 실행될 때 까지 페이지의 완전한 스타일 정보를 가져 올 수 없게 됩니다.

이는 js를 제한적으로 처리하는 검색엔진에 영향을 미치게 되고,(css를 변환하고 해석하는데에는 꽤 높은 비용이 발생)

또한 런타임에서 동적으로 스타일을 생성하기에 페이지 성능과 시간에 영향을 미칠 수 있는 런타임 오버헤드가 발생하게 됩니다.(스크롤, 드래그&드롭, 등등…)

그리고 서버사이드에서 에서의 수많은 이슈… ㅠㅠ

장점: js 코드에서 작성하는 유연하고 동적인 스타일링
단점: 런타임 오버헤드, 서버사이드 이슈

Atomic CSS(tailwind)

웹사이트의 시각적 요소를 작은 단위로 나누고, 단위별로 이름을 지정해 CSS를 작성하는 방법입니다.

const Example = ({ children }) => {
  return (
    <div
      className="text-red font-bold"
    >
      {children}
    </div>
  );
}

CSS-in-Js 방식이랑 비슷하기에 유연하고 편리한 스타일링이 가능합니다.
또한 빌드 타임에 스타일을 생성하기때문에 정적인 css 파일로 출력되고, SSR,SEO 이슈가 Emotion ,styled-components 보다 우수합니다.

tailwind만의 직관적인 자체 스타일 네이밍을 사용하여 익숙해지면 매우 편리하나,
스타일이 복잡해지면 되려 가독성 이슈가 생길 수 있고, 동적 스타일링을 위해 개발자가 신경써줘야 합니다.

style Type-safety 가 되지않아 eslint 등 린트룰로 따로 보안 해야 합니다.
또한 특정스타일 적용이 어려울 수 있어 필요에 따라서는 라이브러리등 설치 파일이 생길 수 있습니다.
(ex scroll-hide)

장점: next에서 권장할만큼 서버사이드에 친화적(빌드타임), 편리한 개발가능
단점: 러닝커브, css in js 보다 비교적 덜 유연함, 편리한 개발을 위해서 부가적으로 셋팅 할 것이 많다.(Lint, extenstion, 라이브러리 등등)

Panda CSS(CSS-in-JS)

Panda-css 는 이 둘을 결합한 느낌(?)이 나는 라이브러리 입니다!
우선 판다는 CSS-in-JS 이지만 앞서 styled, emotion과는 다르게 zero-runtime 입니다.

어떻게 이게 가능한가 보았더니, Panda CSS는 AST(추상구문트리)와 스캐닝을 통해 소스 코드에서 유틸리티 클래스와 패턴을 추출하고, 이를 정적으로 CSS 파일로 생성합니다. 따라서, 런타임에 스타일을 계산하거나 주입할 필요가 없으며,
빌드타임에 css를 생성하기에 런타임 오버헤드가 없습니다.

그렇기에 최근 트렌드인 Next.js에서의 서버사이드 활용 면에서도 문제가 없고 (Next13 app dir지원)
CSS-in-JS 방식을 따르므로, CSS를 자바스크립트로 관리할 수 있는 장점을 가져 올 수도 있습니다!
(typeSafe, 재사용, 동적스타일링 등등)

또한 구문도 tailwind 처럼 간단하기에, 초반 러닝커브를 제외하면 편리하게 사용가능해보입니다 (이건 개인의견입니다 ㅎ)

간단 OverView

panda가 제공하는 css 사용하여 js로 정의해서 사용하거나, className에 직접 사용

import { css } from 'styled-system/css';

const textStyles = css({     
  backgroundColor: 'red', // bg: 'red',
  borderRadius: '9999px', // rounded: '9999px',
  fontSize: '13px',       // fontSize: '13px',
  padding: '10px 15px'    // p: '10px 15px'
})
 

const Example = () => {
  return (
      <div
        className={css({
          display: 'flex',
          flexDir: 'column',
          fontWeight: 'bold',
          color: 'black',
          textAlign: 'center',
          textStyle: '4xl',
        })}
      >
        <span className={textStyles}>Hello Panda</span>
      </div>
  );
}

style merge 규칙은 뒤에오는 객체를 우선으로 합니다 (tailwind 는 따로 해줘야함ㅠ)

import { css } from '../styled-system/css'
 
const result = css({ mx: '3', paddingTop: '4' }, { mx: '10', pt: '6' })
  //result = "mx_10 pt_6"

 
export const Button = ({ css: cssProp = {}, children }) => {
  const className = css(
    { display: 'flex', alignItems: 'center', color: 'black' },
    cssProp
  )
  return <button className={className}>{children}</button>
}

config 테마설정 가능!


{
  "theme": {
    "tokens": {
      "colors": {
        "red": { "value": "#EE0F0F" },
        "green": { "value": "#0FEE0F" }
      }
    },
    "semanticTokens": {
      "colors": {
        "danger": { "value": "{colors.red}" },
        "success": { "value": "{colors.green}" }
      }
    }
  }
}

이 외의 판다 css의 다양한 기능들 (cva,sva,slot…..~)은 같이 살펴보시죠!

https://panda-css.com/docs/overview/getting-started#playground

vs Vanila extracty

사실 zero-runtime css-in-js 는 vanilla-extarct 라는 라이브러리가 이미 있습니다.
둘의 컨셉은 차이가 거의 없는데요….

그럼에도 성장세가Panda가 핫한 이유는, 아마 비교적 최신 라이브러리이고, 다양한 기능을 제공해서 인듯 싶습니다
(친절한 document도 한몫 한듯 싶습니다ㅎㅎ..)

vs Tailwind

panda가 styled,emotion 을 대체 할 이유는 충분해보이지만,
이미 tailwind 셋팅이 끝나 정상적 운영을 하고 있는 프로젝트안에서 비교했을때
Panda Css 로 마이그레이션을 할 리소스 비용까지 소모하며 바꿀 정도로 설득이 되지는 않았습니다(저희 웹같이 ㅎㅎ)

그러나 styled,emotion 을 사용해서 런타임 오버헤드로 고민중인 프로젝트를 운영중인 분들에게는 tailwind 말고도 또 다른 선택지가 생겼다는 것에는 동의 할 수 있을 것 같아요!

실제로 모든 개발자가 tailwind의 매력을 느끼지 않을 수 있고, 러닝커브가 있는 스타일 구문은 처음봤을때 이게뭐지…? 싶거든요(저 포함)

되려 css-in-js를 선호하시는 분들은 선택지가 하나 더 생겼다는 것에서 의의가 있다고 생각됩니다.