AeroCraft: CSS를 줄이고, UI 전달을 더 빠르게

Source: Dev.to

• Repo: https://github.com/yaghobieh/aerocraft
• Package: https://www.npmjs.com/package/@forgedevstack/aerocraft

AeroCraft는 유틸리티 클래스의 속도와 더 나은 가독성 및 강력한 디자인 일관성을 원하는 팀을 위한 유틸리티‑및‑단축키 CSS 엔진입니다. 모든 버튼, 카드, 셸마다 8–12개의 클래스를 반복하는 대신, 설정에서 고수준 단축키(및 컴포넌트 레시피)를 구성하고 이를 어디서든 재사용합니다.

왜 AeroCraft인가?

대부분의 팀이 CSS 유틸리티 워크플로우에서 겪는 동일한 문제점들:

• 긴 클래스 문자열은 코드 리뷰에서 스캔하기 어렵다
• 반복되는 패턴이 페이지마다 달라진다
• 디자인 토큰은 한 곳에 존재하지만 UI 클래스는 그렇지 않다
• 프로젝트/프레임워크 간 마이그레이션이 복잡해진다

AeroCraft는 구성에서 재사용 가능한 단축키를 생성하고, 선택적인 반응형 변형 및 타입이 지정된 디자인 토큰을 제공함으로써 이를 해결합니다.

전형적인 Utility‑First 설정 대비 장점

1) 짧고 명확한 클래스 이름

반복되는 유틸리티 조합을 하나의 의미 있는 단축키로 압축할 수 있습니다.

Before

  Buy now

After

  Buy now

2) 설정‑기반 디자인 시스템

스타일은 단일 진실의 원천에서 생성됩니다:

• theme – 색상, 간격, 폰트, 라디우스, 그림자
• customShortcuts – 재사용 가능한 레이아웃/시맨틱 헬퍼
• componentRecipes – 실제 컴포넌트와 같은 클래스

3) 프레임워크에 구애받지 않는 출력

AeroCraft는 순수 CSS를 출력합니다. React, Vue, Angular, Svelte, 혹은 순수 HTML과도 런타임 락‑인 없이 사용할 수 있습니다.

4) 반응형 준비된 유틸리티

responsive: true를 활성화하면 설정에 정의된 브레이크포인트에서 자동으로 변형을 생성합니다.

5) 팀 규모에 맞는 더 나은 확장성

팀은 일관된 네이밍을 유지하고 JSX/HTML에서 복사‑붙여넣기 CSS 소음을 줄일 수 있습니다.

빠른 시작

npm i @forgedevstack/aerocraft postcss

postcss.config.js

import { aerocraftPlugin } from '@forgedevstack/aerocraft/postcss';
import config from './aerocraft.config.js';

export default {
  plugins: [aerocraftPlugin(config)],
};

src/styles/aerocraft.css

@aerocraft;

진입점 (예: src/main.tsx)

import './styles/aerocraft.css';

실제 구성 예시

import { defineConfig } from '@forgedevstack/aerocraft';

export default defineConfig({
  responsive: true,
  theme: {
    colors: {
      brand: { DEFAULT: '#2563eb', 500: '#3b82f6', 600: '#1d4ed8' },
      accent: '#ff8a3c',
    },
    fontFamily: {
      display: ['Plus Jakarta Sans', 'ui-sans-serif', 'system-ui', 'sans-serif'],
    },
    screens: {
      sm: '640px',
      md: '768px',
      lg: '1024px',
    },
  },
  customShortcuts: {
    'background-brand-gradient': {
      group: 'background',
      css: { 'background-image': 'linear-gradient(90deg,#3b82f6,#6366f1)' },
    },
  },
  componentRecipes: {
    'button-core': {
      display: 'inline-flex',
      'align-items': 'center',
      'justify-content': 'center',
      gap: '0.5rem',
      width: '100%',
      'font-weight': '600',
      cursor: 'pointer',
      transition: 'all 180ms ease',
      border: '0',
    },
    'button-touch-48': {
      'min-height': '48px',
      padding: '0.75rem 1.25rem',
    },
    'button-primary-rounded': {
      color: '#ffffff',
      'border-radius': '0.75rem',
      'background-image': 'linear-gradient(90deg,#3b82f6,#6366f1)',
      border: '0',
    },
  },
});

사용 패턴

A) 유틸리티 구성

Utility composition

읽기 쉽고 빠릅니다.

### B) Component‑style composition
```html
  Continue

C) Responsive usage

  Filters
  Results

AeroCraft가 가장 적합할 때

• 읽기 어려운 마크업 없이 유틸리티‑클래스 속도를 원합니다
• 디자인 토큰과 클래스 사이의 설정‑기반 브리지가 필요합니다
• 여러 프레임워크에 배포하면서 하나의 CSS 전략을 원합니다
• 한 번 정의하고 패턴을 재사용하고 싶습니다 (componentRecipes)

요약

AeroCraft는 유틸리티 CSS의 생산성을 유지하면서도 팀이 가장 필요로 하는 부분인 명명, 재사용, 그리고 config‑driven 일관성을 제공하여 구조를 추가합니다. 클래스 문자열이 반복적으로 길어지고 있다면, AeroCraft는 더 짧은 마크업과 확장 가능한 스타일링을 위한 깔끔한 경로를 제공합니다.