Leysys Docs

10장 크기와 수치 체계 ​

값은 0.125rem(2px)의 배수, 크기 단계는 md를 가운데 둔 홀수 대칭, 높이는 4px 간격 사다리와 8px 계층 차이로 정합니다. 숫자를 외우지 않고 규칙에서 도출하며, 규칙이 적용되지 않는 곳은 정본에 밝혀 둡니다.

왜 필요한가 ​

크기를 컴포넌트마다 따로 정하면 5px, 9px처럼 근거 없는 값이 곳곳에 생기고, 나란히 놓인 요소의 크기와 위치가 조금씩 어긋납니다. 단계 이름도 흔들립니다. Leysys도 한때 「대부분 5단계, 예외 넷」으로 운영했습니다. 예외는 버튼 7단계, 표 6단계, 아바타 6단계, 폭 8단계였고, 페이지 번호는 따로 작은 쪽으로 치우친 3단계(xs·sm·md)를 썼습니다. 모두 단계 수가 짝수이거나 md를 기준으로 좌우가 맞지 않았습니다. 그러면 「이 컴포넌트에 2xl이 있는가」, 「기본이 md인가」를 컴포넌트마다 외워야 합니다. 2026-05-25 KST, 예외 목록을 하나의 공리로 바꿨습니다.

숫자 체계 ​

  • 기본 단위는 0.125rem입니다. 루트 글자 크기 16px에서 2px입니다. 크기와 간격은 이 배수로 정하므로 원칙적으로 짝수 px가 됩니다.
  • 큰 단위를 먼저 씁니다. 8px 배수를 먼저, 그다음 4px, 마지막으로 2px 배수를 씁니다.
  • 페이지와 패턴의 간격은 8px 배수입니다. 같은 묶음 안의 블록 사이는 gap-4(16px), 독립된 큰 섹션 사이는 gap-6(24px)입니다. 2·4·6·12px 같은 작은 간격은 컴포넌트 내부에서만 씁니다. 입력과 그 값을 바로 실행하는 버튼 사이는 gap-0.5(2px)입니다.
  • 홀수는 공식에서 나올 때만 남깁니다. 메뉴 sm 크기의 세로 안쪽 여백 5px는 6px로, 달력 머리 칸의 9px 글자는 10px로 고쳤습니다. 반면 Stepper의 연결선 위치는 calc(var(--e-stepper-indicator-size) / 2 - 1px)로 계산하므로, md 표시기 28px에서 13px이 나와도 그대로 둡니다.
  • 값은 rem으로 적습니다. 그래서 루트 글자 크기를 바꾸면 전체가 같은 비율로 커집니다(아래 Interface Size).

크기 단계 공리 ​

모든 컴포넌트의 크기 단계는 홀수 개, md 중심, 좌우 대칭입니다.

단수이름대표 컴포넌트
3sm · md · lgTabs, Toggle, List, Banner, Segmented
5xs … md … xlAccordion, Alert, Badge, Card, Checkbox, Switch, Tag 등
72xs … md … 2xlTable(행 28~52px), Avatar(12~64px)
93xs … md … 3xlButton(16~48px), Input
114xs … md … 4xlDialog 폭(14~56rem, 224~896px)
  • 단수는 항상 홀수이고, md 좌우로 같은 수만큼 늘립니다.
  • md가 기본 크기입니다.
  • 작은 쪽은 xs → 2xs → 3xs, 큰 쪽은 xl → 2xl → 3xl로 늘며 Nxs와 Nxl이 짝입니다.
  • 짝수 단수와 한쪽으로 치우친 이름 목록은 쓰지 않습니다.

작은 크기를 기본으로 두고 싶으면 이름 목록이 아니라 기본값으로 해결합니다. 페이지 번호(Pagination)는 조밀한 업무 표 아래에 놓여 기본이 sm이지만, 이름은 xs~xl 다섯 단계 대칭입니다.

이 공리는 한쪽만 늘리는 것도 막습니다. MDS 필터 칩에 조밀한 화면용 xs(28px)를 다시 두기로 하자, 대칭을 맞추려고 xl(44px)도 함께 추가해 28·32·36·40·44px 다섯 단계가 되었습니다. 기본은 그대로 sm(32px)입니다.

