2026 웹사이트 빌더 설계 정교화 원칙
Framer/Linear/Stripe급 세련됨의 핵심 구성요소
최신화: 2026년 6월 14일 대상: 크라우니 웹스튜디오 디자인 시스템, 이미지수집기 표준화 참조: docs.crowny.org, design.crowny.org 연동
I. 타이포그래피 스케일 시스템
1. 모듈러 스케일 (Modular Scale)
토큰 구조:
--font-size-xs: 10px
--font-size-sm: 12px
--font-size-base: 14px
--font-size-lg: 18px (base × 1.29)
--font-size-xl: 24px (base × 1.71)
--font-size-2xl: 32px (base × 2.29)
--font-size-3xl: 42px (base × 3.0)
--font-size-4xl: 56px (base × 4.0)
--font-size-5xl: 72px (base × 5.14)
2. 가변 폰트 (Variable Fonts) + 반응형 스케일
- 단일 파일 로딩: Wght(weight), Wdth(width), Opsz(optical size) 축 변수화
- CSS clamp() 유동 스케일:
cssfont-size: clamp(12px, 2vw + 0.5rem, 24px);
line-height: clamp(1.4, 1.2 + 0.8vw, 1.8);
3. 문자 행 높이 (Line Height) & 글자 간격 (Letter Spacing)
II. 8pt 그리드 & 수직 리듬
1. 8pt 기본 간격 규칙
토큰 명명:
--spacing-xs: 4px (8 ÷ 2)
--spacing-sm: 8px
--spacing-md: 16px (8 × 2)
--spacing-lg: 24px (8 × 3)
--spacing-xl: 32px (8 × 4)
--spacing-2xl: 48px (8 × 6)
--spacing-3xl: 64px (8 × 8)
--spacing-4xl: 80px (8 × 10)
2. 수직 리듬 구현 전략
3. 브레이크포인트 간 조정
Mobile (320px): spacing ÷ 1.5배 (compact)
Tablet (768px): spacing × 1배
Desktop (1440px): spacing × 1.25배 (relaxed)
III. 색상 시스템 (중성 + 강조)
1. 의미론적(Semantic) 색상 구조
계층 1: 원시 토큰 (Primitive)--color-neutral-0: #ffffff
--color-neutral-50: #f8f8f8
--color-neutral-100: #f0f0f0
--color-neutral-200: #e5e5e5
--color-neutral-300: #cccccc
--color-neutral-500: #7f7f7f
--color-neutral-700: #333333
--color-neutral-900: #000000
--color-primary-50: #eef2ff (blue)
--color-primary-500: #3b82f6
--color-primary-900: #1e3a8a
계층 2: 의미론적 토큰 (Semantic)
--color-background: --color-neutral-0
--color-background-secondary: --color-neutral-50
--color-surface: --color-neutral-100
--color-text-primary: --color-neutral-900
--color-text-secondary: --color-neutral-600
--color-text-tertiary: --color-neutral-400
--color-border: --color-neutral-200
--color-action-primary: --color-primary-500
--color-action-hover: --color-primary-600
--color-action-disabled: --color-neutral-300
계층 3: 컴포넌트 토큰 (Component)
--button-primary-bg: --color-action-primary
--button-primary-text: --color-neutral-0
--input-border: --color-border
--input-bg: --color-background
2. 접근성 대비율 (WCAG AA/AAA & APCA)
검증 도구:
- WebAIM Contrast Checker (WCAG)
- APCA Contrast Calculator (인지 기반)
- 4% 스쿼시 테스트 (시각장애 시뮬)
3. 다크 모드 토큰 (CSS 변수)
@media (prefers-color-scheme: dark) {
--color-background: --color-neutral-900;
--color-text-primary: --color-neutral-100;
--color-border: --color-neutral-700;
--color-action-primary: --color-primary-400;
}
IV. 마이크로 디테일 (Micro-Details)
1. 그림자 시스템 (Box-Shadow Tokens)
원칙: 통일된 광원 (일관된 각도 비율)/* 엘리베이션 기반 */
--shadow-sm:
0 1px 2px rgba(0, 0, 0, 0.05),
0 1px 3px rgba(0, 0, 0, 0.1);
--shadow-md:
0 4px 6px rgba(0, 0, 0, 0.07),
0 2px 4px rgba(0, 0, 0, 0.05);
--shadow-lg:
0 10px 15px rgba(0, 0, 0, 0.1),
0 4px 6px rgba(0, 0, 0, 0.05);
--shadow-xl:
0 20px 25px rgba(0, 0, 0, 0.1),
0 8px 10px rgba(0, 0, 0, 0.04);
--shadow-2xl:
0 25px 50px rgba(0, 0, 0, 0.15);
구현 팁:
- 다층 구성 (3~4개 레이어) → 사실감
- 색상 일치: 검은색 대신 배경색 기반 색상화
filter: drop-shadow()사용 (투명 요소, 모양 추적)
2. 경계 반올림 (Border-Radius Tokens)
--radius-xs: 2px (최소, 슬라이더 thumb)
--radius-sm: 4px (배지, 작은 버튼)
--radius-md: 8px (기본 버튼, 입력 필드)
--radius-lg: 12px (카드)
--radius-xl: 16px (큰 모달)
--radius-2xl: 24px (섹션 헤더)
--radius-full: 9999px (완전한 원형, 칩)
3. 테두리 & 스트로크 (Border Tokens)
--border-width-thin: 1px
--border-width-normal: 2px
--border-width-thick: 3px
--border-color-light: --color-neutral-200
--border-color-normal: --color-neutral-300
--border-color-focus: --color-action-primary
V. 정제된 모션 (Refined Motion)
1. 기간 (Duration) 토큰
--duration-instant: 0ms (포커스, 상태 변화)
--duration-fast: 150ms (마이크로 애니메이션)
--duration-normal: 200ms (버튼 클릭, fade)
--duration-slow: 300ms (모달 등장, 주요 전환)
--duration-slower: 500ms (페이지 전환)
2. 이징 곡선 (Easing Functions)
--ease-linear: cubic-bezier(0, 0, 1, 1) (없음)
--ease-in: cubic-bezier(0.42, 0, 1, 1) (가속)
--ease-out: cubic-bezier(0, 0, 0.58, 1) (감속 ★ 강조)
--ease-in-out: cubic-bezier(0.42, 0, 0.58, 1) (자연스러움)
--ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55) (활력)
--ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275) (탄성)
실무 권칙:
- 등장 (entrance): ease-out (150~200ms)
- 퇴장 (exit): ease-in (150ms)
- 상호작용 (hover): ease-in-out (200ms)
3. 마이크로 애니메이션 예시
css/* 버튼 클릭 */
button:active {
transform: scale(0.97);
transition: all 100ms ease-out;
}
/* 링크 호버 */
a:hover {
color: var(--color-action-primary);
transition: color 150ms ease-out;
}
/* 폼 포커스 */
input:focus {
border-color: var(--color-action-primary);
box-shadow: 0 0 0 3px var(--color-primary-50);
transition: all 200ms ease-in-out;
}
/* 로딩 스피너 */
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.spinner {
animation: spin 1s linear infinite;
}
VI. 섹션 리듬 & 레이아웃
1. 수평 간격 (섹션 간 마진)
--section-gap-compact: 32px (모바일, 밀집)
--section-gap-normal: 48px (기본)
--section-gap-relaxed: 64px (데스크톱, 호흡)
--section-gap-hero: 96px (히어로 섹션)
2. 벤토 그리드 (Bento Grid) 원칙
- 앵커 셀 (가장 큼, 좌상단): 강한 콘텐츠 배치
- 지지 셀: 2차 콘텐츠, 다양한 크기 (1×1, 1×2, 2×1, 2×2)
- 간격: 12px~24px (일관성 ★)
- 구성: 67% SaaS 제품이 채택 (2024~2026)
html<!-- 예시: 3×3 그리드 -->
<div class="grid gap-4">
<card class="col-span-2 row-span-2">큰 콘텐츠</card>
<card>작은 1</card>
<card>작은 2</card>
<card class="col-span-2">와이드</card>
</div>
3. 카드 컴포넌트 구조
Card
├─ Header (패딩 16px, border-bottom)
├─ Body (패딩 20px)
├─ Footer (패딩 16px, 정렬 right)
└─ Shadow: --shadow-md
VII. CSS 토큰 설계 (Tailwind v4 기준)
1. 토큰 파일 구조 (tokens.css)
css@import "@fontsource/inter/variable.css";
@import "@fontsource/jetbrains-mono/variable.css";
:root {
/* 색상 (원시) */
--color-neutral-0: #ffffff;
--color-neutral-900: #000000;
--color-primary-500: #3b82f6;
/* 타이포그래피 */
--font-family-sans: "Inter", sans-serif;
--font-family-mono: "JetBrains Mono", monospace;
--font-size-base: 14px;
/* 간격 */
--spacing-unit: 8px;
--spacing-xs: calc(var(--spacing-unit) * 0.5);
--spacing-sm: calc(var(--spacing-unit) * 1);
--spacing-md: calc(var(--spacing-unit) * 2);
/* 그림자 */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
/* 모션 */
--duration-fast: 150ms;
--ease-out: cubic-bezier(0, 0, 0.58, 1);
}
2. Tailwind v4 설정 (tailwind.config.ts)
typescriptimport type { Config } from "tailwindcss";
export default {
content: ["./src/**/*.{js,ts,jsx,tsx}"],
theme: {
extend: {
colors: {
"neutral": {
"0": "var(--color-neutral-0)",
"900": "var(--color-neutral-900)"
},
"primary": {
"500": "var(--color-primary-500)"
}
},
spacing: {
"xs": "var(--spacing-xs)",
"sm": "var(--spacing-sm)",
"md": "var(--spacing-md)"
},
fontSize: {
"xs": "var(--font-size-xs)",
"sm": "var(--font-size-sm)",
"base": "var(--font-size-base)"
},
boxShadow: {
"sm": "var(--shadow-sm)",
"md": "var(--shadow-md)"
},
animation: {
"spin": "spin 1s linear infinite"
}
}
}
} as Config;
3. ESLint 규칙 (스타일 드리프트 방지)
json{
"rules": {
"no-restricted-syntax": [
"warn",
{
"selector": ":matches(JSXAttribute[name.name=/^class/]) > JSXExpressionContainer:has-descendant(Literal[value=/^(ml-|mt-|pt-|pl-|px-|py-)-?\\[\\d+px?\\]$/])",
"message": "Avoid arbitrary values; use design tokens instead"
}
]
}
}
VIII. 크라우니 이미지수집기 표준화
1. 출처 각인 (Attribution) 프로토콜
image {
data-source: "unsplash:// | pexels:// | pixabay:// | internal://"
data-creator: "이름"
data-license: "CC0 | CC-BY | CC-BY-SA | Commercial"
data-original-url: "https://..."
}
자동 생성 인증 마크:
html<figure>
<img src="..." data-source="unsplash://..." />
<figcaption>
Photo by <a href="#">Creator Name</a> on Unsplash
</figcaption>
</figure>
2. 감사 (Gratitude) 링크 페이지
/credits →
├─ 이미지 제공자 목록
├─ 폰트 출처
├─ 디자인 영감
└─ 오픈소스 라이브러리
3. 이미지 최적화 가이드
loading="lazy" 필수IX. 크라우니 웹스튜디오 체크리스트
디자인 검증
- 타이포 스케일 모든 크기 검증 (비율 일관성)
- 8pt 그리드 90% 이상 준수
- 색상 WCAG AA 이상 대비 확인
- 다크 모드 의미론적 토큰 동작
- 마이크로 애니메이션 150~300ms 범위
- 섹션 간격 32px 이상 (compact 제외)
- 벤토 그리드 앵커 셀 명확
- 카드 shadow 엘리베이션 3단계 이상
개발 검증
- CSS 변수 100% 토큰화 (임의값 0%)
- Tailwind 빌드 최적화 (증분 < 1s)
- 포커스 인디케이터 Lc 60 이상
- 터치 타겟 최소 44×44px
- 모션 GPU 가속 (transform, opacity만)
접근성
- 스크린리더 테스트 (NVDA, JAWS)
- 키보드 네비게이션 전 동선 검증
- 4배 줌 리플로우 테스트
- 색상 구분 외 시각 단서 필수
X. 참고 자료 & 영감
설계 사례
- Stripe: stripe.com (고대비, 최소 모션, 기하 타이포)
- Linear: linear.app (자주색 강조, 호버 애니메이션, 카드 리듬)
- Vercel: vercel.com (명확한 기울임, 파란색 주조)
- Apple: apple.com (공백 극대화, 비디오 통합)
도구
- 설계: Figma (토큰 플러그인, 컴포넌트 라이브러리)
- 개발: Tailwind CSS v4 (CSS 우선)
- 검증: WebAIM, APCA, axe DevTools
- 성능: Lighthouse, Core Web Vitals
심화 학습
- Design Tokens: W3C Community Group (공식)
- WCAG 2.2: w3.org/WAI/
- Motion Design: Material Design 3
XI. 실행 로드맵
Phase 1 (4주): 토큰 체계 정의
- 색상 팔레트 생성 (원시 → 의미론적)
- 타이포 스케일 확정 (모듈러 비율)
- 간격 토큰 완성 (8pt 기반)
- 모션 프리셋 정의
Phase 2 (4주): 컴포넌트 라이브러리
- 기본 UI (버튼, 입력, 카드)
- 고급 컴포넌트 (모달, 드롭다운, 테이블)
- 마이크로 애니메이션 통합
- 다크 모드 검증
Phase 3 (4주): 이미지 & 접근성
- 이미지수집기 출처 자동화
- 색상 대비 전수 검증
- 포커스 인디케이터 교체
- 스크린리더 검증
Phase 4 (2주): 배포 & 문서화
- design.crowny.org 토큰 동기화
- Figma Design System 업데이트
- /credits 페이지 자동 생성
- docs.crowny.org 학습 가이드
최종 목표: Framer/Linear/Stripe 수준의 세련된 설계 시스템으로 크라우니 웹 전체 도메인(crowny.org, tiomta.com)의 시각적 일관성 극대화.