Sign in Subscribe
dev

Open Props - 지저분한 HTML을 만드는 Tailwindcss의 대안

OpenProps로 디자인토큰을 사용해 웹을 쉽고 빠르게 구축할 수 있습니다. CSS변수를 통해 TailwindCSS의 대안으로 사용하기에 좋은 기능들이 잘 준비되어있습니다.

Open Props - 지저분한 HTML을 만드는 Tailwindcss의 대안

디자인 토큰 (Design Token)

디자인 시스템을 구축하고자 하는 이들에게 Design Token이라는 개념은 무척 친숙한 개념일 것입니다. 원자(Atom)단위로 쪼개어 자주 쓰이는 것들을 미리 정의 해놓고, 언제든지 가져다 쓰기 좋도록 제공하는 것들을 보통 Design Token이라고 합니다.

디자인 토큰을 실제 개발에 적용할때

디자인 단계에서는 보통 Figma에서 정의해서 사용하지만, 실제로 웹으로 구현하기 위해서는 폰트 크기, 다양한 Spacing, border, color 등 여러가지를 컨트롤 해야하는 상황이 오기 때문에 SASS와 같은 CSS 전처리기를 활용하곤 했습니다만, 최근CSS3이 빠르게 발달하면서 CSS 변수로 미리 정의해서 쓰기도 합니다.

아무래도 꽤 번거로운 작업이기 때문에, 왠만한 CSS 기능들을 잘게 쪼개어 모두 Class 형태로 만들어 제공하는  Tailwindcss와 같은 Utility First 개념의 CSS 프레임워크가 사랑받는 상황이 오기도 했습니다.

TailwindCSS의 한계

TailwindCSS가 사랑받는 이유는 HTML과 CSS를 오가지 않고 한 화면에서 모든걸 지켜보고 컨트롤 할 수 있기 때문입니다. 빠르게 구축할때는 참 편리합니다만, 나중에 유지보수 단계에 들어가 내가 작성한 소스를 보면서 답답함을 느낄때가 많습니다. 마치 inline style로 작성한것과 같은 상황을 마주하기 때문이죠.

@apply를 통해 단일 CSS Class로 묶어서 활용할 수 있는 방법도 제공하고 있지만, 그렇게 되면, 결국 그냥 일반 CSS를 쓰는 것과 무엇이 다른가 싶은 상황도 마주하게 됩니다. 그러다보니 저는 결국 TailwindCSS를 점차 멀리하게 되었습니다.

💡
만들땐 참 편해요. 다시 들여다보고 싶지 않을뿐.

CSS 변수를 TailwindCSS처럼 쓰면 안될까?

점차 CSS 변수의 활용도가 무궁무진하다는걸 알게되면서, 차라리 TailwindCSS처럼 CSS 변수를 기능단위로 미리 만들어놓자는 생각을 하게 됩니다. 

:root {
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-base: 16px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-2xl: 28px;
  --radius-3xl: 32px;
  
  ...
  
  --text-sm: 0.8rem;
  --text-base: 1rem;
  --text-md: 1.25rem;
  --text-lg: 1.56rem;
  --text-xl: 1.95rem;
  --text-2xl: 2.44rem;
  --text-3xl: 3.05rem;
  --text-4xl: 3.81rem;
  }

그래서 대략 위와 같은 형태로 CSS에 변수를 미리 정의해놓고 아래와 같은 방식으로 활용하기도 했습니다.

.box{
	...
	border-radius: var(--radius-base);
    font-size: var(--text-base);
    ...
}

그런데 이런 방식은 아무래도 템플릿화 해놓는다해도 일관된 상태를 유지하는것도 꽤 손품이 드는 일입니다.

Open Props - 역시 누군가 잘 만들어놓은게 있습니다

Open Props는 저와 같은 생각으로 CSS 변수를 통해 디자인 토큰을 관리하고자 하는 사람들에게 딱 알맞는 도구인것 같습니다.

  • Colors
  • Gradients
  • Shadows
  • Aspect Ratios
  • Typography
  • Easing
  • Animations
  • Sizes
  • Borders
  • Z-index
  • Media Queries
  • Masks

지금까지 준비된 기능들만해도 상당한데, 앞으로도 계속해서 기능이 추가될 예정입니다. 꽤 기대되는 프로젝트고요.

아래 링크에 들어가보면 더 자세한 내용들을 만나볼 수 있습니다.

Open Props: sub-atomic styles
Open source CSS custom properties to help accelerate adaptive and consistent design. Available from a CDN or NPM, as CSS or Javascript.

저도 오늘 처음 알게된 도구라 이제 이걸 갖고 사용해보려고 합니다. 나중에 후기도 한 번 남겨보도록 하겠습니다.

Open Props에는 Open Color라는 컬러팔레트 오픈소스 라이브러리가 추가되어 있습니다. 저처럼 컬러 팔레트만 따로 쓰고 싶을때는 Open Props 프로젝트보다 Open Color를 사용하는 것이 더 간단해서 좋습니다.

관련된 내용은 아래 포스팅에서 확인할 수 있습니다.

Open Color - CSS변수로 쉽게 쓰는 오픈소스 컬러 팔레트 라이브러리
Open Color는 13가지 컬러와 10가지 단계로 일관된 컬러팔레트 오픈소스 라이브러리입니다. 디자인 시스템을 구축하기 좋은 환경을 제공합니다. CSS 변수는 물론이고, 여러가지 디자인 소프트웨어에서 사용할 수 있는 컬러 스와치도 제공하고 있습니다.
Illustudio BlogRittoRitto

Read next

Comments ()