높이 3계층 ​

높이는 안에 다른 요소가 들어가는지에 따라 세 계층으로 나눕니다.

text
Atomic     = 진영의 기본 컨트롤 높이 (버튼, 입력, 선택, 사이드바 메뉴 항목)
Container  = Atomic + 8px   (표 행, 목록 행)
Wrapper    = Container + 8px (머리글, 하단 탭바 같은 더 큰 막대)
단계 사이 4px · md 중심 대칭 · 단수는 홀수
계층EDS (Atomic md = 32)MDS (Atomic md = 40)
Atomic24 · 28 · 32 · 36 · 4032 · 36 · 40 · 44 · 48
Container32 · 36 · 40 · 44 · 4840 · 44 · 48 · 52 · 56
Wrapper40 · 44 · 48 · 52 · 5648 · 52 · 56 · 60 · 64

값은 px이며 xs·sm·md·lg·xl 순서입니다. 토큰으로는 다음과 같습니다.

css
--e-element-height-md: 2rem;  /* 32px, EDS Atomic */
--e-tr-height-md: 2.5rem;     /* 40px, EDS Container(표 행) */
--e-wrapper-height-md: 3rem;  /* 48px, EDS Wrapper */
--m-height-button: 2.5rem;    /* 40px, MDS Atomic */
--m-height-list: 3rem;        /* 48px, MDS Container */
--m-height-header: 3.5rem;    /* 56px, MDS Wrapper */

값을 복사하지 않고 도출한다 ​

이 표에서 중요한 것은 숫자보다 규칙입니다. 두 진영은 기준점(앵커)이 다릅니다. EDS의 Atomic 기준은 md 32px입니다. MDS는 정보 밀도가 EDS보다 한 층 낮아, Atomic을 EDS Container와 같은 사다리에 둡니다(md 40px, 2026-09-27 KST에 48px에서 옮김). 규칙은 같고 기준점만 다르므로, EDS 숫자를 MDS에 그대로 가져오면 MDS 안의 일관성이 깨집니다.

도출한 값은 반드시 검산합니다. MDS Container md 48px는 이미 있던 목록 행 높이 --m-height-list(48px)와 같습니다. Wrapper md 56px는 머리글, 하단 탭바, 하단 행동 버튼 영역의 높이(56px)와 같습니다. 어긋나면 도출이 틀렸거나 기존 토큰이 틀린 것입니다. 예외를 두지 않고 둘 중 하나를 고칩니다.

다른 값도 같은 방식으로 계산합니다. MDS 탭 목록 48px는 탭 40px에 위아래 4px를 더한 값이고, 대화상자 머리글의 최소 높이 72px는 16 + 40 + 16, 일정 달력 칸 96px는 sm 버튼 두 개(36 × 2)에 8px 간격 셋을 더한 값입니다.

