CSS 기본 지식을 잃지 않으면서도, 빠르고 현대적인 UI를 구축할 수 있는 새로운 접근 방식
Material 3 컴포넌트와 CSS 속성명을 그대로 사용하는 유틸리티의 완벽한 조합
다른 유틸리티 프레임워크처럼 CSS 속성명을 새로운 이름으로 바꾸지 않습니다. `display: flex`는 `display-flex`, `background-color`는 `background-color` 그대로 사용합니다. 표준 CSS 지식이 그대로 활용되므로, CSS 기본 지식을 잃지 않고 개발할 수 있습니다.
<!-- 표준 CSS 속성명을 그대로 사용 -->
<div class="display-flex
flex-direction-column
align-items-center
justify-content-center
background-color-blue-500
padding-16">
<h1>CSS 속성명 그대로!</h1>
</div>
<!-- vs 다른 프레임워크 -->
<div class="flex flex-col items-center
justify-center bg-blue-500 p-4">
<h1>새로운 이름을 외워야 함</h1>
</div>Material Design 3를 완벽히 구현한 스타일 컴포넌트를 제공합니다. 버튼, 카드, 다이얼로그 등 모든 Material 3 컴포넌트가 준비되어 있어, 웹과 앱 모두에서 일관된 디자인 시스템을 구축할 수 있습니다.
<!-- Material 3 컴포넌트 사용 -->
<button class="m3-button m3-button-filled m3-button-primary">
Material 3 버튼
</button>
<card class="m3-card m3-card-elevated">
<h3>Material 3 카드</h3>
<p>완벽히 구현된 컴포넌트</p>
</card>완성된 Material 3 컴포넌트를 기본으로 사용하고, 약간의 커스터마이징이 필요할 때만 유틸리티를 활용합니다. 대부분의 경우 컴포넌트만으로 충분하며, 세밀한 조정이 필요할 때만 유틸리티로 덧칠합니다.
<!-- 1. 컴포넌트를 기본으로 사용 -->
<button class="m3-button m3-button-filled">
기본 버튼
</button>
<!-- 2. 약간의 커스터마이징만 필요할 때 유틸리티 사용 -->
<button class="m3-button m3-button-filled
margin-top-8
border-radius-12">
커스터마이징된 버튼
</button>표준 CSS 속성명을 사용하므로, CSS 기본 지식을 유지하면서 개발할 수 있습니다. 프레임워크에 종속되지 않으며, 언제든지 순수 CSS로 전환할 수 있는 자유를 제공합니다. CSS 지식을 잃지 않으므로 다른 프로젝트에서도 활용 가능합니다.
<!-- newtil-css 사용 -->
<div class="display-flex align-items-center">
<!-- 표준 CSS 지식 그대로 활용 -->
</div>
<!-- 나중에 순수 CSS로 전환 가능 -->
<style>
.flex-container {
display: flex;
align-items: center;
}
</style>
<div class="flex-container">
<!-- 동일한 CSS 지식 사용 -->
</div>Material 3 기반의 컴포넌트로 웹 애플리케이션과 모바일 앱 모두에서 동일한 디자인 시스템을 적용할 수 있습니다. 플랫폼 간 일관된 사용자 경험을 제공하며, 하나의 디자인 시스템으로 모든 플랫폼을 커버할 수 있습니다.
<!-- 웹과 앱 모두에서 동일한 컴포넌트 -->
<button class="m3-button m3-button-filled">
웹에서도, 앱에서도 동일
</button>
<!-- Material 3 디자인 시스템 -->
<div class="m3-card m3-card-elevated">
<h3>일관된 디자인</h3>
<p>모든 플랫폼에서 동일</p>
</div>표준 CSS 속성명을 사용하므로 기존 CSS 지식이 그대로 활용됩니다. 새로운 문법이나 약어를 외울 필요 없이, 이미 알고 있는 CSS 지식으로 바로 시작할 수 있습니다. 개발자 온보딩 시간을 크게 단축시킵니다.
<!-- 이미 알고 있는 CSS 속성명 -->
<div class="display-flex
flex-direction-row
align-items-center
justify-content-space-between
padding-16
background-color-white">
<!-- 새로운 문법 학습 불필요 -->
</div>
<!-- vs 다른 프레임워크: 새로운 문법 학습 필요 -->
<div class="flex row items-center
justify-between p-4 bg-white">
<!-- flex, row, items 등 새로 학습 -->
</div>