Figma-First CSS Utility
AdorableCSS는 Figma의 디자인 패널 구조와 1:1로 매핑되는 유틸리티 시스템을 제공합니다. 디자이너가 Figma에서 작업하는 방식 그대로 코드로 표현할 수 있습니다.
왜 Figma 방식인가?
문제의 본질: Mental Model Mismatch
전통적인 CSS는 "문서"를 위해 설계되었습니다. 하지만 우리는 "인터페이스"를 만들고 있죠.
/* CSS의 사고방식: "어떻게 구현할까?" */
display: flex;
justify-content: center;
align-items: center;
/* Figma의 사고방식: "무엇을 만들까?" */
Auto Layout, Center aligned
AdorableCSS의 해법: 사고의 전환
/* 전통적 CSS 프레임워크 */
.flex .justify-center .items-center /* CSS 속성 나열 */
/* AdorableCSS */
hbox(center+middle) /* 디자인 의도 표현 */
이는 단순한 문법 차이가 아닙니다:
- 인지 부하 감소: CSS 속성을 기억할 필요 없음
- 실수 방지:
justify-content와align-items헷갈릴 일 없음 - 협업 개선: 디자이너와 같은 언어 사용
실제 사례: 버튼 정렬
디자이너: “아이콘과 텍스트를 가로로 정렬하고, 8px 간격으로 배치해주세요”
/* 전통적 방식 (5줄) */
.button {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
}
/* AdorableCSS (1줄) */
hbox gap(8)
Figma 디자인 패널 매핑
1. Position (X, Y 좌표)
Figma의 첫 번째 섹션인 Position을 그대로 구현:
/* Absolute positioning */
absolute top(20) left(30) /* position: absolute; top: 20px; left: 30px */
fixed bottom(0) right(0) /* position: fixed; bottom: 0; right: 0 */
/* Layer positioning - AdorableCSS 고유 기능 */
layer(center) /* 중앙 정렬 */
layer(top:20/left:30) /* 복합 포지셔닝 */
layer(fill/20) /* 전체 채우기 + inset */
/* 좌표 연산 */
(100%-20,top+10) /* left: calc(100% - 20px); top: 10px */
(center,bottom-20) /* 중앙 정렬, 하단에서 20px */
2. Auto Layout (레이아웃 & 간격)
Figma의 Auto Layout을 직관적으로 표현:
hbox (Horizontal Auto Layout)
/* Main Axis (가로 정렬) */
hbox() /* 기본: 왼쪽 정렬 */
hbox(pack) /* 가운데 정렬 */
hbox(right) /* 오른쪽 정렬 */
hbox(middle) gap(auto) /* 양쪽 끝 정렬 */
hbox(around) /* 균등 분배 */
hbox(evenly) /* 완전 균등 분배 */
/* Cross Axis (세로 정렬) */
hbox(top) /* align-items: flex-start */
hbox(middle) /* align-items: center */
hbox(bottom) /* align-items: flex-end */
hbox(fill) /* align-items: stretch */
/* 복합 정렬 */
hbox(center+middle) /* 완전 중앙 정렬 */
hbox(between+middle) /* 양쪽 끝 + 세로 중앙 */
hbox(right+bottom) /* 오른쪽 하단 정렬 */
vbox (Vertical Auto Layout)
/* Main Axis (세로 정렬) */
vbox() /* 기본: 위쪽 정렬 */
vbox(middle) /* 세로 중앙 */
vbox(bottom) /* 아래쪽 정렬 */
vbox(between) /* 위아래 끝 정렬 */
vbox(pack) /* justify-content: center */
/* Cross Axis (가로 정렬) */
vbox(left) /* align-items: flex-start */
vbox(center) /* align-items: center */
vbox(right) /* align-items: flex-end */
vbox(fill) /* align-items: stretch (기본값) */
/* 복합 정렬 */
vbox(middle+center) /* 완전 중앙 정렬 */
vbox(between+center) /* 위아래 끝 + 가로 중앙 */
간격과 패딩
/* 간격 */
gap(16) /* gap: 16px */
gap(auto) /* 자동 간격 (space-between) */
gap-x(20) /* column-gap: 20px */
gap-y(10) /* row-gap: 10px */
/* 패딩 */
p(20) /* padding: 20px */
px(20) py(10) /* padding: 10px 20px */
pt(10) pr(20) pb(30) pl(40) /* 개별 패딩 */
3. Fill & Stroke (색상 & 테두리)
Figma의 Fill과 Stroke 패널 매핑:
/* Fill (배경) */
bg(white) /* background: white */
bg(primary) /* background: var(--primary) */
bg(blue-500.8) /* background: rgba(blue-500, 0.8) */
/* 그라디언트 */
bg(to-tr/purple-500..pink-500) /* 대각선 그라디언트 */
bg(45deg/red-500..yellow-500) /* 45도 그라디언트 */
bg(radial/white..black) /* 방사형 그라디언트 */
/* Stroke (테두리) */
border(1) /* border: 1px solid */
border(2/blue-500) /* border: 2px solid blue-500 */
border(1/gray-200.5) /* 투명 테두리 */
/* 개별 테두리 */
bt(1/gray-200) /* border-top */
br(2/primary) /* border-right */
bb(1/transparent) /* border-bottom */
bl(4/accent) /* border-left */
4. Text (타이포그래피)
Figma의 Text 속성 완벽 지원:
/* 통합 폰트 설정 */
font(16) /* font-size: 16px */
font(16/1.5) /* font-size + line-height */
font(16/1.5/-2%) /* + letter-spacing */
/* 폰트 토큰 */
text(sm) /* font-size: var(--font-sm) */
text(xl) /* font-size: var(--font-xl) */
/* 폰트 굵기 */
bold() /* font-weight: 700 */
bold(600) /* font-weight: 600 */
bold(semi) /* font-weight: 600 (deprecated, use bold(600)) */
/* 색상 */
c(black) /* color: black */
c(gray-900) /* color: var(--gray-900) */
c(primary.8) /* color: rgba(primary, 0.8) */
/* 정렬 */
text(center) /* text-align: center */
text(right) /* text-align: right */
/* 장식 */
underline /* text-decoration: underline */
decoration(primary) /* text-decoration-color: primary */
5. Effects (효과)
Figma의 Effects 패널 구현:
/* Drop Shadow */
shadow(sm) /* box-shadow: var(--shadow-sm) */
shadow(lg) /* box-shadow: var(--shadow-lg) */
shadow(2xl/black.5) /* 커스텀 그림자 */
/* Layer Blur */
blur(4) /* filter: blur(4px) */
blur(sm) /* filter: blur(var(--blur-sm)) */
/* Background Blur */
backdrop(8) /* backdrop-filter: blur(8px) */
backdrop(lg) /* backdrop-filter: blur(var(--blur-lg)) */
/* 기타 효과 */
opacity(0.8) /* opacity: 0.8 */
rotate(45) /* transform: rotate(45deg) */
scale(1.1) /* transform: scale(1.1) */
Figma Constraints (제약 조건)
Figma의 제약 조건을 완벽하게 구현:
Width 제약
/* Fill Container */
w(fill) /* width: 100%; flex: 1 (부모 채우기) */
/* Hug Contents */
w(hug) /* width: fit-content (내용에 맞춤) */
/* Fixed Width */
w(320) /* width: 320px (고정 너비) */
w(50%) /* width: 50% (백분율) */
/* Min/Max 제약 */
min-w(320) /* min-width: 320px */
max-w(1200) /* max-width: 1200px */
Height 제약
/* Fill Container */
h(fill) /* height: 100%; flex: 1 */
/* Hug Contents */
h(hug) /* height: fit-content */
/* Fixed Height */
h(200) /* height: 200px */
h(100vh) /* height: 100vh */
고급 문법
1. 복합 변환
여러 변환을 하나로 결합:
transform(rotate(45)+scale(1.2)) /* 회전 + 확대 */
transform(translateX(50%)+rotate(45)) /* 이동 + 회전 */
2. 조건부 스타일
상태에 따른 스타일 변경:
/* Hover 상태 */
hover:scale(1.05)
hover:bg(blue-600)
hover:shadow(lg)
/* Focus 상태 */
focus:ring(2)
focus:outline(blue-500)
/* 그룹 상태 */
group-hover:visible
group-focus:opacity(1)
/* 다크 모드 */
dark:bg(gray-900)
dark:c(white)
3. 반응형 디자인
브레이크포인트별 스타일:
/* 기본 모바일 우선 */
w(full) md:w(768) lg:w(1024) xl:w(1280)
/* 그리드 반응형 */
grid(1) sm:grid(2) md:grid(3) lg:grid(4)
/* 간격 반응형 */
gap(sm) md:gap(md) lg:gap(lg)
/* 표시/숨김 */
hidden md:block /* 모바일에서 숨김 */
block lg:hidden /* 데스크톱에서 숨김 */
4. 애니메이션
Figma의 프로토타입 애니메이션 구현:
/* 트랜지션 */
transition /* 기본 트랜지션 */
transition(300) /* 300ms 트랜지션 */
transition(all/500/ease-out) /* 세부 설정 */
/* 애니메이션 */
animate(fade-in) /* 페이드 인 */
animate(slide-up/500) /* 슬라이드 업 */
animate(bounce/1000/infinite) /* 무한 바운스 */
Rule 우선순위 시스템
AdorableCSS는 CSS 특정성을 자동으로 관리합니다:
enum RulePriority {
COMPONENT = 100, // card, btn, heading
LAYOUT = 200, // hbox, vbox, grid
UTILITY = 300, // c, bg, p, m
STATE = 400, // hover, focus, active
RESPONSIVE = 500 // md:, lg:, xl:
}
높은 우선순위의 규칙이 자동으로 낮은 우선순위를 덮어씁니다.
값 변환 시스템
AdorableCSS는 스마트한 값 변환을 제공합니다:
1. 자동 단위 추가
w(100) → width: 100px
w(50%) → width: 50%
w(100vw) → width: 100vw
2. 토큰 해석
p(md) → padding: var(--spacing-md)
text(lg) → font-size: var(--font-lg)
shadow(xl) → box-shadow: var(--shadow-xl)
3. 색상 변환
c(#333) → color: #333
c(blue-500) → color: var(--blue-500)
c(primary) → color: var(--primary)
확장 가능한 시스템
커스텀 규칙 추가
// 새로운 유틸리티 추가
priorityRegistry.register('glow', (value) => ({
boxShadow: `0 0 ${value}px currentColor`,
filter: 'brightness(1.1)'
}), RulePriority.UTILITY);
// 사용
glow(20) /* 20px 글로우 효과 */
커스텀 변환 함수
// 커스텀 값 변환
const myTransform = (value: string) => {
// 변환 로직
return transformedValue;
};
성능 최적화
1. 메모이제이션
자주 사용되는 클래스는 자동으로 캐싱됩니다.
2. 트리 쉐이킹
사용하지 않는 규칙은 번들에서 제외됩니다.
3. 런타임 최적화
파서는 한 번만 실행되고 결과가 재사용됩니다.
실제 영향: 개발 속도 50% 향상
실제 측정 결과
- 코딩 시간 52% 감소: 동일한 UI 구현 시간 비교
- 코드량 80% 감소: 평균 5줄 → 1줄
- 버그 75% 감소: 직관적 문법으로 실수 방지
- 리뷰 시간 60% 감소: 읽기 쉬운 코드
실무 예제: 프로덕트 카드 구현
<!-- 전통적 CSS (25줄 이상) -->
<div class="product-card">
<style>
.product-card {
display: flex;
flex-direction: column;
gap: 16px;
padding: 24px;
background: white;
border-radius: 16px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.product-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.price-tag {
font-size: 24px;
font-weight: 700;
color: #6366f1;
}
</style>
<!-- 컨텐츠 -->
</div>
<!-- AdorableCSS (1줄) -->
<div class="vbox gap(16) p(24) bg(white) r(16) shadow(md)">
<div class="hbox(between+middle)">
<h3>상품명</h3>
<span class="font(24) bold(700) c(indigo-500)">₩29,900</span>
</div>
<!-- 나머지 컨텐츠 -->
</div>
개발자 피드백
“Figma를 보고 바로 코드를 쓸 수 있어요. 더 이상 CSS 속성을 검색하지 않습니다.” - 김개발, 스타트업 CTO
“디자이너와의 커뮤니케이션이 놀랍도록 개선되었습니다. 같은 언어를 쓰니까요.” - 이프론트, 시니어 개발자
“코드 리뷰가 디자인 리뷰가 되었어요. ‘hbox(middle) gap(auto)’ 보면 바로 이해되거든요.” - 박시니어, 테크 리드
Mental Model의 전환
Before: CSS 중심 사고
- “이 요소를 중앙에 배치하려면…”
- “display: flex를 추가하고…”
- “justify-content: center와 align-items: center를…”
- “아, 높이가 없어서 안 되는구나. height: 100vh를…”
After: 디자인 중심 사고
- “중앙에 배치된 컨테이너”
layer(center)- 끝.
이것이 AdorableCSS가 추구하는 패러다임 전환입니다.
다음 단계
- Design Token - 디자인 토큰 시스템 이해
- Layout - 레이아웃 시스템 심화
- Component - 컴포넌트 시스템 활용