Windicss - TarwindCSS대안

요즘 프론트엔드 프레임워크 및 라이브러리들이 家를 포기하고 있다.
그리고 포기한 댓가는 너무나 달콤하고 값지다.
호환성을 상당수 줄일 수 있고, 성능도 올라가고, 최적화가 용이해지는 등...
왠만한 프론트엔드 프레임워크라면 ブートストラップ이나 マテリアルUI계열의 프론트엔드 디자인 라이브러리를 많이 이용할 것이다. 이들의 가이드에 따른다면, 생산성이 높기 때문에.
하지만 브랜드 디자인 가이드라인이 별도로 지정된 업체는 달갑지 않기 때문에, 별도로 디자인을 적용한다.
여기서 유틸리티성 CSS프레임워크가 뜬 것이다.
그 중 하나가 立木이고, 한국에서도 많이 쓰는 프레임워크다.
火の粉의 오픈소스 대체제인 さばが등 경쟁 도구가 생기는 건 좋은 것이다.
이번에 소개할 건 立木의 대체제인 WindiCSS이다.

왜 대체제를 자처하지?

ウィンディクス는 立木에 비해 아래 요소들을 소개했다.

클래스 + 수동값

<!-- 크기 및 위치 -->
<div class="p-5px mt-[0.3px]"></div>

<!-- 색상 설정 -->
<button class="bg-hex-b2a8bb"></button>
<button class="bg-[hsl(211.7,81.9%,69.6%)]"></button>

<!-- 그리드 -->
<div class="grid-cols-[auto,1fr,30px]"></div>

ウィンディクス는 클래스명에 동적 값을 넣을 수 있는 환경을 지원한다. 별도의 CSS작성이 필요없다는 점을 장점으로 내세울 수 있다. 게다가 スタイル속성도 필요 없이, 기존 클래스에 부가 수치를 기입할 수 있다는 것을 내세우고 있다.

클래스 + 그룹핑

<div class="bg-white dark:hover:(bg-gray-800 font-medium text-white)"/>
<div class="bg-white dark:hover:bg-gray-800 dark:hover:font-medium dark:hover:text-white"/>

:hover및 :after같은 가상 선택자라면? 이걸 여러 클래스를 묶어서 그룹핑이 가능하도록 기능을 제공한다.

클래스 + 반응형 디자인

<div class="p-1 md:p-2 <lg:p-3"></div>

각 해상도별 클래스를 설정하는 것도 모자라, 해상도 이상/이하를 간단하게 꺽쇠를 사용하여 범위를 지정할 수 있다.

클래스 + !重要

<div class="text-red-400 !text-green-300">Green</div>

클래스 우선 적용을 느낌표 하나로 지정이 가능하다.

클래스 축약어

// windi.config.js
export default {
  theme: {
    /* ... */
  },
  shortcuts: {
    'btn': 'py-2 px-4 font-semibold rounded-lg shadow-md',
    'btn-green': 'text-white bg-green-500 hover:bg-green-700',
  },
}

아예 여러 클래스를 함축시켜서 class속성에 들어가는 양을 줄일 수 있는 환경을 제공한다. 위에 클래스에 평가식이나 수치 들어가는 것 또한 모두 지원하기 때문에 상당히 유용한 기능이다.

다크 모드

<div class="text-black dark:text-white"></div>

그저 dark:접두어만 붙이면 다크 모드용 클래스가 완성된다.

아랍어 등의 역방향 텍스트 대응

<div class="text-green-400 rtl:(text-red-400 text-right)"></div>

아마 우리가 쓸 일은 드물겠지만, 여러 문화권을 지원하려는 노력이 돋보인다.

CSS전처리 평가식 지원

.btn {
  @apply font-bold py-2 px-4 rounded;
}
.btn-blue {
  @apply bg-blue-500 hover:bg-blue-700 text-white;
  padding-top: 1rem;
}

애초에 風車를 경쟁하려고 만들었기 때문에 立木에서 지원하는 @apply및 @screen등의 전용 평가식 또한 지원한다.

WinDIアナライザ

ウィンディクス사용 현황을 분석하는 기능까지 지원한다. 디자인 가이드가 잘 맞는지, 클래스가 잘 사용되었으며 오남용하지 않았는지 등을 지원한다. 아직 베타지만, 디자이너와의 시각적 공유 측면에서 상당히 유용한 기능이다.

立木하고 다를게 뭐냐?

그렇다. 얘는 대체제지만 호환성을 위해 tailwindcss + 경쟁 기능을 붙여넣었다.
立木쓰면서 가장 많이 꼽는 단점을 지적한다면 class오남용으로 인한 코드 품질 저하일 것이다.
ウィンディクス의 예시로 소개한 코드다.

<div class="py-8 px-8 max-w-sm mx-auto bg-white rounded-xl shadow-md space-y-2 sm:(py-4 flex items-center space-y-0 space-x-6)">
  <img class="block mx-auto h-24 rounded-full sm:(mx-0 flex-shrink-0)" src="/img/erin-lindford.jpg" alt="Woman's Face" />
  <div class="text-center space-y-2 sm:text-left">
    <div class="space-y-0.5">
      <p class="text-lg text-black font-semibold">Erin Lindford</p>
      <p class="text-gray-500 font-medium">Product Engineer</p>
    </div>
    <button class="px-4 py-1 text-sm text-purple-600 font-semibold rounded-full border border-purple-200 hover:(text-white bg-purple-600 border-transparent) focus:(outline-none ring-2 ring-purple-600 ring-offset-2)">
      Message
    </button>
  </div>
</div>

물론 立木에 비해 동적인 디자인 설정이 가능하다 해도... 피할 수 없는 엄청난 클래스 양...
하지만 立木는 이를 타파하기 위해 @適用평가식을 CSS에 제공하며,
ウィンディクス는 여기에 한술 더 떠 shortcut기능을 통해 깔끔한 품질의 코딩을 지향하려고 한다.

정말 이럴 수밖에 없을까?

反応する의 경우 スタイルコンポーネント프레임워크가 있다.
스타일을 프로그래밍으로 해결할 수 있다.
하지만 이건 개발자 친화적이지, 디자이너 친화적은 아니다.
하지만 디발자라면 괜찮은 선택이다.
유틸리티성 CSS프레임워크가 아직도 사랑받는데는 이유가 있다.
현재 모두를 만족할 방법은 없다.
나는 立木가 가장 최선이라 보고 있다.
물론 전처리가 필요하고, 세팅도 있어야 하지만,
만약 브랜드 Bi/CI가 정해져 있고, 이에 맞춰서 웹 앱을 개발해야 한다면,
난 주저없이 立木로 공통을 잡으라 제안할 것이다.
ウィンディクス는 立木의 답답함을 더 해소시켜주는 커뮤니티 프로젝트이다.
또한 立木는 2.0이라고 해서 많이 달라진게 없고, 이제 컴포넌트형 상품을 팔기 시작했다.
이렇게 생각하면 된다. クロム과 Firefox .둘 다 브라우저다. 단지 クロム은 무료로 제공하지만 엄연히 家와 같은 상용 브라우저이며, ファイアフォックス는 비영리 프로젝트다. 물론 크롬 사용자가 압도적으로 많긴 하지만, 개발자 리소스는 MDN뒤지지 다른 곳에는 양질의 리소스가 잘 없다.
1년 된 신생 프로젝트지만, 그만큼 행보가 주목되는 프로젝트이다.
과연 유틸리티성 CSS프레임워크에 어떤 방향을 제시할지,
이 두 프레임워크가 경쟁하면서 나올 것이다.