12장 프리셋

프리셋(preset)은 <html>에 붙인 속성 하나로 화면 전체의 크기·글꼴·색·모서리·그림자·밀도·움직임을 바꾸는 장치입니다. 축과 단계는 EDS와 MDS가 같고, 속성과 기본값은 각 디자인 시스템(DS)이 따로 소유합니다.

왜 필요한가

같은 컴포넌트라도 제품이 원하는 인상은 다릅니다. 업무 화면은 각지고 평평한 쪽을, 소비자 화면은 둥글고 입체적인 쪽을 고를 수 있습니다. 컴포넌트마다 값을 고치면 고칠 곳이 컴포넌트 수만큼 늘고, 손으로 맞춘 값은 곧 어긋납니다.

이전 Radius 프리셋이 반례입니다. 프리셋마다 컴포넌트 토큰을 다시 적어 EDS 하나만 182개 선언(7개 프리셋 × 26개)이었고, 토큰 하나를 더하면 여러 곳을 고쳐야 했습니다. 표에서 빠진 컴포넌트는 none 프리셋에서도 6px로 남았습니다. 프리셋은 값의 목록이 아니라 구조로 풀어야 합니다.

모델

축	EDS 속성	MDS 속성	EDS 기본	MDS 기본
Interface Size	data-e-interface-size	data-m-interface-size	속성 생략(100%)	속성 생략(100%)
Font	data-e-font-latin·-korean	data-m-font-latin·-korean	noto	noto
색	data-e-palette 등 4개	data-m-palette 등 4개	속성 생략(기본 연결)	속성 생략(기본 연결)
Radius	data-e-radius	data-m-radius	sm	sm
Shadow	data-e-shadow	data-m-shadow	sm	의미 기반
Density	data-e-density	없음	default	—
Motion	data-e-motion	data-m-motion	standard	standard
Icon	속성 없음, 앱 시작 시 등록	같음	기본 없음	기본 없음

• 축 이름과 단계는 공통입니다. 예를 들어 Shadow는 두 DS 모두 none부터 2xl까지 7단계입니다.
• 기본값은 DS의 역할로 정합니다. EDS는 정보 밀도가 높은 업무 화면, MDS는 브랜드 중립이 기준입니다.
• 속성과 토큰은 DS마다 소유합니다.

프리셋은 컴포넌트 CSS를 건드리지 않고 자기 진영의 토큰 값만 바꿉니다. Radius는 기준값 하나, Shadow는 컴포넌트별 그림자 토큰, Density는 높이·여백 스케일, Motion은 시간 토큰, 색은 계층 사이의 연결을 바꿉니다. 컴포넌트는 var(--e-button-radius)처럼 자기 토큰 하나만 읽으므로(8장) 프리셋이 바뀌어도 고칠 곳이 없습니다. 같은 이유로 Tailwind의 rounded-*·shadow-* 값은 그대로입니다. 루트 글자 크기를 바꾸는 Interface Size만 Tailwind의 rem 유틸리티까지 함께 키웁니다.

축별 규칙

Interface Size

large는 루트 글자 크기를 112.5%, extra-large는 125%로 바꿉니다. 백분율이라 사용자가 브라우저에 정한 기본 글자 크기 위에서 커집니다. 글자뿐 아니라 컴포넌트 높이·아이콘·간격이 같은 비율로 커집니다.

Font

본문 프리셋은 noto와 system 두 값입니다. 다른 글꼴 프리셋을 지운 이유는 11장에서 설명합니다.

색

색 프리셋은 토큰 계층의 다른 지점을 바꿉니다(8장). data-e-palette는 팔레트 원본을 ref 계층에서 바꾸고, data-e-primary·data-e-secondary는 sys 계층의 역할이 가리키는 색상(hue)을 바꿉니다. 예를 들어 data-e-primary="violet"이면 primary 역할의 모든 단계가 violet을 가리킵니다. data-e-neutral은 무채색 계열을 고릅니다. MDS도 같은 이름의 data-m-*를 씁니다. 색 모델 자체는 9장에서 다룹니다.

Radius — 기준값 하나에서 파생

--e-radius           0.25rem(4px)  ← 프리셋과 제품이 바꾸는 단 하나의 값
--e-radius-xs … 3xl  기준값 × 0.5 · 1 · 1.5 · 2 · 3 · 4 · 6   → 2 · 4 · 6 · 8 · 12 · 16 · 24px
--e-radius-none      0             --e-radius-full   9999px (둘 다 고정)

