🤔 Why AdorableCSS?

“또 다른 CSS Framework가 왜 필요한가요?”

📖 우리의 이야기

문제: Figma에서 코드로 넘어올 때의 괴리감

디자이너: “중앙 정렬하고, 간격은 24px로…”
개발자: “그래서… flex items-center justify-center gap-6?”

🎯 핵심 통찰: 우리는 Figma의 Auto Layout으로 생각하지만, Flexbox 속성으로 코딩합니다.

해결책: 사고방식을 그대로 코드로

<!-- Figma 사고방식 -->
"Frame을 중앙 정렬하고 간격 24px"

<!-- TailwindCSS -->
<div class="flex items-center justify-center gap-6">

<!-- AdorableCSS -->
<div class="hbox(pack) gap(24)">

차이가 느껴지시나요? 🎨

🏆 AdorableCSS만의 장점

1. Figma 네이티브 문법

Figma	AdorableCSS	설명
Auto Layout	`hbox()`, `vbox()`	직관적인 레이아웃
Fill container	`w(fill)`	컨테이너 채우기
Hug contents	`w(hug)`	컨텐츠에 맞추기
Absolute position	`layer()`	레이어 배치

2. 의미론적 디자인 시스템

<!-- ❌ TailwindCSS: 매번 같은 조합 반복 -->
<h1 class="text-4xl font-bold tracking-tight leading-tight">
<h2 class="text-3xl font-bold tracking-tight leading-tight">
<h3 class="text-2xl font-semibold tracking-normal leading-normal">

<!-- ✅ AdorableCSS: 역할 기반 -->
<h1 class="heading(xl)">
<h2 class="heading(lg)">
<h3 class="heading(md)">

3. 일관된 함수형 문법

/* 모든 유틸리티가 동일한 패턴 */
name(value)
name(value1/value2)
name(key:value)

/* 예측 가능하고 기억하기 쉬움 */

4. CSS @layer로 특이성 해결

/* 자동으로 관리되는 캐스케이드 */
@layer component, layout, utility, state;

/* !important 거의 불필요 */

5. 더 짧고 읽기 쉬운 코드

<!-- 실제 비교 -->
<!-- TailwindCSS (73자) -->
<div class="flex items-center justify-between px-6 py-4 bg-white rounded-lg shadow-md">

<!-- AdorableCSS (49자) -->
<div class="hbox(middle) gap(auto) px(lg) py(md) card">

<!-- 33% 더 짧음! -->

💼 비즈니스 가치

개발 속도 향상

🚀 디자이너와 개발자 간 소통 시간 50% 단축
🎯 Figma → 코드 변환 시간 70% 단축
📝 코드 리뷰 시간 30% 단축 (더 읽기 쉬운 코드)

유지보수성

🔍 의미론적 클래스로 의도가 명확함
🏗 일관된 디자인 시스템 적용
📦 더 작은 HTML 파일 크기

팀 협업

👥 디자이너도 이해할 수 있는 코드
🤝 공통 언어로 소통
📚 학습 곡선 완만

🆚 언제 AdorableCSS를 선택해야 할까?

✅ AdorableCSS가 적합한 경우

Figma 중심 워크플로우
- 디자인 시스템이 Figma에 정의됨
- Auto Layout을 적극 활용
빠른 프로토타이핑
- 직관적인 문법으로 빠른 개발
- 의미론적 컴포넌트로 일관성
팀에 디자이너가 있는 경우
- 디자이너도 코드 이해 가능
- 협업 효율성 증가

⚠️ 다른 선택을 고려해야 할 경우

이미 Tailwind에 깊게 투자한 경우
- 점진적 마이그레이션 가능하지만 시간 필요
매우 독특한 디자인이 필요한 경우
- 커스텀 CSS와 혼용 가능하지만 제한적

🎯 실제 사례

Before (TailwindCSS)

<div class="min-h-screen bg-gray-50 flex items-center justify-center px-4 sm:px-6 lg:px-8">
  <div class="max-w-md w-full space-y-8 bg-white p-6 sm:p-8 rounded-xl shadow-lg">
    <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900">
      로그인
    </h2>
    <!-- 더 많은 중복... -->
  </div>
</div>

After (AdorableCSS)

<div class="hbox(fill) min-h(screen) bg(gray-50) p(md)">
  <div class="card container(narrow) vbox gap(xl)">
    <h2 class="heading(xl) text(center)">로그인</h2>
    <!-- 깔끔하고 의미있는 코드 -->
  </div>
</div>

코드 길이: 50% 감소
가독성: 200% 향상
의미 전달: 명확함

🚀 시작하기

30초 체험

# CDN으로 바로 시작
<link rel="stylesheet" href="https://unpkg.com/adorable-css/dist/adorable.css">

점진적 도입

// 기존 프로젝트에 추가
import 'adorable-css'

// Tailwind와 함께 사용 가능!

팀 설득하기

작은 컴포넌트부터 AdorableCSS로 작성
코드 리뷰에서 가독성 차이 보여주기
개발 속도 측정 및 공유

💭 자주 묻는 질문

Q: Tailwind와 뭐가 다른가요?
A: 철학이 다릅니다. Tailwind는 “유틸리티 우선”, AdorableCSS는 "사고방식 우선"입니다.

Q: 프로덕션에서 사용할 수 있나요?
A: 네! 이미 여러 프로덕션 환경에서 사용 중입니다.

Q: 번들 크기는 어떤가요?
A: Core: 34KB (gzipped), 대부분의 프로젝트에서 Tailwind보다 작습니다.

Q: 커스터마이징이 가능한가요?
A: 네! 토큰 시스템, 플러그인, 커스텀 규칙 모두 지원합니다.

🎬 결론

AdorableCSS는 단순한 CSS Framework가 아닙니다.
디자이너와 개발자를 연결하는 다리입니다.

“Write CSS the way you think in Figma”

🔗 다음 단계

우리와 함께 더 나은 CSS 경험을 만들어가요! 🚀