경계와 예외 ​

  • Drawer와 Sheet의 폭은 Tailwind 어휘를 따릅니다. 화면 옆에서 밀려 나오는 패널의 폭은 Tailwind의 max-w 단계 이름(4xs~9xl, full, 14~120rem)을 그대로 씁니다. md 중심 대칭이 아니며, 외부 표준을 따른다는 사실을 정본에 밝혀 둡니다. 가운데 뜨는 Dialog의 폭만 Leysys 11단계 대칭입니다.
  • 밀도 프리셋은 이름을 바꾸지 않습니다. data-e-density="compact"와 "spacious"는 크기 토큰 값을 단계 안에서 한 칸씩 옮기고, sm·md 같은 이름은 그대로 둡니다(12장).
  • 크기는 접근성 기준이 아닙니다. EDS와 MDS 모두 상호작용 대상(interactive target)을 24 × 24 CSS px 이상으로 권장합니다. WCAG 2.2의 대상 크기 기준(SC 2.5.8)은 간격, 같은 기능의 대안, 문장 속 링크 같은 예외를 함께 판정하므로 24px을 예외 없는 하한으로 쓰지 않습니다. MDS md 40px는 컴포넌트 형태 값이지 터치 최소값이 아닙니다. MDS 사다리를 바꾼 뒤 문서 화면 103개의 대상 1,244개를 측정했을 때 새로 24px 미만이 된 대상은 0개였습니다.
  • Interface Size는 전체를 함께 키웁니다. <html data-e-interface-size="large">는 루트 글자 크기를 112.5%로, "extra-large"는 125%로 바꿉니다(MDS는 data-m-interface-size). 기본은 속성을 생략해 사용자의 브라우저 글자 크기를 따릅니다. 값이 rem이라 글자뿐 아니라 컴포넌트 높이, 아이콘, 간격, Tailwind의 rem 유틸리티가 같은 비율로 커집니다.
  • 짧은 표시 이름은 7ic입니다. shortName과 shortDisplayName만 전각 문자 7칸 폭(7ic)에서 한 줄 말줄임합니다. 라틴 문자와 숫자는 글자에 따라 대략 12~14자가 들어갑니다. 일반 name과 displayName은 줄이지 않습니다. 문자열을 자르지 않고, 이름을 표시하는 컴포넌트가 max-inline-size: 7ic로 보이는 폭만 줄이며, DOM과 접근 가능한 이름에는 원문을 둡니다. 「영문 14byte」처럼 바이트 수로 정하지 않는 이유는 인코딩마다 바이트 수가 다르고, 바이트 수가 같아도 글자 폭이 다르기 때문입니다. 이 기준은 인쇄 고지서의 좁은 항목 칸(내용 폭 약 23.8mm)을 9pt 글자로 잰 결과에서 나왔습니다. 7ic은 약 22.2mm로 들어갔고 8ic은 약 25.4mm로 옆 금액 칸을 침범했습니다.
  • 인쇄는 단위가 다릅니다. Print DS는 rem이 아니라 정수 pt 글자 크기(7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 27, 30pt)와 정수 중심 mm를 씁니다(6장).

정리 ​

  • 값은 0.125rem(2px) 배수로 정하고 8px, 4px, 2px 순으로 고릅니다. 홀수는 공식에서 나올 때만 남깁니다.
  • 크기 단계는 홀수 개, md 중심, 좌우 대칭입니다. 작은 기본값은 이름이 아니라 기본값으로 정합니다.
  • 높이는 Atomic → Container(+8px) → Wrapper(+8px)이며 EDS는 md 32px, MDS는 md 40px를 기준으로 도출합니다. 도출한 값은 기존 토큰과 맞는지 검산합니다.
  • Drawer·Sheet 폭은 Tailwind 어휘를 따르는, 정본에 밝힌 예외입니다.
  • 상호작용 대상 24px 권장, Interface Size 112.5%·125%, 짧은 표시 이름 7ic은 크기 단계와 별도로 정한 계약입니다.

정본 ​

  • leysys-design AGENTS.md(파리티 미러 CLAUDE.md) 「Size Scale Symmetric Axiom」, 「높이 스케일」 — 공리와 높이 규칙 요약
  • leysys-design docs/decisions/SIZE-SCALE-SYMMETRIC-AXIOM-2026-05-25.md — 크기 단계 공리와 외부 표준 예외
  • leysys-design docs/decisions/ODD-PIXEL-VIOLATION-ZEROBASE-2026-05-01.md — 0.125rem 배수와 홀수 처리
  • leysys-design docs/decisions/MDS-VISUAL-DEFAULTS-REFINEMENT-2026-09-27.md — MDS 높이 기준점 md 40px
  • leysys-design docs/decisions/TOUCH-TARGET-24PX-RECOMMENDATION-2026-08-12.md — 상호작용 대상 24px 권장
  • leysys-design docs/decisions/SHORT-DISPLAY-NAME-SEVEN-IC-2026-08-31.md — 짧은 표시 이름 7ic
  • leysys-design docs/specs/PRESET-SYSTEMS.md — Interface Size와 밀도 프리셋
  • leysys-design docs/specs/PRINT-DS-PHYSICAL-UNIT-CONTRACT.md — 인쇄 물리 단위

© 2026 Leysys. 무단 복제·배포·판매를 금지합니다.