Nuxt UI(--ui-radius)와 shadcn/ui(--radius)가 같은 방식이며, 배수는 Nuxt UI v4 공식을 씁니다. MDS는 --m-radius로 같은 구조입니다. 프리셋은 기준값만 바꿉니다.

프리셋	기준값	컨트롤 · 카드 · 대화상자(px)
none	0	0 · 0 · 0
xs	0.125rem	2 · 3 · 3
sm(기본)	0.25rem	4 · 6 · 6
md	0.375rem	6 · 9 · 9
lg	0.5rem	8 · 12 · 12
xl	0.75rem	12 · 18 · 18
full	1rem	16 · 24 · 24

컨트롤은 ×1, 카드·대화상자는 ×1.5 단계를 쓰므로 어느 프리셋에서도 크기별 위계가 남습니다.

• 모양이 기능인 원형(라디오, 스위치, 원형 아바타, 상태 점)은 full로 고정해 none에서도 원입니다.
• 화면 가장자리에 붙는 EDS 시트·드로어·사이드바는 0입니다.
• 체크박스는 한 변의 1/3 이상을 직선으로 남겨, 큰 프리셋에서도 라디오와 구별됩니다.
• 상한·하한은 두지 않습니다. 비교한 선도 DS 16곳 중 모든 모서리에 상한·하한을 두는 곳은 없었습니다.

MDS 기본도 sm입니다. 2026-08-12 KST 이전 MDS 기본값은 당시 md 프리셋과 같아 버튼 6px, 카드 8px, 대화상자 16px이었습니다. 조회·결제처럼 작업 밀도가 높은 데스크톱 화면에서 경계보다 곡률이 먼저 보였습니다. 그래서 기본을 sm(컨트롤 4px·카드 6px)으로 내렸고, 더 둥근 표현은 제품이 명시 프리셋으로 고릅니다.

Shadow

EDS 기본은 sm입니다. MDS 기본은 프리셋 강도가 아니라 컴포넌트의 의미로 정합니다.

MDS 컴포넌트	기본 그림자
문서 흐름에 놓인 일반 표면(카드, 세그먼트, 탭)	없음
작은 조작 구분(스위치·슬라이더 손잡이)	xs
실제로 떠 있는 요소(메뉴, 콤보박스, 날짜 선택기, 대화상자, FAB)	md
가장자리 오버레이(시트)	lg

넓은 화면에 카드를 반복하면 테두리·큰 모서리·그림자가 콘텐츠보다 먼저 보입니다. 그래서 일반 표면은 평평하게 두고, 떠 있는 요소에만 그림자를 줘 층의 관계를 지킵니다. data-m-shadow를 명시하면 모든 컴포넌트 그림자를 그 강도로 다시 매핑합니다. 외곽선·포커스 링·구분선은 그림자가 아니므로 이 축의 대상이 아닙니다.

Density(EDS 전용)

compact·spacious는 높이·크기·여백·간격 토큰을 스케일에서 한 단계 아래·위로 옮깁니다. size 이름(e-button-md)은 그대로라 코드를 고치지 않습니다. 함께 쓰는 컴포넌트가 같이 움직이므로 비례도 유지됩니다.

density	표 행(sm)	버튼(md)	차이
기본	36px	32px	4px
compact	32px	28px	4px
spacious	40px	36px	4px

새 값을 만들지 않고 10장의 기존 스케일 안에서만 옮깁니다. 글자 크기, 배지·태그, 카드·대화상자 같은 큰 표면은 대상이 아닙니다.

Motion

EDS의 상호작용 시간은 100·150·200·300·500ms 다섯 단계, MDS는 100·150·300ms 세 단계입니다. fast·slow는 전체를 한 단계 빠르게·느리게 옮깁니다. 운영체제에서 움직임 줄이기를 켜면(prefers-reduced-motion: reduce) 프리셋과 관계없이 두 DS의 시간 토큰이 0이 됩니다(WCAG 2.3.3, AAA). 무한 반복 애니메이션은 시간이 0이어도 멈추지 않으므로 따로 처리합니다. 로딩 스피너는 상태를 알리는 필수 표시라 회전 대신 투명도 깜박임으로 바꾸고, 스켈레톤은 멈춥니다.

Icon provider

아이콘은 CSS 프리셋이 아닙니다. EIcon·MIcon core는 의미 이름(semantic name), regular | filled, 접근성, currentColor, 오른쪽에서 왼쪽으로 쓰는 언어(RTL)의 반전만 소유하고 기본 provider가 없습니다. 앱은 시작할 때 같은 진영의 add-on 하나를 등록합니다. Lucide·Material Symbols·Phosphor·Tabler 중에서 고르며, Material Symbols는 style(outlined | rounded | sharp)로 모양을 고릅니다.

app.use(createMIconProvider(createMMaterialSymbolsIconProvider({ style: "rounded" })));

문서 앱은 EDS에 Lucide, MDS에 Material Rounded를 등록합니다. 등록 없이 그리거나 지원하지 않는 이름을 쓰면 비슷한 모양으로 대신하지 않고 오류를 던집니다(fail-close). 페이지마다 provider를 바꾸지 않습니다.

실제 예

업무 콘솔이 조금 둥글고 조밀하며 빠른 화면을 원할 때입니다.

<html lang="ko" data-e-radius="md" data-e-density="compact" data-e-motion="fast">

프리셋에 없는 값이 필요하면 정해진 지점만 덮어씁니다.

:root, :root[data-e-radius] { --e-radius: 0.375rem; } /* 기준값 */
:root { --e-button-radius: var(--e-radius-lg); }       /* 컴포넌트 하나 */

EDS 속성에 e- 접두를 붙인 이유

3.1부터 EDS 프리셋 속성 11개는 색 축을 포함해 모두 data-e-*만 씁니다. 이유는 둘입니다.

• 소유권 표기가 비대칭이었습니다. EDS의 클래스는 e-*, 토큰은 --e-*인데 프리셋 속성만 접두가 없었습니다. MDS는 이미 data-m-*였습니다.
• 이름이 부딪혔습니다. EDS Motion 프리셋과 Reka UI NavigationMenu의 방향 상태가 같은 data-motion을 썼습니다.

옛 이름의 별칭은 두지 않았습니다. 옛 속성을 그대로 두면 오류 없이 프리셋만 적용되지 않습니다. 별칭 없는 변경을 minor 버전으로 낸 것은 이 개명에 한정한 예외이며, 결정 당시 3.x를 채택한 소비처가 없다는 근거 위에서 승인했습니다. data-theme과 컴포넌트 상태 속성(data-state 등)은 그대로이고, 폐기된 data-icon-style은 provider 등록으로 옮깁니다.

경계와 예외

• 한 페이지는 한 DS만 쓰므로 EDS 페이지의 data-m-*는 아무것도 바꾸지 않습니다.
• Density는 하위 영역(<section data-e-density="compact">)에도 적용됩니다. 반면 Radius 기준값은 :root에서만 바꿉니다. 단계 토큰이 :root에서 계산되므로 하위 요소에서 기준값만 바꾸면 반영되지 않습니다.
• MDS 시트·드로어는 모바일 bottom sheet 관례에 따라 가장자리 0 대신 lg(기본 8px)를 유지합니다.

정리

• 프리셋은 컴포넌트 CSS가 아니라 토큰 값만 바꿉니다.
• 축과 단계는 공통이고, 기본값과 속성은 EDS(data-e-*)·MDS(data-m-*)가 따로 소유합니다.
• Radius는 기준값 하나에서 모든 단계를 파생하며, 상한·하한을 두지 않습니다.
• MDS의 그림자는 의미로 정합니다. 일반 표면은 평평하고, 떠 있는 요소만 그림자를 가집니다.
• 움직임 줄이기 설정은 프리셋보다 우선합니다. 아이콘은 프리셋이 아니라 앱 시작 시 등록하는 provider입니다.

정본

• leysys-design docs/specs/PRESET-SYSTEMS.md — 축별 토큰 구조, 프리셋 값, 제품 커스터마이즈
• leysys-design docs/decisions/RADIUS-SINGLE-BASE-VALUE-2026-09-27.md — 기준값 하나에서 파생하는 Radius
• leysys-design docs/decisions/RADIUS-RHYTHM-2468-2026-09-30.md — 컴포넌트별 기본 단계 매핑
• leysys-design docs/decisions/MDS-RADIUS-DEFAULT-SM-2026-08-12.md — MDS 기본 radius sm
• leysys-design docs/decisions/MDS-RESPONSIVE-VISUAL-DEFAULT-NEUTRALIZATION-2026-07-18.md — 의미 기반 그림자
• leysys-design docs/decisions/MOTION-PREFERS-REDUCED-COMPONENT-CLAMP-2026-05-02.md — 움직임 줄이기 처리
• leysys-design docs/decisions/ICON-PROVIDER-ADDON-ARCHITECTURE-2026-08-22.md — 아이콘 provider add-on
• leysys-design docs/decisions/EDS-PRESET-ATTRIBUTE-E-PREFIX-2026-09-30.md, docs/migrations/outbound/UPGRADE-TO-3.1.md — data-e-* 개명과 이관 절차